/* ==========================================================================
   The Doggos — [doggos_product_grid] · Polaroid card system
   --------------------------------------------------------------------------
   Native cinematic product grid. Used by the [doggos_product_grid] shortcode
   for the homepage post-hero placement, and reused by the full cinematic
   block when present.

   Design tokens are defined locally on .dcx-grid-section so this file works
   STANDALONE (no dependency on cinematic.css being loaded). The 7-scene
   bundle declares the same tokens on .dcx-shell — both scopes coexist
   without conflict.

   Polaroid card recipe (v1 verbatim — restored in v3.7):
     - bone background, ink border, big offset shadow (6px 6px 0 ink)
     - alternating tilt left/right, neutralised on hover with a -2,-2 lift
     - mono No. 0X kicker, serif H3 name, mono price
     - native ATC button styled as a chunky neo-brutalist pill (chartreuse)
     - WC sale flash + doggos-product-badges land inside .dcx-card-img absolutely
   ========================================================================== */

.dcx-grid-section {
	/* tokens — mirror of cinematic.css */
	--dcx-lavender:      #f5f0fa;
	--dcx-lavender-deep: #e8d9f3;
	--dcx-mint:          #ecf5ee;
	--dcx-cream:         #fdfaf3;
	--dcx-cream-deep:    #f7eed9;
	--dcx-peach:         #fdeee0;
	--dcx-peach-deep:    #f9d9c4;
	--dcx-bone:          #faf6ee;
	--dcx-blush:         #fde0e7;
	--dcx-sky:           #dde9f5;
	--dcx-lime:          #aac527;
	--dcx-lime-soft:     #d8e57a;
	--dcx-lime-glow:     #c4d94e;
	--dcx-sage-dark:     #2a3818;
	--dcx-sage:          #5a6e3f;
	--dcx-rust:          #b87b4a;
	--dcx-turmeric:      #d4a83a;
	--dcx-ink:           #1f2a14;
	--dcx-ink-soft:      #3a4530;
	--dcx-ink-mute:      #6a7560;
	--dcx-on-dark:       #f5f0e3;
	--dcx-rule:          rgba(31, 42, 20, 0.14);
	--dcx-radius:        14px;
	--dcx-radius-lg:     22px;
	--dcx-font-display:  'Fraunces','DM Serif Display',Georgia,serif;
	--dcx-font-body:     'Bricolage Grotesque','General Sans',-apple-system,BlinkMacSystemFont,sans-serif;
	--dcx-font-mono:     'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
	--dcx-ease:          cubic-bezier(0.22, 1, 0.36, 1);

	position: relative;
	padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 64px);
	font-family: var(--dcx-font-body);
	color: var(--dcx-ink);
	-webkit-font-smoothing: antialiased;
}
.dcx-grid-section, .dcx-grid-section *, .dcx-grid-section *::before, .dcx-grid-section *::after { box-sizing: border-box; }

/* Section background variants */
.dcx-grid-section--bg.dcx-grid-section--white    { background: #ffffff; }
.dcx-grid-section--bg.dcx-grid-section--peach    { background: var(--dcx-peach); }
.dcx-grid-section--bg.dcx-grid-section--cream    { background: var(--dcx-cream); }
.dcx-grid-section--bg.dcx-grid-section--lavender { background: var(--dcx-lavender); }
.dcx-grid-section--bg.dcx-grid-section--mint     { background: var(--dcx-mint); }
.dcx-grid-section--bg.dcx-grid-section--bone     { background: var(--dcx-bone); }
.dcx-grid-section--bg.dcx-grid-section--blush    { background: var(--dcx-blush); }
.dcx-grid-section--bg.dcx-grid-section--sky      { background: var(--dcx-sky); }

/* Optional headline */
.dcx-grid-head {
	max-width: 1280px;
	margin: 0 auto clamp(28px, 4vw, 56px);
	text-align: center;
}
.dcx-grid-head .dcx-mono {
	font-family: var(--dcx-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dcx-ink-soft);
	margin: 0 0 12px;
}
.dcx-grid-head .dcx-h2 {
	font-family: var(--dcx-font-display);
	font-weight: 800;
	font-size: clamp(36px, 5.6vw, 72px);
	line-height: 1.04;
	letter-spacing: -0.025em;
	margin: 0;
}
.dcx-grid-head .dcx-em {
	position: relative;
	font-style: italic;
	color: var(--dcx-lime);
	display: inline-block;
}
.dcx-grid-head .dcx-em::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: -2px;
	height: 14px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14'><path d='M2 10 Q 50 2 100 8 T 198 6' stroke='%23d4a83a' stroke-width='3' fill='none' stroke-linecap='round'/></svg>") no-repeat;
	background-size: 100% 100%;
	z-index: -1;
}

/* Reveal-on-scroll (handled by cinematic.js on [data-dcx-reveal]) */
.dcx-grid-section [data-dcx-reveal] {
	opacity: 0;
	transform: translate3d(0, 22px, 0);
	transition: opacity 0.85s var(--dcx-ease), transform 0.85s var(--dcx-ease);
}
.dcx-grid-section [data-dcx-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.dcx-grid-section [data-dcx-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---- The grid ---- */
.dcx-grid-list {
	max-width: 1280px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(20px, 3vw, 40px);
	row-gap: clamp(28px, 4vw, 56px); /* extra room for offset shadow */
}
@media (min-width: 760px) {
	.dcx-grid-list[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
	.dcx-grid-list[data-cols="4"] { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
	.dcx-grid-list[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Card frame ---- */
.dcx-card {
	position: relative;
	background: var(--dcx-bone);
	border: 1.5px solid var(--dcx-ink);
	border-radius: var(--dcx-radius);
	padding: 12px 12px 16px;
	box-shadow: 6px 6px 0 var(--dcx-ink);
	transition: transform .35s var(--dcx-ease), box-shadow .35s var(--dcx-ease);
	display: flex;
	flex-direction: column;
}
.dcx-card--left  { transform: rotate(-1.6deg); }
.dcx-card--right { transform: rotate(1.4deg);  }
.dcx-card--flat  { transform: rotate(0); }
.dcx-card:hover {
	transform: rotate(0) translate(-2px, -2px);
	box-shadow: 10px 10px 0 var(--dcx-ink);
	z-index: 2;
}

/* ---- Image area ---- */
.dcx-card-img {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 8px;
	overflow: hidden;
	background: var(--dcx-cream-deep);
	margin-bottom: 14px;
	display: block;
}
.dcx-card-img-link {
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	border-radius: 8px;
}
.dcx-card-img-link:focus-visible {
	outline: 2px solid var(--dcx-lime);
	outline-offset: 2px;
}
.dcx-card-img-link img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--dcx-ease);
}
.dcx-card:hover .dcx-card-img-link img { transform: scale(1.04); }

/* Our own sale flash (we don't fire the WC hook, see grid shortcode comment) */
.dcx-card-sale {
	position: absolute;
	top: 10px; left: 10px;
	z-index: 3;
	background: var(--dcx-ink);
	color: var(--dcx-lime-soft);
	font-family: var(--dcx-font-mono);
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 999px;
	box-shadow: 2px 2px 0 var(--dcx-lime);
	line-height: 1;
	pointer-events: none;
}

/* WooCommerce sale flash inside our image area */
.dcx-card-img .onsale,
.dcx-card-img .woocommerce-onsale {
	position: absolute;
	top: 10px; left: 10px;
	background: var(--dcx-ink) !important;
	color: var(--dcx-lime-soft) !important;
	font-family: var(--dcx-font-mono) !important;
	font-size: 9px !important;
	font-weight: 600 !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
	padding: 5px 10px !important;
	border-radius: 999px !important;
	border: 0 !important;
	box-shadow: 2px 2px 0 var(--dcx-lime);
	z-index: 3;
	margin: 0 !important;
	min-height: 0 !important;
	min-width: 0 !important;
	line-height: 1 !important;
	right: auto !important;
}

/* doggos-product-badges plugin output — keep visible and stylistically inline */
.dcx-card-img .doggos-product-badges {
	position: absolute;
	top: 10px; right: 10px;
	left: auto !important;
	bottom: auto !important;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 4px;
	max-width: 60%;
}
.dcx-card-img .doggos-product-badges > * {
	background: var(--dcx-lime) !important;
	color: var(--dcx-ink) !important;
	font-family: var(--dcx-font-mono) !important;
	font-size: 9px !important;
	font-weight: 600 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	padding: 5px 10px !important;
	border-radius: 999px !important;
	border: 1px solid var(--dcx-ink) !important;
	box-shadow: 2px 2px 0 var(--dcx-ink);
	line-height: 1 !important;
}

/* ---- Caption ---- */
.dcx-card-cap {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0 4px;
}
.dcx-card-num {
	font-family: var(--dcx-font-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dcx-ink-mute);
}
.dcx-card-name-link {
	display: inline-block;
	text-decoration: none !important;
	color: inherit;
}
.dcx-card-name-link:hover .dcx-card-name { color: var(--dcx-sage-dark) !important; }
.dcx-card-name-link:focus-visible {
	outline: 2px solid var(--dcx-lime);
	outline-offset: 2px;
	border-radius: 4px;
}
.dcx-card-name {
	font-family: var(--dcx-font-display) !important;
	font-weight: 800 !important;
	font-size: clamp(16px, 1.6vw, 19px) !important;
	line-height: 1.2 !important;
	color: var(--dcx-ink) !important;
	margin: 0 !important;
	letter-spacing: -0.01em !important;
	transition: color .25s var(--dcx-ease);
}
.dcx-card-price {
	font-family: var(--dcx-font-mono);
	font-size: 13px;
	font-weight: 600;
	color: var(--dcx-sage-dark);
	margin-top: 2px;
}
.dcx-card-price del {
	opacity: 0.5;
	margin-right: 6px;
	font-weight: 500;
}
.dcx-card-price ins {
	text-decoration: none;
}
.dcx-card-price .woocommerce-Price-amount,
.dcx-card-price bdi { color: inherit; font-family: inherit; }

/* ---- ATC row (sibling of .dcx-card-link, lives at bottom of card) ----
   POLISH (v3.7): button is now LIME pill with ink text + ink offset shadow.
   Hover flips to ink-on-lime — keeps the chunky neo-brutalist feel but the
   brand chartreuse is the resting state, which pops on the bone surface. */
.dcx-card-atc-row {
	margin-top: 14px;
	padding: 0 4px;
	display: flex;
	justify-content: stretch;
}
.dcx-card-atc {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--dcx-lime) !important;
	color: var(--dcx-ink) !important;
	border: 1.5px solid var(--dcx-ink) !important;
	border-radius: 999px !important;
	padding: 11px 18px !important;
	font-family: var(--dcx-font-mono) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	text-decoration: none !important;
	box-shadow: 3px 3px 0 var(--dcx-ink) !important;
	transition: transform .25s var(--dcx-ease), box-shadow .25s var(--dcx-ease), background .25s ease, color .25s ease !important;
	cursor: pointer;
	width: 100%;
	min-height: 0 !important;
	line-height: 1 !important;
}
.dcx-card-atc:hover {
	transform: translate(-1px, -1px);
	box-shadow: 5px 5px 0 var(--dcx-ink) !important;
	background: var(--dcx-ink) !important;
	color: var(--dcx-lime) !important;
}
.dcx-card-atc:focus-visible {
	outline: 2px solid var(--dcx-ink);
	outline-offset: 3px;
}

/* WooCommerce's "added" / loading states */
.dcx-card-atc.added {
	background: var(--dcx-ink) !important;
	color: var(--dcx-lime) !important;
	box-shadow: 3px 3px 0 var(--dcx-lime) !important;
}
.dcx-card-atc.loading {
	opacity: 0.7;
	pointer-events: none;
}
.dcx-card-atc.loading::after {
	content: '';
	width: 12px; height: 12px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: dcx-spin .7s linear infinite;
	margin-left: 6px;
}
@keyframes dcx-spin { to { transform: rotate(360deg); } }

/* The "View cart" link WC injects after success — tuck it under the button */
.dcx-card-atc-row + .added_to_cart,
.dcx-card .added_to_cart {
	display: inline-block;
	margin: 8px auto 0;
	font-family: var(--dcx-font-mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dcx-sage-dark);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Reduced motion lower-bound */
@media (prefers-reduced-motion: reduce) {
	.dcx-card,
	.dcx-card:hover,
	.dcx-card:hover .dcx-card-img-link img,
	.dcx-card-atc,
	.dcx-card-atc:hover { transition: none !important; transform: none !important; }
}