/**
 * 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; }
}

/* ------------------------------------- Description panel (2.15.0) */

/* Shared content of the panel, used by the gallery lightbox
   (PhotoSwipe) and by the carousel preview. */
.dg-details {
	box-sizing: border-box;
	color: #f1f1f1;
	background: #151515;
	font-size: 15px;
	line-height: 1.6;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	touch-action: pan-y;
	user-select: text;
	text-align: left;
}
.dg-details[hidden] { display: none; }
/* Themes and page builders style every h2 on the site (dark colour,
   large heading font); !important keeps the title readable on the
   panel's dark background whatever the theme says. */
.dg-details .dg-details__title {
	margin: 0 0 10px !important;
	padding: 0 !important;
	color: #fff !important;
	background: none !important;
	font-family: inherit !important;
	font-size: 22px !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-shadow: none !important;
}
.dg-details__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 16px;
	padding: 0;
}
.dg-details__chip {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(255,255,255,.12);
	color: #fff !important;
	font-size: 12px;
	line-height: 1.5;
}
.dg-details__text {
	white-space: pre-line;
	overflow-wrap: anywhere;
	color: #d9d9d9 !important;
}

/* Gallery lightbox: panel on the right, image on the left. */
.pswp .pswp__dg-details {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 5; /* Under the top bar (z-index 10), so "close" stays clickable. */
	width: var(--dg-details-width, 380px);
	padding: 64px 28px 28px;
	border-left: 1px solid rgba(255,255,255,.08);
}
.pswp.dg-pswp--details .pswp__button--arrow--next {
	right: var(--dg-details-width, 380px);
}
/* Phones: panel underneath the image. */
.pswp.dg-pswp--details-below .pswp__dg-details {
	top: auto;
	left: 0;
	width: auto;
	height: 42%;
	padding: 18px 18px 24px;
	border-left: 0;
	border-top: 1px solid rgba(255,255,255,.08);
}
.pswp.dg-pswp--details-below .pswp__button--arrow--next { right: 0; }
.pswp.dg-pswp--details-below .dg-details .dg-details__title { font-size: 19px !important; }

/* Carousel preview. */
.dg-highlights-lightbox.has-details { padding-right: calc(min(420px, max(280px, 34vw)) + 40px); }
.dg-highlights-lightbox.has-details .dg-highlights-lightbox__figure,
.dg-highlights-lightbox.has-details .dg-highlights-lightbox__image {
	max-width: calc(100vw - min(420px, max(280px, 34vw)) - 80px);
}
.dg-highlights-lightbox__details {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	width: min(420px, max(280px, 34vw));
	padding: 72px 28px 28px;
}
.dg-highlights-lightbox.has-details .dg-highlights-lightbox__nav--next {
	right: calc(min(420px, max(280px, 34vw)) + 18px);
}
@media (max-width: 767px) {
	.dg-highlights-lightbox.has-details {
		padding: 10px 10px calc(42vh + 10px);
	}
	.dg-highlights-lightbox.has-details .dg-highlights-lightbox__figure,
	.dg-highlights-lightbox.has-details .dg-highlights-lightbox__image {
		max-width: 100vw;
		max-height: calc(58vh - 30px);
	}
	.dg-highlights-lightbox__details {
		top: auto;
		left: 0;
		width: auto;
		height: 42vh;
		padding: 18px 18px 24px;
	}
	.dg-highlights-lightbox.has-details .dg-highlights-lightbox__nav--next { right: 7px; }
	.dg-highlights-lightbox.has-details .dg-highlights-lightbox__nav { top: 29vh; }
}

/* ------------------------------------------ Contact button (2.16.0) */

.dg-cta {
	--dg-cta-bg: #3c434a;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: 44px;
	margin-top: 18px;
	padding: 11px 22px;
	border: 0;
	border-radius: 999px;
	background: var(--dg-cta-bg);
	color: #fff !important;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none !important;
	box-shadow: 0 4px 14px rgba(0,0,0,.25);
	cursor: pointer;
	transition: filter .15s ease, transform .15s ease;
}
.dg-cta--whatsapp { --dg-cta-bg: #1fa855; }
.dg-cta:hover,
.dg-cta:focus-visible { filter: brightness(1.08); transform: translateY(-1px); }
.dg-cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.dg-details .dg-cta { width: 100%; margin: 6px 0 20px; }

/* Photos without a details panel: button floats at the bottom. */
.pswp .pswp__dg-cta-float,
.dg-highlights-lightbox__cta {
	position: absolute;
	left: 50%;
	bottom: max(20px, env(safe-area-inset-bottom));
	z-index: 6;
	transform: translateX(-50%);
	pointer-events: none;
}
.dg-highlights-lightbox__cta { position: fixed; z-index: 4; }
.pswp .pswp__dg-cta-float[hidden],
.dg-highlights-lightbox__cta[hidden] { display: none; }
.pswp .pswp__dg-cta-float .dg-cta,
.dg-highlights-lightbox__cta .dg-cta {
	margin: 0;
	white-space: nowrap;
	pointer-events: auto;
}

/* ------------------------------------------- Product cards (2.19.0) */

.drive-gallery--cards .drive-gallery__grid { align-items: stretch; }

.dg-product {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: var(--dg-radius);
	overflow: hidden;
	transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.dg-product:hover { border-color: #d6d6d6; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08); }

.dg-product .drive-gallery__item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	aspect-ratio: 1 / 1;
	padding: 12px;
	border-radius: 0;
	background: #fff;
}
.dg-product .drive-gallery__item:hover,
.dg-product .drive-gallery__item:focus-visible { transform: none; box-shadow: none; }
.dg-product .drive-gallery__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 0;
	transition: opacity 0.4s ease, transform 0.35s ease;
}
.dg-product:hover .drive-gallery__image { transform: scale(1.04); }

.dg-badge {
	position: absolute;
	z-index: 2;
	padding: 5px 10px;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.02em;
	white-space: nowrap;
	pointer-events: none;
}
.dg-badge--discount { left: 8px; bottom: 8px; background: var(--dg-badge-discount, #d0432c); }
.dg-badge--new { top: 8px; right: 8px; background: var(--dg-badge-new, #9fbe3a); text-transform: uppercase; }

.dg-product__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	padding: 12px 14px 14px;
	line-height: 1.4;
}
.dg-product__name {
	margin: 0;
	overflow: hidden;
	font-size: 15px;
	font-weight: 500;
	white-space: nowrap;
	text-overflow: ellipsis; /* Long names end in "…"; the full name is in the tooltip and the popup. */
}

.dg-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 8px;
	margin: 0;
	line-height: 1.2;
}
.dg-price__now { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.dg-price__old { color: #8a8a8a; font-size: 14px; }

.dg-product .dg-cta.dg-cta--card {
	align-self: stretch;
	width: 100%;
	min-height: 40px;
	margin-top: auto; /* Buttons line up across a row. */
	padding: 9px 12px;
	font-size: 14px;
	box-shadow: none;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* Availability (2.20.0). */
.dg-stock {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: -4px 0 0;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}
.dg-stock::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}
.dg-stock--in { color: #1a8a3f; }
.dg-stock--order { color: #b26a00; }
.dg-stock--out { color: #c4321c; }
.dg-details .dg-stock { margin: 0 0 10px; }
.dg-details .dg-stock--in { color: #4ad07a; }
.dg-details .dg-stock--order { color: #f0b849; }
.dg-details .dg-stock--out { color: #ff7a66; }

/* Popup panel. */
.dg-details__price {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
}
.dg-details .dg-price__now { color: #fff; font-size: 26px; }
.dg-details .dg-price__old { color: #a8a8a8; }
.dg-details .dg-badge { position: static; }

/* Highlights carousel: the same card as the gallery (2.21.1). */
.drive-gallery-carousel__slide.has-product {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #e6e6e6;
	line-height: 1.4;
	cursor: pointer;
}
.drive-gallery-carousel__slide.has-product:hover { transform: none; box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.drive-gallery-carousel .drive-gallery-carousel__photo {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	line-height: 0;
	cursor: pointer;
}
.drive-gallery-carousel__slide.has-product img { object-fit: contain; padding: 10px; box-sizing: border-box; transition: transform .35s ease; }
.drive-gallery-carousel__slide.has-product:hover img { transform: scale(1.04); }
.drive-gallery-carousel__slide.has-product .dg-product__body { text-align: left; }
.dg-product__caption {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px 12px 12px;
	line-height: 1.3;
	text-align: left;
}
.dg-product__caption .dg-price__now { font-size: 18px; }

@media (max-width: 600px) {
	.dg-product__body { gap: 8px; padding: 10px; }
	.dg-product__name { font-size: 14px; }
	.dg-price__now { font-size: 18px; }
	.dg-price__old { font-size: 12px; }
	.dg-badge { padding: 4px 8px; font-size: 12px; }
}

/* ------------------------------------------- Brands block (2.21.0) */
.drive-gallery__tags.is-locked { opacity: .4; }
.drive-gallery__tags.is-locked .drive-gallery__tag { cursor: not-allowed; }

.drive-gallery-brands {
	--dg-brand-size: 56px;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(calc(var(--dg-brand-size) * 2.2), 1fr));
	gap: 12px;
	margin: 0 0 24px;
}
.drive-gallery-brands[hidden] { display: none; }
.drive-gallery-brands--row {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	padding-bottom: 6px;
}
.drive-gallery-brands--row .drive-gallery-brands__item {
	flex: 0 0 calc(var(--dg-brand-size) * 2.2);
	scroll-snap-align: start;
}
.drive-gallery-brands .drive-gallery-brands__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: calc(var(--dg-brand-size) + 28px);
	margin: 0;
	padding: 12px 10px;
	border: 1px solid #e6e6e6;
	border-radius: 10px;
	background: #fff;
	color: #1d1d1b;
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.drive-gallery-brands .drive-gallery-brands__item:hover,
.drive-gallery-brands .drive-gallery-brands__item:focus-visible {
	border-color: #bdbdbd;
	box-shadow: 0 4px 14px rgba(0,0,0,.08);
	transform: translateY(-1px);
	background: #fff;
	color: #1d1d1b;
}
.drive-gallery-brands .drive-gallery-brands__item.is-active {
	border-color: var(--dg-tag-active-bg, #111);
	box-shadow: 0 0 0 1px var(--dg-tag-active-bg, #111);
}
.drive-gallery-brands__logo {
	display: block;
	width: auto;
	max-width: 100%;
	height: var(--dg-brand-size);
	object-fit: contain;
}
.drive-gallery-brands__name {
	overflow: hidden;
	max-width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.drive-gallery-brands__count {
	position: absolute;
	top: 6px;
	right: 8px;
	color: #8a8a8a;
	font-size: 11px;
}

/* ---------------------------------------------- Order cart (2.22.0) */
button.dg-cta { font-family: inherit; }
/* The button reset at the top of this file (for theme button styles)
   would also strip the "Add to cart" button inside the grid and the
   carousel; the doubled class keeps it above the reset. */
.drive-gallery button.dg-cta.dg-cta,
.drive-gallery-carousel button.dg-cta.dg-cta {
	background: var(--dg-cta-bg);
	color: #fff;
	font-weight: 600;
	line-height: 1.2;
}
.dg-cta--add.is-added { filter: brightness(.92); }
.dg-cta__short { display: none; }
/* On cards the icon says "cart", so the short word fits on one line. */
.dg-product .dg-cta--add { white-space: nowrap; }
.dg-product .dg-cta--add .dg-cta__long { display: none; }
.dg-product .dg-cta--add .dg-cta__short { display: inline; }

.dg-cart-fab {
	--dg-cta-bg: #1fa855;
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 99990;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 12px 18px 12px 16px;
	border: 0;
	border-radius: 999px;
	background: var(--dg-cta-bg);
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	box-shadow: 0 8px 24px rgba(0,0,0,.22);
	cursor: pointer;
}
.dg-cart-fab[hidden] { display: none; }
.dg-cart-fab svg { width: 22px; height: 22px; }
.dg-cta--add { gap: 8px; }
.dg-cta--add .dg-cart-icon { flex: none; width: 18px; height: 18px; margin-top: -1px; }
.dg-cart-fab__count {
	min-width: 22px;
	padding: 3px 6px;
	border-radius: 999px;
	background: #fff;
	color: #1d1d1b;
	font-size: 13px;
	text-align: center;
	box-sizing: border-box;
}
.dg-cart-fab.is-bumped { animation: dg-cart-bump .45s ease; }
@keyframes dg-cart-bump { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }

.dg-cart { position: fixed; inset: 0; z-index: 100000; }
.dg-cart[hidden] { display: none; }
html.dg-cart-open { overflow: hidden; }
.dg-cart__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.dg-cart__sheet {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	width: min(420px, 100%);
	background: #fff;
	color: #1d1d1b;
	font-size: 15px;
	line-height: 1.4;
	box-shadow: -10px 0 30px rgba(0,0,0,.15);
	text-align: left;
}
.dg-cart__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid #eee; }
.dg-cart .dg-cart__title { margin: 0 !important; padding: 0 !important; color: #1d1d1b !important; font: inherit !important; font-size: 19px !important; font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important; }
.dg-cart button { font: inherit; text-transform: none; letter-spacing: 0; box-shadow: none; }
.dg-cart .dg-cart__close { width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: #f2f2f2; color: #1d1d1b; font-size: 22px; line-height: 1; cursor: pointer; }
.dg-cart__list { flex: 1; overflow-y: auto; padding: 8px 20px; overscroll-behavior: contain; }
.dg-cart__empty { margin: 24px 0; color: #666; }
.dg-cart__item { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid #f0f0f0; }
.dg-cart__thumb { flex: none; width: 64px; height: 64px; object-fit: contain; border: 1px solid #eee; border-radius: 8px; background: #fff; }
.dg-cart__info { flex: 1; min-width: 0; }
.dg-cart__info p { margin: 0 0 4px; }
.dg-cart__name { font-weight: 600; overflow-wrap: anywhere; }
.dg-cart__price { font-weight: 700; }
.dg-cart__qty { display: inline-flex; align-items: center; margin-top: 4px; border: 1px solid #ddd; border-radius: 999px; }
.dg-cart .dg-cart__step { width: 32px; height: 30px; margin: 0; padding: 0; border: 0; background: transparent; color: #1d1d1b; font-size: 18px; line-height: 1; cursor: pointer; }
.dg-cart__n { min-width: 22px; text-align: center; font-weight: 600; }
.dg-cart .dg-cart__remove { flex: none; width: 28px; height: 28px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #999; font-size: 20px; line-height: 1; cursor: pointer; }
.dg-cart .dg-cart__remove:hover { background: #f4f4f4; color: #c4321c; }
.dg-cart__foot { padding: 14px 20px 20px; border-top: 1px solid #eee; }
.dg-cart__foot:empty { display: none; }
.dg-cart__total { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 4px; font-size: 17px; }
.dg-cart__total strong { font-size: 22px; }
.dg-cart__note { margin: 0 0 8px; color: #666; font-size: 13px; }
.dg-cart__notes-label { display: block; margin: 10px 0 0; color: #444; font-size: 13px; font-weight: 600; }
.dg-cart__notes { display: block; box-sizing: border-box; width: 100%; margin-top: 4px; padding: 8px 10px; border: 1px solid #ddd; border-radius: 8px; font: inherit; font-size: 14px; resize: vertical; }
.dg-cart .dg-cart__send { display: flex; width: 100%; margin-top: 14px; box-shadow: none; }
.dg-cart__sent { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: #f1f8f3; color: #1d1d1b; font-size: 13px; }
.dg-cart__sent p { margin: 0 0 8px; }
.dg-cart .dg-cart__clear { margin: 0; padding: 6px 12px; border: 1px solid #c9c9c9; border-radius: 999px; background: #fff; color: #1d1d1b; font-size: 13px; cursor: pointer; }

@media (max-width: 600px) {
	.dg-cart-fab { left: 12px; bottom: 12px; padding: 11px 14px; }
	.dg-cart-fab__label { display: none; }
}

/* ---------------------------------------------------- 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));
}

/* ------------------------------------------ Shop front (2.23.0) */
/* [drive_gallery_showcase]: categories, banner and brands, stacked
   the same width with the same gap. */
.dg-showcase {
	--dg-accent: #c8102e;
	display: grid;
	gap: 14px;
	margin: 0 0 28px;
}
.dg-showcase > * { margin: 0; min-width: 0; }

/* Music icon painted in the shop colour through a mask. */
.dg-ico {
	display: inline-block;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	background-color: var(--dg-accent, #c8102e);
	-webkit-mask: var(--dg-ico) center / contain no-repeat;
	mask: var(--dg-ico) center / contain no-repeat;
}
.drive-gallery__tag .drive-gallery__tag-ico {
	width: 18px;
	height: 18px;
	margin-right: 6px;
	vertical-align: -4px;
	background-color: currentColor;
}

/* One sideways line of cards with an arrow card on each side. */
.dg-shelf {
	position: relative;
	display: flex;
	align-items: stretch;
	gap: 10px;
	min-width: 0;
	margin: 0 0 24px;
}
.dg-shelf[hidden] { display: none; }
.dg-showcase .dg-shelf { margin: 0; }
.dg-shelf__track {
	display: flex;
	flex: 1 1 auto;
	gap: 10px;
	min-width: 0;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.dg-shelf__track::-webkit-scrollbar { display: none; }
.dg-shelf__track > * { scroll-snap-align: start; }
.dg-shelf .dg-shelf__arrow {
	display: none;
	flex: 0 0 44px;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: #f2f2f2;
	color: var(--dg-accent, #c8102e);
	box-shadow: none;
	cursor: pointer;
	transition: background-color .15s ease, opacity .15s ease;
}
.dg-shelf.is-scrollable .dg-shelf__arrow { display: flex; }
.dg-shelf .dg-shelf__arrow:hover { background: #e6e6e6; color: var(--dg-accent, #c8102e); }
.dg-shelf .dg-shelf__arrow:disabled { opacity: .35; cursor: default; }
.dg-shelf__arrow svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Categories row. */
.dg-categories { --dg-accent: #c8102e; }
.dg-categories .dg-categories__item {
	display: flex;
	flex: 0 0 136px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 132px;
	margin: 0;
	padding: 16px 10px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: #fff;
	color: #1d1d1b;
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
	text-align: center;
	text-transform: none;
	letter-spacing: .01em;
	box-shadow: 0 1px 2px rgba(0,0,0,.06);
	cursor: pointer;
	transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.dg-categories .dg-categories__item:hover,
.dg-categories .dg-categories__item:focus-visible {
	background: #fff;
	color: #1d1d1b;
	box-shadow: 0 6px 18px rgba(0,0,0,.10);
	transform: translateY(-2px);
}
.dg-categories .dg-categories__item.is-active {
	border-color: var(--dg-accent, #c8102e);
	box-shadow: 0 0 0 1px var(--dg-accent, #c8102e);
}
.dg-categories__img {
	display: block;
	width: 34px;
	height: 34px;
	object-fit: contain;
}
.dg-categories__name {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.dg-categories__count { color: #8a8a8a; font-size: 11px; font-weight: 400; }

/* Brand logo cards. */
.drive-gallery-brands--cards { display: flex; grid-template-columns: none; }
.drive-gallery-brands--cards .drive-gallery-brands__item {
	flex: 0 0 240px;
	min-height: 86px;
	padding: 14px 20px;
	border: 0;
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(0,0,0,.06);
	font-size: 15px;
	font-weight: 600;
}
.drive-gallery-brands--cards .drive-gallery-brands__item:hover,
.drive-gallery-brands--cards .drive-gallery-brands__item:focus-visible {
	box-shadow: 0 6px 18px rgba(0,0,0,.10);
	transform: translateY(-2px);
}
.drive-gallery-brands--cards .drive-gallery-brands__logo {
	max-width: 78%;
	height: auto;
	max-height: 46px;
}

/* Promotions banner. */
.dg-banner {
	--dg-accent: #c8102e;
	position: relative;
	overflow: hidden;
	margin: 0 0 24px;
	border-radius: 10px;
	background: #1d1d1b;
	isolation: isolate;
}
.dg-showcase .dg-banner { margin: 0; }
.dg-banner__track {
	display: flex;
	transition: transform .55s cubic-bezier(.4, 0, .2, 1);
	will-change: transform;
}
.dg-banner__slide { flex: 0 0 100%; min-width: 0; }
.dg-banner__slide a { display: block; }
.dg-banner__slide img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--dg-banner-ratio, 3/1);
	object-fit: cover;
	user-select: none;
}
.dg-banner .dg-banner__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -22px 0 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0,0,0,.28);
	color: #fff;
	font-size: 30px;
	line-height: 1;
	box-shadow: none;
	cursor: pointer;
	opacity: 0;
	transition: opacity .2s ease, background-color .2s ease;
}
.dg-banner:hover .dg-banner__nav,
.dg-banner .dg-banner__nav:focus-visible { opacity: 1; }
.dg-banner .dg-banner__nav:hover { background: rgba(0,0,0,.5); color: #fff; }
.dg-banner__nav span { margin-top: -3px; }
.dg-banner__nav--prev { left: 14px; }
.dg-banner__nav--next { right: 14px; }
.dg-banner__dots {
	position: absolute;
	left: 50%;
	bottom: 14px;
	z-index: 2;
	display: flex;
	gap: 7px;
	transform: translateX(-50%);
}
.dg-banner .dg-banner__dot {
	width: 8px;
	height: 8px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255,255,255,.55);
	box-shadow: 0 0 0 1px rgba(0,0,0,.08);
	cursor: pointer;
	transition: width .25s ease, background-color .25s ease;
}
.dg-banner .dg-banner__dot.is-active { width: 30px; background: #fff; }
.dg-banner-empty {
	padding: 14px 16px;
	border: 1px dashed #c3c4c7;
	border-radius: 8px;
	color: #50575e;
	font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
	.dg-banner__track { transition: none; }
}

@media (max-width: 640px) {
	.dg-showcase { gap: 10px; }
	.dg-shelf { gap: 0; }
	.dg-shelf.is-scrollable .dg-shelf__arrow { display: none; }
	.dg-shelf__track { gap: 8px; }
	.dg-categories .dg-categories__item {
		flex-basis: 104px;
		min-height: 104px;
		gap: 9px;
		padding: 12px 8px;
		font-size: 12px;
	}
	.dg-categories .dg-ico { width: 26px; height: 26px; }
	.drive-gallery-brands--cards .drive-gallery-brands__item {
		flex-basis: 140px;
		min-height: 62px;
		padding: 10px 14px;
	}
	.drive-gallery-brands--cards .drive-gallery-brands__logo { max-height: 32px; }
	.dg-banner { border-radius: 8px; }
	.dg-banner__slide img { aspect-ratio: var(--dg-banner-ratio-m, var(--dg-banner-ratio, 3/1)); }
	.dg-banner .dg-banner__nav { display: none; }
	.dg-banner__dots { bottom: 8px; gap: 5px; }
	.dg-banner .dg-banner__dot { width: 6px; height: 6px; }
	.dg-banner .dg-banner__dot.is-active { width: 20px; }
}

/* ------------------- Type squares and brand logo cards (2.23.1) */
.drive-gallery .drive-gallery__tags--cards {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	margin: 0;
}
.drive-gallery .drive-gallery__tags--cards .dg-shelf__track {
	gap: 8px;
	/* Room for the 2px outline of the chosen card on every side:
	   a scrolling box clips whatever pokes out of it (2.23.2). */
	padding: 4px;
	scroll-padding-inline: 4px;
}
/* The gallery's button reset is stronger than the shelf rules. */
.drive-gallery .dg-shelf button.dg-shelf__arrow {
	flex: 0 0 40px;
	border-radius: 8px;
	background: #f2f2f2;
	color: var(--dg-accent, #c8102e);
	cursor: pointer;
}
.drive-gallery .dg-shelf.is-scrollable button.dg-shelf__arrow { display: flex; }
.drive-gallery .dg-shelf button.dg-shelf__arrow:hover { background: #e6e6e6; }
.drive-gallery .dg-shelf button.dg-shelf__arrow:disabled { opacity: .35; cursor: default; }

.drive-gallery .drive-gallery__tags--cards .drive-gallery__tag {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	margin: 0;
	padding: 10px 8px;
	border: 1px solid #ececec;
	border-radius: 10px;
	background: #fff;
	color: #1d1d1b;
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.25;
	text-align: center;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: 0 1px 2px rgba(0,0,0,.05);
	cursor: pointer;
	white-space: normal;
	scroll-snap-align: start;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.drive-gallery .drive-gallery__tags--cards .drive-gallery__tag:hover {
	border-color: #d6d6d6;
	background: #fff;
	color: #1d1d1b;
	box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.drive-gallery .drive-gallery__tags--cards .drive-gallery__tag.is-active {
	border-color: var(--dg-accent, #c8102e);
	background: #fff;
	color: #1d1d1b;
	box-shadow: 0 0 0 1px var(--dg-accent, #c8102e);
}
.drive-gallery .drive-gallery__tags--cards .drive-gallery__tag:disabled { cursor: not-allowed; }

/* Types: squares. */
.drive-gallery .drive-gallery__tags--cards-type .drive-gallery__tag { width: 112px; height: 112px; }
.drive-gallery__tags--cards-type .dg-ico { width: 32px; height: 32px; }
.drive-gallery__tags--cards-type .drive-gallery__tag.is-active .dg-ico { background-color: var(--dg-accent, #c8102e); }
.drive-gallery__card-img { display: block; width: 34px; height: 34px; object-fit: contain; }
.drive-gallery__card-name {
	display: -webkit-box;
	overflow: hidden;
	max-width: 100%;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow-wrap: anywhere;
}
.drive-gallery__card-count {
	position: absolute;
	top: 5px;
	right: 7px;
	color: #9a9a9a;
	font-size: 11px;
	font-weight: 400;
}

/* Brands: wide logo cards. */
.drive-gallery .drive-gallery__tags--cards-brand .drive-gallery__tag { width: 150px; height: 72px; padding: 10px 14px; font-weight: 600; }
.drive-gallery__card-logo { display: block; max-width: 100%; max-height: 40px; width: auto; height: auto; object-fit: contain; }

@media (max-width: 640px) {
	.drive-gallery .drive-gallery__tags--cards-type .drive-gallery__tag { width: 92px; height: 92px; padding: 8px 6px; font-size: 12px; gap: 6px; }
	.drive-gallery__tags--cards-type .dg-ico { width: 28px; height: 28px; }
	.drive-gallery .drive-gallery__tags--cards-brand .drive-gallery__tag { width: 116px; height: 60px; padding: 8px 10px; font-size: 13px; }
	.drive-gallery__card-logo { max-height: 32px; }
	.drive-gallery .dg-shelf.is-scrollable button.dg-shelf__arrow { display: none; }
}

/* ------------------------- Highlights carousel on phones (2.23.1) */
/* Cards: the cart icon always stays (its size is set with the button,
   above); when the word does not fit it ends in "…" instead of spilling
   out, and on the very narrowest cards the icon stands alone (2.23.5). */
.dg-product { container-type: inline-size; }
/* Theme letter-spacing on buttons is what pushes the word out. */
.dg-product .dg-cta.dg-cta--add { min-width: 0; max-width: 100%; letter-spacing: 0; }
.dg-product .dg-cta--add .dg-cta__short {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	/* Room above and below so accents on capitals are not clipped. */
	padding: .2em 0;
	margin: -.2em 0;
}
@container (max-width: 190px) {
	.dg-product .dg-cta.dg-cta--card { gap: 5px; padding-left: 8px; padding-right: 8px; font-size: 13px; }
}
@container (max-width: 115px) {
	.dg-product .dg-cta--add .dg-cta__short { display: none; }
}
/* Spoken "Added" for screen readers; never seen. */
.dg-sr-live {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 640px) {
	/* The arrows sit over the cards instead of taking a strip on each
	   side, and a product carousel shows one big card with the next
	   one peeking, so the photo, price and button have room. */
	.drive-gallery-carousel { padding: 0; }
	.drive-gallery-carousel:has(.has-product) { --dg-carousel-items: 1.35; }
	.drive-gallery-carousel .drive-gallery-carousel__arrow {
		width: 36px !important;
		height: 36px !important;
		top: 38%;
		box-shadow: 0 2px 8px rgba(0,0,0,.18);
	}
	.drive-gallery-carousel__arrow--prev { left: 6px; }
	.drive-gallery-carousel__arrow--next { right: 6px; }
}