/* Photo Portfolio -- front end
   Layout only: type and color mostly inherit from the active theme. */

.pp-portfolio {
	--pp-cols: 3;
	--pp-gap: 14px;
	--pp-accent: #111;
	--pp-row: 8px;
	margin: 0 0 2.5rem;
	text-align: left;
}

/* Block themes wrap post content in `.is-layout-constrained`, whose child rule
   caps every direct child at the theme's content width (645px in Twenty
   Twenty-Five) and centres it with `margin-inline: auto !important`. A gallery
   wants the full width of its container, so it opts out. The doubled class
   outranks that rule's 0-1-0 specificity without depending on stylesheet order;
   the margins need !important only because the theme's are. */
.pp-portfolio.pp-portfolio {
	max-width: none;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* The portfolio names its own text colour rather than inheriting whatever the
   page hands down. A theme is free to set body text to white -- Hello
   Elementor sites commonly do, leaning on per-element rules for headings --
   and everything this plugin writes for itself would then be white on a white
   page: titles, albums, pagination, the story behind a shot. Settings carries
   the colour, so a dark site can set a light one. */
.pp-portfolio,
.pp-single {
	color: var(--pp-ink, #1e1e1e);
}

/* Links need saying separately. A theme colours anchors directly -- Elementor
   writes `.elementor-kit-NNN a { color: ... }` -- and a rule aimed at the
   element beats a colour inherited from an ancestor, so the ink above never
   reaches them. The albums, categories and tags beside a photograph are
   links, and on a site whose link colour is white they were invisible until
   pointed at. The class is doubled to out-weigh a theme's single-class rule.

   Buttons and page numbers are left out: both carry their own colours, and a
   blue label on a dark pill would be worse than what it replaced. */
.pp-portfolio.pp-portfolio a:not(.pp-btn):not(.page-numbers) {
	color: var(--pp-ink, #1e1e1e);
}

.pp-portfolio.pp-portfolio a:not(.pp-btn):not(.page-numbers):hover,
.pp-portfolio.pp-portfolio a:not(.pp-btn):not(.page-numbers):focus-visible {
	color: var(--pp-link-hover, #3d8fd1);
}

.pp-portfolio *,
.pp-lightbox * {
	box-sizing: border-box;
}

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

.pp-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	margin-bottom: 1.25rem;
}

.pp-filters {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	gap: 6px;
	/* Every category on one line and fully visible -- no scrollbar, no wrap.
	   Sizing to content rather than stretching keeps the row hard left. */
	flex: 0 0 auto;
	max-width: 100%;
}

.pp-filter {
	appearance: none;
	background: var(--pp-filter, #3d8fd1);
	border: 1px solid var(--pp-filter, #3d8fd1);
	border-radius: 999px;
	opacity: .92;
	padding: 6px 14px;
	line-height: 1.2;
	cursor: pointer;
	flex: 0 0 auto;
	white-space: nowrap;
	transition: opacity .15s ease, background-color .15s ease, color .15s ease;
}

/* Buttons carry a user-agent font, and a theme's own `button` rules often beat
   a single-class reset. Matching the surrounding page needs the extra
   specificity, so the filters read as the theme's type rather than the
   browser's. */
.pp-portfolio .pp-filters .pp-filter {
	font-family: inherit;
	font-size: .85em;
	font-weight: inherit;
	font-style: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	color: var(--pp-filter-text, #fff);
}

.pp-filter:hover,
.pp-filter:focus-visible {
	opacity: 1;
}

.pp-portfolio .pp-filters .pp-filter.is-active {
	opacity: 1;
	background: var(--pp-accent);
	border-color: var(--pp-accent);
	color: var(--pp-accent-text, #fff);
}

.pp-filter__count {
	font-size: .8em;
	opacity: .6;
	margin-left: 4px;
}

.pp-search {
	position: relative;
	flex: 0 1 260px;
}

.pp-search__input {
	width: 100%;
	padding: 8px 30px 8px 12px;
	font: inherit;
	font-size: .9em;
	border: 1px solid rgba(0, 0, 0, .18);
	border-radius: 999px;
	background: transparent;
	color: inherit;
}

.pp-search__clear {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	border: 0;
	background: none;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: inherit;
	opacity: .5;
	padding: 0 4px;
}

.pp-search__clear:hover { opacity: 1; }

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

.pp-grid {
	display: grid;
	grid-template-columns: repeat(var(--pp-cols), minmax(0, 1fr));
	gap: var(--pp-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* JS switches this on and assigns row spans -- true masonry.
   Without JS the grid stays a plain aspect-ratio grid, which still works. */
.pp-grid.is-masonry {
	grid-auto-rows: var(--pp-row);
	align-items: start;
}

.pp-item {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.pp-item--wide {
	grid-column: span 2;
}

.pp-item__btn {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	position: relative;
	color: inherit;
	font: inherit;
	text-align: left;
}

.pp-item__media {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--pp-ratio, 1.5);
	background: transparent;
	border-radius: 2px;
}

/* `height` and `max-width` carry !important because a theme's own `img` rule
   would otherwise leave the photo short of the tile, exposing the page
   background around it. Nothing else here needs to override the theme. */
.pp-portfolio .pp-item .pp-item__img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	min-height: 0;
	object-fit: cover;
	object-position: center;
	border-radius: inherit;
	transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}

.pp-item__btn:hover .pp-item__img,
.pp-item__btn:focus-visible .pp-item__img {
	transform: scale(1.04);
}

/* The title used to fade in over the photo on hover. Removed: the picture is
   the subject, and the caption is in the lightbox for anyone who wants it. */

.pp-item.is-new {
	animation: pp-fade-in .45s ease both;
}

@keyframes pp-fade-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

.pp-empty {
	padding: 2rem 0;
	opacity: .7;
	text-align: left;
}

.pp-more {
	text-align: left;
	margin-top: 1.5rem;
}

.pp-status {
	margin: .75rem 0 0;
	text-align: left;
	font-size: .85em;
	opacity: .6;
	min-height: 1.2em;
}

/* ---------- Buttons ---------- */

.pp-btn,
.pp-more__btn {
	appearance: none;
	font: inherit;
	font-size: .9em;
	padding: 10px 22px;
	border-radius: 999px;
	border: 1px solid currentColor;
	background: transparent;
	color: inherit;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}

/* Load more is the one call to action under the wall, so it is filled rather
   than outlined -- an outline in the inherited text colour is invisible on any
   page whose text happens to match its surroundings. */
.pp-more__btn,
.pp-btn--primary {
	background: var(--pp-accent, #111);
	border-color: var(--pp-accent, #111);
	color: var(--pp-accent-text, #fff);
}

.pp-btn--primary,
.pp-more__btn:hover,
.pp-more__btn:focus-visible,
.pp-btn--primary:hover,
.pp-btn--primary:focus-visible {
	opacity: .85;
}

.pp-btn[disabled],
.pp-more__btn[disabled] {
	opacity: .5;
	cursor: default;
}

/* ---------- Lightbox ---------- */

.pp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}

.pp-lightbox[hidden] { display: none; }

.pp-lb__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(12, 12, 12, .95);
	cursor: zoom-out;
}

.pp-lb__inner {
	position: relative;
	width: min(1500px, 94vw);
	max-height: 94vh;
	display: flex;
	flex-direction: column;
}

.pp-lb__figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.pp-lb__stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	flex: 1 1 auto;
}

.pp-lb__img {
	max-width: 100%;
	max-height: 78vh;
	width: auto;
	height: auto;
	display: block;
	opacity: 1;
	transition: opacity .2s ease;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

.pp-lb__img.is-loading { opacity: 0; }

.pp-lb__spinner {
	position: absolute;
	width: 30px;
	height: 30px;
	border: 2px solid rgba(255, 255, 255, .25);
	border-top-color: #fff;
	border-radius: 50%;
	animation: pp-spin .8s linear infinite;
	opacity: 0;
	transition: opacity .15s ease;
	pointer-events: none;
}

.pp-lb__stage.is-loading .pp-lb__spinner { opacity: 1; }

@keyframes pp-spin { to { transform: rotate(360deg); } }

.pp-lb__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px 24px;
	padding: 14px 2px 0;
	font-size: .9rem;
}

.pp-lb__title {
	margin: 0 0 2px;
	font-size: 1.05rem;
	line-height: 1.3;
	color: #fff;
}

.pp-lb__caption,
.pp-lb__details {
	margin: 0;
	opacity: .7;
	font-size: .85rem;
	line-height: 1.45;
	max-width: 70ch;
}

.pp-lb__caption:empty,
.pp-lb__details:empty { display: none; }

.pp-lb__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}

.pp-lb__tags li {
	font-size: .72rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .13);
}

.pp-lb__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-left: auto;
}

.pp-lb__count { margin: 0; opacity: .5; font-size: .8rem; white-space: nowrap; }

.pp-lb__inquire {
	border-color: rgba(255, 255, 255, .6);
	color: #fff;
}

.pp-lb__inquire:hover {
	background: #fff;
	color: #111;
	border-color: #fff;
}

.pp-lb__close,
/* These are positioned against .pp-lightbox, which is fixed to the viewport --
   so every offset here has to stay on screen at any width. */
.pp-lb__nav {
	position: absolute;
	z-index: 2;
	appearance: none;
	border: 1px solid rgba(255, 255, 255, .28);
	background: rgba(0, 0, 0, .55);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background-color .15s ease, opacity .15s ease;
}

.pp-lb__close {
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	font-size: 26px;
	line-height: 1;
}

.pp-lb__nav {
	top: 50%;
	transform: translateY(-50%);
	width: 56px;
	height: 56px;
}

.pp-lb__nav svg { width: 28px; height: 28px; }
.pp-lb__nav--prev { left: 20px; }
.pp-lb__nav--next { right: 20px; }

.pp-lb__close:hover,
.pp-lb__nav:hover,
.pp-lb__close:focus-visible,
.pp-lb__nav:focus-visible {
	background: rgba(255, 255, 255, .28);
	border-color: rgba(255, 255, 255, .6);
}

.pp-lb__nav[hidden] { display: none; }

/* ---------- Inquiry form ---------- */

.pp-lb__panel {
	position: absolute;
	inset: 0;
	overflow: auto;
	background: #fff;
	color: #1d2327;
	padding: 24px;
	border-radius: 4px;
}

/* The lightbox around it is white-on-black, so every piece of the form states
   its own colour rather than inheriting one meant for the dark surface. */
.pp-lb__panel .pp-form__title,
.pp-lb__panel .pp-form__subject,
.pp-lb__panel .pp-field label,
.pp-lb__panel .pp-form__message {
	color: #1d2327;
}

.pp-lb__panel .pp-btn {
	color: #1d2327;
	border-color: rgba(0, 0, 0, .35);
}

.pp-lb__panel .pp-btn--primary {
	background: var(--pp-accent, #111);
	border-color: var(--pp-accent, #111);
	color: #fff;
}

.pp-lb__panel[hidden] { display: none; }

.pp-form {
	max-width: 520px;
	margin: 0 auto;
	text-align: left;
}

.pp-form__title { margin: 0 0 4px; font-size: 1.1rem; }
.pp-form__subject { margin: 0 0 16px; opacity: .65; font-size: .85rem; }

.pp-field {
	margin: 0 0 12px;
}

.pp-field label {
	display: block;
	font-size: .8rem;
	letter-spacing: .02em;
	margin-bottom: 4px;
	opacity: .8;
}

.pp-portfolio .pp-field input,
.pp-portfolio .pp-field textarea,
.pp-lightbox .pp-field input,
.pp-lightbox .pp-field textarea,
.pp-single .pp-field input,
.pp-single .pp-field textarea {
	width: 100%;
	font: inherit;
	font-size: .95em;
	padding: 9px 12px;
	border-radius: 4px;
	border: 1px solid #8c8f94;
	background: #fff;
	color: #1d2327;
	-webkit-appearance: none;
	appearance: none;
	opacity: 1;
}

.pp-field input::placeholder,
.pp-field textarea::placeholder {
	color: #6b7177;
	opacity: 1;
}

.pp-field input:focus,
.pp-field textarea:focus {
	outline: 2px solid var(--pp-accent);
	outline-offset: 1px;
}

.pp-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.pp-form__actions {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 16px 0 0;
}

.pp-form__message {
	margin: 12px 0 0;
	font-size: .9rem;
	min-height: 1.2em;
}

.pp-form__message.is-error { color: #ff8a8a; }
.pp-form__message.is-success { color: #7ddc9a; }

.pp-portfolio--form-only .pp-form__message.is-error,
.pp-single .pp-form__message.is-error { color: #b32d2e; }

.pp-portfolio--form-only .pp-form__message.is-success,
.pp-single .pp-form__message.is-success { color: #12772f; }

.pp-form.is-sending { opacity: .6; pointer-events: none; }

/* ---------- Single photo ---------- */

.pp-single__img { display: block; width: 100%; height: auto; }
.pp-single__details { margin: .75rem 0 0; opacity: .7; font-size: .9em; }

.pp-single__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: .75rem 0 0;
	padding: 0;
	font-size: .8em;
}

.pp-single__tags a {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .07);
	text-decoration: none;
}

.pp-single__buy { margin-top: 2rem; }

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------- Responsive ---------- */

@media (max-width: 1200px) {
	.pp-lb__inner { width: 96vw; }
}

@media (max-width: 1000px) {
	.pp-grid { --pp-cols: 2; }
}

@media (max-width: 640px) {
	.pp-grid { --pp-cols: 2; --pp-gap: 8px; }
	.pp-item--wide { grid-column: span 2; }
	.pp-toolbar { flex-direction: column; align-items: stretch; }
	.pp-search { flex: 1 1 auto; }
	.pp-lb__img { max-height: 62vh; }
	.pp-lb__nav { width: 44px; height: 44px; }
	.pp-lb__nav svg { width: 22px; height: 22px; }
	.pp-lb__nav--prev { left: 8px; }
	.pp-lb__nav--next { right: 8px; }
	.pp-lb__close { top: 8px; right: 8px; }
	.pp-lb__meta { flex-direction: column; align-items: flex-start; }
	.pp-lb__actions { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.pp-item__img,
	.pp-item.is-new,
	.pp-lb__img,
	.pp-lb__spinner {
		transition: none !important;
		animation: none !important;
	}
}

/* ---------- Uniform grid (Media-Library look) ----------
   Square tiles on an even grid. The per-photo --pp-ratio still rides on each
   item for the lightbox and for a switch back to layout="random". */

.pp-grid--uniform .pp-item--wide {
	grid-column: auto;
}

.pp-grid--uniform .pp-item__media {
	aspect-ratio: 1;
	border-radius: 2px;
}

.pp-grid--uniform .pp-item__img {
	object-fit: cover;
}

@media (max-width: 480px) {
	.pp-grid--uniform .pp-item--wide { grid-column: auto; }
}

/* While the inquiry form is open the arrows are both meaningless and a click
   hazard, since they are painted above the panel. */
.pp-lightbox.is-form .pp-lb__nav { display: none; }


/* ---------- Theme button reset ----------------------------------------------
   Every control in this gallery is a <button>, and the grid tile is a button
   wrapping the photo. Themes style buttons hard -- their own brand background,
   padding, border and radius -- and those rules routinely out-specify a plugin
   single-class reset, which paints a coloured frame around every photograph and
   repaints the filter pills.

   These are the plugin's own components, not the theme's, so they are reset to
   a known state here and the intended styling is restored immediately below.
   !important is used deliberately and only on the properties a theme sets. */

.pp-portfolio .pp-item__btn,
.pp-portfolio .pp-filter,
.pp-portfolio .pp-search__clear,
.pp-portfolio .pp-more__btn,
.pp-portfolio .pp-btn,
.pp-lightbox button {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-transform: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	width: auto;
	height: auto;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	line-height: normal;
	-webkit-appearance: none;
	appearance: none;
	transform: none;
}

/* The list itself, in case the theme gives lists padding or markers. */
.pp-portfolio .pp-grid {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	background: none !important;
	border: 0 !important;
}

.pp-portfolio .pp-grid .pp-item {
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	list-style: none !important;
}

.pp-portfolio .pp-grid .pp-item::before,
.pp-portfolio .pp-grid .pp-item::marker {
	content: none;
}

/* ---------- Intended styling, restored ---------- */

.pp-portfolio .pp-grid .pp-item__btn {
	display: block;
	width: 100% !important;
	cursor: zoom-in;
	/* No inline-box gap under the image. */
	line-height: 0 !important;
}

.pp-portfolio .pp-filters .pp-filter {
	padding: 6px 14px !important;
	background: var(--pp-filter, #3d8fd1) !important;
	border: 1px solid var(--pp-filter, #3d8fd1) !important;
	border-radius: 999px !important;
	color: var(--pp-filter-text, #fff) !important;
	line-height: 1.2 !important;
	cursor: pointer;
}

.pp-portfolio .pp-filters .pp-filter.is-active {
	background: var(--pp-accent, #111) !important;
	border-color: var(--pp-accent, #111) !important;
	color: var(--pp-accent-text, #fff) !important;
}

.pp-portfolio .pp-more .pp-more__btn,
.pp-portfolio .pp-btn,
.pp-lightbox .pp-btn {
	padding: 10px 22px !important;
	border: 1px solid currentColor !important;
	border-radius: 999px !important;
	line-height: 1.2 !important;
	cursor: pointer;
}

.pp-portfolio .pp-more .pp-more__btn,
.pp-lightbox .pp-btn--primary,
.pp-portfolio .pp-btn--primary {
	background: var(--pp-accent, #111) !important;
	border-color: var(--pp-accent, #111) !important;
	color: var(--pp-accent-text, #fff) !important;
}

.pp-portfolio .pp-more .pp-more__btn:hover,
.pp-portfolio .pp-more .pp-more__btn:focus-visible,
.pp-lightbox .pp-btn--primary:hover,
.pp-portfolio .pp-btn--primary:hover {
	opacity: .85;
}

/* The lightbox chrome keeps its own dark discs. The reset above sets width and
   height to auto, so the sizes have to be restated here or the controls
   collapse to their content. */
.pp-lightbox .pp-lb__close,
.pp-lightbox .pp-lb__nav {
	background: rgba(0, 0, 0, .55) !important;
	border: 1px solid rgba(255, 255, 255, .28) !important;
	border-radius: 50% !important;
	color: #fff !important;
	cursor: pointer;
}

.pp-lightbox .pp-lb__nav {
	width: 56px;
	height: 56px;
	font-size: 1rem;
}

.pp-lightbox .pp-lb__close {
	width: 44px;
	height: 44px;
	font-size: 26px;
}

@media (max-width: 640px) {
	.pp-lightbox .pp-lb__nav { width: 44px; height: 44px; }
	.pp-lightbox .pp-lb__close { width: 40px; height: 40px; }
}

.pp-lightbox .pp-lb__close:hover,
.pp-lightbox .pp-lb__nav:hover {
	background: rgba(255, 255, 255, .28) !important;
	border-color: rgba(255, 255, 255, .6) !important;
}

.pp-lightbox .pp-lb__inquire {
	border-color: rgba(255, 255, 255, .6) !important;
	color: #fff !important;
}

.pp-portfolio .pp-search__clear {
	padding: 0 4px !important;
	cursor: pointer;
}


/* ---------- Categories on a narrow screen ----------------------------------
   The pill row is deliberately one line and does not scroll, so on a phone the
   later categories would simply be off the edge. Below the breakpoint the row
   is replaced by a native select, which the platform renders as a proper
   picker and which never outgrows the screen. */

.pp-filters-compact {
	display: none;
	flex: 1 1 auto;
	min-width: 0;
}

.pp-filters__select {
	width: 100%;
	max-width: 100%;
	font: inherit;
	font-size: .95em;
	padding: 10px 12px;
	border-radius: 999px;
	border: 1px solid var(--pp-filter, #3d8fd1);
	background: var(--pp-filter, #3d8fd1);
	color: var(--pp-filter-text, #fff);
	cursor: pointer;
}

/* The arrow is drawn by the platform and follows the text colour. */
.pp-filters__select option {
	background: #fff;
	color: #1d2327;
}

@media (max-width: 640px) {
	.pp-filters { display: none; }
	.pp-filters-compact { display: block; }
}

/* ---------- Latest section ---------- */

.pp-latest { margin-bottom: 2.5rem; }

.pp-latest__heading {
	margin: 0 0 1rem;
	font-size: 1.25em;
	line-height: 1.2;
}


/* ---------- Quote page ----------------------------------------------------
   The photograph the visitor picked, above whichever Gravity Form the studio
   nominated. Nothing here styles the form itself: that is Gravity Forms'
   own markup and its own theme. */

.pp-quote { max-width: 780px; }

.pp-quote__heading { margin: 0 0 1rem; }

.pp-quote__photo {
	margin: 0 0 1.5rem;
	padding: 0;
}

.pp-quote__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 3px;
}

.pp-quote__caption {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	margin-top: .6rem;
	font-size: .9em;
}

.pp-quote__title { font-weight: 600; }
.pp-quote__meta { opacity: .7; }

.pp-quote__notice {
	padding: 12px 14px;
	border-left: 4px solid #b32d2e;
	background: rgba(179, 45, 46, .06);
	font-size: .9em;
}


/* ---------- Store -----------------------------------------------------------
   A shop, not the gallery wall: a column of filters beside a grid of cards.
   Filtering runs through the query string, so a filtered view has its own URL
   and works before any script loads. */

.pp-store {
	display: grid;
	gap: 32px;
	align-items: start;
}

.pp-store--sidebar-left  { grid-template-columns: minmax(0, 230px) minmax(0, 1fr); }
.pp-store--sidebar-right { grid-template-columns: minmax(0, 1fr) minmax(0, 230px); }
.pp-store--sidebar-right .pp-store__sidebar { order: 2; }
.pp-store--sidebar-none  { grid-template-columns: minmax(0, 1fr); }

.pp-store__main { min-width: 0; }

/* ---------- Filter sidebar ---------- */

.pp-store__sidebar { min-width: 0; }

.pp-store__widget { margin: 0 0 1.75rem; }

.pp-store__widget-title {
	margin: 0 0 .6rem;
	font-size: .95em;
	font-weight: 700;
	letter-spacing: .02em;
}

.pp-store__search {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pp-portfolio .pp-store__search input[type="search"] {
	flex: 1 1 120px;
	min-width: 0;
	font: inherit;
	font-size: .85em;
	padding: 9px 12px;
	border-radius: 4px;
	border: 1px solid #8c8f94;
	background: #fff;
	color: #1d2327;
}

/* The album chooser. A select rather than a list: albums are the way in and
   there may be a great many, and a native select is the one control a phone
   already knows how to present well. */

.pp-store__choose {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pp-portfolio .pp-store__select {
	flex: 1 1 140px;
	min-width: 0;
	max-width: 100%;
	font: inherit;
	font-size: .85em;
	padding: 9px 10px;
	border-radius: 4px;
	border: 1px solid #8c8f94;
	background: #fff;
	color: #1d2327;
}

.pp-portfolio .pp-store__go {
	font-size: .9em;
	padding: 9px 14px;
}

.pp-store__back { margin: 0 0 1.25rem; }

/* ---------- Product grid ---------- */

.pp-store__count {
	margin: 0 0 1rem;
	font-size: .9em;
	opacity: .75;
}

.pp-store__empty {
	padding: 2rem 0;
	opacity: .7;
}

.pp-store__grid {
	display: grid;
	grid-template-columns: repeat(var(--pp-cols), minmax(0, 1fr));
	gap: var(--pp-gap);
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.pp-card {
	display: flex;
	flex-direction: column;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	background: none !important;
}

.pp-card::before,
.pp-card::marker { content: none; }

.pp-portfolio .pp-card .pp-card__link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	box-shadow: none;
}

.pp-card__media {
	display: block;
	position: relative;
	overflow: hidden;
	aspect-ratio: 1;
	border-radius: 3px;
	background: rgba(128, 128, 128, .12);
}

/* Same reason as the gallery tiles: a theme's own `img` rule would otherwise
   leave the photograph short of its frame. */
.pp-portfolio .pp-card .pp-card__img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: center;
	transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}

.pp-card__link:hover .pp-card__img,
.pp-card__link:focus-visible .pp-card__img { transform: scale(1.04); }

.pp-card__body { display: block; padding: .7rem 0 .8rem; }

.pp-card__title {
	display: block;
	font-weight: 600;
	line-height: 1.3;
}

.pp-card__meta {
	display: block;
	margin-top: 2px;
	font-size: .85em;
	opacity: .7;
}

.pp-card__cta {
	align-self: start;
	margin-top: auto;
	text-decoration: none;
}

.pp-store__pages {
	margin-top: 2rem;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.pp-portfolio .pp-store__pages .page-numbers,
.pp-store__pages .page-numbers {
	color: var(--pp-ink, #1e1e1e);
}

.pp-store__pages .page-numbers {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid currentColor;
	border-radius: 999px;
	text-decoration: none;
	font-size: .9em;
	opacity: .7;
}

.pp-store__pages .page-numbers.current,
.pp-store__pages .page-numbers:hover {
	opacity: 1;
	background: var(--pp-accent, #111);
	border-color: var(--pp-accent, #111);
	color: var(--pp-accent-text, #fff);
}

/* The sidebar stacks above the grid once there is no room beside it. */
@media (max-width: 860px) {
	.pp-store--sidebar-left,
	.pp-store--sidebar-right {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}

	.pp-store--sidebar-right .pp-store__sidebar { order: 0; }
	.pp-store__grid { --pp-cols: 2; }
}

@media (max-width: 560px) {
	.pp-store__grid { --pp-cols: 1; }
}

/* ---------- The quote view ---------- */

.pp-card__label {
	display: inline-block;
	margin-right: .35em;
	font-weight: 600;
	opacity: .75;
}

.pp-store--quote { display: block; }

.pp-store__quote {
	display: grid;
	gap: 32px;
	align-items: start;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.pp-store__quote .pp-quote__photo { margin: 0; }

.pp-store__quote .pp-quote__img {
	display: block;
	width: 100%;
	height: auto;
}

.pp-quote__caption {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	margin-top: .75rem;
}

.pp-quote__meta { font-size: .95em; }

.pp-store__form { min-width: 0; }

@media (max-width: 860px) {
	.pp-store__quote { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- The story behind a shot ---------- */

.pp-story {
	margin: 1.5rem 0 0;
	max-width: 62ch;
}

.pp-story__heading {
	margin: 0 0 .5rem;
	font-size: 1em;
	font-weight: 700;
}

.pp-story p {
	margin: 0 0 .75em;
	line-height: 1.65;
}

.pp-story p:last-child { margin-bottom: 0; }

/* At the head of the form column it leads, so it needs no space above it and
   a clear gap below before the form's own heading. */
.pp-store__form .pp-story {
	margin-top: 0;
	margin-bottom: 1.75rem;
}

/* In the lightbox the story is set as plain text, so the line breaks the
   photographer typed have to be honoured here rather than by markup. */
.pp-lb__story {
	margin: .5rem 0 0;
	max-width: 60ch;
	white-space: pre-line;
	line-height: 1.6;
	opacity: .9;
}

/* Reset sits beside Search and should not compete with it. */
.pp-portfolio .pp-btn--quiet {
	background: transparent;
	color: inherit;
	border: 1px solid currentColor;
	opacity: .75;
	text-decoration: none;
}

.pp-portfolio .pp-btn--quiet:hover,
.pp-portfolio .pp-btn--quiet:focus {
	opacity: 1;
	background: transparent;
	color: inherit;
}

/* ---------- A third-party form in the quote column ----------
   Its buttons are left entirely to the site, so they look like every other
   button on it. Only the fields are given a readable ground, for the same
   reason the search box has one: a theme with white body text would otherwise
   have people typing white on white. */
.pp-store__form .gform_wrapper input[type="text"],
.pp-store__form .gform_wrapper input[type="email"],
.pp-store__form .gform_wrapper input[type="tel"],
.pp-store__form .gform_wrapper input[type="url"],
.pp-store__form .gform_wrapper input[type="number"],
.pp-store__form .gform_wrapper select,
.pp-store__form .gform_wrapper textarea,
.pp-quote__form .gform_wrapper input[type="text"],
.pp-quote__form .gform_wrapper input[type="email"],
.pp-quote__form .gform_wrapper input[type="tel"],
.pp-quote__form .gform_wrapper input[type="url"],
.pp-quote__form .gform_wrapper input[type="number"],
.pp-quote__form .gform_wrapper select,
.pp-quote__form .gform_wrapper textarea {
	background: #fff;
	color: #1d2327;
}