/* AOD COD Form — style « checkout Shopify » (RTL-aware)
   Neutres + labels flottants + bouton sombre, dans l'esprit du checkout Shopify. */
.aod-cod {
	--sh-text: #1a1a1a;
	--sh-text-2: #616161;
	--sh-muted: #8a8a8a;
	--sh-line: #d9d9d9;
	--sh-line-strong: #1a1a1a;
	--sh-bg: #ffffff;
	--sh-bg-sub: #f6f6f7;
	--sh-accent: #008060;     /* vert Shopify : focus / sélection / bouton */
	--sh-accent-dark: #006e52;/* survol du bouton */
	--sh-green: #008060;      /* vert Shopify (validations) */
	--sh-error: #d72c0d;
	--sh-radius: 8px;
	--sh-radius-sm: 6px;

	margin: 24px 0;
	padding: 24px;
	border: 1px solid #e1e3e5;
	border-radius: 12px;
	background: var(--sh-bg);
	max-width: 560px;
	color: var(--sh-text);
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* Titre */
.aod-cod__title {
	margin: 0 0 18px;
	font-size: 1.25em;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--sh-text);
}

/* Anti-spam : champ honeypot. Sorti de l'écran (et non display:none, que certains
   bots détectent) — invisible pour l'humain, présent dans le DOM pour les bots. */
.aod-cod__hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- Champs ---- */
.aod-cod__field { margin-bottom: 14px; }

/* Libellés de section (variantes, mode de livraison) : titre au-dessus */
.aod-cod__field:not(.aod-cod__float) > label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	font-size: .92em;
	color: var(--sh-text);
}
.aod-cod__field > label span { color: var(--sh-error); }

.aod-cod__form input[type="text"],
.aod-cod__form input[type="tel"],
.aod-cod__form input[type="number"],
.aod-cod__form select {
	width: 100%;
	padding: 12px 13px;
	border: 1px solid var(--sh-muted);
	border-radius: var(--sh-radius-sm);
	font-size: 1em;
	line-height: 1.4;
	box-sizing: border-box;
	background: #fff;
	color: var(--sh-text);
	transition: border-color .12s, box-shadow .12s;
	-webkit-appearance: none;
	appearance: none;
}
.aod-cod__form input:hover,
.aod-cod__form select:hover { border-color: #616161; }

/* Focus « Shopify » : bordure verte doublée d'un anneau fin */
.aod-cod__form input:focus,
.aod-cod__form select:focus {
	outline: none;
	border-color: var(--sh-accent);
	box-shadow: 0 0 0 1px var(--sh-accent);
}
.aod-cod__form input::placeholder { color: transparent; } /* labels flottants */

/* Flèche personnalisée pour les selects */
.aod-cod__form select {
	min-height: 52px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%238a8a8a' d='M6 8 0 2 1.4.6 6 5.2 10.6.6 12 2z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	padding-right: 38px;
}
.rtl .aod-cod__form select {
	background-position: left 13px center;
	padding-right: 13px;
	padding-left: 38px;
}
.aod-cod__form select:disabled { background-color: var(--sh-bg-sub); color: #9ca3af; cursor: not-allowed; }

/* ---- Note facultative (bloc repliable) ----
   Le <details> natif évite tout JS. Le résumé fait office de bouton « Ajouter
   une note » ; le textarea reprend l'habillage des autres champs. Contrairement
   aux inputs à label flottant, le placeholder reste visible : c'est lui qui
   guide la saisie une fois le bloc ouvert. */
.aod-cod__note { margin-bottom: 14px; }
.aod-cod__note-toggle {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	cursor: pointer;
	padding: 6px 2px;
	font-size: .95em;
	font-weight: 500;
	color: var(--sh-accent);
	list-style: none;
	user-select: none;
}
.aod-cod__note-toggle::-webkit-details-marker { display: none; }
.aod-cod__note-toggle::after {
	content: "＋";
	font-size: 1.05em;
	line-height: 1;
	transition: transform .15s;
}
.aod-cod__note[open] .aod-cod__note-toggle::after { content: "−"; }
.aod-cod__note-toggle:hover { text-decoration: underline; }
.aod-cod__note > .aod-cod__field { margin-top: 8px; }
.aod-cod__form textarea {
	width: 100%;
	padding: 12px 13px;
	border: 1px solid var(--sh-muted);
	border-radius: var(--sh-radius-sm);
	font-size: 1em;
	line-height: 1.45;
	font-family: inherit;
	box-sizing: border-box;
	background: #fff;
	color: var(--sh-text);
	resize: vertical;
	min-height: 84px;
	transition: border-color .12s, box-shadow .12s;
}
.aod-cod__form textarea:hover { border-color: #616161; }
.aod-cod__form textarea:focus {
	outline: none;
	border-color: var(--sh-accent);
	box-shadow: 0 0 0 1px var(--sh-accent);
}
.aod-cod__form textarea::placeholder { color: var(--sh-text-2); }

/* ---- Labels flottants (signature Shopify) ---- */
.aod-cod__float { position: relative; }
.aod-cod__float > input,
.aod-cod__float > select {
	height: 56px;
	padding-top: 24px;
	padding-bottom: 6px;
	line-height: 1.2;
}
.aod-cod__float > label {
	position: absolute;
	inset-inline-start: 14px;
	/* Repos : centré verticalement (robuste quelle que soit la hauteur de
	   glyphes, ex. arabe) — pas de chevauchement avec la valeur saisie. */
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	font-size: 1em;
	line-height: 1;
	font-weight: 400;
	color: var(--sh-text-2);
	background: transparent;
	pointer-events: none;
	transition: top .12s ease, transform .12s ease, font-size .12s ease, color .12s ease;
	max-width: calc(100% - 40px);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
/* État « flottant » : focus, champ rempli, ou select (toujours).
   Épinglé en haut (line-height:1) avec une marge nette sous le label, le
   texte/la sélection occupant le bas du champ (padding-top:24px). */
.aod-cod__float > input:focus + label,
.aod-cod__float > input:not(:placeholder-shown) + label,
.aod-cod__float--sel > select + label {
	top: 9px;
	transform: translateY(0);
	font-size: .72em;
	color: var(--sh-text-2);
}

/* ---- Quantité : stepper − / + ---- */
.aod-cod__stepper {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--sh-muted);
	border-radius: var(--sh-radius-sm);
	overflow: hidden;
	background: #fff;
	transition: border-color .12s, box-shadow .12s;
}
.aod-cod__stepper:focus-within {
	border-color: var(--sh-accent);
	box-shadow: 0 0 0 1px var(--sh-accent);
}
.aod-cod__step {
	flex: 0 0 auto;
	width: 46px;
	border: 0;
	background: var(--sh-bg-sub);
	color: var(--sh-text);
	font-size: 1.35em;
	line-height: 1;
	font-weight: 500;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: background .12s, color .12s;
	user-select: none;
}
.aod-cod__step:hover { background: var(--sh-accent); color: #fff; }
.aod-cod__step:active { background: var(--sh-accent-dark); color: #fff; }
.aod-cod__step:focus-visible { outline: 2px solid var(--sh-accent); outline-offset: -2px; }
/* L'input du stepper : pas de bordure propre (le conteneur la porte), centré,
   sans les flèches natives. On surcharge le style générique des number. */
.aod-cod__stepper input[type="number"] {
	width: 64px;
	border: 0;
	border-inline: 1px solid var(--sh-line);
	border-radius: 0;
	text-align: center;
	padding: 12px 4px;
	font-weight: 600;
	-moz-appearance: textfield;
}
.aod-cod__stepper input[type="number"]:focus { box-shadow: none; border-color: var(--sh-line); }
.aod-cod__stepper input[type="number"]::-webkit-outer-spin-button,
.aod-cod__stepper input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Wilaya / Commune : pleine largeur, l'un sous l'autre (noms longs AR) */
.aod-cod__row { display: block; }
.aod-cod__row .aod-cod__field { width: 100%; }

/* ---- Mode de livraison : lignes de sélection style Shopify ---- */
.aod-cod__radios { display: flex; flex-direction: row; gap: 0; border: 1px solid var(--sh-line); border-radius: var(--sh-radius-sm); overflow: hidden; }
.aod-cod__radio { cursor: pointer; margin: 0; flex: 1 1 0; min-width: 0; }
.aod-cod__radio + .aod-cod__radio .aod-cod__radio-card { border-inline-start: 1px solid var(--sh-line); }
.aod-cod__radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.aod-cod__radio-card {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 12px;
	height: 100%;
	background: #fff;
	transition: background .12s;
}
/* Très petits écrans : on repasse les deux modes l'un sous l'autre. */
@media (max-width: 360px) {
	.aod-cod__radios { flex-direction: column; }
	.aod-cod__radio + .aod-cod__radio .aod-cod__radio-card { border-inline-start: 0; border-top: 1px solid var(--sh-line); }
}
/* Pastille radio dessinée (à gauche) */
.aod-cod__radio-card::before {
	content: "";
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid var(--sh-muted);
	background: #fff;
	transition: border-color .12s, box-shadow .12s;
}
.aod-cod__radio-icon { font-size: 1.15em; line-height: 1; }
.aod-cod__radio-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.aod-cod__radio-title { font-weight: 500; font-size: .95em; color: var(--sh-text); }
.aod-cod__radio-price { font-size: .9em; font-weight: 600; color: var(--sh-text); margin-inline-start: auto; }
.aod-cod__radio-price:empty::before { content: "—"; color: var(--sh-muted); font-weight: 400; }

.aod-cod__radio input:checked + .aod-cod__radio-card { background: var(--sh-bg-sub); }
.aod-cod__radio input:checked + .aod-cod__radio-card::before {
	border-color: var(--sh-accent);
	box-shadow: inset 0 0 0 4px var(--sh-accent);
}
.aod-cod__radio input:focus-visible + .aod-cod__radio-card::before {
	/* --sh-ring : anneau de focus, redéfini par l'habillage client en fin de
	   fichier. La valeur de repli reste le vert du template. */
	box-shadow: 0 0 0 2px var(--sh-ring, rgba(0, 128, 96, .25));
}

/* ---- Récapitulatif ---- */
.aod-cod__summary {
	margin: 20px 0;
	padding: 16px 0 0;
	border-top: 1px solid var(--sh-line);
}
.aod-cod__summary > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 5px 0;
	font-size: .95em;
	color: var(--sh-text-2);
}
.aod-cod__summary > div strong { color: var(--sh-text); font-weight: 500; }
.aod-cod__grand {
	margin-top: 8px;
	padding-top: 12px !important;
	border-top: 1px solid var(--sh-line);
	font-size: 1em !important;
	color: var(--sh-text) !important;
}
.aod-cod__grand > span { font-weight: 500; }
.aod-cod__grand strong { font-size: 1.35em; font-weight: 600 !important; color: var(--sh-text) !important; }

/* ---- Bouton « Confirmer » (Pay-now Shopify : sombre, pleine largeur) ---- */
.aod-cod__submit,
.aod-cod__submit.button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 16px;
	font-size: 1.02em;
	font-weight: 600;
	border: none;
	border-radius: var(--sh-radius);
	background: var(--sh-accent);
	color: #fff !important;
	cursor: pointer;
	transition: background .12s, transform .05s, opacity .12s;
}
.aod-cod__submit:hover { background: var(--sh-accent-dark); }
.aod-cod__submit:active { transform: translateY(1px); }
.aod-cod__submit[disabled] { opacity: .55; cursor: not-allowed; }

/* ---- Réassurance ---- */
.aod-cod__reassure {
	margin: 14px 0 0;
	text-align: center;
	font-size: .82em;
	color: var(--sh-text-2);
	line-height: 1.5;
}

/* ---- Messages ---- */
.aod-cod__msg { margin: 12px 0 0; text-align: center; font-weight: 500; font-size: .92em; }
.aod-cod__msg:empty { margin: 0; }
.aod-cod__msg.is-error {
	color: var(--sh-error);
	background: #fff1f0;
	border: 1px solid #f8c9c4;
	border-radius: var(--sh-radius-sm);
	padding: 11px 13px;
}
.aod-cod__msg.is-success {
	color: var(--sh-green);
	background: #f0faf6;
	border: 1px solid #b9e3d4;
	border-radius: var(--sh-radius-sm);
	padding: 11px 13px;
}

/* ---- Panneau de remerciement (après commande validée) ---- */
.aod-cod__done {
	text-align: center;
	padding: 28px 20px;
	background: #f0faf6;
	border: 1px solid #b9e3d4;
	border-radius: var(--sh-radius);
	animation: aod-done-in .35s ease;
}
.aod-cod__done-ic {
	width: 56px;
	height: 56px;
	margin: 0 auto 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	line-height: 1;
	color: #fff;
	background: var(--sh-green);
	border-radius: 50%;
}
.aod-cod__done-title { margin: 0 0 6px; font-size: 1.15em; font-weight: 700; color: #14784f; }
.aod-cod__done-order { margin: 0 0 4px; font-weight: 600; color: var(--sh-green); }
.aod-cod__done-sub { margin: 0; color: #4b5563; font-size: .95em; }
@keyframes aod-done-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

/* ---- Incitation livraison gratuite ---- */
.aod-cod__free-hint {
	margin: 10px 0 0;
	padding: 9px 12px;
	text-align: center;
	font-size: .85em;
	font-weight: 500;
	color: var(--sh-green);
	background: #f0faf6;
	border: 1px solid #b9e3d4;
	border-radius: var(--sh-radius-sm);
}
.aod-cod__free-hint[hidden] { display: none; }
.aod-cod__radio-price s { opacity: .55; font-weight: 400; margin-inline-end: 4px; }

/* RTL : WordPress ajoute la classe .rtl au <body> pour l'arabe */
.rtl .aod-cod__summary > div { flex-direction: row-reverse; }

@media (max-width: 480px) {
	.aod-cod { padding: 18px; }
}

/* ---- Arguments de vente ---- */
.aod-cod__points{list-style:none;margin:0 0 16px;padding:0;display:flex;flex-direction:column;gap:6px}
.aod-cod__points li{position:relative;padding-inline-start:26px;font-size:14px;color:var(--sh-text)}
.aod-cod__points li::before{content:"✓";position:absolute;inset-inline-start:0;color:var(--sh-green);font-weight:700}

/* ---- Contenu d'un pack assortiment ---- */
.aod-cod__pack{background:var(--sh-bg-sub);border:1px solid #e1e3e5;border-radius:var(--sh-radius-sm);padding:12px 14px;margin:0 0 16px}
.aod-cod__pack-label{display:block;font-size:12.5px;font-weight:600;color:var(--sh-text-2);margin-bottom:5px}
.aod-cod__pack-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.aod-cod__pack-list li{font-size:14px;color:var(--sh-text)}
.aod-cod__pack-qty{font-weight:600;color:var(--sh-text)}

/* ---- Cartes d'offres (1 produit, 2 produits…) ---- */
.aod-cod__offers{display:flex;flex-direction:column;gap:7px;margin:0 0 14px}
/* La carte est un conteneur : en-tête cliquable + panneau de variantes imbriqué. */
.aod-cod__offer-card{
	position:relative;
	border:1.5px solid var(--sh-line);border-radius:var(--sh-radius-sm);background:#fff;
	transition:border-color .12s,box-shadow .12s;overflow:hidden;
}
.aod-cod__offer-card:hover{border-color:var(--sh-line-strong)}
.aod-cod__offer-card.is-selected{border-color:var(--sh-accent);box-shadow:0 0 0 1px var(--sh-accent)}
/* Différenciation des offres : liseré couleur à gauche (survit à l'état sélectionné). */
.aod-cod__offer-card::before{
	content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
	background:var(--aod-c,transparent);z-index:1;pointer-events:none;
}
.rtl .aod-cod__offer-card::before{left:auto;right:0}
/* En-tête cliquable de la carte (rangée titre / prix / coche). */
.aod-cod__offer-head{
	display:flex;align-items:center;gap:9px;margin:0;padding:8px 12px;cursor:pointer;
}
.aod-cod__offer-card.is-selected .aod-cod__offer-head{background:var(--sh-bg-sub)}
.aod-cod__offer-card input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.aod-cod__offer-body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.aod-cod__offer-title{font-size:13.5px;font-weight:700;color:var(--aod-c,var(--sh-text))}
.aod-cod__offer-badge{
	align-self:flex-start;font-size:10.5px;font-weight:700;color:#fff;background:var(--sh-green,#16a34a);
	border-radius:999px;padding:1px 7px;
}
.aod-cod__offer-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.aod-cod__offer-now{font-size:14px;font-weight:700;color:var(--sh-accent)}
.aod-cod__offer-old{font-size:12px;color:var(--sh-text-2)}
/* Pastille « cochée » à droite de l'en-tête. */
.aod-cod__offer-check{
	flex-shrink:0;width:18px;height:18px;border-radius:50%;border:2px solid var(--sh-line-strong);
	background:#fff;transition:.12s;position:relative;
}
.aod-cod__offer-card.is-selected .aod-cod__offer-check{border-color:var(--sh-accent);background:var(--sh-accent)}
.aod-cod__offer-card.is-selected .aod-cod__offer-check::after{
	content:"";position:absolute;inset:0;margin:auto;width:5px;height:9px;
	border:solid #fff;border-width:0 2px 2px 0;transform:translateY(-1px) rotate(45deg);
}

/* ---- Panneau de variantes, déplié À L'INTÉRIEUR de la carte sélectionnée ---- */
.aod-cod__offer-panel{padding:10px 12px;border-top:1px solid var(--sh-line)}
.aod-cod__offer-panel[hidden]{display:none}
.aod-cod__unit{
	border:1px solid var(--sh-line);border-radius:var(--sh-radius-sm);
	/* Différenciation des articles : bordure de départ épaisse et colorée. */
	border-inline-start:3px solid var(--aod-c,var(--sh-line));
	background:#fff;padding:10px 12px;margin:0 0 8px;
}
.aod-cod__unit:last-child{margin-bottom:0}
.aod-cod__unit-head{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--aod-c,var(--sh-text));margin:0 0 9px}
/* Pastille de couleur de l'article devant son libellé. */
.aod-cod__unit-head::before{content:"";flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--aod-c,var(--sh-text))}
.aod-cod__unit .aod-cod__optsec:last-child{margin-bottom:0}

/* ---- Sections d'options (Taille, Couleur, Pointure…) — style Shopify ---- */
.aod-cod__optsec{margin-bottom:12px}
.aod-cod__optlabel{display:block;font-size:12px;font-weight:600;color:var(--sh-text);margin:0 0 6px}
.aod-cod__optlabel span{color:var(--sh-error)}
.aod-cod__opts{display:flex;flex-wrap:wrap;gap:6px}
/* La case radio reste accessible mais invisible (la carte fait le rendu). */
.aod-cod__opt{position:relative;display:inline-flex;margin:0;cursor:pointer}
.aod-cod__opt input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.aod-cod__opt-card{
	display:flex;align-items:center;justify-content:center;gap:5px;
	min-width:36px;min-height:32px;padding:5px 10px;
	border:1px solid var(--sh-line);border-radius:var(--sh-radius-sm);background:#fff;
	font-size:12.5px;font-weight:500;color:var(--sh-text);text-align:center;transition:.12s;
}
.aod-cod__opt:hover .aod-cod__opt-card{border-color:var(--sh-line-strong)}
.aod-cod__opt input:checked + .aod-cod__opt-card{
	border-color:var(--sh-accent);box-shadow:0 0 0 1px var(--sh-accent);background:var(--sh-bg-sub);
}
.aod-cod__opt input:focus-visible + .aod-cod__opt-card{box-shadow:0 0 0 2px var(--sh-ring,rgba(0,128,96,.25))}
.aod-cod__opt-name{line-height:1.2}
.aod-cod__opt-plus{font-size:11px;color:var(--sh-accent);font-weight:600}
/* Valeurs « avec photo » : pastille verticale (vignette + nom). */
.aod-cod__opt--visual .aod-cod__opt-card{flex-direction:column;gap:5px;min-width:60px;padding:6px}
.aod-cod__opt-thumb{
	width:52px;height:52px;border-radius:6px;background-size:cover;background-position:center;
	border:1px solid var(--sh-line);
}
/* Pastille de couleur prédéfinie (pas de photo) : on affiche la vraie couleur. */
.aod-cod__opt-thumb--color{box-shadow:inset 0 0 0 2px #fff;border-color:rgba(0,0,0,.18)}
/* Couleur sans photo : carte compacte en ligne (petit point rond + nom),
   au lieu de la grande vignette verticale des valeurs avec photo. */
.aod-cod__opt--color .aod-cod__opt-card{flex-direction:row;min-width:0;padding:5px 9px;gap:6px}
.aod-cod__opt--color .aod-cod__opt-thumb{width:16px;height:16px;border-radius:50%}

/* ---- Message d'erreur de configuration (variante manquante) ---- */
.aod-cod__config-msg{margin:8px 0 12px;font-size:12.5px;color:var(--sh-error);min-height:0}
.aod-cod__config-msg:empty{display:none}

/* ---- Flèches de navigation ‹ › superposées sur la galerie produit ---- */
.woocommerce-product-gallery .aod-gallery-nav{
	position:absolute;top:50%;transform:translateY(-50%);z-index:99;
	display:flex;align-items:center;justify-content:center;
	width:40px;height:40px;padding:0;margin:0;
	border:1px solid rgba(0,0,0,.08);border-radius:50%;
	background:rgba(255,255,255,.9);color:#1a1a1a;
	font-size:24px;line-height:1;cursor:pointer;
	box-shadow:0 1px 4px rgba(0,0,0,.18);
	transition:background .12s, transform .05s, box-shadow .12s;
	-webkit-appearance:none;appearance:none;
}
.woocommerce-product-gallery .aod-gallery-nav:hover{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.woocommerce-product-gallery .aod-gallery-nav:active{transform:translateY(-50%) scale(.94)}
.woocommerce-product-gallery .aod-gallery-nav:focus-visible{outline:2px solid var(--sh-accent,#008060);outline-offset:2px}
.woocommerce-product-gallery .aod-gallery-nav--prev{left:12px}
.woocommerce-product-gallery .aod-gallery-nav--next{right:12px}
/* RTL : on inverse les positions pour garder ‹ = précédent côté logique. */
.rtl .woocommerce-product-gallery .aod-gallery-nav--prev{left:auto;right:12px}
.rtl .woocommerce-product-gallery .aod-gallery-nav--next{right:auto;left:12px}


/* ============================================================================
   HABILLAGE TINY HANDS — fond moderne aux couleurs du logo
   ----------------------------------------------------------------------------
   Tout ce qui précède est le formulaire du TEMPLATE : blanc, neutre, accent vert
   Shopify. Il est laissé INTACT pour rester réutilisable d'un client à l'autre.
   Ce bloc-ci est la peau propre à Tiny Hands, regroupée d'un seul tenant pour
   pouvoir être remplacée (ou retirée) sans toucher au reste : on remappe les
   variables --sh-* sur la palette du logo, puis on habille l'en-tête, le
   récapitulatif et le bouton.

   Pourquoi EN FIN de fichier : à spécificité égale, c'est la dernière règle
   déclarée qui l'emporte. Aucun !important n'est donc nécessaire pour surcharger
   le socle — voir plus bas la seule exception, le bouton.
   ========================================================================== */
.aod-cod{
	/* Palette officielle, extraite du logo (identique au thème enfant). */
	--th-coral:#E85A4A;  --th-coral-d:#D24535;
	--th-teal:#26A79A;   --th-teal-d:#1E8C81;
	--th-yellow:#F5BB28; --th-green:#35AC74;  --th-green-d:#2A8C5E;
	--th-ink:#2b2b40;

	/* Remappage : tout ce que le socle peignait en vert Shopify (focus, radios
	   cochés, cartes d'offres, lien « Ajouter une note »…) devient turquoise de
	   marque, sans avoir à réécrire une seule de ces règles. */
	--sh-accent:var(--th-teal);
	--sh-accent-dark:var(--th-teal-d);
	--sh-green:var(--th-green);
	--sh-ring:rgba(38,167,154,.28);
	--sh-text:var(--th-ink);
	--sh-line:#e4edeb;
	--sh-bg-sub:#f1faf8;
	--sh-radius:16px;
	--sh-radius-sm:12px;

	position:relative;
	padding:0;   /* Le rembourrage passe aux enfants : l'en-tête coloré doit aller
	                d'un bord à l'autre de la carte, sans marge blanche autour. */
	border:0;
	border-radius:24px;
	overflow:hidden;      /* pour que le dégradé de l'en-tête épouse les coins */
	font-family:inherit;  /* Rubik (FR) / Cairo (AR) — le socle imposait une pile
	                         système, le formulaire jurait avec le reste du site. */
	color:var(--th-ink);

	/* Le fond « moderne » demandé : deux halos de marque (turquoise en haut à
	   gauche, jaune en bas à droite) posés sur un dégradé blanc → blanc-turquoise.
	   Volontairement TRÈS pâle : c'est un formulaire de commande. Les champs
	   restent blancs et le texte noir sur fond clair — un fond saturé ferait joli
	   sur une maquette et coûterait des commandes. */
	background:
		radial-gradient(120% 90% at 0% 0%,   rgba(38,167,154,.13) 0%, rgba(38,167,154,0) 60%),
		radial-gradient(110% 80% at 100% 100%, rgba(245,187,40,.14) 0%, rgba(245,187,40,0) 60%),
		linear-gradient(180deg,#ffffff 0%,#f6fbfa 100%);
	box-shadow:0 16px 38px rgba(38,167,154,.15), 0 2px 6px rgba(43,43,64,.06);
}

/* ---- En-tête : bandeau turquoise pleine largeur ---- */
.aod-cod__title{
	display:flex;
	align-items:flex-start;
	gap:9px;
	margin:0;
	padding:20px 22px 16px;
	background:linear-gradient(115deg,var(--th-teal) 0%,#2cb3a4 48%,var(--th-green) 100%);
	color:#fff;
	font-family:inherit;
	font-size:16.5px;
	font-weight:700;
	line-height:1.35;
	letter-spacing:0;
}
.aod-cod__title::before{ content:"🛍️"; flex:0 0 auto; font-size:18px; line-height:1.3; }

/* Liseré 4 couleurs : le motif du logo, déjà utilisé par l'en-tête et le pied de
   page du site. C'est lui qui rattache le formulaire à la marque.
   Posé en BAS de la carte, et non au-dessus du bandeau comme dans le header du
   site : deux de ses quatre segments (turquoise, vert) sont exactement les
   couleurs du dégradé de l'en-tête — sur ce fond-là, on ne voyait que la moitié
   du liseré, corail et jaune, ce qui donnait un trait inachevé. Sur le fond pâle
   du bas de carte, les quatre couleurs ressortent. */
.aod-cod::after{
	content:"";
	position:absolute; inset-inline:0; bottom:0; height:5px; z-index:2;
	background:linear-gradient(90deg,
		var(--th-coral)  0 25%,
		var(--th-yellow) 25% 50%,
		var(--th-teal)   50% 75%,
		var(--th-green)  75% 100%);
	pointer-events:none;
}

/* ---- Rembourrage du corps (repris du conteneur, voir plus haut) ---- */
.aod-cod__points{ margin:16px 0 14px; padding-inline:22px; }
.aod-cod__pack{ margin:0 22px 16px; }
.aod-cod__form{ padding:18px 22px 22px; }
/* Quand un bloc le précède, il porte déjà l'écart : pas de double espace. */
.aod-cod__points + .aod-cod__form,
.aod-cod__pack + .aod-cod__form{ padding-top:0; }

/* ---- Champs : coins plus doux, anneau de focus turquoise ---- */
.aod-cod__form input[type="text"],
.aod-cod__form input[type="tel"],
.aod-cod__form input[type="number"],
.aod-cod__form select,
.aod-cod__form textarea{
	border:1.5px solid #dfe9e7;
	border-radius:12px;
	background:#fff;
}
.aod-cod__form input:hover,
.aod-cod__form select:hover,
.aod-cod__form textarea:hover{ border-color:#b9d6d1; }
.aod-cod__form input:focus,
.aod-cod__form select:focus,
.aod-cod__form textarea:focus{
	border-color:var(--th-teal);
	box-shadow:0 0 0 3px var(--sh-ring);
}

/* ---- Récapitulatif : encadré translucide plutôt qu'un simple filet ---- */
.aod-cod__summary{
	margin:18px 0 16px;
	padding:14px 16px;
	border:1.5px solid rgba(38,167,154,.22);
	border-radius:16px;
	background:rgba(255,255,255,.72);
}
.aod-cod__grand{
	margin-top:6px;
	padding-top:10px !important;
	border-top:1px dashed rgba(38,167,154,.42);
}
/* Total en corail, comme le prix affiché en haut de la fiche produit : le
   client retrouve le même repère visuel du haut vers le bas de la page.
   !important obligatoire — le socle force `color:var(--sh-text)!important`. */
.aod-cod__grand strong{ color:var(--th-coral-d) !important; font-weight:800 !important; }

/* ---- Bouton « Confirmer la commande » ----
   SEUL endroit où !important est requis : le thème enfant applique
   `button{background:var(--ink)!important; border-radius:12px!important;
   padding:12px 20px!important}` à TOUS les boutons du site (style.css, section
   « Boutons »). Sans !important ici, le bouton reste bleu-nuit.
   Le sélecteur est volontairement long (0,3,1) pour passer devant
   `.button:hover` (0,2,0) du thème sans dépendre de l'ordre de chargement. */
.aod-cod .aod-cod__form button.aod-cod__submit{
	width:100%;
	padding:16px 20px !important;
	border-radius:16px !important;
	font-family:inherit;
	font-size:16px !important;
	font-weight:800 !important;
	letter-spacing:.2px;
	color:#fff !important;
	background:linear-gradient(135deg,var(--th-coral) 0%,var(--th-coral-d) 100%) !important;
	box-shadow:0 12px 24px rgba(232,90,74,.32) !important;
	transition:transform .12s, box-shadow .18s !important;
}
.aod-cod .aod-cod__form button.aod-cod__submit:hover{
	background:linear-gradient(135deg,var(--th-coral-d) 0%,#bd3728 100%) !important;
	transform:translateY(-2px);
	box-shadow:0 16px 30px rgba(232,90,74,.40) !important;
}
.aod-cod .aod-cod__form button.aod-cod__submit:active{ transform:translateY(0) scale(.985); }
/* Envoi en cours : gris franc plutôt qu'un corail à 55 % d'opacité, qui laissait
   croire que le bouton restait cliquable. */
.aod-cod .aod-cod__form button.aod-cod__submit[disabled]{
	background:#cbd5d3 !important;
	box-shadow:none !important;
	opacity:1;
	transform:none;
}

/* ---- Incitation livraison gratuite + messages : couleurs de la marque ---- */
.aod-cod__free-hint{
	color:var(--th-green-d);
	background:rgba(53,172,116,.11);
	border-color:rgba(53,172,116,.32);
	border-radius:12px;
}
.aod-cod__msg.is-success{
	color:var(--th-green-d);
	background:rgba(53,172,116,.11);
	border-color:rgba(53,172,116,.32);
}

/* ---- Panneau de remerciement ---- */
.aod-cod__done{
	background:rgba(53,172,116,.10);
	border:1.5px solid rgba(53,172,116,.32);
	border-radius:18px;
}
.aod-cod__done-ic{
	background:linear-gradient(135deg,var(--th-green) 0%,var(--th-teal) 100%);
	box-shadow:0 10px 22px rgba(53,172,116,.35);
}
.aod-cod__done-title{ color:var(--th-teal-d); }
.aod-cod__done-order{ color:var(--th-green-d); }

/* ---- Mobile ---- */
@media (max-width:480px){
	/* `padding:0` est redéclaré ici : la media query du socle (plus haut dans le
	   fichier) remet `padding:18px` sur .aod-cod, et à spécificité égale on ne
	   veut pas dépendre de l'ordre des blocs pour trancher. */
	.aod-cod{ padding:0; border-radius:20px; }
	.aod-cod__title{ padding:18px 16px 14px; font-size:15.5px; }
	.aod-cod__points{ padding-inline:16px; }
	.aod-cod__pack{ margin:0 16px 16px; }
	.aod-cod__form{ padding:16px; }
	.aod-cod__points + .aod-cod__form,
	.aod-cod__pack + .aod-cod__form{ padding-top:0; }
}