/* ============================================
   DOG WIDGETS — shared design tokens
   Colors/type pulled from the Boomax design system
   ============================================ */
:root {
	--dog-navy: #000047;
	--dog-blue: #0041c4;
	--dog-blue-hover: #00359f;
	--dog-blue-active: #002b82;
	--dog-blue-soft: #edf3ff;
	--dog-blue-border: #c9d8fa;
	--dog-yellow: #ffffa9;
	--dog-border-soft: #e7ecf5;
	--dog-muted: #667085;
	--dog-canvas: #ffffff;
	--dog-radius-card: 24px;
	--dog-radius-btn: 9999px;
	--dog-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--dog-font: "Manrope", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ============================================
   1) CATEGORY CARD — whole card is the link
   Exact sizing from Boomax source (.bx-cats)
   ============================================ */
.dog-cat-card {
	display: flex;
	flex-direction: column;
	background: var(--dog-canvas);
	border: 1px solid var(--dog-border-soft);
	border-radius: 24px;
	box-sizing: border-box;
	padding: 14px;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 220ms var(--dog-ease), box-shadow 220ms var(--dog-ease), transform 220ms var(--dog-ease);
	font-family: var(--dog-font);
}
.dog-cat-card:hover {
	border-color: var(--dog-blue-border);
	box-shadow: 0 8px 24px rgba(0, 0, 71, 0.06);
	transform: translateY(-2px);
}
.dog-cat-card:active {
	transform: none;
}
.dog-cat-card:focus-visible {
	outline: 3px solid var(--dog-blue);
	outline-offset: 2px;
}

.dog-cat-card__media {
	aspect-ratio: 16 / 10;
	background: #ffffff;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.dog-cat-card__media img,
.dog-cat-card__media svg {
	width: clamp(88px, 36%, 120px);
	height: auto;
}
.dog-cat-card__media i {
	font-size: clamp(64px, 30%, 96px);
	color: var(--dog-blue);
}

.dog-cat-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 10px;
	padding: 22px 14px 12px;
	box-sizing: border-box;
}
.dog-cat-card__title {
	font-size: 24px;
	font-weight: 700;
	line-height: 1.22;
	color: var(--dog-navy);
	margin: 0;
}
@media (max-width: 1023px) {
	.dog-cat-card__title { font-size: 23px; }
}
@media (max-width: 767px) {
	.dog-cat-card__title { font-size: 22px; }
}
.dog-cat-card__desc {
	font-size: 15px;
	line-height: 1.55;
	color: var(--dog-muted);
	margin: 0;
}
.dog-cat-card__btn {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	min-height: 46px;
	padding: 0 22px;
	border-radius: var(--dog-radius-btn);
	background: var(--dog-blue);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	box-sizing: border-box;
	pointer-events: none; /* card itself is the click target */
}
/* Grid wrapper helper, optional — 2-up on desktop, 1-up on mobile */
.dog-cat-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
@media (max-width: 767px) {
	.dog-cat-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* Equal-height cards: plain CSS Grid stretches children by default
   (align-items: stretch), which is the ENTIRE mechanism the source
   relies on — no explicit height rule exists there.
   If cards aren't matching height, check the Elementor Grid container's
   Align Items setting — it must be "Stretch" on every breakpoint. If
   it's set to "Center" or "Start" instead, that setting is actively
   overriding CSS Grid's default and no CSS here can compensate for it
   without causing the mismatched-height/overflow issues you saw.
   This rule is just a safety net for the two extra wrapper divs
   Elementor injects between the grid cell and the actual card. */
.elementor-widget-dog-category-card,
.elementor-widget-dog-category-card > .elementor-widget-container {
	height: 100%;
}
.dog-cat-card {
	height: 100%;
}

/* ============================================
   2) PRODUCT CAROUSEL CARD
   ============================================ */
.dog-carousel {
	font-family: var(--dog-font);
	max-width: 100%;
}
.dog-carousel__viewport {
	position: relative;
	overflow: hidden;
}
.dog-carousel__track {
	display: flex;
	transition: transform 380ms var(--dog-ease);
	will-change: transform;
}
.dog-carousel__slide {
	flex: 0 0 100%;
	min-width: 0;
	display: grid;
	grid-template-columns: minmax(200px, 42%) minmax(0, 1fr);
	gap: 40px;
	align-items: center;
	background: var(--dog-canvas);
	border: 1px solid var(--dog-border-soft);
	border-radius: var(--dog-radius-card);
	padding: 40px;
	box-sizing: border-box;
}
@media (max-width: 767px) {
	.dog-carousel__slide {
		grid-template-columns: 1fr;
		padding: 24px;
		gap: 24px;
	}
}
.dog-carousel__media {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff;
	border-radius: 16px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}
.dog-carousel__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 16px;
	box-sizing: border-box;
}
.dog-carousel__eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	color: var(--dog-muted);
	margin: 0 0 8px;
}
.dog-carousel__title {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--dog-navy);
	margin: 0 0 14px;
}
.dog-carousel__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 16px;
}
.dog-carousel__price-amount {
	font-size: 24px;
	font-weight: 700;
	color: var(--dog-navy);
}
.dog-carousel__price-label {
	font-size: 14px;
	color: var(--dog-muted);
}
.dog-carousel__desc {
	font-size: 15px;
	line-height: 1.65;
	color: var(--dog-muted);
	margin: 0 0 24px;
}
.dog-carousel__actions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	max-width: 420px;
}
@media (max-width: 479px) {
	.dog-carousel__actions {
		grid-template-columns: 1fr;
		max-width: none;
	}
}
.dog-carousel__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 24px;
	border-radius: var(--dog-radius-btn);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background 220ms var(--dog-ease);
	box-sizing: border-box;
}
.dog-carousel__btn--quote {
	background: var(--dog-blue-soft);
	color: var(--dog-blue);
	border: 1.5px solid transparent;
}
.dog-carousel__btn--quote:hover {
	background: #dcebff;
	color: var(--dog-blue);
}
.dog-carousel__btn--details {
	background: #fff;
	color: var(--dog-navy);
	border: 1.5px solid var(--dog-border-soft);
}
.dog-carousel__btn--details:hover {
	background: #f4f7fc;
	color: var(--dog-navy);
}

/* Controls: arrows + dots + counter */
.dog-carousel__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: 24px;
}
.dog-carousel__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--dog-border-soft);
	color: var(--dog-navy);
	cursor: pointer;
	transition: background 220ms var(--dog-ease), border-color 220ms var(--dog-ease);
	flex-shrink: 0;
}
.dog-carousel__arrow:hover {
	background: var(--dog-blue-soft);
	border-color: var(--dog-blue-border);
}
.dog-carousel__arrow:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}
.dog-carousel__dots {
	display: flex;
	align-items: center;
	gap: 8px;
}
.dog-carousel__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--dog-border-soft);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: background 220ms var(--dog-ease), transform 220ms var(--dog-ease);
}
.dog-carousel__dot.is-active {
	background: var(--dog-blue);
	transform: scale(1.2);
}
.dog-carousel__counter {
	font-size: 14px;
	color: var(--dog-muted);
	min-width: 44px;
}

/* ============================================
   3) REVIEW CARD
   ============================================ */
.dog-review-card {
	font-family: var(--dog-font);
	background: var(--dog-canvas);
	border: 1px solid var(--dog-border-soft);
	border-radius: 20px;
	padding: 28px;
}
.dog-review-card__head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}
.dog-review-card__stars {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 28px;
	padding: 0 12px;
	border-radius: var(--dog-radius-btn);
	background: var(--dog-navy);
	color: var(--dog-yellow);
	font-size: 12px;
	letter-spacing: 1px;
}
.dog-review-card__badge {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dog-muted);
}
.dog-review-card__quote {
	font-size: 16px;
	line-height: 1.65;
	color: var(--dog-navy);
	margin: 0 0 20px;
}
.dog-review-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}
.dog-review-card__name {
	font-size: 15px;
	font-weight: 700;
	color: var(--dog-navy);
}
.dog-review-card__link {
	font-size: 14px;
	font-weight: 700;
	color: var(--dog-blue);
	text-decoration: none;
	white-space: nowrap;
}
.dog-review-card__link:hover {
	color: var(--dog-blue-hover);
	text-decoration: underline;
}