/*
 * Shipping Policy — Delivery Speed Cards + Mobile Slider
 * Depends on: design-tokens.css, log-sp-journey.css
 * Page: body.log-shipping-page
 */

.speed-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}

.speed-card {
	background: var(--paper-50);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: 24px 20px;
	text-align: center;
	position: relative;
	transition: transform .35s var(--ease), box-shadow .35s var(--ease);
	transform-style: preserve-3d;
}

.speed-card.featured {
	border-color: var(--gold-500);
	box-shadow: 0 20px 40px -14px var(--ink-glass-20);
	background: var(--white);
}

.speed-card:hover { transform: translateY(-6px); box-shadow: 0 22px 40px -16px var(--ink-glass-25); }

.speed-ribbon {
	position: absolute;
	top: -11px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--plum-700);
	color: var(--white);
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 6px 15px;
	border-radius: var(--r-pill);
	box-shadow: var(--shadow-sm);
	white-space: nowrap;
}

.speed-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--blush-100);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 14px;
	color: var(--plum-700);
	transition: transform .3s var(--ease);
}

.speed-card.featured .speed-icon { background: var(--plum-700); color: var(--white); }
.speed-card:hover .speed-icon { transform: scale(1.1) rotate(-8deg); }
.speed-icon .icon { width: 23px; height: 23px; }

.speed-card h3 { font-family: var(--display); font-size: 17px; font-weight: 700; margin-bottom: 8px; color: var(--ink-900); }

.speed-days { font-family: var(--display); font-weight: 800; font-size: 24px; color: var(--plum-700); line-height: 1; }

.speed-days .speed-unit {
	display: block;
	font-family: var(--body);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--gray-600);
	margin-top: 3px;
}

.speed-rule { width: 32px; height: 2px; background: var(--sage-500); margin: 12px auto; }
.speed-desc { font-size: 12px; line-height: 1.6; color: var(--gray-600); min-height: 52px; }
.speed-price { font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--ink-900); margin-top: 6px; }

.speed-pill {
	display: inline-block;
	margin-top: 8px;
	background: var(--paper);
	color: var(--plum-700);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;
	padding: 5px 11px;
	border-radius: var(--r-pill);
}

@media(max-width:760px) {
	.speed-grid {
		grid-template-columns: 1fr;
		overflow-x: auto;
		display: flex;
		gap: 12px;
		scroll-snap-type: x mandatory;
		scroll-padding-left: 0;
		padding: 20px 2px 30px;
		margin: 0;
		scrollbar-width: none;
		-ms-overflow-style: none;
		mask-image: linear-gradient(90deg, #000 0, #000 92%, transparent 100%);
		-webkit-mask-image: linear-gradient(90deg, #000 0, #000 92%, transparent 100%);
	}

	.speed-grid::-webkit-scrollbar { display: none; height: 0; }

	.speed-card { scroll-snap-align: start; flex: 0 0 72%; padding: 20px 16px; }
	.speed-card.featured { order: -1; box-shadow: 0 14px 26px -10px var(--ink-glass-25); }
	.speed-days { font-size: 21px; }
	.speed-desc { font-size: 11.5px; min-height: 44px; }
}

@media(max-width:400px) {
	.speed-card { flex: 0 0 78%; }
}

.speed-slider-wrap { position: relative; }

.speed-nav-btn {
	display: none;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--white);
	border: 1.4px solid var(--line);
	box-shadow: var(--shadow-sm);
	align-items: center;
	justify-content: center;
	color: var(--ink-700);
	z-index: 5;
	transition: all .25s var(--ease);
	cursor: pointer;
}

.speed-nav-btn:active { transform: translateY(-50%) scale(.92); }
.speed-nav-btn.prev { left: -4px; }
.speed-nav-btn.next { right: -4px; }
.speed-nav-btn .icon { width: 15px; height: 15px; }
.speed-nav-btn[disabled] { opacity: .35; pointer-events: none; }

@media(max-width:760px) {
	.speed-nav-btn { display: flex; }
}

.speed-dots { display: none; justify-content: center; gap: 7px; margin-top: 6px; }

.speed-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--line);
	transition: all .3s var(--ease);
}

.speed-dot.active { background: var(--plum-700); width: 20px; border-radius: 99px; }

@media(max-width:760px) {
	.speed-dots { display: flex; }
}

.speed-swipe-hint {
	display: none;
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	color: var(--gray-600);
	letter-spacing: .04em;
	margin-top: 12px;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.speed-swipe-hint .icon { width: 12px; height: 12px; color: var(--sage-700); animation: shipSwipeNudge 1.6s ease-in-out infinite; }

@keyframes shipSwipeNudge {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(4px); }
}

@media(max-width:760px) {
	.speed-swipe-hint { display: flex; }
}