/* Box Shop homepage section. */
.homepage-box-shop {
	background: var(--box-shop-bg, #050505);
	color: var(--box-shop-text, #ffffff);
}

.homepage-box-shop .section-heading h2 {
	color: var(--box-shop-text, #ffffff) !important;
}

.homepage-box-shop .section-heading .eyebrow,
.homepage-box-shop .section-heading .eyebrow span {
	color: var(--box-shop-text-hover, #2563eb);
}

.box-shop-description {
	max-width: 720px;
	margin: -10px 0 32px;
	color: color-mix(in srgb, var(--box-shop-text, #ffffff) 70%, transparent);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.65;
}

.box-shop-grid {
	display: grid;
	grid-template-columns: repeat(var(--box-shop-columns, 4), minmax(0, 1fr));
	border-top: 1px solid var(--box-shop-border, #2b2b2b);
	border-left: 1px solid var(--box-shop-border, #2b2b2b);
	background: var(--box-shop-bg, #050505);
}

.box-shop-card {
	position: relative;
	z-index: 0;
	display: flex;
	min-width: 0;
	min-height: clamp(270px, 22vw, 390px);
	flex-direction: column;
	padding: clamp(26px, 2.4vw, 44px) clamp(20px, 2vw, 36px) 20px;
	border-right: 1px solid var(--box-shop-border, #2b2b2b);
	border-bottom: 1px solid var(--box-shop-border, #2b2b2b);
	background: var(--box-shop-bg, #050505);
	color: var(--box-shop-text, #ffffff);
	text-decoration: none;
	overflow: hidden;
	outline: 1px solid transparent;
	outline-offset: -1px;
	transition: color .22s ease, outline-color .22s ease, background-color .22s ease;
	isolation: isolate;
}

.box-shop-card:hover,
.box-shop-card:focus-visible {
	z-index: 1;
	color: var(--box-shop-text-hover, #2563eb);
	outline-color: var(--box-shop-border-hover, #f5f1ea);
}

.box-shop-card:focus-visible {
	box-shadow: inset 0 0 0 2px var(--box-shop-border-hover, #f5f1ea);
}

.box-shop-card__phrase {
	display: flex;
	min-height: 0;
	flex: 1;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: .02em;
	width: 100%;
	color: var(--box-shop-text, #ffffff) !important;
	-webkit-text-fill-color: var(--box-shop-text, #ffffff) !important;
	font-family: var(--box-shop-card-font, var(--display-font));
	font-size: clamp(38px, 4vw, 78px);
	font-feature-settings: "kern" 1;
	font-kerning: normal;
	font-optical-sizing: auto;
	font-style: normal;
	font-weight: 400;
	letter-spacing: normal !important;
	line-height: .91;
	text-align: center;
	text-rendering: optimizeLegibility;
	transition: color .22s ease, transform .22s ease;
}

.box-shop-card:hover .box-shop-card__phrase,
.box-shop-card:focus-visible .box-shop-card__phrase {
	color: var(--box-shop-text-hover, #2563eb) !important;
	-webkit-text-fill-color: var(--box-shop-text-hover, #2563eb) !important;
	transform: translateY(-3px);
}

.box-shop-card__phrase > span {
	display: block;
	width: max-content;
	max-width: none;
	white-space: nowrap;
	overflow-wrap: normal;
	word-break: normal;
}

.box-shop-card__buy {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: 4px;
	margin-top: 22px;
	font-family: Inter, "Helvetica Neue", Arial, sans-serif;
	font-size: 12px;
	font-weight: 850;
	letter-spacing: -.01em;
	line-height: 1.3;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity .22s ease, visibility .22s ease, transform .22s ease;
}

.box-shop-card:hover .box-shop-card__buy,
.box-shop-card:focus-visible .box-shop-card__buy {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.box-shop-card__buy-label,
.box-shop-card__font-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.box-shop-card__buy-label,
.box-shop-card__arrow {
	color: var(--box-shop-buy-label, #ffffff);
}

.box-shop-card__font-name {
	color: var(--box-shop-font-name, #ef4444);
}

.box-shop-card__arrow {
	width: 0;
	height: 0;
	flex: 0 0 auto;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 7px solid currentColor;
	margin-right: 3px;
}

@supports not (color: color-mix(in srgb, #fff 50%, transparent)) {
	.box-shop-description {
		color: #b3b3b3;
	}
}
/* Staggered title-to-phrase animation for the homepage Box Shop only. */
.homepage-box-shop .box-shop-card__showcase {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  flex: 1;
  width: 100%;
  overflow: hidden;
}

.homepage-box-shop .box-shop-card__showcase > .box-shop-card__phrase {
  position: absolute;
  inset: 0;
  min-height: 0;
  flex: none;
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  transform: translateY(18px);
  transition: opacity .42s ease, transform .62s cubic-bezier(.22,.75,.24,1), clip-path .62s cubic-bezier(.22,.75,.24,1);
  will-change: opacity, transform, clip-path;
}

.homepage-box-shop .box-shop-card__showcase > .box-shop-card__title {
  opacity: 1;
  clip-path: inset(0);
  transform: translateY(0);
}

.homepage-box-shop .box-shop-card.is-showing-phrase .box-shop-card__title {
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transform: translateY(-18px);
}

.homepage-box-shop .box-shop-card.is-showing-phrase .box-shop-card__words {
  opacity: 1;
  clip-path: inset(0);
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .homepage-box-shop .box-shop-card__showcase > .box-shop-card__phrase {
    transition: none;
  }

  .homepage-box-shop .box-shop-card__words {
    display: none;
  }
}

.dafont-box-shop {
  --dafont-box-accent: var(--global-accent-color, #ef4444);
  box-sizing: border-box;
  width: min(100%, 1560px);
  margin: 0 auto;
  padding: 64px 24px 90px;
  background: #050505;
  color: #ffffff;
}

.dafont-box-shop *,
.dafont-box-shop *::before,
.dafont-box-shop *::after {
  box-sizing: border-box;
}

.dafont-box-shop .dafont-font-tester__heading,
.dafont-box-shop .dafont-font-tester__categories,
.dafont-box-shop .dafont-font-tester__tools {
  position: relative;
  z-index: 2;
}

.dafont-box-shop .dafont-font-tester__tools {
  margin-bottom: 32px;
}

.dafont-box-shop .dafont-font-tester__categories a.is-active,
.dafont-box-shop .dafont-font-tester__categories a:hover,
.dafont-box-shop .dafont-font-tester__sort a.is-active,
.dafont-box-shop .dafont-font-tester__sort a:hover {
  color: var(--dafont-box-accent);
}

.dafont-box-shop__grid.box-shop-grid {
  grid-template-columns: repeat(var(--box-shop-columns, 3), minmax(0, 1fr));
  border-color: var(--box-shop-border, #242424);
  background: #050505;
}

.dafont-box-shop .dafont-box-shop__card {
  aspect-ratio: 1 / 1;
  min-height: 0;
  padding: clamp(30px, 3vw, 50px) clamp(24px, 2.7vw, 44px) 24px;
  background: #050505;
  color: var(--box-shop-text, #d8d8d8);
  outline-width: 1px;
  text-decoration: none !important;
  text-decoration-line: none !important;
  transition: outline-color .22s ease, background-color .22s ease;
}

/* Keep article-content link styles from drawing lines through the preview card. */
.article-content .dafont-box-shop a.dafont-box-shop__card,
.article-content .dafont-box-shop a.dafont-box-shop__card:hover,
.article-content .dafont-box-shop a.dafont-box-shop__card:focus,
.dafont-box-shop a.dafont-box-shop__card,
.dafont-box-shop a.dafont-box-shop__card:hover,
.dafont-box-shop a.dafont-box-shop__card:focus {
  background-image: none !important;
  box-shadow: none;
  text-decoration: none !important;
  text-decoration-line: none !important;
}

.dafont-box-shop .dafont-box-shop__card:hover,
.dafont-box-shop .dafont-box-shop__card:focus-visible {
  background: #070707;
  color: var(--box-shop-text-hover, #ffffff);
  outline-color: var(--box-shop-border-hover, #f5f1ea);
}

.dafont-box-shop .box-shop-card__phrase {
  padding: 8px 0 22px;
  color: var(--box-shop-text, #d8d8d8) !important;
  -webkit-text-fill-color: var(--box-shop-text, #d8d8d8) !important;
  font-size: clamp(46px, 5.2vw, 88px);
  line-height: .9;
}

.dafont-box-shop .dafont-box-shop__card:hover .box-shop-card__phrase,
.dafont-box-shop .dafont-box-shop__card:focus-visible .box-shop-card__phrase {
  color: var(--box-shop-text-hover, #ffffff) !important;
  -webkit-text-fill-color: var(--box-shop-text-hover, #ffffff) !important;
  transform: translateY(-4px);
}

.dafont-box-shop__hover {
  display: flex;
  min-width: 0;
  min-height: 28px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 18px;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease, transform .22s ease;
}

.dafont-box-shop__card:hover .dafont-box-shop__hover,
.dafont-box-shop__card:focus-visible .dafont-box-shop__hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dafont-box-shop__font,
.dafont-box-shop__purchase {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.dafont-box-shop__font {
  flex: 1 1 auto;
  overflow: visible;
  color: var(--dafont-box-accent);
}

.dafont-box-shop__font i {
  width: 0;
  height: 0;
  flex: 0 0 auto;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 7px solid var(--dafont-box-accent);
  margin-right: 1px;
}

.dafont-box-shop__font strong {
  min-width: 0;
  color: var(--dafont-box-accent) !important;
  -webkit-text-fill-color: var(--dafont-box-accent) !important;
  font-size: inherit;
}

.dafont-box-shop__purchase {
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 12px;
  color: #ffffff;
  text-transform: uppercase;
}

.dafont-box-shop__price,
.dafont-box-shop__price * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  background-image: none !important;
  text-decoration: none !important;
  text-decoration-line: none !important;
}

.dafont-box-shop__price .simple-product-price {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 0;
}

.dafont-box-shop__price del {
  position: relative;
  display: inline-block;
  opacity: .68;
  text-decoration: none !important;
  text-decoration-line: none !important;
}

.dafont-box-shop__price del * {
  text-decoration: none !important;
  text-decoration-line: none !important;
}

.dafont-box-shop__price del::after {
  position: absolute;
  top: 50%;
  right: -1px;
  left: -1px;
  height: 1.5px;
  background: currentColor;
  content: "";
  pointer-events: none;
  transform: translateY(-50%);
}

.dafont-box-shop__price ins,
.dafont-box-shop__price ins * {
  text-decoration: none !important;
  text-decoration-line: none !important;
}

.dafont-box-shop__price .simple-product-price > strong,
.dafont-box-shop__price .simple-product-price > strong * {
  font-size: var(--dafont-box-real-price-size, 20px) !important;
  font-weight: 400 !important;
  line-height: 1;
}

.dafont-box-shop__pagination {
  margin-top: 54px;
}

.dafont-box-shop__notice {
  width: min(100% - 48px, 920px);
  margin: 45px auto;
  padding: 24px;
  border: 1px solid #2b2b2b;
  border-radius: 6px;
  background: #0b0b0b;
  color: #ffffff;
  text-align: center;
}

@media (min-width: 1201px) {
  .dafont-box-shop {
    position: relative;
    left: 50%;
    width: calc(100vw - 48px);
    max-width: 1560px;
    transform: translateX(-50%);
  }
}

@media (max-width: 980px) {
  .dafont-box-shop__grid.box-shop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dafont-box-shop .dafont-box-shop__card {
    min-height: 0;
  }
}

@media (max-width: 620px) {
  .dafont-box-shop {
    padding: 44px 16px 68px;
  }

  .dafont-box-shop__grid.box-shop-grid {
    grid-template-columns: 1fr;
  }

  .dafont-box-shop .dafont-box-shop__card {
    min-height: 0;
    padding: 30px 24px 20px;
  }

  .dafont-box-shop__hover {
    gap: 12px;
    font-size: 11px;
  }

  .dafont-box-shop__purchase {
    gap: 7px;
  }
}

/* DAFONT white-theme palette. */
.dafont-box-shop,
.dafont-box-shop__grid.box-shop-grid,
.dafont-box-shop .dafont-box-shop__card { background: var(--box-shop-bg, #ffffff); color: var(--box-shop-text, #111111); }
.dafont-box-shop { color: #111111; }
.dafont-box-shop .dafont-font-tester__heading h1 { color: #111111; }
.dafont-box-shop .dafont-font-tester__heading p { color: #666666; }
.dafont-box-shop .dafont-font-tester__categories a,
.dafont-box-shop .dafont-font-tester__sort a { color: #111111; }
.dafont-box-shop .dafont-font-tester__tools input { background: #ffffff; color: #111111; border-color: #dedede; }
.dafont-box-shop .dafont-box-shop__card:hover,
.dafont-box-shop .dafont-box-shop__card:focus-visible { background: #fafafa; }
.dafont-box-shop__purchase,
.dafont-box-shop__price,
.dafont-box-shop__price * { color: #111111 !important; -webkit-text-fill-color: #111111 !important; }
.dafont-box-shop__notice { border-color: #dedede; background: #ffffff; color: #111111; }
.homepage-box-shop { padding-block: 72px; }
.homepage-box-shop > .container { width: min(100% - 40px, 1600px); }
.homepage-box-shop .box-shop-description { color: #666666; }
@media (max-width: 620px) {
  .homepage-box-shop > .container { width: min(100% - 28px, 1600px); }
}