/**
 * Styles for the store
 *
 * The whole store is on this sheet - the index, the four store_cats
 * templates, and the single product page. /assets/css/legacy/store.css and the
 * .store body class it was scoped by are both gone, along with the store
 * branches in on1_legacy_stylesheets() and on1_legacy_body_class().
 *
 * Section tones follow the 70/20/10 rule. The page is its dark base; one
 * section per page is pinned light with data-theme="light" in the markup, and
 * one sits a single step up from the base. The .store-ad panels are marketing
 * accents and are outside that ratio.
 *
 * Two things to keep in mind when editing:
 *
 * - data-theme="light" only redefines custom properties. It does not set a
 *   background or a colour, so a pinned section has to declare both or it
 *   paints light-theme text onto whatever the body is. Every pinned section
 *   here does.
 * - Cards carry no border. Separation is a background step: --bg-800 on the
 *   base tone, --bg-700 inside the lifted band, white on a light section.
 *
 * @copyright   2026, ON1
 */

/*==============================================================================
 * SHARED STORE CHROME
 =============================================================================*/

/* !- Links
 *
 * base.css underlines every <a> and sets it to font-weight: 500. That is right
 * for a link inside a paragraph and wrong for everything in here - the pills,
 * the arrow links, the thumbnails that wrap an image. The brand guide asks for
 * link text with no underline and an arrow where direction matters, so the
 * store shows the underline on hover instead, and never on a link that wraps
 * a card or an image.
 */
.store-breadcrumb a,
.store-card-thumb,
.store-filter,
.store-related-card,
.store-row-all,
#store-hero .hero-link {
	text-decoration: none;
}

.store-breadcrumb a:hover,
.store-breadcrumb a:focus,
.store-related-card:hover p,
.store-related-card:focus p,
.store-row-all:hover,
.store-row-all:focus,
#store-hero .hero-link:hover,
#store-hero .hero-link:focus {
	text-decoration: underline;
}

/* !- Store sub-nav
 *
 * Sits under #site-header, which is sticky-md-top, rather than pinning itself.
 * The old sheet had it translucent over a full-bleed hero photo; the hero is
 * now a panel inside .container, so the bar carries the page tone instead.
 */
#product-navigation {
	background: var(--bg-900);
	box-shadow: inset 0 -1px 0 var(--bg-700);
	position: relative;
	z-index: 2;
}

.store-nav {
	align-items: center;
	display: flex;
	gap: 1rem;
}

.store-nav .nav {
	flex-wrap: nowrap;
	margin-right: auto;
	overflow-x: auto;
	scrollbar-width: none;
}

.store-nav .nav::-webkit-scrollbar {
	display: none;
}

.store-nav .nav-link {
	box-shadow: inset 0 -2px 0 transparent;
	color: var(--text-300);
	font-size: var(--text-xs);
	font-weight: 600;
	padding: 0.875rem 1rem;
	white-space: nowrap;
}

.store-nav .nav-link:hover,
.store-nav .nav-link:focus {
	color: var(--text-50);
}

.store-nav .nav-link.active {
	box-shadow: inset 0 -2px 0 var(--blue-500);
	color: var(--text-50);
}

/* !- Store search */
.store-search {
	align-items: center;
	background: var(--bg-800);
	border-radius: var(--border-radius);
	display: flex;
	flex-shrink: 0;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	width: 14rem;
}

.store-search i {
	color: var(--text-500);
	font-size: var(--text-mini);
}

.store-search input {
	background: none;
	border: 0;
	color: var(--text-100);
	font-size: var(--text-xs);
	outline: none;
	width: 100%;
}

.store-search input::placeholder {
	color: var(--text-500);
}

@media (max-width: 991.98px) {
	.store-nav {
		align-items: stretch;
		flex-direction: column;
		gap: 0;
		padding-bottom: 0.75rem;
	}

	.store-search {
		width: 100%;
	}
}

/* !- Breadcrumb */
/*
 * The padding is for the breadcrumb where it sits on the page background - the
 * product page, which opens on it. The category pages put the same breadcrumb
 * inside the photo band, where it is centred as part of a group and this
 * padding pushes the whole group down; .store-category-head-wrapper zeroes it
 * back out below.
 */
.store-breadcrumb {
	color: var(--text-500);
	font-size: var(--text-mini);
	padding-top: 2.5rem;
}

.store-breadcrumb a {
	color: var(--text-400);
}

.store-breadcrumb a:hover,
.store-breadcrumb a:focus {
	color: var(--text-100);
}

/* !- Category page header
 *
 * The photo band each category page opens on, same construction as the about,
 * products, and Learn hub heroes: a cover photo, a scrim on a ::before, and
 * the content above it on z-index 2. The wrapper carries data-theme="dark" in
 * the markup, so every token inside resolves dark over the photo whichever
 * theme the visitor is on.
 *
 * The aspect ratio only applies from lg up. Below that the band is sized by
 * its content and a floor instead - 2880/800 is 3.6:1, which on a phone is
 * about 100px tall and cannot hold a heading, an intro, and a row of pills.
 * Same arrangement as #learn-hero.
 */
.store-category-head-wrapper {
	background-position: center bottom;
	background-repeat: no-repeat;
	background-size: cover;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 100%;
	min-height: 340px;
	padding: 3rem 0;
	position: relative;
}

/*
 * max-width above is load-bearing, not belt and braces. aspect-ratio plus a
 * min-height that clamps lets the ratio resolve the *width* from the height:
 * under 1440px the box went to 400 x 3.6 = 1440 wide and hung off the right of
 * the viewport, taking the credit with it. #learn-hero and the about hero both
 * carry the same max-width for the same reason.
 */
@media (min-width: 992px) {
	.store-category-head-wrapper {
		aspect-ratio: 2880 / 800;
		min-height: 400px;
		padding: 0;
	}
}

/*
 * The scrim the other three photo heroes use, moved left and pushed harder.
 * Two changes, both forced by this header rather than preference:
 *
 * Origin at 28% instead of 50%. Those heroes centre their headings, so a scrim
 * centred at 50% sits under the type. This one is left-aligned in a col-lg-9,
 * and centred it reached full transparency around x=5% - right where the
 * heading starts.
 *
 * Denser and wider than 0.6/0.3/72%. The Software photo is a sunset with a
 * bright sky through the middle of the band, and at the lighter setting the
 * intro copy and its two links sat on orange and were not readable. This has
 * to clear the brightest of the three images, not the average - but only just,
 * so the photos still read as photos. It has already been walked back twice
 * from 0.82 for that reason and there is not much room left; the Software
 * intro is the first thing to go, so check that page, not this one, before
 * lightening it again.
 */
.store-category-head-wrapper::before {
	background: radial-gradient(ellipse 80% 105% at 28% 50%, rgba(0, 0, 0, 0.64) 0%, rgba(0, 0, 0, 0.38) 45%, rgba(0, 0, 0, 0) 74%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 1;
}

.store-category-head-wrapper > * {
	position: relative;
	z-index: 2;
}

/*
 * The breadcrumb and the section below it both carried their own top padding
 * from when this sat on the page background. Inside the band that padding is
 * dead weight above the text, which stops the group being centred.
 */
.store-category-head-wrapper .store-breadcrumb {
	color: var(--text-200);
	padding-top: 0;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.store-category-head-wrapper .store-breadcrumb a {
	color: var(--text-100);
}

.store-category-head-wrapper .store-breadcrumb a:hover,
.store-category-head-wrapper .store-breadcrumb a:focus {
	color: var(--white);
}

.store-page-head {
	padding: 0;
}

/* White rather than --text-*: the band is a photo, not a surface */
.store-page-head h1 {
	color: var(--white);
	font-size: var(--text-4xl);
	margin-bottom: 0.75rem;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.store-page-head .store-page-intro {
	color: var(--white);
	font-size: var(--text-lg);
	margin-bottom: 0;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}

.store-category-head-software {
	background-image: url(https://ononesoft.cachefly.net/images/store/on1-desktop-photo-editing-apps-sunset-mountain-silhouette@2x.jpg);
}

.store-category-head-presets {
	background-image: url(https://ononesoft.cachefly.net/images/store/on1-photo-editing-presets-black-and-white-mountain-landscape@2x.jpg);
}

.store-category-head-education-training {
	background-image: url(https://ononesoft.cachefly.net/images/store/on1-online-photo-editing-classes-street-photographer-camera@2x.jpg);
}

/* !- Filter pills
 *
 * Real links to the child term archives, not a client-side filter over the
 * rendered cards - the grids are paginated, so filtering what happens to be on
 * screen would hide results that are only a page away.
 */
.store-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 1.5rem;
}

.store-filter {
	background: var(--bg-800);
	border-radius: 2rem;
	color: var(--text-300);
	font-size: var(--text-xs);
	font-weight: 600;
	padding: 0.5rem 1rem;
}

.store-filter:hover,
.store-filter:focus {
	background: var(--bg-700);
	color: var(--text-50);
}

.store-filter.active {
	background: var(--blue-500);
	color: var(--white);
}

[data-theme="light"] .store-filter.active {
	background: var(--blue-600);
	color: var(--white);
}

/*==============================================================================
 * PRODUCT GRIDS
 =============================================================================*/

/* !- Row heads */
.store-section {
	padding: 3.5rem 0;
}

/* The single step up from the page's base tone - the 10% band */
.store-section-lifted {
	background: var(--bg-800);
}

/*
 * The light band. data-theme="light" flips the tokens; these two declarations
 * are what actually paints it, and without them the section keeps the body's
 * background and inherits the body's colour.
 */
.store-section-light {
	background: var(--bg-900);
	color: var(--text-300);
}

.store-row-head {
	margin-bottom: 1.75rem;
}

.store-row-head h2 {
	font-size: var(--text-2xl);
	margin-bottom: 0.25rem;
}

.store-row-sub {
	color: var(--text-400);
	font-size: var(--text-sm);
	margin: 0;
}

.store-row-all {
	font-size: var(--text-xs);
	font-weight: 600;
	white-space: nowrap;
}

.store-row-all i {
	font-size: var(--text-micro);
	margin-left: 0.25rem;
}

.store-row-empty {
	color: var(--text-400);
	margin: 0;
}

/* !- Product card */
.store-card {
	background: var(--bg-800);
	border-radius: var(--border-radius);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: background 0.15s ease, transform 0.15s ease;
}

/* The lifted band is itself --bg-800, so its cards step up again */
.store-section-lifted .store-card {
	background: var(--bg-700);
}

/*
 * White on any light surface - the pinned band and the light theme's own
 * pages both match, and --bg-800 against --bg-900 there is too close to read
 * as a separate card without a border.
 */
[data-theme="light"] .store-card {
	background: var(--white);
}

.store-card:hover {
	background: var(--bg-700);
	transform: translateY(-4px);
}

.store-section-lifted .store-card:hover {
	background: var(--bg-600);
}

[data-theme="light"] .store-card:hover {
	background: var(--white);
}

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

	.store-card:hover {
		transform: none;
	}
}

.store-card-thumb {
	display: block;
	position: relative;
}

.store-card-bg {
	display: block;
	height: auto;
	width: 100%;
}

.store-card-icon {
	height: auto;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100px;
}

.store-card-badge {
	border-radius: var(--border-radius);
	color: var(--white);
	font-size: var(--text-micro);
	font-weight: 700;
	left: 0.625rem;
	letter-spacing: 0.08em;
	padding: 0.25rem 0.5rem;
	position: absolute;
	text-transform: uppercase;
	top: 0.625rem;
}

.store-card-badge-blue {
	background: var(--blue-600);
}

.store-card-badge-green {
	background: var(--green-700);
}

.store-card-badge-gold {
	background: var(--gold-800);
}

.store-card-badge-magenta {
	background: var(--magenta-600);
}

.store-card-badge-orange {
	background: var(--orange-700);
}

.store-card-badge-purple {
	background: var(--legacy-purple-500);
}

.store-card-badge-red {
	background: var(--red-600);
}

.store-card-badge-teal {
	background: var(--teal-800);
}

.store-card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem;
}

.store-card-title {
	font-size: var(--text-base);
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
}

/*
 * base.css gives every <a> font-weight: 500 and an underline, both of which
 * win over the heading they sit in - hence the weight repeated here rather
 * than left to inherit.
 */
.store-card-title a {
	color: var(--text-100);
	font-weight: 700;
	text-decoration: none;
}

.store-card-title a:hover,
.store-card-title a:focus {
	color: var(--link);
	text-decoration: underline;
}

/* ON1 Plus is orange, never gold */
.store-card-plus {
	color: var(--accent-orange);
	font-size: var(--text-mini);
	font-weight: 600;
	margin: 0;
}

.store-card-price {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.25rem;
}


.store-card-total {
	color: var(--text-50);
	font-size: var(--text-xl);
	font-weight: 700;
}

/*
 * The spinner stands in for the price until SBL fills it, so left alone it
 * inherits whatever size that number is - 2.25rem on the product page. Pinned
 * to the body size so the placeholder is never bigger than what replaces it.
 */
[data-fsc-item-total] .fa-spinner {
	font-size: var(--text-base);
}

.store-card-cart {
	font-size: var(--text-sm);
	padding: 0.75rem 1.25rem;
	width: 100%;
}

/* !- Subscription card */
.store-sub-copy {
	color: var(--text-400);
	font-size: var(--text-mini);
	margin: 0;
}

.store-sub-suffix {
	color: var(--text-400);
	font-size: var(--text-mini);
	margin-left: -0.25rem;
}

.store-sub-toggle {
	background: var(--bg-900);
	border-radius: 2rem;
	display: flex;
	gap: 0.25rem;
	padding: 0.25rem;
}

.store-section-lifted .store-sub-toggle {
	background: var(--bg-800);
}

[data-theme="light"] .store-sub-toggle {
	background: var(--bg-800);
}

.store-sub-radio {
	height: 0;
	opacity: 0;
	position: absolute;
	width: 0;
}

.store-sub-toggle label {
	border-radius: 2rem;
	color: var(--text-400);
	cursor: pointer;
	flex: 1;
	font-size: var(--text-mini);
	font-weight: 600;
	padding: 0.375rem 0.75rem;
	text-align: center;
}

.store-sub-radio:checked + label {
	background: var(--blue-500);
	color: var(--white);
}

[data-theme="light"] .store-sub-radio:checked + label {
	background: var(--blue-600);
}

.store-sub-radio:focus-visible + label {
	outline: 2px solid var(--link);
	outline-offset: 2px;
}

/* One interval at a time. The radios have no JS behind them - :has() reads them. */
.store-sub-card:has(.store-sub-radio-yearly:checked) .store-sub-plan-monthly,
.store-sub-card:has(.store-sub-radio-monthly:checked) .store-sub-plan-yearly {
	display: none;
}

.store-sub-plan {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-top: auto;
}

/*==============================================================================
 * STORE INDEX
 =============================================================================*/

/* !- Hero */
/*
 * No padding underneath on purpose. #store-trust follows on the same dark
 * tone with no boundary between them, so any bottom padding here just stacks
 * onto its 3.5rem and reads as one gap. The trust strip owns that space, which
 * keeps the dark above its content equal to the dark below it - below, the
 * light band starts at the section edge, and padding on the light side of a
 * colour change does not read as part of the gap.
 */
#store-hero {
	padding: 3.5rem 0 0;
}

#store-hero .hero-slide {
	border-radius: var(--border-radius);
	padding: 3rem;
}

#store-hero .hero-slide-green {
	background: linear-gradient(-40deg, var(--green-800) 0%, var(--bg-900) 70%);
}

#store-hero .hero-slide-blue {
	background: linear-gradient(-40deg, var(--blue-800) 0%, var(--bg-900) 70%);
}

#store-hero .hero-slide-purple {
	background: linear-gradient(-40deg, var(--legacy-purple-800) 0%, var(--bg-900) 70%);
}

/*
 * The slides carry data-theme="dark" in the markup. Their gradients fade into
 * --bg-900, which is #f6f6f7 on the light theme - without pinning, the panel
 * faded to near-white under the white type below and the slide disappeared.
 * Pinning resolves every token inside the panel to its dark value for good,
 * which is what a coloured panel wants in either theme.
 *
 * Pinned on each .hero-slide rather than on #store-hero, so the carousel
 * indicators underneath stay on the page's own theme.
 *
 * The type is white rather than --text-*, because the panel is a colour, not a
 * surface. data-theme only redefines properties - it sets no background and no
 * colour - so both still have to be declared here.
 */
#store-hero .eyebrow {
	color: var(--white);
	opacity: 0.75;
}

#store-hero h2 {
	color: var(--white);
	font-size: var(--text-5xl);
	line-height: 1.1;
	margin-bottom: 0.75rem;
}

#store-hero .hero-tagline {
	color: var(--white);
	font-size: var(--text-lg);
	margin-bottom: 1.5rem;
	max-width: 30rem;
	opacity: 0.85;
}

#store-hero .hero-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}

#store-hero .btn {
	font-size: var(--text-sm);
	padding: 0.75rem 1.25rem;
}

#store-hero .hero-link {
	color: var(--white);
	font-size: var(--text-sm);
	font-weight: 600;
}

#store-hero .hero-link i {
	font-size: var(--text-mini);
	margin-left: 0.25rem;
}

#store-hero .carousel-indicators {
	margin: 0;
	position: static;
}

#store-hero .carousel-indicators [data-bs-target] {
	background: var(--bg-500);
	border: 0;
	border-radius: 50%;
	height: 0.5rem;
	margin: 1.25rem 0.25rem 0;
	opacity: 1;
	width: 0.5rem;
}

#store-hero .carousel-indicators .active {
	background: var(--blue-500);
	border-radius: var(--border-radius);
	width: 1.375rem;
}

@media (max-width: 767.98px) {
	#store-hero .hero-slide {
		padding: 2rem 1.5rem;
	}

	#store-hero h2 {
		font-size: var(--text-3xl);
	}
}

/* !- Trust strip */
#store-trust {
	box-shadow: inset 0 -1px 0 var(--bg-700);
	padding: 3.5rem 0;
}

#store-trust .trust-item {
	align-items: center;
	display: flex;
	gap: 0.75rem;
}

#store-trust .trust-item i {
	color: var(--blue-500);
	font-size: var(--text-xl);
}

[data-theme="light"] #store-trust .trust-item i {
	color: var(--blue-600);
}

#store-trust .trust-title {
	color: var(--text-100);
	font-size: var(--text-sm);
	font-weight: 600;
	margin: 0;
}

#store-trust .trust-copy {
	color: var(--text-400);
	font-size: var(--text-mini);
	margin: 0;
}

/* !- Ad panels
 *
 * Marketing accents, outside the neutral ratio. Every gradient is one of the
 * documented pairs at -40deg, and the type is white in both themes because the
 * panel is a colour, not a surface.
 */
.store-ad {
	padding: 3.5rem 0;
}

.store-ad-panel {
	border-radius: var(--border-radius);
	overflow: hidden;
	padding: 3rem;
}

.store-ad-blue {
	background: linear-gradient(-40deg, var(--blue-800), var(--legacy-purple-800));
}

.store-ad-magenta {
	background: linear-gradient(-40deg, var(--red-800), var(--magenta-800), var(--legacy-purple-800));
}

.store-ad-orange {
	background: linear-gradient(-40deg, var(--orange-800), var(--red-800));
}

.store-ad .eyebrow {
	color: var(--white);
	opacity: 0.75;
}

.store-ad h2 {
	color: var(--white);
	font-size: var(--text-3xl);
	margin-bottom: 0.5rem;
}

.store-ad-copy {
	color: var(--white);
	font-size: var(--text-base);
	margin-bottom: 1.5rem;
	max-width: 32rem;
	opacity: 0.85;
}

.store-ad .btn {
	font-size: var(--text-sm);
	padding: 0.75rem 1.25rem;
}

@media (max-width: 767.98px) {
	.store-ad-panel {
		padding: 2rem 1.5rem;
	}

	.store-ad h2 {
		font-size: var(--text-2xl);
	}
}

/*==============================================================================
 * CATEGORY PAGES
 =============================================================================*/

/* !- Pagination */
.store-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	justify-content: center;
	margin-top: 2.5rem;
}

.store-pagination .page-numbers {
	background: var(--bg-800);
	border-radius: var(--border-radius);
	color: var(--text-300);
	font-size: var(--text-xs);
	font-weight: 600;
	padding: 0.5rem 0.875rem;
}

.store-pagination a.page-numbers:hover,
.store-pagination a.page-numbers:focus {
	background: var(--bg-700);
	color: var(--text-50);
}

.store-pagination .page-numbers.current {
	background: var(--blue-500);
	color: var(--white);
}

[data-theme="light"] .store-pagination .page-numbers.current {
	background: var(--blue-600);
}

/* !- FAQ
 *
 * <details>/<summary> rather than the old div pair - the accordion the store
 * templates carried had no JS behind it anywhere in the theme, so every answer
 * rendered open.
 */
.store-faq {
	background: var(--bg-800);
	border-radius: var(--border-radius);
	margin-bottom: 0.75rem;
	overflow: hidden;
}

.store-section-lifted .store-faq {
	background: var(--bg-700);
}

[data-theme="light"] .store-faq {
	background: var(--white);
}

.store-faq summary {
	align-items: center;
	color: var(--text-100);
	cursor: pointer;
	display: flex;
	font-size: var(--text-base);
	font-weight: 600;
	gap: 0.75rem;
	list-style: none;
	padding: 1rem 1.25rem;
}

.store-faq summary::-webkit-details-marker {
	display: none;
}

.store-faq summary i {
	color: var(--text-400);
	font-size: var(--text-sm);
	margin-left: auto;
	transition: transform 0.15s ease;
}

.store-faq[open] summary i {
	transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
	.store-faq summary i {
		transition: none;
	}
}

.store-faq .store-faq-answer {
	color: var(--text-300);
	padding: 0 1.25rem 1.25rem;
}

.store-faq .store-faq-answer p:last-child {
	margin-bottom: 0;
}

/*==============================================================================
 * SINGLE PRODUCT
 =============================================================================*/

#store-product {
	padding: 2.5rem 0 3.5rem;
}

#store-product .store-product-media {
	background: var(--bg-800);
	border-radius: var(--border-radius);
	overflow: hidden;
	position: relative;
}

[data-theme="light"] #store-product .store-product-media {
	background: var(--white);
}

#store-product h1 {
	font-size: var(--text-3xl);
	margin-bottom: 0.75rem;
}

#store-product .store-product-price {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-bottom: 1.5rem;
}

#store-product .store-product-price del {
	color: var(--text-400);
	font-size: var(--text-base);
}

#store-product .store-product-total {
	color: var(--text-50);
	font-size: var(--text-4xl);
	font-weight: 700;
}

#store-product .store-product-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 1.5rem;
}

#store-product .store-product-actions .btn {
	font-size: var(--text-sm);
	padding: 0.75rem 1.5rem;
}

#store-product .store-product-excerpt {
	color: var(--text-300);
	font-size: var(--text-lg);
	margin-bottom: 1.5rem;
}

#store-product .store-product-meta {
	color: var(--text-400);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--text-mini);
	gap: 1.25rem;
}

#store-product .store-product-meta i {
	color: var(--blue-500);
	margin-right: 0.375rem;
}

[data-theme="light"] #store-product .store-product-meta i {
	color: var(--blue-600);
}

#store-product-details {
	padding-bottom: 3.5rem;
}

#store-related {
	padding: 3.5rem 0;
}

/* !- VAT note
 *
 * /assets/js/fastspring.js swaps .hide for .show on its EU callback. Both
 * classes used to come from legacy/utilities.css, which the store no longer
 * loads, so they are defined here for the one element that uses them.
 */
#store-product .vat-note {
	color: var(--text-400);
	font-size: var(--text-mini);
	margin-top: -1rem;
}

#store-product .vat-note.hide {
	display: none;
}

#store-product .vat-note.show {
	display: block;
}

/* !- Related articles */
.store-related-card {
	display: block;
}

.store-related-card p {
	color: var(--text-100);
	font-size: var(--text-sm);
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
}

.store-related-card:hover p,
.store-related-card:focus p {
	color: var(--link);
}

/* !- Discount display
 *
 * Both of these start hidden in the markup and are revealed by
 * /assets/js/store.js when SBL reports a discount above zero, so the number
 * always agrees with the total beside it.
 */
.store-card-was {
	color: var(--text-400);
	font-size: var(--text-mini);
}

.store-card-save {
	color: var(--accent-blue);
	font-size: var(--text-mini);
	font-weight: 700;
}