/* ==========================================================================
   Doxa Print — Imagely / NextGEN Gallery Pro skin
   Selectors match on Imagely's class/id prefixes (ngg-, ngg_pro, nextgen_pro,
   nggpl) rather than exact names, because they vary between releases.
   VERIFY against the installed plugin and tighten where needed.

   Many visual settings live in the plugin, not CSS. Set these in
   Imagely → Gallery Settings / Ecommerce Settings:
     Pro Lightbox background ....... #1F2419
     Pro Lightbox icon/text color .. #EAE2BE
     Sidebar background ............ #2B3123
     Carousel text color ........... #F4F0E6
     Watermark image ............... assets/images/lettermark-parchment.png, 25%
   ========================================================================== */

/* ---- Thumbnails / grids ------------------------------------------------- */
:is(.ngg-galleryoverview, [class*="nextgen_pro"]) img {
	border-radius: 0;
	transition: transform 420ms var(--wp--custom--ease), opacity 220ms var(--wp--custom--ease);
}
:is(.ngg-gallery-thumbnail, [class*="nextgen_pro"] .image-wrapper) {
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}
:is(.ngg-gallery-thumbnail, [class*="nextgen_pro"] .image-wrapper):hover img {
	transform: scale(1.03);
}
.ngg-gallery-thumbnail {
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.ngg-gallery-thumbnail span,
[class*="nextgen_pro"] .ngg-caption {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
	color: var(--wp--preset--color--contrast);
}

/* Pagination */
.ngg-navigation {
	display: flex;
	justify-content: center;
	gap: 0.25rem;
	margin-block: var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--sm);
}
.ngg-navigation :is(a, span) {
	min-width: 2.5rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--wp--preset--color--border) !important;
	background: transparent !important;
	color: var(--wp--preset--color--contrast) !important;
	text-decoration: none;
	border-radius: 2px;
}
.ngg-navigation .current {
	background: var(--wp--preset--color--primary) !important;
	border-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--on-primary) !important;
}

/* Albums */
.ngg-album {
	border: 1px solid var(--wp--preset--color--border) !important;
	background: var(--wp--preset--color--surface) !important;
	padding: var(--wp--preset--spacing--40) !important;
}
.ngg-album :is(.ngg-albumtitle, h4) {
	font-family: var(--wp--preset--font-family--display) !important;
	font-size: var(--wp--preset--font-size--xl) !important;
	font-weight: 500 !important;
	color: var(--wp--preset--color--heading) !important;
}

/* ---- Ecommerce: buttons ------------------------------------------------- */
:is([class*="ngg_pro"], [id^="ngg_pro"], [class*="nggpl"], [id^="nggpl"], [class*="ngg-add-to-cart"]) :is(button, input[type="submit"], input[type="button"], .button, a.ngg_pro_btn),
:is(.ngg_pro_btn, .ngg-add-to-cart, .ngg_add_to_cart) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0 1.5rem !important;
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: var(--wp--preset--font-size--sm) !important;
	font-weight: 500 !important;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--on-primary) !important;
	background: var(--wp--preset--color--primary) !important;
	border: 1px solid var(--wp--preset--color--primary) !important;
	border-radius: 2px !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background 220ms var(--wp--custom--ease);
}
:is([class*="ngg_pro"], [id^="ngg_pro"], [class*="nggpl"], [id^="nggpl"]) :is(button, input[type="submit"], .button):hover,
:is(.ngg_pro_btn, .ngg-add-to-cart):hover {
	background: var(--wp--preset--color--primary-hover) !important;
	border-color: var(--wp--preset--color--primary-hover) !important;
}

/* ---- Ecommerce: pricelist, cart and checkout tables --------------------- */
:is([class*="ngg_pro"], [id^="ngg_pro"], [class*="nggpl"], [id^="nggpl"]) table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
	background: transparent !important;
}
:is([class*="ngg_pro"], [id^="ngg_pro"], [class*="nggpl"], [id^="nggpl"]) :is(th, td) {
	padding: 0.85rem 0.75rem !important;
	border: 0 !important;
	border-bottom: 1px solid var(--wp--preset--color--border) !important;
	background: transparent !important;
	color: var(--wp--preset--color--contrast) !important;
	text-align: left;
	vertical-align: middle;
}
:is([class*="ngg_pro"], [id^="ngg_pro"], [class*="nggpl"], [id^="nggpl"]) th {
	font-size: var(--wp--preset--font-size--xs) !important;
	font-weight: 500 !important;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	color: var(--wp--preset--color--muted) !important;
}
:is([class*="ngg_pro"], [id^="ngg_pro"], [class*="nggpl"], [id^="nggpl"]) tr:hover td {
	background: color-mix(in srgb, var(--wp--preset--color--surface) 60%, transparent) !important;
}

/* Category headings in the pricelist ("Prints", "Digital downloads") */
:is([class*="nggpl"], [id^="nggpl"]) :is(h3, h4, .nggpl-category_header, [class*="category_header"]) {
	font-family: var(--wp--preset--font-family--display) !important;
	font-size: var(--wp--preset--font-size--xl) !important;
	font-weight: 500 !important;
	color: var(--wp--preset--color--heading) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

/* Inputs inside cart/checkout (quantity, address, coupon) */
:is([class*="ngg_pro"], [id^="ngg_pro"], [class*="nggpl"], [id^="nggpl"]) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea) {
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem !important;
	font: inherit !important;
	color: var(--wp--preset--color--contrast) !important;
	background: var(--wp--preset--color--surface) !important;
	border: 1px solid var(--wp--preset--color--border) !important;
	border-radius: 2px !important;
}
:is([class*="ngg_pro"], [id^="ngg_pro"], [class*="nggpl"], [id^="nggpl"]) input[type="number"] {
	width: 5rem;
	text-align: center;
}

/* Totals */
:is([class*="ngg_pro"], [id^="ngg_pro"]) :is(.total, [class*="total"]) {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* ---- Pro Lightbox sidebar (comments / buy panel) ------------------------ */
:is(#npl_wrapper, [id^="npl_"], .nggpl-sidebar, [class*="nggpl-sidebar"]) {
	font-family: var(--wp--preset--font-family--body) !important;
}
:is(#npl_wrapper, [id^="npl_"]) :is(h2, h3, h4, .nggpl-sidebar-title) {
	font-family: var(--wp--preset--font-family--display) !important;
	font-weight: 500 !important;
}