/* =====================================================================
   12print.it - STILE 2026 (strato aggiuntivo, reversibile)
   v 1.0 - 2026-10-02 - vedi DESIGN.md / PRODUCT.md
   Caricato DOPO style.bundle.css da v4/include/css.php.
   In anteprima solo con ?stile=2026 (cookie 30 gg), ?stile=off per spegnerlo.
   Non tocca carrello, checkout e designer oltre a header/menu/contenitore.
   ===================================================================== */
:root {
	--c-ink: #1c2530;
	--c-ink-2: #4a5563;
	--c-ink-3: #6b7480;
	--c-line: #e3e7ec;
	--c-surface: #ffffff;
	--c-surface-2: #f4f6f8;
	--c-blue: #2b679c;
	--c-blue-dark: #1f4f7a;
	--c-red: #d12326;
	--c-red-dark: #b01d20;
	--c-green: #2f7a45;
	--c-warm: #fff6e8;
	--r-ctl: 10px;
	--r-media: 14px;
	--shadow-hover: 0 6px 24px rgba(28, 37, 48, .08);
	--ease: cubic-bezier(.22, 1, .36, 1);
	--t: 180ms;
	--pad-x: 16px;
}
@media (min-width: 768px) { :root { --pad-x: 24px; } }
@media (min-width: 1200px) { :root { --pad-x: 32px; } }

/* ---------- base ---------- */
body { color: var(--c-ink); font-size: 16px; line-height: 1.6; background: var(--c-surface); -webkit-font-smoothing: antialiased; }
h1, h2, h3, .h1, .h2, .h3 { color: var(--c-ink); text-wrap: balance; letter-spacing: -0.01em; }
h1, .h1 { font-weight: 600; }
p { text-wrap: pretty; }
a { color: var(--c-blue); transition: color var(--t) var(--ease); }
a:hover { color: var(--c-blue-dark); }
:focus-visible { outline: 3px solid rgba(43, 103, 156, .35); outline-offset: 2px; }

/* ---------- contenitore piu' largo ---------- */
.container { padding-left: var(--pad-x); padding-right: var(--pad-x); }
/* larghezza piena: il contenuto occupa tutto lo schermo, con margini laterali */
@media (min-width: 1200px) { .container { max-width: 100%; } }
@media (min-width: 1400px) { :root { --pad-x: 48px; } }
/* il contenitore dentro container-fluid del menu non deve raddoppiare i margini */
.menu-background .container { padding-left: var(--pad-x); padding-right: var(--pad-x); }

/* ---------- header ---------- */
.header.light { box-shadow: none; border-bottom: 1px solid var(--c-line); }
.header .topbar { background: var(--c-surface-2); border-bottom: 1px solid var(--c-line); }
.header .topbar, .header .topbar a, .header .topbar li, .topbar-call { color: var(--c-ink-2) !important; font-size: 13px; }
.header .topbar strong { color: var(--c-ink); font-weight: 600; }
@media (min-width: 992px) {
.header .form-control,
#inputString { background-color: var(--c-surface-2) !important; border: 1px solid var(--c-line); border-radius: var(--r-ctl) 0 0 var(--r-ctl); height: 44px; color: var(--c-ink); font-size: 15px; }
.header .form-control::placeholder { color: var(--c-ink-3); opacity: 1; }
.header .input-group-append .btn,
.header .btn-danger { background: var(--c-red); border-color: var(--c-red); border-radius: 0 var(--r-ctl) var(--r-ctl) 0; font-weight: 600; min-height: 44px; padding: 0 18px; }
.header .input-group-sm > .form-control, .header .input-group-sm > .input-group-append > .btn { height: 44px; }
}
#inputString-mobile { background-color: var(--c-surface-2) !important; border: 1px solid var(--c-line); color: var(--c-ink); }
.header .btn-danger:hover { background: var(--c-red-dark); border-color: var(--c-red-dark); }
.header .header-item, .header .header-item-txt, .header .cart-btn { color: var(--c-ink) !important; }
.header .fa-user-circle-o, .header .fa-question-circle-o, .header .fa-shopping-cart { color: var(--c-blue) !important; }

/* ---------- barra menu ---------- */
.menu-background { background-color: var(--c-blue) !important; }
.mega-menu .menu-links > li > a,
.header.light .mega-menu .menu-links > li > a { color: #fff !important; font-weight: 500; font-size: 15px; letter-spacing: 0; text-transform: none !important; transition: background-color var(--t) var(--ease); }
.mega-menu .menu-links > li > a i { color: inherit !important; }
.mega-menu .menu-links > li:hover > a,
.mega-menu .menu-links > li > a:focus-visible { background-color: var(--c-blue-dark); }
/* voce in evidenza (es. Idee back to school): stessa leggibilita', con un punto colorato */
.mega-menu .menu-links > li > a[style] { color: #fff !important; }
.mega-menu .drop-down { border-radius: 0 0 var(--r-media) var(--r-media); box-shadow: 0 18px 40px rgba(28, 37, 48, .14); border-top: 0; }
.mega-menu .menu-header { color: var(--c-ink); font-weight: 600; font-size: 14px; text-transform: none; }
.mega-menu .drop-down a { color: var(--c-ink-2); font-size: 14px; }
.mega-menu .drop-down a:hover { color: var(--c-blue); }

/* ---------- fascia informativa (banner-love) ---------- */
.banner-love { background-color: var(--c-surface-2) !important; border-bottom: 1px solid var(--c-line); }
.banner-love .banner-love-text { color: var(--c-ink) !important; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.banner-love .fa-heart { color: var(--c-red) !important; }

/* ---------- breadcrumb ---------- */
.page-breadcrumb, .page-breadcrumb a { color: var(--c-ink-2); font-size: 14px; }
.page-breadcrumb a:hover { color: var(--c-blue); }

/* ---------- riquadri categoria in home ---------- */
.offer-banner-1 { border-radius: var(--r-media); overflow: hidden; background: var(--c-surface-2); transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
.offer-banner-1:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
.offer-banner-1 .banner-image img { border-radius: 0; }
.offer-banner-1 .banner-content { position: static !important; transform: none !important; background: var(--c-surface) !important; padding: 12px 14px !important; text-align: left !important; }
.offer-banner-1 .banner-content-int, .offer-banner-1 .banner-content h3, .offer-banner-1 .banner-content h2, .offer-banner-1 .banner-content .h6 {
	background: transparent !important; color: var(--c-ink) !important; font-size: 16px !important; font-weight: 600 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; text-transform: none !important; }
.offer-banner-1 .overlay, .offer-banner-1 .line-effect::before, .offer-banner-1 .line-effect::after { display: none !important; }

/* ---------- griglia prodotti (categorie) ---------- */
.product { border-radius: var(--r-media); transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease); padding-bottom: 8px; }
.product:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); }
/* le miniature di categoria sono quadrate: riempiono il riquadro arrotondato senza deformarsi */
.product .product-image { background: var(--c-surface-2); border-radius: var(--r-media); overflow: hidden; }
.product .product-image > a { display: block; }
/* .img-fluid in piu' per battere la regola inline del tema (width:160px !important) */
.product .product-image img.img-fluid, .product .product-image img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 1 / 1; object-fit: cover; }
.product .product-des { padding: 12px 12px 4px; text-align: left; }
.product .product-title a { text-transform: none !important; font-size: 15px; font-weight: 500; color: var(--c-ink); line-height: 1.35; margin: 0 0 6px; letter-spacing: 0; }
.product .product-title a:hover { color: var(--c-blue); }
.product .product-price, .product .product-price ins { color: var(--c-ink) !important; font-weight: 600; font-size: 16px; text-decoration: none; }
.product .product-price del { color: var(--c-ink-3) !important; font-weight: 400; font-size: 13px; }
.product .discount, .product .badge-danger { background: var(--c-red); color: #fff !important; border-radius: 6px; font-weight: 600; font-size: 12px; padding: 2px 6px; vertical-align: 2px; }
/* 2 prodotti per riga su mobile */
@media (max-width: 575px) {
	#items-container > .row { margin-left: -6px; margin-right: -6px; }
	#items-container > .row > [class*="col-"] { flex: 0 0 50%; max-width: 50%; padding-left: 6px; padding-right: 6px; }
}
/* 5 prodotti per riga sugli schermi larghi */
@media (min-width: 1400px) {
	#items-container > .row > .col-lg-3, #products .col-lg-3.col-md-3 { flex: 0 0 20%; max-width: 20%; }
}
/* 6 prodotti per riga sugli schermi molto larghi */
@media (min-width: 1800px) {
	#items-container > .row > .col-lg-3, #products .col-lg-3.col-md-3 { flex: 0 0 16.6667%; max-width: 16.6667%; }
}

/* ---------- testata categoria ---------- */
.page-title { border-radius: 0; }
.page-title h1 { font-weight: 600 !important; letter-spacing: -0.01em; text-shadow: 0 1px 12px rgba(0, 0, 0, .25); }

/* ---------- testi lunghi di categoria / descrizioni ---------- */
.description-footer, .about-content { color: var(--c-ink-2); }
/* testi di categoria a tutta larghezza, allineati ai titoli (scelta del titolare) */
.description-footer p, .about-content p { max-width: none; }
.description-footer h2, .description-footer h3 { color: var(--c-ink); font-weight: 600; margin-top: 1.4em; }

/* ---------- scheda prodotto ---------- */
.product-detail h1, .product-detail .h1 { font-size: 2rem; line-height: 1.2; }
.product-detail .product-price, .product-detail .price { color: var(--c-ink) !important; font-weight: 600; }
.atc-button, .product-detail .btn-danger, .product-detail .button.red, .btn-block.btn-danger {
	background: var(--c-red) !important; border-color: var(--c-red) !important; border-radius: var(--r-ctl) !important; min-height: 48px; font-weight: 600; letter-spacing: .02em; }
.atc-button:hover, .product-detail .btn-danger:hover { background: var(--c-red-dark) !important; border-color: var(--c-red-dark) !important; }
.slider .item img, .product-detail .slider img { border-radius: var(--r-media); }
.acd-heading { border-radius: var(--r-ctl); }
.table { color: var(--c-ink); }
.table thead th, .table th { border-bottom-color: var(--c-line); color: var(--c-ink-2); font-weight: 600; }

/* ---------- pulsanti generici ---------- */
.btn { border-radius: var(--r-ctl); transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), color var(--t) var(--ease); }
.btn-danger { background: var(--c-red); border-color: var(--c-red); }
.btn-danger:hover { background: var(--c-red-dark); border-color: var(--c-red-dark); }

/* ---------- mobile ---------- */
@media (max-width: 767px) {
	h1, .h1 { font-size: 1.75rem; }
	.product .product-des { padding: 10px 6px 2px; }
	.product .product-title a { font-size: 14px; }
}

/* ---------- movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
	.product:hover, .offer-banner-1:hover { transform: none; }
}