/*
 * ODepot B2B Orders — Public styles
 * Mobile-first. ODEPOT brand: navy var(--odp-primary, #0b1f3a) + rose var(--odp-accent, #d60b51).
 *
 * Toutes les classes sont préfixées .odp-pv- pour éviter les conflits
 * avec le thème WoodMart.
 */

/* ── Reset thème sur la page de pack ───────────────────
 * Filet de sécurité quand le filtre meta WoodMart n'a pas suffi
 * à désactiver la sidebar / la title bar.
 *
 * Note importante : on ne touche PAS aux colonnes Bootstrap ici (col-*)
 * sinon le footer 4-colonnes serait cassé. L'élargissement de la
 * colonne contenant notre pack est fait en JS dans odp-public.js
 * (fonction fixLayout). On ne cible que des sélecteurs spécifiques.
 */
body.odp-pack-page .page-title,
body.odp-pack-page .wd-page-title,
body.odp-pack-page .page-heading,
body.odp-pack-page .breadcrumbs,
body.odp-pack-page .breadcrumb-wrap,
body.odp-pack-page .woocommerce-breadcrumb,
body.odp-pack-page .title-size-default,
body.odp-pack-page .entry-header,
body.odp-pack-page .post-info,
body.odp-pack-page .author-info,
body.odp-pack-page .related-posts {
	display: none !important;
}

body.odp-pack-page #secondary,
body.odp-pack-page .sidebar-container,
body.odp-pack-page aside.widget-area,
body.odp-pack-page aside.sidebar,
body.odp-pack-page aside.wd-sidebar,
body.odp-pack-page .sidebar-widget-area,
body.odp-pack-page .wd-sidebar,
body.odp-pack-page .col-sidebar {
	display: none !important;
}

/* WoodMart : déclencheurs off-canvas (bouton hamburger latéral) */
body.odp-pack-page .wd-sidebar-opener,
body.odp-pack-page .wd-mobile-sidebar,
body.odp-pack-page .mobile-sidebar-button,
body.odp-pack-page .wd-side-hidden-toggle,
body.odp-pack-page .wd-sidebar-toggler,
body.odp-pack-page .wd-sb-opener,
body.odp-pack-page .wd-action-btn.wd-sidebar-opener,
body.odp-pack-page a[href="#wd-sidebar"] {
	display: none !important;
}

/* WoodMart : forcer le content area à 12 colonnes (CSS Grid)
 * Backup au cas où JS échoue. Les variables --wd-col-* pilotent
 * la largeur des colonnes via grid-column: span var(--wd-col-lg).
 */
body.odp-pack-page .wd-content-area,
body.odp-pack-page .wd-grid-col {
	--wd-col-lg: 12 !important;
	--wd-col-md: 12 !important;
	--wd-col-sm: 12 !important;
	width: 100% !important;
	max-width: 100% !important;
	grid-column: 1 / -1 !important;
}

body.odp-pack-page .wd-grid-g,
body.odp-pack-page .wd-content-layout,
body.odp-pack-page main#main-content {
	--wd-col-lg: 12 !important;
	--wd-col-md: 12 !important;
	--wd-col-sm: 12 !important;
}

/* Réduire le padding par défaut autour du contenu pour gagner
   en hauteur, surtout sur mobile. */
body.odp-pack-page .main-page-wrapper,
body.odp-pack-page .site-content,
body.odp-pack-page .wd-page-content {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* ── Force full-width sur la page d'un pack (fallback CSS) ────── */
/* Si jamais le thème continue d'afficher la sidebar malgré nos
   filtres PHP, on la cache et on étend le contenu sur 100%. */
body.odp-pack-page .sidebar-container,
body.odp-pack-page .widget-area,
body.odp-pack-page #secondary,
body.odp-pack-page aside.sidebar,
body.odp-pack-page .col-sidebar,
body.odp-pack-page .sidebar-shop {
	display: none !important;
}
body.odp-pack-page .content-area,
body.odp-pack-page .site-content,
body.odp-pack-page .row-content,
body.odp-pack-page main.site-main {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
}
body.odp-pack-page .page-title-default,
body.odp-pack-page .wd-page-title,
body.odp-pack-page .page-title,
body.odp-pack-page .breadcrumbs {
	display: none !important;
}
body.odp-pack-page article,
body.odp-pack-page .entry-content {
	margin: 0 !important;
	padding: 0 !important;
}

.odp-pv {
	max-width: 720px;
	margin: 24px auto;
	padding: 0 12px 120px; /* padding-bottom pour ne pas coller à la sticky bar */
	font-family: -apple-system, "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
	color: #1d2327;
}

/* ── Hero ─────────────────────────────────────────────── */
.odp-pv-hero {
	background: #fff;
	border: 0.5px solid #e8e6de;
	border-radius: 14px;
	padding: 18px 16px;
	margin-bottom: 12px;
	box-shadow: 0 1px 3px rgba(11, 31, 58, 0.04);
}
.odp-pv-hero-meta {
	font-size: 11px;
	color: var(--odp-accent, #d60b51);
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}
.odp-pv-hero-name {
	font-size: 20px;
	font-weight: 600;
	margin: 4px 0 6px;
	color: var(--odp-primary, #0b1f3a);
	line-height: 1.25;
}
.odp-pv-hero-desc {
	font-size: 13px;
	color: #5f5e5a;
	line-height: 1.5;
	margin: 0 0 12px;
}
.odp-pv-hero-total {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding-top: 10px;
	border-top: 0.5px solid #e8e6de;
	flex-wrap: wrap;
}
.odp-pv-hero-total .big {
	font-size: 24px;
	font-weight: 600;
	color: var(--odp-primary, #0b1f3a);
}
.odp-pv-hero-total .small {
	font-size: 12px;
	color: #888;
}

/* ── Items ────────────────────────────────────────────── */
.odp-pv-items {
	list-style: none;
	margin: 0;
	padding: 0;
}
.odp-pv-item {
	background: #fff;
	border: 0.5px solid #efede5;
	border-radius: 12px;
	padding: 12px;
	margin-bottom: 8px;
	display: flex;
	gap: 12px;
	transition: opacity 0.18s ease;
}
.odp-pv-item.is-removed {
	opacity: 0.45;
	background: #f5f3ec;
}
.odp-pv-thumb {
	width: 60px;
	height: 60px;
	border-radius: 8px;
	background: #f1eede;
	background-size: cover;
	background-position: center;
	flex-shrink: 0;
	border: 0.5px solid #e5e5e7;
}
.odp-pv-info {
	flex: 1;
	min-width: 0;
}
.odp-pv-name {
	font-size: 14px;
	font-weight: 500;
	color: var(--odp-primary, #0b1f3a);
	line-height: 1.3;
	margin-bottom: 2px;
}
.odp-pv-sub {
	font-size: 11px;
	color: #888;
	margin-bottom: 8px;
}
.odp-pv-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	flex-wrap: wrap;
}
.odp-pv-price {
	font-size: 13px;
	color: var(--odp-primary, #0b1f3a);
	font-weight: 500;
}
.odp-pv-removed-msg {
	font-size: 12px;
	color: var(--odp-accent, #d60b51);
	font-weight: 500;
}
.odp-pv-restore {
	background: transparent;
	border: 0;
	color: var(--odp-accent, #d60b51);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	padding: 4px 0;
	text-decoration: underline;
}

/* ── Quantity controls ─────────────────────────────── */
.odp-pv-qty {
	display: inline-flex;
	align-items: center;
	background: #f5f3ec;
	border-radius: 10px;
	overflow: hidden;
}
.odp-pv-qty button {
	width: 38px;
	height: 38px;
	background: transparent;
	border: 0;
	font-size: 18px;
	color: var(--odp-primary, #0b1f3a);
	cursor: pointer;
	padding: 0;
	line-height: 1;
	font-weight: 500;
	transition: background 0.12s ease;
}
.odp-pv-qty button:hover {
	background: rgba(11, 31, 58, 0.06);
}
.odp-pv-qty button:active {
	transform: scale(0.94);
}
.odp-pv-qty .odp-pv-q-val {
	min-width: 32px;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	color: var(--odp-primary, #0b1f3a);
}

/* ── Bottom bar (sticky) ───────────────────────────── */
.odp-pv-bbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	border-top: 1px solid #e8e6de;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	box-shadow: 0 -2px 12px rgba(11, 31, 58, 0.08);
	z-index: 100000; /* au-dessus du widget de contact flottant ODEPOT (z-index ~9999) */
}
@media (max-width: 768px) {
	/* Sur mobile, le bouton CTA risque d'être caché par le widget de
	 * contact flottant en bas à droite (rond pembe). On lui réserve
	 * une marge à droite pour que le bouton reste cliquable. */
	.odp-pv-bbar {
		padding-right: 78px;
	}
}
.odp-pv-bbar-totals {
	flex: 1;
	min-width: 0;
}
.odp-pv-bbar-totals .t1 {
	font-size: 11px;
	color: #888;
}
.odp-pv-bbar-totals .t2 {
	font-size: 16px;
	font-weight: 600;
	color: var(--odp-primary, #0b1f3a);
}
.odp-pv-cta {
	background: var(--odp-accent, #d60b51) !important;
	color: #fff !important;
	border: 0 !important;
	padding: 0 22px !important;
	margin: 0 !important;
	border-radius: 10px !important;
	height: 48px !important;
	min-height: 48px !important;
	max-height: 48px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	cursor: pointer;
	transition: background 0.12s ease, transform 0.12s ease;
	white-space: nowrap;
	line-height: 1 !important;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	box-shadow: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box;
	font-family: inherit;
}
.odp-pv-cta:hover {
	background: #b30943 !important;
}
.odp-pv-cta:active {
	transform: scale(0.98);
}
.odp-pv-cta:disabled {
	background: #ccc !important;
	cursor: not-allowed;
}
.odp-pv-link {
	color: var(--odp-primary, #0b1f3a);
	text-decoration: underline;
	font-size: 13px;
}

/* ── Empty / forbidden states ──────────────────────── */
.odp-pv-empty {
	background: #fff;
	border: 0.5px dashed #c3c4c7;
	border-radius: 12px;
	padding: 40px 20px;
	text-align: center;
	color: #646970;
	font-size: 14px;
}
.odp-pv-forbidden {
	background: #fff;
	border: 0.5px solid #efede5;
	border-radius: 14px;
	padding: 32px 24px;
	text-align: center;
}
.odp-pv-forbidden h1 {
	font-size: 20px;
	color: var(--odp-primary, #0b1f3a);
	margin: 0 0 12px;
	font-weight: 600;
}
.odp-pv-forbidden p {
	font-size: 14px;
	color: #5f5e5a;
	line-height: 1.5;
	margin: 0 0 20px;
}
.odp-pv-forbidden-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: center;
}
.odp-pv-forbidden-actions .odp-pv-cta {
	display: inline-block;
	text-decoration: none;
	min-width: 180px;
	text-align: center;
}

/* ── Tablet+ enhancements ──────────────────────────── */
@media (min-width: 720px) {
	.odp-pv-hero {
		padding: 22px 22px;
	}
	.odp-pv-hero-name {
		font-size: 24px;
	}
	.odp-pv-item {
		padding: 14px;
	}
	.odp-pv-thumb {
		width: 72px;
		height: 72px;
	}
	.odp-pv-name {
		font-size: 15px;
	}
	.odp-pv-bbar {
		max-width: 720px;
		margin: 0 auto;
		left: 50%;
		right: auto;
		transform: translateX(-50%);
		border-radius: 14px 14px 0 0;
		border: 0.5px solid #e8e6de;
		border-bottom: 0;
	}
}

/* ─── Customize button (Faz F4) — pack view ────── */

.odp-pv-cta-row {
	display: flex;
	gap: 10px;
	align-items: stretch;
	flex-wrap: wrap;
}
.odp-pv-cta-row .odp-pv-cta {
	flex: 1 1 auto;
	min-width: 180px;
}
.odp-pv-customize-cta {
	background: #fff;
	color: var(--odp-accent, #d60b51);
	border: 1.5px solid var(--odp-accent, #d60b51);
	border-radius: 8px;
	padding: 0 18px;
	height: 48px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.12s, color 0.12s;
	font-family: inherit;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.odp-pv-customize-cta:hover {
	background: #fff1f5;
	color: #b30943;
	border-color: #b30943;
}
.odp-pv-customize-cta:active {
	transform: scale(0.98);
}

@media (max-width: 600px) {
	.odp-pv-cta-row {
		flex-direction: column;
	}
	.odp-pv-cta-row .odp-pv-cta,
	.odp-pv-customize-cta {
		width: 100%;
	}
}

/* ─────────────────────────────────────────────────────────
   FAB stack pour pack-view (mobile + tablette, < 900px)
   v1.1.5 : la bbar pleine largeur tronquait les boutons et
   entrait en collision avec le widget de contact en bas à
   droite. On la transforme en stack vertical de 2 pills :
   - Pill blanche (info) : sayım + tutar
   - Pill row (actions)  : Personnaliser (secondaire) + Au panier (primaire)
   Position au-dessus du widget de contact (bottom: 80px).
   ───────────────────────────────────────────────────────── */
@media (max-width: 899px) {
	.odp-pv-bbar {
		left: 50% !important;
		right: auto !important;
		transform: translateX(-50%) !important;
		bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
		width: calc(100% - 32px) !important;
		max-width: 400px !important;
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		padding: 0 !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 8px !important;
		z-index: 99000 !important;
	}

	/* Pill blanche : info totals */
	.odp-pv-bbar-totals {
		background: #fff !important;
		border: 1px solid #efede5 !important;
		border-radius: 999px !important;
		padding: 10px 18px !important;
		box-shadow: 0 6px 14px rgba(11, 31, 58, 0.10) !important;
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 12px !important;
		flex: none !important;
		min-width: 0 !important;
	}
	.odp-pv-bbar-totals .t1 {
		font-size: 11px !important;
		color: #888 !important;
		font-weight: 500 !important;
		line-height: 1.2 !important;
	}
	.odp-pv-bbar-totals .t2 {
		font-size: 14px !important;
		font-weight: 700 !important;
		color: var(--odp-primary, #0b1f3a) !important;
		line-height: 1.2 !important;
	}

	/* Row de 2 boutons (Personnaliser + Au panier) */
	.odp-pv-cta-row {
		display: flex !important;
		flex-direction: row !important;
		gap: 8px !important;
		width: 100% !important;
	}

	/* Au panier = pill principal pembe */
	.odp-pv-cta {
		flex: 1 1 auto !important;
		background: var(--odp-accent, #d60b51) !important;
		color: #fff !important;
		border: 0 !important;
		border-radius: 28px !important;
		height: 52px !important;
		min-height: 52px !important;
		max-height: 52px !important;
		padding: 0 20px !important;
		font-size: 14px !important;
		font-weight: 800 !important;
		text-transform: uppercase !important;
		letter-spacing: 0.04em !important;
		line-height: 1 !important;
		box-shadow: 0 12px 28px rgba(214, 11, 81, 0.32),
		            0 4px 8px rgba(0, 0, 0, 0.12) !important;
	}
	.odp-pv-cta:disabled {
		background: #ccc !important;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.10) !important;
	}

	/* Personnaliser = pill secondaire blanc */
	.odp-pv-customize-cta {
		flex: 0 0 auto !important;
		background: #fff !important;
		color: var(--odp-accent, #d60b51) !important;
		border: 1px solid var(--odp-accent, #d60b51) !important;
		border-radius: 28px !important;
		height: 52px !important;
		min-height: 52px !important;
		max-height: 52px !important;
		padding: 0 16px !important;
		font-size: 12px !important;
		font-weight: 700 !important;
		line-height: 1 !important;
		box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08) !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		white-space: nowrap !important;
		cursor: pointer;
	}
	.odp-pv-customize-cta:hover,
	.odp-pv-customize-cta:active {
		background: #fff5f8 !important;
		color: #b30943 !important;
	}

	/* Annule l'override 1.1.3 padding-right: 78px qui était une rustine
	 * pour éviter le widget de contact. Plus utile : on est centré et
	 * remonté à 80px du bas, le widget reste libre en bas-droite. */
}
@media (max-width: 768px) {
	.odp-pv-bbar {
		padding-right: 0 !important;
	}
}

/* Padding-bottom de la liste d'items pour ne pas être masqué par le FAB */
@media (max-width: 899px) {
	.odp-pv-items {
		padding-bottom: 180px !important;
	}
}