/*
 * About Us page (/about-us/) — hand-written, enqueued only by page-about-us.php.
 * Lives outside the Vite build because dist/assets/style.css is prebuilt and
 * lacks most of the arbitrary values this design needs.
 *
 * Mobile-first, matching the three Figma frames:
 *   base  → 390w  (16px gutter, 40px section padding, 24px headings)
 *   768+  → 768w  (24px gutter, 56px section padding, 30px headings)
 *   1024+ → 1440w (1200 content, 60px section padding, multi-column layouts)
 */

.dm-about {
	--about-copper: #b97230;
	--about-cashmere: #e6bf9a;
	--about-blush: #f8f1f0;
	--about-ink: #262626;
	--about-heading: #120b0c;
	color: var(--about-ink);
	font-size: 16px;
	line-height: 24px;
}

.dm-about p { margin: 0; }

.dm-about__container {
	width: 100%;
	max-width: 1248px; /* 1200 content + 2×24 gutter */
	margin-inline: auto;
	padding-inline: 16px;
}

.dm-about__section { padding-block: 40px; }

.dm-about__h2 {
	margin: 0;
	color: var(--about-heading);
	font-size: 24px;
	font-weight: 400;
	line-height: 36px;
}

.dm-about__lead { font-size: 18px; font-weight: 700; line-height: 28px; }
.dm-about__center { text-align: center; }

/* Line breaks that only exist in one breakpoint's design. */
.dm-about__br-desktop { display: none; }

.dm-about a.dm-about__link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.dm-about a.dm-about__link:hover { color: var(--about-copper); }

.dm-about__divider { display: block; width: 24px; height: 2px; background: var(--about-ink); }
.dm-about__divider--copper { background: var(--about-copper); }

.dm-about__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid;
	border-radius: 9999px;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .2s, color .2s, border-color .2s;
}

/* ── Hero ─────────────────────────────────────────────── */
.dm-about-hero {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	min-height: 480px;
	padding: 24px 16px;
	overflow: hidden;
}
/* Mobile art (hero-mobile.jpg) is placed exactly as in the 390w frame. */
.dm-about-hero__bg {
	position: absolute;
	top: .05%;
	left: -4.49%;
	width: 109.05%;
	height: 118.66%;
	max-width: none;
	object-fit: cover;
}
.dm-about-hero__shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.32), rgba(0,0,0,0)); }
.dm-about-hero__inner {
	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	min-width: 0;
	color: #fff;
	text-align: center;
}
.dm-about-hero__title { margin: 0 0 16px; color: #fff; font-size: 30px; font-weight: 400; line-height: 45px; }
.dm-about-hero__btn { padding: 4px 16px; border-color: #fff; background: #fff; color: #000; font-size: 16px; line-height: 24px; }
.dm-about-hero__btn:hover { background: transparent; color: #fff; }

/* ── Intro card ───────────────────────────────────────── */
.dm-about-intro__card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 32px 16px;
	border-radius: 10px;
	background: var(--about-blush);
}
.dm-about-intro__text { display: flex; flex-direction: column; gap: 28px; }

/* ── Authentic products ───────────────────────────────── */
.dm-about-authentic { display: flex; flex-direction: column; gap: 32px; }
.dm-about-authentic__copy { display: flex; flex: 1 1 0; flex-direction: column; gap: 16px; min-width: 0; }
.dm-about-authentic__body { display: flex; flex-direction: column; gap: 24px; }
.dm-about-authentic__lead { margin-top: -12px; color: #191919; }
.dm-about-authentic__frame {
	display: flex;
	height: 346px;
	padding: 16px;
	border: 1px solid var(--about-copper);
	border-radius: 24px;
}
.dm-about-authentic__media {
	position: relative;
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	padding-block: 32px;
	border-radius: 10px;
	overflow: hidden;
}
.dm-about-authentic__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dm-about-authentic__badge {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border: 1px solid #fff;
	border-radius: 8px;
	background: linear-gradient(to right, rgba(0,0,0,.61), rgba(153,153,153,.61));
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	color: #fff;
	font-size: 16px;
	line-height: normal;
}
.dm-about-authentic__badge img { flex-shrink: 0; width: 32px; height: 32px; }

/* ── Why choose ───────────────────────────────────────── */
.dm-about-why { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.dm-about-why__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.dm-about-why__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 16px;
	width: 100%;
	margin: 0;
	padding: 24px 0;
	list-style: none;
}
.dm-about-why__item { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.dm-about-why__icon {
	display: flex;
	padding: 4px;
	border: 1px solid var(--about-cashmere);
	border-radius: 14px;
	background: var(--about-copper);
}
.dm-about-why__icon > img { width: 40px; height: 40px; }
.dm-about-why__label { display: block; color: var(--about-copper); font-weight: 700; }
.dm-about-why__label--inline { display: inline; }
.dm-about-why__label a { color: inherit; text-decoration: none; }
.dm-about-why__label a:hover { text-decoration: underline; }

/* "Price beat" glyph is a rotated group clipped to the 40px box, as in Figma. */
.dm-about-why__pricebeat { position: relative; width: 40px; height: 40px; overflow: hidden; }
.dm-about-why__pricebeat-pos {
	position: absolute;
	top: -5.04px;
	left: -5.49px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 51.734px;
	height: 51.734px;
}
.dm-about-why__pricebeat-rot { position: relative; width: 35.507px; height: 37.657px; transform: rotate(-45deg); }
.dm-about-why__pricebeat-rot img { position: absolute; top: 0; bottom: 0; left: -1.76%; right: -1.76%; width: 103.52%; height: 100%; max-width: none; }

.dm-about-why__note {
	width: 100%;
	padding: 32px;
	border: 1px solid var(--about-copper);
	border-radius: 10px;
	text-align: center;
}

/* ── Trustpilot ───────────────────────────────────────── */
.dm-about-trustpilot { background: var(--about-blush); }
.dm-about-trustpilot__inner { display: flex; flex-direction: column; align-items: center; gap: 16px; }
/* TrustBox drop target: keeps a clickable area under the slider for the
   plugin's placement tool, then collapses once a widget lands in or beside it. */
.dm-about-trustpilot__widget { width: 100%; min-height: 48px; }
.dm-about-trustpilot__widget:has(.trustpilot-widget),
.dm-about-trustpilot__widget:has(+ .trustpilot-widget),
.trustpilot-widget + .dm-about-trustpilot__widget { min-height: 0; }

/* Testimonials slider: arrows flank the cards from 768px, dots underneath. */
.dm-about-testimonials { display: flex; align-items: center; gap: 16px; width: 100%; }
.dm-about-testimonials__swiper { flex: 1 1 auto; min-width: 0; }
.dm-about-testimonials__nav {
	display: none;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 2px solid var(--about-ink);
	border-radius: 50%;
	background: transparent;
	color: var(--about-ink);
	cursor: pointer;
	transition: background-color .2s, color .2s, opacity .2s;
}
.dm-about-testimonials__nav svg { width: 20px; height: 20px; }
.dm-about-testimonials__nav:hover { background: var(--about-ink); color: #fff; }
.dm-about-testimonials__nav.swiper-button-disabled { opacity: .3; pointer-events: none; }
.dm-about-testimonials__nav.swiper-button-lock { display: none; }

.dm-about-testimonial.swiper-slide {
	display: flex;
	flex-direction: column;
	height: auto;
	padding: 24px;
	border-radius: 8px;
	background: #fff;
}
.dm-about-testimonial__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.dm-about-testimonial__stars { display: inline-flex; gap: 3px; }
.dm-about-testimonial__stars svg { width: 29px; height: 29px; fill: #dcdce6; }
.dm-about-testimonial__stars svg.is-filled { fill: #00b67a; }
.dm-about-testimonial__date { color: var(--about-ink); font-size: 16px; line-height: 24px; white-space: nowrap; }
.dm-about-testimonial__title {
	display: -webkit-box;
	margin: 0 0 12px;
	overflow: hidden;
	color: var(--about-ink);
	font-size: 18px;
	font-weight: 700;
	line-height: 28px;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.dm-about-testimonials__pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	--swiper-pagination-color: var(--about-ink);
	--swiper-pagination-bullet-inactive-color: #d9d9d9;
	--swiper-pagination-bullet-inactive-opacity: 1;
}
.dm-about-testimonials__pagination .swiper-pagination-bullet { margin: 0 !important; }
.dm-about-testimonials__pagination.swiper-pagination-lock { display: none; }

/* ── Brands ───────────────────────────────────────────── */
.dm-about-brands { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.dm-about-brands__btn { padding: 10px 24px; border-color: #000; background: #fff; color: #000; font-size: 14px; line-height: 20px; }
.dm-about-brands__btn:hover { background: #000; color: #fff; }
.dm-about-brands__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.dm-about-brands__card { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--about-ink); text-decoration: none; }
.dm-about-brands__media { position: relative; width: 100%; aspect-ratio: 166.5 / 154.4; border-radius: 8px; overflow: hidden; }
.dm-about-brands__media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .3s; }
.dm-about-brands__card:hover .dm-about-brands__media img { transform: scale(1.04); }
.dm-about-brands__name { font-size: 18px; font-weight: 700; line-height: 28px; white-space: nowrap; }

/* ── Contact ──────────────────────────────────────────── */
.dm-about-contact { position: relative; overflow: hidden; background: linear-gradient(to bottom, #f1d8c1, #fdf7f2); }
/* Decorative lines sit outside the 390w/768w frames, so they only show on desktop. */
.dm-about-contact__lines {
	position: absolute;
	right: -161.94px;
	bottom: -298.11px;
	display: none;
	width: 1019.882px;
	height: 511.111px;
	max-width: none;
	pointer-events: none;
}
.dm-about-contact__inner { position: relative; display: flex; flex-direction: column; gap: 32px; }
.dm-about-contact__col { display: flex; flex: 1 1 0; flex-direction: column; gap: 24px; min-width: 0; }
.dm-about-contact__intro { display: flex; flex-direction: column; gap: 16px; }
.dm-about-contact__title { color: var(--about-copper); }
.dm-about-contact__row { display: flex; align-items: center; gap: 16px; }
.dm-about-contact__row > img { flex-shrink: 0; width: 24px; height: 24px; }
.dm-about-contact__value { display: block; color: var(--about-ink); font-size: 18px; font-weight: 700; line-height: 28px; text-decoration: none; }
a.dm-about-contact__value:hover { color: var(--about-copper); }
.dm-about-contact__stack { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.dm-about-contact__btn { padding: 8px 16px; border-color: var(--about-copper); background: var(--about-copper); color: #fff; font-size: 16px; line-height: 24px; }
.dm-about-contact__btn:hover { background: transparent; color: var(--about-copper); }

/* ── Policy ───────────────────────────────────────────── */
.dm-about-policy { display: flex; flex-direction: column; gap: 24px; }
.dm-about-policy__block { display: flex; flex-direction: column; gap: 16px; }
.dm-about-policy__heading { display: flex; align-items: center; gap: 8px; }
.dm-about-policy__heading > img { flex-shrink: 0; width: 32px; height: 32px; }

/* ── ≥768px: tablet frame (768w, 720 content) ─────────── */
@media (min-width: 768px) {
	.dm-about__container { padding-inline: 24px; }
	.dm-about__section { padding-block: 56px; }
	.dm-about__h2 { font-size: 30px; line-height: 45px; }
	.dm-about__br-mobile { display: none; }

	.dm-about-hero { align-items: center; min-height: 400px; padding: 24px; }
	.dm-about-hero__bg { top: 0; left: 0; width: 100%; height: 100%; }
	.dm-about-hero__shade { background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,.56)); }
	.dm-about-hero__title { font-size: 48px; line-height: 60px; }
	.dm-about-hero__text { max-width: 532px; margin-inline: auto; }

	.dm-about-intro__card { gap: 32px; padding: 32px 40px; }

	.dm-about-authentic__frame { height: 520px; padding: 32px; border-radius: 40px; }
	.dm-about-authentic__badge { font-size: 24px; line-height: 36px; }

	.dm-about-why__grid { gap: 16px; }

	.dm-about-trustpilot__inner { gap: 32px; }
	.dm-about-testimonials__nav { display: inline-flex; }

	.dm-about-brands__media { aspect-ratio: 348 / 298.8; }

	.dm-about-policy { gap: 32px; }
	.dm-about-policy__heading { align-items: flex-start; }
	.dm-about-policy__heading > img { width: 40px; height: 40px; }
}

/* ── ≥1024px: desktop frame (1440w, 1200 content) ─────── */
@media (min-width: 1024px) {
	.dm-about__section { padding-block: 60px; }
	.dm-about__br-desktop { display: inline; }

	.dm-about-hero { min-height: 480px; padding: 120px; }
	.dm-about-hero__inner { flex: 0 1 640px; }
	.dm-about-hero__text { max-width: none; }

	.dm-about-authentic { flex-direction: row; align-items: center; gap: 48px; }
	.dm-about-authentic__frame { flex-shrink: 0; width: 576px; }

	.dm-about-why__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }

	.dm-about-brands__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.dm-about-brands__media { aspect-ratio: 220.8 / 169; }

	.dm-about-contact__lines { display: block; }
	.dm-about-contact__inner { flex-direction: row; align-items: flex-start; gap: 48px; }

	.dm-about-policy { gap: 48px; }
}

/* ── ≥1360px: testimonial arrows sit outside the 1200 content, as in the design ── */
@media (min-width: 1360px) {
	.dm-about-testimonials { width: calc(100% + 104px); margin-inline: -52px; }
}