#woc-app-promo[hidden] {
display: none !important;
}
.woc-app-promo {
box-sizing: border-box;
width: 100%;
margin: 30px 0 34px;
padding: 22px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
background: #f7f7f7;
border: 1px solid #e5e5e5;
border-left: 4px solid #d92d20;
color: #111;
font-family: inherit;
}
.woc-app-promo,
.woc-app-promo * {
box-sizing: border-box;
}
.woc-app-promo__main {
min-width: 0;
display: flex;
align-items: center;
gap: 18px;
}
.woc-app-promo__icon {
width: 68px;
height: 68px;
flex: 0 0 68px;
display: block;
border-radius: 14px;
object-fit: cover;
box-shadow: 0 3px 12px rgba(0,0,0,.08);
}
.woc-app-promo__copy {
min-width: 0;
}
.woc-app-promo__eyebrow {
margin: 0 0 5px;
color: #c7251b;
font-size: 10px;
line-height: 1.3;
font-weight: 800;
letter-spacing: .09em;
}
.woc-app-promo__title {
margin: 0 0 6px;
color: #111;
font-size: 20px;
line-height: 1.22;
font-weight: 800;
}
.woc-app-promo__text {
max-width: 560px;
margin: 0 0 11px !important;
color: #4d4d4d;
font-size: 14px !important;
line-height: 1.5 !important;
}
.woc-app-promo__features {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
margin: 0 0 14px;
color: #333;
font-size: 12px;
line-height: 1.35;
font-weight: 600;
}
.woc-app-promo__features span {
white-space: nowrap;
}
.woc-app-promo__button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 38px;
padding: 9px 14px;
background: #111;
border: 0;
border-radius: 3px;
color: #fff !important;
text-decoration: none !important;
font-size: 13px;
line-height: 1.25;
font-weight: 700;
transition: background-color .15s ease, transform .15s ease;
}
.woc-app-promo__button:hover,
.woc-app-promo__button:focus {
background: #c7251b;
color: #fff !important;
text-decoration: none !important;
}
.woc-app-promo__button:active {
transform: translateY(1px);
}
.woc-app-promo__arrow {
font-size: 17px;
line-height: 1;
}
.woc-app-promo__qr {
flex: 0 0 128px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
color: #555 !important;
text-align: center;
text-decoration: none !important;
font-size: 10px;
line-height: 1.25;
}
.woc-app-promo__qr img {
width: 112px;
height: 112px;
display: block;
padding: 5px;
background: #fff;
border: 1px solid #e3e3e3;
}
.woc-app-promo__qr:hover,
.woc-app-promo__qr:focus {
color: #111 !important;
text-decoration: none !important;
}
@media (max-width: 767px) {
.woc-app-promo {
margin: 26px 0 30px;
padding: 18px;
gap: 14px;
}
.woc-app-promo__main {
align-items: flex-start;
gap: 13px;
}
.woc-app-promo__icon {
width: 52px;
height: 52px;
flex-basis: 52px;
border-radius: 11px;
}
.woc-app-promo__title {
font-size: 18px;
}
.woc-app-promo__text {
margin-bottom: 10px !important;
font-size: 13px !important;
}
.woc-app-promo__features {
gap: 5px 10px;
margin-bottom: 12px;
font-size: 11px;
}
.woc-app-promo__button {
min-height: 40px;
padding: 10px 13px;
}
.woc-app-promo__qr {
display: none !important;
}
}
@media (max-width: 420px) {
.woc-app-promo {
padding: 16px;
}
.woc-app-promo__main {
display: block;
}
.woc-app-promo__icon {
float: left;
margin: 0 12px 8px 0;
}
.woc-app-promo__copy::after {
content: "";
display: table;
clear: both;
}
.woc-app-promo__features,
.woc-app-promo__button {
clear: both;
}
.woc-app-promo__button {
width: 100%;
}
}