/* perennial — shop.css
   The 商店 landing page. Loaded only on the shop front door.

   Two things separate this page from the home page and they are both here at
   the top: sections sit 64px apart rather than 128 (a front door wants density
   where a story wants air), and no rule is ever drawn between them — the
   whitespace carries the breaks. There are no decorative dots and no arrows.

   Clay has exactly one job on this page: the 補充包 marker, and the dot on the
   sticky bar's cart. Selection is a filled square and a hairline, never colour.

   Breakpoints follow base.css: < 768 mobile · 768–1023 tablet · ≥ 1024 desktop,
   which is also where the gutter steps 24 → 40 → 64. */

/* ── Page ──────────────────────────────────────────────────────────────── */
.pn-shop {
	--pn-shop-gap: var(--space-7);            /* 48 — mobile section gap is 40, set below */
	--pn-shop-top: var(--space-6);            /* 32 */
	--pn-shop-bottom: 112px;                  /* clears the sticky bar */
	--pn-select-inset: var(--space-2);        /* 8 */
	--pn-card-pad: var(--space-3);            /* 12 */

	--pn-text-h1: 36px;
	--pn-text-h2: 28px;
}

.pn-shop { --pn-shop-gap: 40px; }

@media (min-width: 768px) {
	.pn-shop {
		--pn-shop-gap: var(--space-7);         /* 48 */
		--pn-shop-top: var(--space-7);         /* 48 */
		--pn-shop-bottom: 80px;
		--pn-select-inset: var(--space-3);     /* 12 */
		--pn-card-pad: 14px;
		--pn-text-h1: 44px;
		--pn-text-h2: 32px;
	}
}

@media (min-width: 1024px) {
	.pn-shop {
		--pn-shop-gap: var(--space-8);         /* 64 */
		--pn-shop-top: var(--space-8);         /* 64 */
		--pn-shop-bottom: var(--space-9);      /* 96 */
		--pn-text-h1: var(--text-h1);          /* 52 */
		--pn-text-h2: var(--text-h2);          /* 36 */
	}
}

.pn-shop__body {
	display: flex;
	flex-direction: column;
	gap: var(--pn-shop-gap);
	padding-block: var(--pn-shop-top) var(--pn-shop-bottom);
}

/* Every block is a plain column; the gap above is the only separation. */
.pn-shop__block { min-width: 0; }

/* The h2 the page uses: the same serif as .pn-h2, reading this page's scale. */
.pn-shop__h2 {
	font-family: var(--font-serif);
	font-weight: var(--weight-regular);
	font-size: var(--pn-text-h2);
	line-height: var(--lh-h2);
	letter-spacing: var(--ls-h2);
	text-wrap: balance;
	line-break: strict;
	hanging-punctuation: allow-end;
}

/* Block labels are ink, not grey; only 期刊's label stays secondary. */
.pn-repeat > .pn-repeat__form .pn-eyebrow,
.pn-cats .pn-eyebrow,
.pn-needs .pn-eyebrow { color: var(--text-primary); }

/* Pills: the one radius exception the design allows, for buttons on this page. */
.pn-shop .pn-btn--pill { border-radius: var(--radius-full); }

/* ── 1 · Head and search ───────────────────────────────────────────────── */
.pn-shop__head {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.pn-shop__head-text {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.pn-shop__title-row {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
}

.pn-shop__count {
	font-size: var(--text-caption);
	color: var(--text-tertiary);
}

.pn-shop__count-full { display: none; }

.pn-shop__lead {
	color: var(--text-secondary);
	display: none;   /* Desktop only: on the smaller boards the search takes this room. */
}

@media (min-width: 768px) {
	.pn-shop__head { gap: var(--space-5); }
	.pn-shop__title-row { gap: var(--space-4); }
	.pn-shop__count { font-size: var(--text-small); }
	.pn-shop__count-full { display: inline; }
	.pn-shop__count-short { display: none; }
}

@media (min-width: 1024px) {
	.pn-shop__head {
		display: grid;
		grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
		column-gap: var(--grid-gap);
		align-items: end;
	}
	.pn-shop__head-text { grid-column: span 7; }
	.pn-shop__find { grid-column: span 5; }
	.pn-shop__lead { display: block; }
}

.pn-shop__find {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

/* Search field. The border lives on the box, not the input, so the suggestion
   list can drop inside the same 1px rule the field is drawn with. */
.pn-shopsearch__box {
	position: relative;
	background: var(--bg-page);
	border: var(--line-weight) solid var(--line-hair);
	border-radius: var(--radius-sm);
	transition: border-color var(--dur-fast) var(--ease-out);
}

.pn-shopsearch__field {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: 13px 14px;
}

.pn-shop .pn-shopsearch__icon { color: var(--text-tertiary); }

.pn-shop .pn-shopsearch__input {
	flex: 1;
	min-width: 0;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	font-family: var(--font-sans);
	font-size: var(--text-body);   /* 16px: any smaller and iOS zooms on focus. */
	line-height: 1.4;
	color: var(--text-primary);
	-webkit-appearance: none;
	appearance: none;
}
.pn-shop .pn-shopsearch__input::placeholder { color: var(--text-tertiary); opacity: 1; }
.pn-shop .pn-shopsearch__input::-webkit-search-cancel-button { -webkit-appearance: none; }
/* The ring belongs to the box, which is what a sighted user reads as the field. */
.pn-shop .pn-shopsearch__input:focus-visible { box-shadow: none; }
.pn-shopsearch__box:focus-within,
.pn-shopsearch__box.is-open { border-color: var(--line-strong); }
.pn-shopsearch__box:focus-within { box-shadow: var(--focus-ring); }

@media (min-width: 768px) {
	.pn-shopsearch__field { padding: 14px var(--space-4); }
}

/* Suggestions: rows inside the same box, divided by hairlines. */
.pn-shopsearch__list {
	border-top: var(--line-weight) solid var(--line-hair);
}
.pn-shopsearch__row + .pn-shopsearch__row { border-top: var(--line-weight) solid var(--line-hair); }

.pn-shop .pn-shopsearch__link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-4);
	padding: 10px 14px;
	min-height: 44px;
	font-size: var(--text-small);
	color: var(--text-secondary);
}
.pn-shop .pn-shopsearch__link:hover,
.pn-shop .pn-shopsearch__link:focus-visible { color: var(--text-primary); }
.pn-shopsearch__meta { color: var(--text-tertiary); flex: none; }

@media (min-width: 768px) {
	.pn-shop .pn-shopsearch__link { padding: 10px var(--space-4); }
}

/* Chips: links into the listing page with a tag already applied. */
.pn-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.pn-shop .pn-chip {
	display: inline-flex;
	align-items: center;
	padding: var(--space-2) 14px;   /* 40px+ target on a phone */
	border: var(--line-weight) solid var(--line-hair);
	border-radius: var(--radius-full);
	font-size: var(--text-small);
	line-height: 1.4;
	color: var(--text-primary);
	transition: border-color var(--dur-fast) var(--ease-out);
}
.pn-shop .pn-chip:hover,
.pn-shop .pn-chip:focus-visible { border-color: var(--line-strong); }

@media (min-width: 768px) {
	.pn-shop .pn-chip { padding: 6px 14px; }
}

/* ── 2 · 再買一次 ───────────────────────────────────────────────────────── */
.pn-repeat__form {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.pn-repeat__header {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.pn-repeat__intro {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.pn-repeat__sub {
	font-size: var(--text-small);
	color: var(--text-secondary);
	display: none;   /* Desktop only, as on the boards. */
}

.pn-repeat__signin {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: var(--space-5);
	border: var(--line-weight) solid var(--line-hair);
}
.pn-repeat__signin .pn-shop__h2 { font-size: 22px; line-height: 1.3; }
.pn-repeat__signin .pn-repeat__sub { display: block; }

/* 已選 n 項 + the confirm button. Desktop and tablet keep it in the header row;
   on a phone the block's foot carries a single full-width pill instead. */
.pn-repeat__action {
	display: none;
	align-items: center;
	gap: var(--space-4);
	flex-shrink: 0;
}
.pn-repeat__count {
	font-size: var(--text-small);
	color: var(--text-secondary);
	white-space: nowrap;
}

.pn-shop .pn-repeat__confirm { display: inline-flex; width: 100%; }

@media (min-width: 768px) {
	.pn-repeat__form { gap: var(--space-5); }
	.pn-repeat__header {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--space-4);
	}
	.pn-repeat__intro { gap: 10px; }
	.pn-repeat__action { display: flex; }
	.pn-shop .pn-repeat__confirm { display: none; }
}

@media (min-width: 1024px) {
	.pn-repeat__form { gap: var(--space-6); }
	.pn-repeat__header { gap: var(--space-5); }
	.pn-repeat__intro { gap: var(--space-3); }
	.pn-repeat__action { gap: 20px; }
	.pn-repeat__sub { display: block; }
}

/* Ten cards in the DOM; CSS decides how many are on screen. */
.pn-repeat__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-4);
}
.pn-repeat__item:nth-child(n + 5) { display: none; }

@media (min-width: 768px) {
	.pn-repeat__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--grid-gap);
	}
	.pn-repeat__item:nth-child(n + 4) { display: none; }
}

@media (min-width: 1024px) {
	.pn-repeat__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
	.pn-repeat__item:nth-child(n + 4) { display: block; }
	.pn-repeat__item:nth-child(n + 6) { display: none; }
}

/* The seam where a subscription flow will land, and the way to the full history. */
.pn-repeat__foot {
	display: none;
	align-items: center;
	gap: var(--space-3);
	font-size: var(--text-small);
	color: var(--text-secondary);
}
.pn-shop .pn-repeat__orders { font-size: var(--text-small); color: var(--text-link); }

@media (min-width: 768px) {
	.pn-repeat__foot { display: flex; }
	.pn-repeat__seam { display: none; }
}
@media (min-width: 1024px) {
	.pn-repeat__seam { display: inline; }
}

/* ── The card ──────────────────────────────────────────────────────────── */
.pn-rcard {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--surface-card);
	border: var(--line-weight) solid var(--surface-card-border);
	border-radius: var(--radius-none);
	box-shadow: none;
	transition: border-color var(--dur-fast) var(--ease-out);
}
.pn-rcard.is-out { opacity: 0.4; }

.pn-rcard__media { position: relative; }
.pn-rcard__media-link { display: block; }
/* The tick box and the refill mark sit over the image link, not under it. */
.pn-rcard__select,
.pn-rcard__refill { z-index: 1; }
.pn-rcard__media .pn-media { transition: opacity var(--dur-fast) var(--ease-out); }
.pn-rcard:hover .pn-rcard__media .pn-media { opacity: var(--hover-opacity); }

/* The tick box reads as 20px and is tapped as 44px: the hit area is anchored to
   the card corner and the square is centred inside it, which lands the square
   on the inset the design asks for without shrinking the target. */
.pn-rcard__select {
	position: absolute;
	top: calc(var(--pn-select-inset) - 12px);
	left: calc(var(--pn-select-inset) - 12px);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	cursor: pointer;
}
.pn-rcard__check {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.pn-rcard__box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	background: transparent;
	border: var(--line-weight) solid var(--line-strong);
	transition: background-color var(--dur-fast) var(--ease-out);
}
.pn-shop .pn-rcard__tick {
	width: 14px;
	height: 14px;
	color: var(--paper-000);
	opacity: 0;
}
.pn-rcard__check:checked + .pn-rcard__box { background: var(--green-950); }
.pn-rcard__check:checked + .pn-rcard__box .pn-rcard__tick { opacity: 1; }
.pn-rcard__check:focus-visible + .pn-rcard__box { box-shadow: var(--focus-ring); }
.pn-rcard__check[disabled] { cursor: default; }

/* The one clay mark on the page. */
.pn-rcard__refill {
	position: absolute;
	top: var(--pn-select-inset);
	right: var(--pn-select-inset);
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: var(--text-caption);
	color: var(--text-primary);
}
.pn-rcard__refill-label { display: none; }

@media (min-width: 768px) {
	.pn-rcard__refill-label { display: inline; }
}

.pn-rcard__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--space-1);
	padding: var(--pn-card-pad);
}

@media (min-width: 768px) {
	.pn-rcard__body {
		gap: 6px;
		padding: 14px 14px var(--space-4);
	}
}

/* Image and name go to the same place. The name fades on hover like every
   other link on the site; the image has the media's own fade. */
.pn-shop .pn-rcard__name {
	align-self: flex-start;
	font-size: var(--text-small);
	line-height: 1.5;
	color: var(--text-primary);
	transition: opacity var(--dur-fast) var(--ease-out);
}
.pn-shop .pn-rcard__name:hover,
.pn-shop .pn-rcard__name:focus-visible { opacity: var(--hover-opacity); }

.pn-rcard__price {
	font-size: var(--text-small);
	color: var(--text-secondary);
}
.pn-rcard__price del { opacity: 0.6; }

.pn-rcard__last {
	font-size: var(--text-caption);
	color: var(--text-tertiary);
}

@media (min-width: 768px) {
	.pn-shop .pn-rcard__name { line-height: 1.6; }
}

.pn-rcard__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	margin-top: auto;
	padding-top: var(--space-1);
	border-top: var(--line-weight) solid var(--line-hair);
}

@media (min-width: 768px) {
	.pn-rcard__foot { padding-top: var(--space-2); }
}

/* ── Stepper ───────────────────────────────────────────────────────────── */
/* The ± buttons only exist once shop.js has run. Without it the number field is
   the control: type a quantity, tick the box, submit the form. */
.pn-stepper {
	display: flex;
	align-items: center;
	flex: 1;
	justify-content: space-between;
}
.pn-stepper__btn {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	font-size: var(--text-body);
	color: var(--text-secondary);
	transition: opacity var(--dur-fast) var(--ease-out);
}
.pn-shop.is-live .pn-stepper__btn { display: flex; }
.pn-stepper__btn[disabled] { opacity: 0.4; cursor: default; }

.pn-shop .pn-stepper__value {
	width: 3ch;
	min-width: 24px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	font-family: var(--font-sans);
	font-size: var(--text-small);
	text-align: center;
	color: var(--text-primary);
	-moz-appearance: textfield;
	appearance: textfield;
}
.pn-shop .pn-stepper__value::-webkit-outer-spin-button,
.pn-shop .pn-stepper__value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* With no JavaScript the field has to look typeable, because it is the control. */
.pn-shop:not(.is-live) .pn-stepper__value {
	width: 4.5ch;
	min-height: 36px;
	border: var(--line-weight) solid var(--line-hair);
	border-radius: var(--radius-sm);
}

@media (min-width: 768px) {
	.pn-stepper { flex: none; justify-content: flex-start; }
	.pn-stepper__btn { width: 36px; height: 36px; }
}

/* ── Add button ────────────────────────────────────────────────────────── */
/* Hidden on a phone: there, one confirm at the block's foot adds everything
   ticked, which is the whole point of the mobile flow. */
.pn-rcard__add {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	color: var(--text-primary);
	transition: color var(--dur-fast) var(--ease-out);
}
.pn-shop.is-live .pn-rcard__add-done { display: none; }
.pn-shop.is-live .pn-rcard.is-added .pn-rcard__add-cart { display: none; }
.pn-shop.is-live .pn-rcard.is-added .pn-rcard__add-done { display: flex; }

.pn-shop .pn-rcard__notify {
	font-size: var(--text-caption);
	color: var(--text-secondary);
	text-align: right;
}

@media (min-width: 768px) {
	.pn-shop.is-live .pn-rcard__add { display: flex; }
}

/* ── 3 · 分類 ───────────────────────────────────────────────────────────── */
.pn-cats {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.pn-cats__intro {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.pn-cats__note {
	font-size: var(--text-small);
	line-height: var(--lh-body);
	color: var(--text-secondary);
	display: none;
}

.pn-cats__list { display: grid; grid-template-columns: minmax(0, 1fr); }

.pn-shop .pn-cats__link {
	display: flex;
	transition: opacity var(--dur-fast) var(--ease-out);
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	min-height: 52px;
	border-bottom: var(--line-weight) solid var(--line-hair);
}

.pn-cats__name { font-size: var(--text-body); }

/* The row is the link, so the row is what changes — name and count together. */
.pn-shop .pn-cats__link:hover,
.pn-shop .pn-cats__link:focus-visible { opacity: var(--hover-opacity); }

.pn-cats__count {
	font-size: var(--text-small);
	color: var(--text-tertiary);
	flex: none;
}

@media (min-width: 768px) {
	.pn-cats { gap: 20px; }
	.pn-cats__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 40px;
	}
	.pn-shop .pn-cats__link {
		align-items: baseline;
		min-height: 0;
		padding-block: 14px;
	}
}

@media (min-width: 1024px) {
	.pn-cats {
		display: grid;
		grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
		column-gap: var(--grid-gap);
	}
	.pn-cats__intro { grid-column: span 3; }
	.pn-cats__note { display: block; }
	.pn-cats__list {
		grid-column: span 9;
		column-gap: var(--space-8);
	}
	.pn-shop .pn-cats__link { padding-block: var(--space-4); }
}

/* ── 4 · 從需要開始 ─────────────────────────────────────────────────────── */
.pn-needs {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.pn-needs__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-3);
}

.pn-shop .pn-needs__card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	padding: var(--space-4);
	border: var(--line-weight) solid var(--line-hair);
	transition: opacity var(--dur-fast) var(--ease-out);
}
.pn-shop .pn-needs__card:hover,
.pn-shop .pn-needs__card:focus-visible { opacity: var(--hover-opacity); }

.pn-needs__title {
	align-self: flex-start;
	font-family: var(--font-serif);
	font-size: 22px;
	line-height: 1.25;
	letter-spacing: var(--ls-h2);
}

.pn-needs__note {
	font-size: 13px;
	line-height: 1.8;
	color: var(--text-secondary);
}

@media (min-width: 768px) {
	.pn-needs { gap: 20px; }
	.pn-needs__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}
	.pn-shop .pn-needs__card { gap: var(--space-2); padding: 20px; }
	.pn-needs__title { font-size: 24px; }
	.pn-needs__note { font-size: var(--text-small); line-height: var(--lh-body); }
}

@media (min-width: 1024px) {
	.pn-needs { gap: var(--space-5); }
	.pn-needs__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--grid-gap);
	}
	.pn-shop .pn-needs__card {
		gap: 10px;
		padding: var(--space-5);
		min-height: 120px;
	}
	.pn-needs__title { font-size: var(--text-h3); }
}

/* ── 5 · 期刊 ───────────────────────────────────────────────────────────── */
.pn-shopmag {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

/* Label above the line, the same stack every other block on the page uses. */
.pn-shopmag__text {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}
.pn-shopmag .pn-eyebrow { color: var(--text-secondary); }

.pn-shop .pn-shopmag__line {
	align-self: flex-start;
	font-family: var(--font-serif);
	font-size: 22px;
	line-height: 1.35;
	letter-spacing: var(--ls-h2);
	text-wrap: balance;
	transition: opacity var(--dur-fast) var(--ease-out);
}
.pn-shop .pn-shopmag__line:hover,
.pn-shop .pn-shopmag__line:focus-visible { opacity: var(--hover-opacity); }

.pn-shop .pn-shopmag__more { font-size: var(--text-small); color: var(--text-link); white-space: nowrap; }

@media (min-width: 768px) {
	.pn-shopmag {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-4);
	}
	.pn-shop .pn-shopmag__line { font-size: 24px; }
}

@media (min-width: 1024px) {
	.pn-shopmag { gap: var(--grid-gap); }
	.pn-shop .pn-shopmag__line { font-size: var(--text-h3); }
}

/* ── Mobile sticky bar ─────────────────────────────────────────────────── */
/* Outside the glass header on purpose: backdrop-filter makes that header the
   containing block for fixed children, which would pin this to the 64px bar. */
.pn-shopbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	background: var(--bg-page);
	border-top: var(--line-weight) solid var(--line-hair);
	padding: 10px var(--pn-gutter) calc(26px + env(safe-area-inset-bottom));
}

.pn-shopbar__inner {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.pn-shop .pn-shopbar__search {
	display: flex;
	flex: 1;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 11px 14px;
	border: var(--line-weight) solid var(--line-hair);
	border-radius: var(--radius-sm);
	font-size: 15px;
	color: var(--text-tertiary);
	text-align: left;
}

.pn-shop .pn-shopbar__cart {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	color: var(--text-primary);
}
.pn-shopbar__badge {
	display: none;
	position: absolute;
	top: 4px;
	right: 2px;
	width: var(--dot-size-lg);
	height: var(--dot-size-lg);
	border-radius: var(--radius-full);
	background: var(--dot-accent);
}
.pn-shopbar__cart.is-filled .pn-shopbar__badge { display: block; }

@media (min-width: 768px) {
	.pn-shopbar { display: none; }
}

/* ── Reduced motion ────────────────────────────────────────────────────── */
/* The page has one motion moment — the add icon's colour — and one growing
   line. Both go; the state changes themselves still happen, instantly. */
@media (prefers-reduced-motion: reduce) {
	.pn-shop .pn-rcard__name,
	.pn-shop .pn-cats__link,
	.pn-shop .pn-needs__card,
	.pn-shop .pn-shopmag__line,
	.pn-rcard__add,
	.pn-rcard__media .pn-media,
	.pn-rcard__box { transition: none; }
}