.fdqg-shop-promo { --fdqg-promo-ink: #16302a;
--fdqg-promo-soft: #4d6459; --fdqg-promo-brand: #1f6f58;
--fdqg-promo-brand-deep: #14523f;
--fdqg-promo-on-brand: #ffffff;
--fdqg-promo-accent: #e8a33d; --fdqg-promo-from: #f4faf6;
--fdqg-promo-to: #eaf4ee;
--fdqg-promo-line: #d9e8de; --fdqg-promo-radius: 20px;
--fdqg-promo-shadow: 0 1px 2px rgba(22, 48, 42, .04), 0 12px 32px rgba(22, 48, 42, .07);
color: var(--fdqg-promo-ink);
box-sizing: border-box;
}
.fdqg-shop-promo * {
box-sizing: border-box;
} .fdqg-shop-promo--item {
grid-column: 1 / -1 !important;
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
float: none !important;
clear: both !important;
list-style: none;
margin: 28px 0;
padding: 0;
} .fdqg-shop-promo--card {
flex: 1 1 0;
min-width: 0;
clear: both;
align-self: stretch;
list-style: none;
margin: 0;
padding: 0; container-type: inline-size;
} .fdqg-shop-promo--card .fdqg-shop-promo__inner {
height: 100%;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 14px;
padding: 22px 20px;
}
.fdqg-shop-promo--card .fdqg-shop-promo__body,
.fdqg-shop-promo--card .fdqg-shop-promo__action {
flex: 0 0 auto;
width: 100%;
} .fdqg-shop-promo--card .fdqg-shop-promo__action {
margin-top: auto;
padding-top: 4px;
}
.fdqg-shop-promo--card .fdqg-shop-promo__heading {
font-size: 1.05rem;
}
.fdqg-shop-promo--card .fdqg-shop-promo__text {
font-size: .88rem;
}
.fdqg-shop-promo--card .fdqg-shop-promo__benefits {
margin-top: 12px;
gap: 6px 8px;
}
.fdqg-shop-promo--card .fdqg-shop-promo__benefit {
font-size: .76rem;
padding: 4px 9px;
}
.fdqg-shop-promo--card .fdqg-shop-promo__cta {
width: 100%;
padding: 12px 18px;
} @container (min-width: 230px) {
.fdqg-shop-promo--card .fdqg-shop-promo__inner {
gap: 16px;
padding: 24px 22px;
}
.fdqg-shop-promo--card .fdqg-shop-promo__heading {
margin-bottom: 10px;
font-size: 1.22rem;
line-height: 1.18;
}
.fdqg-shop-promo--card .fdqg-shop-promo__text {
font-size: .9rem;
line-height: 1.5;
}
.fdqg-shop-promo--card .fdqg-shop-promo__benefits {
margin-top: 14px;
}
.fdqg-shop-promo--card .fdqg-shop-promo__cta {
width: auto;
min-width: 0;
padding: 12px 22px;
}
}
@container (min-width: 300px) {
.fdqg-shop-promo--card .fdqg-shop-promo__inner {
gap: 18px;
padding: 28px 24px;
}
.fdqg-shop-promo--card .fdqg-shop-promo__heading {
font-size: 1.38rem;
}
.fdqg-shop-promo--card .fdqg-shop-promo__text {
font-size: .94rem;
}
.fdqg-shop-promo--card .fdqg-shop-promo__benefit {
font-size: .78rem;
padding: 5px 10px;
}
.fdqg-shop-promo--card .fdqg-shop-promo__cta {
padding: 13px 26px;
font-size: .97rem;
}
} .fdqg-shop-promo--before,
.fdqg-shop-promo--after {
display: block;
width: 100%;
max-width: 100%;
clear: both;
}
.fdqg-shop-promo--before {
margin: 8px 0 28px;
}
.fdqg-shop-promo--after {
margin: 28px 0 8px;
}
.fdqg-shop-promo__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 20px 32px;
padding: 26px 28px;
border: 1px solid var(--fdqg-promo-line);
border-radius: var(--fdqg-promo-radius);
background-image: linear-gradient(135deg, var(--fdqg-promo-from) 0%, var(--fdqg-promo-to) 100%);
box-shadow: var(--fdqg-promo-shadow);
}
.fdqg-shop-promo__body {
flex: 1 1 320px;
min-width: 0;
}
.fdqg-shop-promo__heading {
margin: 0 0 8px;
font-size: clamp(1.15rem, 2.2vw, 1.45rem);
font-weight: 800;
line-height: 1.2;
letter-spacing: -.01em;
color: var(--fdqg-promo-ink);
text-wrap: balance;
}
.fdqg-shop-promo__text {
margin: 0;
font-size: .95rem;
line-height: 1.55;
color: var(--fdqg-promo-soft);
}
.fdqg-shop-promo__benefits {
display: flex;
flex-wrap: wrap;
gap: 8px 10px;
margin: 14px 0 0;
padding: 0;
list-style: none;
}
.fdqg-shop-promo__benefit {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
padding: 5px 11px;
border-radius: 999px;
background: rgba(255, 255, 255, .78);
border: 1px solid var(--fdqg-promo-line);
font-size: .8rem;
font-weight: 600;
line-height: 1.3;
color: var(--fdqg-promo-ink);
}
.fdqg-shop-promo__benefit::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--fdqg-promo-accent);
flex: none;
}
.fdqg-shop-promo__action {
flex: 0 0 auto;
margin: 0;
}
.fdqg-shop-promo__cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 13px 26px;
border: 0;
border-radius: 999px;
background: var(--fdqg-promo-brand);
color: var(--fdqg-promo-on-brand);
font-size: .97rem;
font-weight: 700;
line-height: 1.2;
text-align: center;
text-decoration: none;
box-shadow: 0 6px 18px rgba(31, 111, 88, .22);
transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.fdqg-shop-promo__cta:hover,
.fdqg-shop-promo__cta:focus {
background: var(--fdqg-promo-brand-deep);
color: var(--fdqg-promo-on-brand);
text-decoration: none;
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(31, 111, 88, .28);
}
.fdqg-shop-promo__cta:focus-visible {
outline: 3px solid var(--fdqg-promo-accent);
outline-offset: 3px;
} .fdqg-shop-promo__sr {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
} @media (max-width: 600px) {
.fdqg-shop-promo__inner {
gap: 16px;
padding: 22px 20px;
}
.fdqg-shop-promo__action,
.fdqg-shop-promo__body {
flex: 1 1 100%;
}
.fdqg-shop-promo__cta {
width: 100%;
}
.fdqg-shop-promo--card {
flex: 1 1 100%;
} .fdqg-shop-promo--card .fdqg-shop-promo__cta {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.fdqg-shop-promo__cta {
transition: none;
}
.fdqg-shop-promo__cta:hover,
.fdqg-shop-promo__cta:focus {
transform: none;
}
}