/* ============================================================
   SpOki.ro - componente refolosibile. Toate selectoarele sunt
   scoped cu prefixul .spoki- . Nimic global, nimic distructiv.
   ============================================================ */

/* ---------- Sectiuni ---------- */
.spoki-section {
	padding-top: var(--spoki-space-6);
	padding-bottom: var(--spoki-space-6);
}
.spoki-section--neutral { background-color: var(--spoki-bg-neutral); }
.spoki-section--soft { background-color: var(--spoki-primary-soft); }

.spoki-section .spoki-eyebrow {
	font-family: var(--spoki-font-body);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--spoki-primary);
	margin-bottom: var(--spoki-space-2);
}

.spoki-section h2 { font-size: clamp(26px, 4vw, 36px); margin-bottom: var(--spoki-space-2); }
.spoki-section .spoki-lead { color: var(--spoki-text-soft); max-width: 62ch; }

/* ---------- Container ---------- */
.spoki-container { max-width: 1200px; margin-inline: auto; padding-inline: 20px; }

/* ---------- Butoane (peste blocul core, doar in zonele spoki) ---------- */
.spoki-section .wp-block-button__link {
	font-family: var(--spoki-font-body);
	font-weight: 800;
	font-size: 17px;
	min-height: 48px;
	padding: 12px 28px;
	border-radius: var(--spoki-radius-pill);
	background-color: var(--spoki-primary);
	color: var(--spoki-white);
	transition: transform 0.12s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.spoki-section .wp-block-button__link:hover {
	background-color: var(--spoki-primary-dark);
	box-shadow: var(--spoki-shadow);
	color: var(--spoki-white);
}
.spoki-section .wp-block-button__link:active { transform: scale(0.96); }
.spoki-section .is-style-outline .wp-block-button__link {
	background: transparent;
	border: 2px solid var(--spoki-primary);
	color: var(--spoki-primary);
}
.spoki-section .is-style-outline .wp-block-button__link:hover {
	background: var(--spoki-primary-soft);
	color: var(--spoki-primary-dark);
}
.spoki-section .wp-block-button__link:focus-visible {
	outline: 3px solid var(--spoki-accent);
	outline-offset: 2px;
}

@media (max-width: 689px) {
	.spoki-section .wp-block-buttons .wp-block-button { width: 100%; }
	.spoki-section .wp-block-button__link { width: 100%; text-align: center; }
}

/* ---------- Semnatura "squish": forma blob + apasare moale ---------- */
.spoki-blob {
	border-radius: var(--spoki-radius-blob);
	overflow: hidden;
}
.spoki-blob img { display: block; width: 100%; height: 100%; object-fit: cover; }

.spoki-squish {
	transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.spoki-squish:hover { transform: scale(1.02); }
.spoki-squish:active { transform: scale(0.95); }

@media (prefers-reduced-motion: reduce) {
	.spoki-squish, .spoki-section .wp-block-button__link { transition: none; }
	.spoki-squish:hover, .spoki-squish:active { transform: none; }
}

/* ---------- Bara de incredere ---------- */
.spoki-trust {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--spoki-space-3);
}
.spoki-trust-item {
	display: flex;
	align-items: flex-start;
	gap: var(--spoki-space-2);
	background: var(--spoki-white);
	border-radius: var(--spoki-radius);
	padding: var(--spoki-space-3);
	box-shadow: var(--spoki-shadow);
}
.spoki-trust-item .spoki-trust-icon {
	flex: none;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	background: var(--spoki-primary-soft);
	border-radius: var(--spoki-radius-blob);
	font-size: 20px;
	margin: 0;
}
.spoki-trust-item h3 {
	font-family: var(--spoki-font-body);
	font-weight: 800;
	font-size: 16px;
	margin: 0 0 2px;
}
.spoki-trust-item p { font-size: 14.5px; color: var(--spoki-text-soft); margin: 0; line-height: 1.45; }

@media (max-width: 999px) { .spoki-trust { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px) { .spoki-trust { grid-template-columns: 1fr; } }

/* ---------- FAQ (Details) ---------- */
.spoki-faq .wp-block-details {
	background: var(--spoki-white);
	border: 1px solid rgba(31, 41, 55, 0.08);
	border-radius: var(--spoki-radius);
	padding: var(--spoki-space-3) var(--spoki-space-4);
	margin-bottom: var(--spoki-space-2);
	box-shadow: var(--spoki-shadow);
}
.spoki-faq .wp-block-details summary {
	font-family: var(--spoki-font-body);
	font-weight: 800;
	font-size: 17px;
	cursor: pointer;
	color: var(--spoki-text);
}
.spoki-faq .wp-block-details summary:focus-visible {
	outline: 3px solid var(--spoki-accent);
	outline-offset: 2px;
	border-radius: 6px;
}
.spoki-faq .wp-block-details[open] summary { color: var(--spoki-primary); margin-bottom: var(--spoki-space-2); }
.spoki-faq .wp-block-details p { color: var(--spoki-text-soft); margin: 0; }

/* ---------- Carduri de varsta ---------- */
.spoki-age-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: var(--spoki-space-3);
}
.spoki-age-card {
	text-align: center;
	background: var(--spoki-white);
	border-radius: var(--spoki-radius-lg);
	padding: var(--spoki-space-4) var(--spoki-space-2);
	box-shadow: var(--spoki-shadow);
	border: 2px solid transparent;
}
.spoki-age-card:hover { border-color: var(--spoki-primary); box-shadow: var(--spoki-shadow-lift); }
.spoki-age-card .spoki-age-label {
	font-family: var(--spoki-font-display);
	font-weight: 600;
	font-size: 21px;
	margin: 0;
}
.spoki-age-card .spoki-age-label a { color: var(--spoki-primary); text-decoration: none; }
.spoki-age-card .spoki-age-hint {
	font-size: 13.5px;
	color: var(--spoki-text-soft);
	margin: 4px 0 0;
}
@media (max-width: 999px) {
	.spoki-age-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 479px) {
	.spoki-age-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Pasii "Cum alegi" ---------- */
.spoki-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spoki-space-4); }
.spoki-step {
	background: var(--spoki-white);
	border-radius: var(--spoki-radius);
	padding: var(--spoki-space-4);
	box-shadow: var(--spoki-shadow);
}
.spoki-step .spoki-step-n {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: var(--spoki-radius-blob);
	background: var(--spoki-accent-soft);
	color: var(--spoki-warning);
	font-family: var(--spoki-font-display);
	font-weight: 600;
	font-size: 20px;
	margin: 0 0 var(--spoki-space-2);
}
.spoki-step h3 { font-size: 19px; margin: 0 0 6px; }
.spoki-step p { font-size: 15.5px; color: var(--spoki-text-soft); margin: 0; }
@media (max-width: 767px) { .spoki-steps { grid-template-columns: 1fr; } }

/* ============================================================
   Logo. Blocksy scaleaza logo-ul dupa inaltime, nu dupa latime.
   Fixam inaltimea, latimea urmeaza raportul 430:154, iar pagina
   nu mai sare la incarcare.
   ============================================================ */

.site-logo-container {
	--logo-max-height: 58px; /* ~162px latime pe desktop */
}

@media (max-width: 999px) {

	.site-logo-container {
		--logo-max-height: 44px; /* ~123px latime pe telefon */
	}
}

/* Logo-ul sta pe mijlocul randului, la fel ca butonul de meniu
   si cosul de langa el. */
.site-branding {
	align-items: center;
}

/* Numele magazinului este deja scris in logo. Nu il repetam
   inca o data sub el, ca sa nu ingrosam degeaba antetul. */
.site-branding:has(.site-logo-container) .site-title-container {
	display: none;
}


/* ============================================================
   Cosul din antet.
   ============================================================ */

/* Bulina cu numarul de produse: portocaliul vulpitei, nu albastrul temei. */
.ct-cart-item .ct-dynamic-count-cart {
	background: var(--spoki-promo);
	color: var(--spoki-white);
}

/* Fara suma langa iconita raman 15 px de apasat, cat gamalia unui ac.
   Le dam o suprafata de apasat de 44 px, cat cere degetul mare. */
.ct-header-cart .ct-cart-item,
.ct-header-search.ct-toggle {
	display: grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
}
/* Cosul mic care se deschide sub iconita. Tema ii da 310 px si colturi de
   2 px; noi il facem putin mai lat, ca numele lungi de produse sa incapa pe
   un rand, si il agatam de marginea din dreapta ca sa nu iasa din ecran. */
[data-id="cart"].ct-header-cart .ct-cart-content {
	left: auto;
	right: 0;
	width: min(340px, calc(100vw - 40px));
}
/* Tema il picta gri inchis, ca pe un panou de administrare. Il aducem
   la culorile magazinului. Selectorul are o clasa in plus fata de al temei,
   pentru ca stilul ei se scrie in pagina, dupa fisierele noastre. */
[data-header] [data-id="cart"].ct-header-cart .ct-cart-content {
	--mini-cart-background-color: var(--spoki-white);
	--theme-text-color: var(--spoki-text);
	border: 1px solid rgba(31, 41, 55, 0.08);
	border-radius: var(--spoki-radius);
	box-shadow: var(--spoki-shadow-lift);
}

[data-header] [data-id="cart"].ct-header-cart .ct-cart-content .total {
	--theme-text-color: var(--spoki-text);
}

/* ---------- Galerie produs (single) ---------- */
/* Blocksy scrie inline `aspect-ratio` pe imaginea mare a galeriei si o taie cu
   `object-fit: cover` (main.min.css: `.ct-media-container img`). Cu raportul
   temei pus pe `original`, panza urmeaza fiecare imagine in parte; variabila de
   mai jos este plasa de siguranta: chiar daca un raport nu se potriveste,
   imaginea se incadreaza in loc sa fie taiata. Prioritatea este produsul
   intreg, nu rama plina. Doar imaginea mare: thumbnails (.flexy-pills) raman
   neatinse. */
.single-product .ct-product-gallery-container > .ct-media-container,
.single-product .ct-product-gallery-container .flexy-view .ct-media-container {
	--theme-object-fit: contain;
}

/* --- Butonul "inapoi sus" ----------------------------------------------------
   Componenta nativa a temei (Blocksy -> Scroll to Top), imbracata in culorile
   SpOki. Este ancora <a href="#main-container">, deci functioneaza si fara
   JavaScript; tema doar ii scoate atributul hidden dupa ce pagina este derulata.
   Sta in stanga jos ca sa lase coltul din dreapta liber pentru chat. */
a.ct-back-to-top[data-shape],
.ct-back-to-top{
	z-index:60;
	width:46px;
	height:46px;
	min-width:46px;
	min-height:46px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	background:var(--spoki-primary,#018287);
	color:#fff;
	box-shadow:0 6px 18px rgba(38,50,88,.20);
	transition:background-color .18s ease, transform .18s ease;
}
.ct-back-to-top .ct-icon{fill:currentColor;width:15px;height:15px}
.ct-back-to-top:hover,
.ct-back-to-top:focus-visible{
	background:var(--spoki-primary-dark,#016a6e);
	color:#fff;
	transform:translateY(-2px);
}
.ct-back-to-top:focus-visible{
	outline:3px solid var(--spoki-accent,#f59e0b);
	outline-offset:3px;
}
@media (prefers-reduced-motion:reduce){
	.ct-back-to-top{transition:none}
	.ct-back-to-top:hover,.ct-back-to-top:focus-visible{transform:none}
}
/* Tema isi pune culoarea prin CSS-ul ei dinamic; il egalam ca precizie. */
a.ct-back-to-top[data-shape]{background-color:var(--spoki-primary,#018287);color:#fff}
a.ct-back-to-top[data-shape]:hover,
a.ct-back-to-top[data-shape]:focus-visible{background-color:var(--spoki-primary-dark,#016a6e);color:#fff}