/*
 * shipping.css
 * Page-specific styles for the Shipping Policy page (new/shipping.php).
 * Recreation of Figma node 203:7170 (file 6Y5Mw023BNGRaArvPgBS8R).
 *
 * Reuses the homepage .ft-* design system + CSS variables (homepage.css is linked
 * first). These .sp-* rules add only what the policy document needs: the
 * Table-of-Content sidebar, the flowing document column, and the shipping-methods
 * table. Mirrors the Terms/Privacy page's two-column layout.
 *
 * Figma tokens used:
 *   Text_Primary #333536 · Text_Secondary #737A82 · Blue_Main #2DA7FA · border #e4e4e4
 *   Title/Title 24/30 Bold · Title/H2 16 SemiBold · Body/Body 14/18 Medium
 *
 * Figma layout: 360px side margins on the 1920 design; TOC column 280px, content
 * column 888px, ~32px gutter. Document body copy is 14/18 (Body/Body).
 */

.sp-section {
	/* Figma background BG/Background #F7F7F9 behind the document. */
	background: #fdfdfd;
	padding: 64px 0 96px;
}

/* Two-column shell: 360px margins on 1920 → ~18.75% per side; TOC fixed 280px,
 * content fills the rest (capped to the Figma 888px). */
.sp-shell {
	display: grid;
	grid-template-columns: 280px minmax(0, 888px);
	gap: 32px;
	align-items: start;
	max-width: 1200px; /* 280 + 32 + 888 */
}

/* ---- Table of Content sidebar ---- */
.sp-toc {
	position: sticky;
	top: calc(var(--shop-header-height, 80px) + 24px);
	display: grid;
	gap: 16px;
}

.sp-toc__title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ft-text);
}

.sp-toc__rule {
	width: 246px;
	max-width: 100%;
	height: 0;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--ft-border);
}

.sp-toc__list {
	display: grid;
	gap: 16px;
}

.sp-toc__link {
	font-size: 14px;
	font-weight: 500;
	line-height: 18px;
	color: var(--ft-muted);
	text-decoration: none;
	transition: color 0.2s ease;
}

.sp-toc__link:hover,
.sp-toc__link:focus-visible {
	color: var(--ft-blue);
}

.sp-toc__link.is-active {
	color: var(--ft-blue);
	font-weight: 600;
}

/* ---- Flowing document column ---- */
.sp-doc {
	display: grid;
	gap: 24px;
}

.sp-doc__intro {
	display: grid;
	gap: 16px;
}

.sp-doc__title {
	margin: 0;
	font-size: 24px;
	line-height: 30px;
	font-weight: 700;
	color: var(--ft-text);
}

.sp-doc__rule {
	height: 0;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--ft-border);
}

.sp-block {
	display: grid;
	gap: 16px;
	scroll-margin-top: calc(var(--shop-header-height, 80px) + 24px);
}

.sp-block__title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--ft-text);
}

.sp-block__body {
	display: grid;
	gap: 16px;
}

.sp-block__body p {
	margin: 0;
	font-size: 14px;
	line-height: 18px;
	font-weight: 500;
	color: var(--ft-muted);
}

/* ---- Bulleted lists (Figma renders the note/return lists as bullets) ---- */
.sp-list {
	margin: 0;
	padding-left: 20px;
	display: grid;
	gap: 8px;
	list-style: disc;
}

.sp-list li {
	font-size: 14px;
	line-height: 18px;
	font-weight: 500;
	color: var(--ft-muted);
}

/* ---- Shipping-methods table (Figma group 217:7383) ---- */
.sp-table-wrap {
	width: 100%;
}

.sp-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.sp-table th,
.sp-table td {
	text-align: left;
	padding: 10px 0;
	font-size: 14px;
	line-height: 18px;
	font-weight: 500;
	border-bottom: 1px solid var(--ft-border);
	vertical-align: top;
}

.sp-table thead th {
	color: var(--ft-text);
	font-weight: 600;
}

/* First column row headers carry slightly stronger emphasis than the value
 * cells, matching the Figma weight contrast (method name vs. delivery time). */
.sp-table tbody th {
	color: var(--ft-text);
	font-weight: 600;
}

.sp-table tbody td {
	color: var(--ft-muted);
}

/* ---- Mobile ---- */
@media (max-width: 990px) {
	.sp-section {
		padding: 56px 0 72px;
	}

	/* Stack: TOC above the document, full width. */
	.sp-shell {
		grid-template-columns: 1fr;
		gap: 28px;
		max-width: 100%;
	}

	.sp-toc {
		position: static;
		top: auto;
	}

	.sp-toc__rule {
		width: 100%;
	}
}

@media (max-width: 680px) {
	.sp-section {
		padding: 40px 0 56px;
	}

	/* Card-style stacked table: each row becomes a labelled block so the 3 columns
	 * don't get crushed on narrow phones. */
	.sp-table,
	.sp-table thead,
	.sp-table tbody,
	.sp-table tr,
	.sp-table th,
	.sp-table td {
		display: block;
		width: 100%;
	}

	.sp-table thead {
		/* Header row is encoded per-cell via data-label below; hide the standalone
		 * header row. */
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.sp-table tr {
		padding: 12px 0;
		border-bottom: 1px solid var(--ft-border);
	}

	.sp-table tbody th,
	.sp-table tbody td {
		padding: 4px 0;
		border-bottom: 0;
	}

	/* Row header (method name) sits on its own line as the card title. */
	.sp-table tbody th {
		font-size: 15px;
		margin-bottom: 4px;
	}

	/* Value cells get their column label prefixed for context. */
	.sp-table tbody td::before {
		content: attr(data-label) ": ";
		font-weight: 600;
		color: var(--ft-text);
	}
}

/* Narrow the gutter to 16px per side at phone widths (convention: 100% - 32px
 * at <=449), giving the policy copy/table more room down to the 325px target. */
@media (max-width: 449px) {
	.sp-main {
		--ft-shell: min(1480px, 100% - 32px);
	}
}

/* ---- 4K / ultra-wide ----
 * Same desktop layout, uniformly scaled ~2.2x to match homepage.css's 4K block
 * (shell widens to 3320px there, header/footer scale via body.ft-page rules). */
@media (min-width: 3000px) {
	.sp-section {
		padding: 140px 0 210px;
	}

	.sp-shell {
		grid-template-columns: 616px minmax(0, 1956px); /* 280×2.2, 888×2.2 */
		gap: 70px;
		max-width: 2640px;
	}

	.sp-toc {
		top: calc(var(--shop-header-height, 210px) + 53px);
		gap: 35px;
	}

	.sp-toc__title {
		font-size: 35px;
	}

	.sp-toc__rule {
		width: 540px;
		border-top-width: 2px;
	}

	.sp-toc__list {
		gap: 35px;
	}

	.sp-toc__link {
		font-size: 31px;
		line-height: 40px;
	}

	.sp-doc {
		gap: 53px;
	}

	.sp-doc__intro {
		gap: 35px;
	}

	.sp-doc__title {
		font-size: 52px;
		line-height: 64px;
	}

	.sp-doc__rule,
	.sp-table th,
	.sp-table td {
		border-top-width: 2px;
		border-bottom-width: 2px;
	}

	.sp-block {
		gap: 35px;
		scroll-margin-top: calc(var(--shop-header-height, 210px) + 53px);
	}

	.sp-block__title {
		font-size: 35px;
	}

	.sp-block__body {
		gap: 35px;
	}

	.sp-block__body p,
	.sp-list li,
	.sp-table th,
	.sp-table td {
		font-size: 31px;
		line-height: 40px;
	}

	.sp-list {
		padding-left: 44px;
		gap: 18px;
	}

	.sp-table th,
	.sp-table td {
		padding: 22px 0;
	}
}