/**
 * Scheda del punto vendita — la cornice attorno ai blocchi.
 *
 * La sezione, il ritorno all'elenco, la griglia a due colonne e il passo dei
 * riquadri della colonna sinistra. Quel che sta dentro ai riquadri — orari,
 * servizi, delivery, recapiti, mappa — ha la sua veste nel foglio del blocco
 * che lo produce.
 *
 * `.store-block` sta qui e non in ognuno dei tre blocchi: è la distanza fra un
 * riquadro e il successivo, cioè una proprietà della colonna che li contiene,
 * e ripeterla tre volte vorrebbe dire cambiarla in tre punti.
 */

.store-detail {
	padding: clamp(40px, 5vw, 72px) 0 clamp(48px, 6vw, 80px);
	background-color: var(--wp--preset--color--white);
}

/* --- Ritorno all'elenco ------------------------------------------------ */

.store-detail__bar {
	max-width: var(--wp--custom--layout--frame);
	margin: 0 auto 32px;
	padding: 0 clamp(20px, 4vw, 56px);
}

.store-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--rosso);
	text-decoration: none;
}

/* La freccia è disegnata qui e non nel documento: è decorazione, non
   contenuto, e in un paragrafo di blocco un SVG non ci starebbe comunque. */
.store-back::before {
	content: "";
	width: 16px;
	height: 16px;
	background-color: currentcolor;
	transition: transform 0.18s ease;
	mask: var(--cn-media-freccia-indietro) no-repeat center / contain;
	-webkit-mask: var(--cn-media-freccia-indietro) no-repeat center / contain;
}

.store-back:hover,
.store-back:focus-visible {
	color: var(--wp--preset--color--rosso-dark);
}

.store-back:hover::before {
	transform: translateX(-3px);
}

/* --- Le due colonne ---------------------------------------------------- */

.store-detail__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: start;
	max-width: var(--wp--custom--layout--frame);
	margin: 0 auto;
	padding: 0 clamp(20px, 4vw, 56px);
}

.store-info__eyebrow {
	margin: 0 0 12px;
	font-weight: 500;
	font-size: 22px;
	line-height: 1.1;
	color: var(--wp--preset--color--navy);
}

.store-name {
	margin: 0 0 20px;
	font-weight: 300;
	font-size: var(--wp--preset--font-size--section-heading);
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--ink);
}

/* --- I riquadri della colonna sinistra --------------------------------- */

.store-block {
	margin-bottom: 40px;
}

.store-block:last-child {
	margin-bottom: 0;
}

.store-block-title {
	margin: 0 0 20px;
	font-size: var(--wp--preset--font-size--card-heading);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

@media (max-width: 900px) {

	.store-detail__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.store-info__eyebrow {
		font-size: 18px;
	}
}

/* ==========================================================================
   I blocchi della scheda, che arrivano dal plugin StoreKit
   ==========================================================================
   Stessa divisione del locator: il plugin porta la struttura, il tema il
   disegno. Le regole hanno il contenitore davanti perché l'ordine con cui
   WordPress accoda il foglio del blocco e quello del tema non è garantito, e
   la specificità in più fa vincere il tema senza `!important`.
   ========================================================================== */

/* Il titolo di sezione, lo stesso per tutti e quattro i blocchi: è la riga che
   dice cosa si sta guardando, e la sua veste non cambia da una sezione
   all'altra. */
.storekit-contacts__heading,
.storekit-hours__heading,
.storekit-services__heading,
.storekit-delivery__heading {
	margin: 0 0 20px;
	font-size: var(--wp--preset--font-size--card-heading);
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

/* Fra una sezione e l'altra: i blocchi arrivano uno dopo l'altro nella colonna
   e il respiro fra loro è quello che li rende sezioni invece di un elenco
   unico. */
.storekit-hours,
.storekit-services,
.storekit-delivery {
	margin-block-start: 40px;
}

/* --- Recapiti ----------------------------------------------------------- */

.storekit-contacts .storekit-contacts__address {
	margin: 0 0 12px;
	font-style: normal;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
	color: var(--wp--preset--color--ink-soft);
}

.storekit-contacts .storekit-contacts__list {
	margin: 0 0 40px;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.9;
	color: var(--wp--preset--color--ink-soft);
}

.storekit-contacts .storekit-contacts__list a {
	color: inherit;
	text-decoration: none;
}

/* Il collegamento alle indicazioni non è un recapito come gli altri: è quello
   che si preme, e si vede. */
.storekit-contacts .storekit-contacts__directions a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	color: var(--wp--preset--color--rosso);
}

.storekit-contacts .storekit-contacts__directions a:hover,
.storekit-contacts .storekit-contacts__directions a:focus-visible {
	color: var(--wp--preset--color--rosso-dark);
	text-decoration: underline;
}

.storekit-contacts .storekit-contacts__list a:hover,
.storekit-contacts .storekit-contacts__list a:focus-visible {
	color: var(--wp--preset--color--rosso);
}

/* --- Orari -------------------------------------------------------------- */

/* Giorno a sinistra, ore a destra, una riga sottile fra l'uno e l'altro. La
   larghezza massima tiene le due colonne vicine anche quando la scheda è
   larga: un giorno e un'ora ai due estremi di 600px non si leggono più come
   una coppia. */
.storekit-hours .storekit-hours__list {
	max-width: 360px;
	margin: 0;
	padding: 0;
}

.storekit-hours .storekit-hours__row {
	display: flex;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	padding: 8px 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink-soft);
}

.storekit-hours .storekit-hours__row:last-child {
	border-bottom: 0;
}

.storekit-hours .storekit-hours__day {
	font-weight: 500;
}

.storekit-hours .storekit-hours__time {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

/* --- Servizi ------------------------------------------------------------ */

.storekit-services .storekit-services__list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.storekit-services .storekit-services__item {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink);
}

/* Il riquadro dell'icona ha una misura fissa perché gli SVG dei servizi non
   hanno tutti lo stesso ingombro: senza, i nomi non si allineerebbero. */
.storekit-services .storekit-services__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
}

.storekit-services .storekit-services__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* --- Delivery ----------------------------------------------------------- */

.storekit-delivery .storekit-delivery__list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.storekit-delivery .storekit-delivery__item {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: var(--wp--preset--font-size--medium);
	color: var(--wp--preset--color--ink);
}

/* I loghi restano nei loro colori — sono marchi di altri — quindi qui non c'è
   nessuna tinta, solo il riquadro che li tiene tutti della stessa misura. */
.storekit-delivery .storekit-delivery__logo {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
}

.storekit-delivery .storekit-delivery__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.storekit-delivery .storekit-delivery__label {
	color: inherit;
	text-decoration: none;
}

.storekit-delivery a.storekit-delivery__label:hover,
.storekit-delivery a.storekit-delivery__label:focus-visible {
	color: var(--wp--preset--color--rosso);
}

/* --- Mappa della scheda ------------------------------------------------- */

/* Resta appiccicata mentre si scorre la colonna sinistra, che è più lunga di
   lei quando un locale ha orari, servizi e tre fornitori di consegna. */
.storekit-store-map {
	position: sticky;
	top: var(--wp--preset--spacing--40);
	margin: 0;
}

.storekit-store-map .storekit-store-map__frame {
	display: block;
	width: 100%;
	height: clamp(520px, 78vh, 900px);
	border: 0;
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: 0 18px 40px rgba(26, 19, 16, 0.12);
	overflow: hidden;
}

.storekit-store-map .storekit-store-map__consent {
	height: clamp(520px, 78vh, 900px);
	border: 1px dashed var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--lg);
	background-color: var(--wp--preset--color--cream-light);
	color: var(--wp--preset--color--muted);
}

.storekit-store-map .storekit-store-map__address {
	margin-block-start: 12px;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--muted);
}

/* Sotto ai 900px la griglia diventa una colonna sola e la mappa passa in cima:
   è quella che dice dove si è, e viene prima di tutto il resto. */
@media (max-width: 900px) {

	.storekit-store-map {
		position: static;
		order: -1;
	}

	.storekit-store-map .storekit-store-map__frame,
	.storekit-store-map .storekit-store-map__consent {
		height: clamp(360px, 60vh, 520px);
	}
}