/**
 * Drive Gallery – front-end styles.
 *
 * Minimalist CSS Grid gallery. Images keep their natural aspect
 * ratio and are never cropped. Column counts are injected as CSS
 * custom properties by assets/js/drive-gallery.js from the values
 * configured in the admin screen.
 *
 * @package DriveGallery
 */

/* --------------------------------------------------------- Reset
   Themes routinely style every <button> on the page — Elementor and
   most commercial themes give them a brand background, padding and a
   min-width. Our arrows and dots are buttons, so without this they
   inherit that styling and turn into large coloured blocks.

   Specificity is deliberate: the reset is (0,1,1) and every rule that
   styles our own controls below is at least (0,2,0), so our styles
   always win over the reset while the reset still beats plain
   `button {}` theme rules. A handful of !important flags remain on the
   sizing of the dots, because some themes use !important themselves and
   a 7px dot inflated by inherited padding is unusable. */

.drive-gallery button:not(.drive-gallery__tag),
.drive-gallery-carousel button,
.drive-gallery-search button,
.drive-gallery__toolbar button {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	border: 0;
	background: none;
	box-shadow: none;
	text-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	font: inherit;
	min-width: 0;
	min-height: 0;
	width: auto;
	height: auto;
	line-height: normal;
}

.drive-gallery {
	--dg-columns: 4;
	--dg-gap: 16px;
	--dg-radius: 12px;

	margin: 0;
	padding: 0;
}

/* ---------------------------------------------------------------- Toolbar */

.drive-gallery__toolbar {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 20px;
}

.drive-gallery__toolbar[hidden] {
	display: none;
}

.drive-gallery__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.drive-gallery__search {
	position: relative;
	flex: 1 1 220px;
	max-width: 340px;
}

/* On its own row the box is no longer a flex child of the controls row,
   so the alignment modifiers take over. */
.drive-gallery__toolbar > .drive-gallery__search {
	flex: none;
	margin-bottom: 12px;
}

.drive-gallery__search--center {
	margin-left: auto;
	margin-right: auto;
}

.drive-gallery__search--right {
	margin-left: auto;
}

.drive-gallery__search--full {
	max-width: none;
	width: 100%;
}

.drive-gallery__search-icon {
	position: absolute;
	top: 50%;
	left: 16px;
	width: 17px;
	height: 17px;
	transform: translateY(-50%);
	opacity: 0.5;
	pointer-events: none;
}

.drive-gallery__search.has-icon .drive-gallery__search-input {
	padding-left: 42px;
}

.drive-gallery__search-input {
	width: 100%;
	padding: 9px 16px;
	font-size: 0.95em;
	line-height: 1.3;
	color: inherit;
	background: rgba(0, 0, 0, 0.04);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 999px;
	outline: none;
	transition: border-color 0.2s ease, background 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.drive-gallery__search-input:focus {
	background: rgba(0, 0, 0, 0.02);
	border-color: rgba(0, 0, 0, 0.3);
}

.drive-gallery__sort {
	padding: 9px 14px;
	font-size: 0.95em;
	color: inherit;
	background: rgba(0, 0, 0, 0.04);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 999px;
	cursor: pointer;
	outline: none;
	transition: border-color 0.2s ease;
}

.drive-gallery__sort:focus {
	border-color: rgba(0, 0, 0, 0.3);
}

.drive-gallery__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* ------------------------------------------------ Tag row alignment */

.drive-gallery__tags--align-center {
	justify-content: center;
}

/* Justified: each chip grows to share the leftover space, so every row
   reaches both edges instead of leaving a ragged right side. The last
   row is capped so a lone chip doesn't stretch across the whole width,
   which would read as a banner rather than a filter. */
.drive-gallery__tags.drive-gallery__tags--pill.drive-gallery__tags--align-justify .drive-gallery__tag {
	flex: 1 1 auto;
	justify-content: center;
	max-width: 100%;
}

.drive-gallery__tags--pill.drive-gallery__tags--align-justify {
	justify-content: space-between;
}

/* The minimal style is a grid, so justification means equal columns
   that fill the row rather than flexible widths. */
.drive-gallery__tags--minimal.drive-gallery__tags--align-justify {
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.drive-gallery__tags.drive-gallery__tags--minimal.drive-gallery__tags--align-center .drive-gallery__tag {
	justify-content: center;
	gap: 8px;
}

/* Minimal style: a bordered grid of underlined links with a trailing
   arrow, for a restrained, institutional look. */

.drive-gallery__tags--minimal {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.drive-gallery__tags.drive-gallery__tags--minimal .drive-gallery__tag {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px;
	background: none;
	border: 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	border-right: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 0;
	font-size: 0.95em;
	text-align: left;
	color: var(--dg-tag-color, inherit);
	transition: background 0.2s ease;
}

.drive-gallery__tags.drive-gallery__tags--minimal .drive-gallery__tag::after {
	content: "→";
	text-decoration: none;
	opacity: 0.85;
	flex-shrink: 0;
}

.drive-gallery__tags.drive-gallery__tags--minimal .drive-gallery__tag:hover {
	background: rgba(0, 0, 0, 0.03);
}

.drive-gallery__tags.drive-gallery__tags--minimal .drive-gallery__tag.is-active {
	background: var(--dg-tag-active-bg, rgba(0, 0, 0, 0.05));
	color: var(--dg-tag-active-color, inherit);
	font-weight: 500;
}

.drive-gallery__tags.drive-gallery__tags--minimal .drive-gallery__tag-count {
	margin-left: auto;
	margin-right: 4px;
}

.drive-gallery__tags.drive-gallery__tags--minimal .drive-gallery__tag-icon {
	margin-right: 2px;
}

/* --------------------------------------------------- Standalone search */

.drive-gallery-search {
	display: flex;
	gap: 8px;
	align-items: center;
	max-width: 420px;
}

.drive-gallery-search__input {
	flex: 1;
	padding: 11px 18px;
	font-size: 0.95em;
	line-height: 1.3;
	color: inherit;
	background: var(--dg-tag-bg, rgba(0, 0, 0, 0.04));
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 999px;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color 0.2s ease;
}

.drive-gallery-search__input:focus {
	border-color: rgba(0, 0, 0, 0.3);
}

.drive-gallery-search__submit {
	padding: 11px 20px;
	font-size: 0.95em;
	color: var(--dg-tag-active-color, #fff);
	background: var(--dg-tag-active-bg, #111);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.drive-gallery__tags--pill .drive-gallery__tag {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 6px 14px;
	font-size: 0.88em;
	line-height: 1.3;
	/* --dg-tag-* are set from the admin "Tag appearance" settings;
	   when unset the chips inherit the theme's own colours. */
	color: var(--dg-tag-color, inherit);
	background: var(--dg-tag-bg, rgba(0, 0, 0, 0.05));
	border: 1px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.drive-gallery__tag-icon {
	width: 18px;
	height: 18px;
	border-radius: 4px;
	object-fit: cover;
	flex-shrink: 0;
}

/* Standard tag style: use the same compact button geometry users
   expect from the theme's normal action buttons, while still respecting
   the Drive Gallery colour settings. */
.drive-gallery__tags--standard .drive-gallery__tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 10px 18px;
	min-width: 0;
	font: inherit;
	font-size: 0.95em;
	line-height: 1.25;
	font-weight: 500;
	color: var(--dg-tag-color, inherit);
	background: var(--dg-tag-bg, transparent);
	border: 1px solid transparent;
	border-radius: 8px;
	box-shadow: none;
	text-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.drive-gallery__tags--standard .drive-gallery__tag:hover {
	background: var(--dg-tag-active-bg, var(--dg-tag-bg, transparent));
	color: var(--dg-tag-active-color, var(--dg-tag-color, inherit));
}

.drive-gallery__tags--standard .drive-gallery__tag:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.drive-gallery__tags--standard .drive-gallery__tag.is-active {
	color: var(--dg-tag-active-color, #fff);
	background: var(--dg-tag-active-bg, #111);
}

.drive-gallery__tags--standard .drive-gallery__tag-count {
	font-size: 0.82em;
	opacity: 0.65;
}

.drive-gallery__tags--standard .drive-gallery__tag-icon {
	width: 18px;
	height: 18px;
	border-radius: 4px;
	object-fit: cover;
	flex-shrink: 0;
}

/* --------------------------------------------------------- Carousel */

.drive-gallery-carousel {
	--dg-carousel-items: var(--dg-carousel-items-desktop, 4);
	--dg-carousel-items-desktop: 4;
	--dg-carousel-items-tablet: 3;
	--dg-carousel-items-mobile: 2;
	position: relative;
	margin: 0;
	padding: 0 44px;
}

.drive-gallery-carousel__track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - (var(--dg-carousel-items) - 1) * 14px) / var(--dg-carousel-items));
	gap: 14px;
	overflow-x: auto;
	/* "proximity", not "mandatory": mandatory snapping fights the
	   JS glide animation frame by frame and makes it stutter. This
	   still snaps a manual swipe to a slide edge. */
	scroll-snap-type: x proximity;
	/* Programmatic scrolling is animated in JS (configurable duration
	   and easing), so the browser's own fixed-speed smooth scroll must
	   stay out of the way. */
	scroll-behavior: auto;
	padding-bottom: 4px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.drive-gallery-carousel__track::-webkit-scrollbar {
	display: none;
}

.drive-gallery-carousel__slide {
	display: block;
	scroll-snap-align: start;
	border-radius: 12px;
	overflow: hidden;
	line-height: 0;
	background: rgba(0, 0, 0, 0.04);
	transition: transform 0.25s ease;
}

.drive-gallery-carousel__slide:hover,
.drive-gallery-carousel__slide:focus-visible {
	transform: translateY(-3px);
}

.drive-gallery-carousel__slide img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.drive-gallery-carousel .drive-gallery-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	border: 0;
	border-radius: 999px !important;
	/* Translucent white with a soft blur: the control sits over the
	   photos, so it should read as an overlay, never as a coloured
	   button competing with the image. */
	background: rgba(255, 255, 255, 0.9) !important;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: #1d1d1b !important;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	opacity: 0;
	transition: opacity 0.25s ease, background 0.2s ease;
}

/* Revealed on hover, and always available to keyboard users. */
.drive-gallery-carousel:hover .drive-gallery-carousel__arrow,
.drive-gallery-carousel .drive-gallery-carousel__arrow:focus-visible {
	opacity: 1;
}

.drive-gallery-carousel .drive-gallery-carousel__arrow svg {
	width: 15px;
	height: 15px;
}

.drive-gallery-carousel .drive-gallery-carousel__arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Touch devices have no hover, so the arrows would never appear. */
@media (hover: none) {
	.drive-gallery-carousel .drive-gallery-carousel__arrow {
		opacity: 1;
	}
}

/* ------------------------------------------------- Carousel dots */

.drive-gallery-carousel__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
}

.drive-gallery-carousel__dots[hidden] {
	display: none;
}

.drive-gallery-carousel .drive-gallery-carousel__dot {
	width: 6px !important;
	height: 6px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 999px !important;
	background: rgba(0, 0, 0, 0.16) !important;
	box-shadow: none !important;
	cursor: pointer;
	flex: 0 0 auto;
	transition: background 0.2s ease, width 0.2s ease;
}

.drive-gallery-carousel .drive-gallery-carousel__dot:hover {
	background: rgba(0, 0, 0, 0.32) !important;
}

.drive-gallery-carousel .drive-gallery-carousel__dot.is-active {
	/* Slightly wider rather than larger: the row keeps its height, so
	   nothing shifts as the carousel advances. */
	width: 14px !important;
	background: rgba(0, 0, 0, 0.55) !important;
}

.drive-gallery-carousel .drive-gallery-carousel__dot:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.drive-gallery-carousel .drive-gallery-carousel__arrow:hover {
	background: #f3f4f6;
}

.drive-gallery-carousel__arrow--prev {
	left: 0;
}

.drive-gallery-carousel__arrow--next {
	right: 0;
}

@media (max-width: 1024px) {
	.drive-gallery-carousel {
		--dg-carousel-items: var(--dg-carousel-items-tablet, 3);
	}
}

@media (max-width: 640px) {
	.drive-gallery-carousel {
		--dg-carousel-items: var(--dg-carousel-items-mobile, 2);
		padding: 0 36px;
	}
}


.drive-gallery__tags--pill .drive-gallery__tag:hover {
	background: rgba(0, 0, 0, 0.1);
}

.drive-gallery__tags--pill .drive-gallery__tag:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.drive-gallery__tags--pill .drive-gallery__tag.is-active {
	color: var(--dg-tag-active-color, #fff);
	background: var(--dg-tag-active-bg, #111);
}

.drive-gallery__tags--pill .drive-gallery__tag-count {
	font-size: 0.82em;
	opacity: 0.55;
}

.drive-gallery__tags--pill .drive-gallery__tag.is-active .drive-gallery__tag-count {
	opacity: 0.7;
}

/* ---------------------------------------------------------------- Grid */

.drive-gallery__grid {
	display: grid;
	grid-template-columns: repeat(var(--dg-columns), minmax(0, 1fr));
	gap: var(--dg-gap);
	align-items: start;
}

.drive-gallery__item {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	border-radius: var(--dg-radius);
	overflow: hidden;
	cursor: zoom-in;
	line-height: 0;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	will-change: transform;
}

.drive-gallery__item:hover,
.drive-gallery__item:focus-visible {
	transform: scale(1.02);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
}

.drive-gallery__item:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.drive-gallery__image {
	display: block;
	width: 100%;
	height: auto; /* Natural aspect ratio – never cropped. */
	border-radius: var(--dg-radius);
	opacity: 0;
	transition: opacity 0.4s ease;
}

.drive-gallery__image.is-loaded {
	opacity: 1;
}

/* Skeleton shimmer shown while each thumbnail loads. */
.drive-gallery__item.is-loading {
	background: linear-gradient(100deg, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.09) 50%, rgba(0, 0, 0, 0.05) 60%);
	background-size: 200% 100%;
	animation: drive-gallery-shimmer 1.4s ease infinite;
	min-height: 120px;
}

@keyframes drive-gallery-shimmer {
	to {
		background-position: -200% 0;
	}
}

/* Sentinel observed by IntersectionObserver for progressive loading. */
.drive-gallery__sentinel {
	width: 100%;
	height: 1px;
}

/* ------------------------------------------------------- Pagination */

.drive-gallery__pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 24px;
}

.drive-gallery .drive-gallery__page {
	min-width: 38px;
	margin: 0;
	padding: 8px 12px;
	font-size: 0.9em;
	line-height: 1.2;
	color: inherit;
	background: rgba(0, 0, 0, 0.05);
	border: 1px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.drive-gallery .drive-gallery__page:hover:not(:disabled) {
	background: rgba(0, 0, 0, 0.1);
}

.drive-gallery .drive-gallery__page:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.drive-gallery .drive-gallery__page.is-current {
	color: #fff;
	background: #111;
	cursor: default;
}

.drive-gallery .drive-gallery__page:disabled {
	opacity: 0.35;
	cursor: default;
}

.drive-gallery__page-ellipsis {
	padding: 0 4px;
	opacity: 0.5;
	user-select: none;
}

/* ------------------------------------------------------- Show more */

.drive-gallery__load-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 24px;
}

.drive-gallery__load-more-wrap[hidden] {
	display: none;
}

.drive-gallery .drive-gallery__load-more {
	padding: 11px 28px !important;
	font-size: 0.95em;
	line-height: 1.2;
	color: var(--dg-tag-active-color, #fff);
	background: var(--dg-tag-active-bg, #111);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: opacity 0.2s ease, transform 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.drive-gallery .drive-gallery__load-more:hover {
	opacity: 0.85;
}

.drive-gallery .drive-gallery__load-more:active {
	transform: scale(0.98);
}

.drive-gallery .drive-gallery__load-more:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Admin-only diagnostic shown when a shortcode matches nothing. */
.drive-gallery__diagnostic {
	padding: 14px 18px;
	border: 1px solid #d63638;
	border-radius: 6px;
	background: #fcf0f1;
	color: #1d2327;
	font-size: 14px;
	text-align: left;
	opacity: 1;
}

/* Error / empty message. */
.drive-gallery__message {
	padding: 1.5em 0;
	text-align: center;
	font-size: 0.95em;
	opacity: 0.7;
}

/* ------------------------------------------------------ Breakpoints */

/* Tablet. */
@media (max-width: 1024px) {
	.drive-gallery {
		--dg-columns: var(--dg-columns-tablet, 3);
		--dg-gap: 14px;
	}
}

/* Mobile. */
@media (max-width: 640px) {
	.drive-gallery {
		--dg-columns: var(--dg-columns-mobile, 2);
		--dg-gap: 10px;
		--dg-radius: 10px;
	}
}

/* Desktop (declared last only for clarity; base value wins above 1024px). */
@media (min-width: 1025px) {
	.drive-gallery {
		--dg-columns: var(--dg-columns-desktop, 4);
	}
}

/* -------------------------------------------------------- PhotoSwipe */

.pswp {
	--pswp-bg: #000;
}

.pswp__img {
	border-radius: 0;
}


/* ---------------------------------------------------- Highlights local preview */
.dg-highlights-lightbox-open { overflow: hidden; }
.dg-highlights-lightbox {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,.92);
	padding: clamp(16px, 3vw, 40px);
	box-sizing: border-box;
}
.dg-highlights-lightbox__figure {
	position: relative;
	z-index: 2;
	max-width: 94vw;
	max-height: 92vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.dg-highlights-lightbox__image {
	display: block;
	max-width: 94vw;
	max-height: 92vh;
	width: auto;
	height: auto;
	object-fit: contain;
	box-shadow: 0 12px 50px rgba(0,0,0,.45);
	border-radius: 2px;
	user-select: none;
	-webkit-user-drag: none;
}
.dg-highlights-lightbox__close,
.dg-highlights-lightbox__nav {
	position: fixed;
	z-index: 4;
	border: 0;
	background: rgba(0,0,0,.48);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	transition: background-color .2s ease, transform .2s ease;
	-webkit-tap-highlight-color: transparent;
}
.dg-highlights-lightbox__close:hover,
.dg-highlights-lightbox__nav:hover { background: rgba(0,0,0,.72); }
.dg-highlights-lightbox__close {
	top: 18px;
	right: 18px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	font-size: 32px;
	font-weight: 300;
}
.dg-highlights-lightbox__nav {
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 64px;
	font-size: 32px;
	border-radius: 8px;
}
.dg-highlights-lightbox__nav--prev { left: 18px; }
.dg-highlights-lightbox__nav--next { right: 18px; }
@media (max-width: 767px) {
	.dg-highlights-lightbox { padding: 10px; }
	.dg-highlights-lightbox__figure,
	.dg-highlights-lightbox__image { max-width: 100vw; max-height: 88vh; }
	.dg-highlights-lightbox__close { top: 10px; right: 10px; width: 42px; height: 42px; font-size: 29px; }
	.dg-highlights-lightbox__nav { width: 40px; height: 52px; font-size: 27px; background: rgba(0,0,0,.38); }
	.dg-highlights-lightbox__nav--prev { left: 7px; }
	.dg-highlights-lightbox__nav--next { right: 7px; }
}

/* ---------------------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce) {
	.drive-gallery__item,
	.drive-gallery__image,
	.drive-gallery__tag,
	.drive-gallery__page,
	.drive-gallery__load-more,
	.drive-gallery-carousel__arrow,
	.drive-gallery-carousel__dot {
		transition: none;
	}

	.drive-gallery__item:hover {
		transform: none;
	}

	.drive-gallery__item.is-loading {
		animation: none;
	}
}

/* Screen-reader-only helper (fallback for themes without it). */
.drive-gallery .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* Carousel preview/link additions. */
button.drive-gallery-carousel__slide { font: inherit; color: inherit; background: transparent; border: 0; padding: 0; text-align: inherit; cursor: pointer; }
.drive-gallery-carousel__link-wrap { display:flex; margin-top:18px; }
.drive-gallery-carousel__link-wrap--left { justify-content:flex-start; }
.drive-gallery-carousel__link-wrap--center { justify-content:center; }
.drive-gallery-carousel__link-wrap--right { justify-content:flex-end; }
.drive-gallery-carousel__link {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-height:44px;
	padding:var(--dg-carousel-btn-pad-y, 10px) var(--dg-carousel-btn-pad-x, 20px);
	border-radius:var(--dg-carousel-btn-radius, 6px);
	text-decoration:none;
	transition:background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/* Text: the discreet link shown in the supplied design. */
.drive-gallery-carousel__link--text {
	padding-left:0;
	padding-right:0;
	min-height:0;
	border:0;
	border-radius:0;
	background:transparent;
	color:var(--dg-carousel-btn-color, inherit);
}
.drive-gallery-carousel__link--text:hover,
.drive-gallery-carousel__link--text:focus-visible {
	color:var(--dg-carousel-btn-hover-color, var(--dg-carousel-btn-color, inherit));
	background:transparent;
}

/* Theme: leave the visual treatment to the active theme. */
.drive-gallery-carousel__link--theme {
	background:transparent;
	border:0;
	color:inherit;
}

/* Filled / Outline: use the same simple controls as the gallery tags,
   but with independent carousel colours. Empty colour values inherit. */
.drive-gallery-carousel__link--filled {
	background:var(--dg-carousel-btn-bg, #1d1d1b);
	color:var(--dg-carousel-btn-color, #fff);
	border:1px solid var(--dg-carousel-btn-border, var(--dg-carousel-btn-bg, #1d1d1b));
}
.drive-gallery-carousel__link--filled:hover,
.drive-gallery-carousel__link--filled:focus-visible {
	background:var(--dg-carousel-btn-hover-bg, var(--dg-carousel-btn-bg, #1d1d1b));
	color:var(--dg-carousel-btn-hover-color, var(--dg-carousel-btn-color, #fff));
}
.drive-gallery-carousel__link--outline {
	background:transparent;
	color:var(--dg-carousel-btn-color, inherit);
	border:1px solid var(--dg-carousel-btn-border, currentColor);
}
.drive-gallery-carousel__link--outline:hover,
.drive-gallery-carousel__link--outline:focus-visible {
	background:var(--dg-carousel-btn-hover-bg, transparent);
	color:var(--dg-carousel-btn-hover-color, var(--dg-carousel-btn-color, inherit));
	border-color:var(--dg-carousel-btn-hover-bg, var(--dg-carousel-btn-border, currentColor));
}