.dg-shop {
--dg-dark: #1F3D14;
--dg-green: #3F6B17;
--dg-ink: #14210F;
--dg-muted: #5B6B52;
--dg-body: #3B4A33;
--dg-line: #E2EAD5;
--dg-soft: #F6F9F1;
color: var(--dg-ink);
font-family: Montserrat, sans-serif;
}
.dg-shop * {
box-sizing: border-box;
}
.dg-shop__wrap {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
} .dg-shop__hero {
padding: 40px 0 44px;
border-bottom: 1px solid var(--dg-line);
background: var(--dg-soft);
}
.dg-shop__crumbs {
margin: 0 0 14px;
color: var(--dg-muted);
font-size: 13px;
}
.dg-shop__crumbs a {
color: var(--dg-muted);
text-decoration: none;
}
.dg-shop__crumbs a:hover {
color: var(--dg-dark);
text-decoration: underline;
}
.dg-shop .dg-shop__title {
margin: 0 0 14px;
color: var(--dg-ink);
font-family: Montserrat, sans-serif;
font-size: 44px;
font-weight: 700;
line-height: 1.15;
letter-spacing: 0;
text-transform: none;
}
.dg-shop__intro {
max-width: 720px;
margin: 0;
color: var(--dg-body);
font-size: 17px;
line-height: 1.6;
}
.dg-shop__trust {
display: flex;
flex-wrap: wrap;
gap: 12px 28px;
margin: 22px 0 0;
padding: 0;
list-style: none;
color: var(--dg-dark);
font-size: 14px;
font-weight: 600;
}
.dg-shop__trust li {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
}
.dg-shop__trust svg {
flex: 0 0 20px;
} .dg-shop__bar {
border-bottom: 1px solid var(--dg-line);
background: #FFFFFF;
}
.dg-shop__bar .dg-shop__wrap {
padding-top: 18px;
padding-bottom: 18px;
}
.dg-shop__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 0 0 20px;
}
.dg-shop__chips {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.dg-shop__chips li {
margin: 0;
}
.dg-shop .dg-chip {
display: inline-flex;
align-items: center;
gap: 6px;
height: 44px;
padding: 0 18px;
border: 1px solid #D0D9C4;
border-radius: 999px;
background: #FFFFFF;
color: var(--dg-ink);
font-size: 14px;
font-weight: 600;
white-space: nowrap;
text-decoration: none;
transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.dg-shop .dg-chip:hover {
border-color: var(--dg-dark);
color: var(--dg-ink);
}
.dg-shop .dg-chip.is-active {
border-color: var(--dg-dark);
background: var(--dg-dark);
color: #FFFFFF;
}
.dg-chip__count {
font-weight: 500;
opacity: 0.7;
}
.dg-shop__sort {
display: flex;
align-items: center;
gap: 10px;
margin: 0;
color: var(--dg-body);
font-size: 14px;
white-space: nowrap;
}
.dg-shop__sort label {
margin: 0;
font-size: 14px;
}
.dg-shop .dg-shop__sort select {
width: auto;
height: 44px;
padding: 0 36px 0 14px;
border: 1px solid #D0D9C4;
border-radius: 10px;
background-color: #FFFFFF;
color: var(--dg-ink);
font-family: inherit;
font-size: 14px;
cursor: pointer;
} .dg-shop__main {
padding-top: 28px;
padding-bottom: 56px;
}
.dg-shop .dg-shop__count {
margin: 0;
color: var(--dg-muted);
font-size: 14px;
}
.dg-shop__grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
margin: 0;
padding: 0;
list-style: none;
}
.dg-shop__grid > li {
display: flex;
margin: 0;
}
.dg-card {
display: flex;
flex-direction: column;
width: 100%;
overflow: hidden;
border: 1px solid var(--dg-line);
border-radius: 16px;
background: #FFFFFF;
transition: border-color 0.2s, box-shadow 0.2s;
}
.dg-card:hover {
border-color: #84C44C;
box-shadow: 0 10px 28px rgba(31, 61, 20, 0.10);
} .dg-card__media {
position: relative;
display: block;
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--dg-soft);
}
.dg-shop .dg-card__media > picture {
position: absolute;
inset: 22px;
display: block;
margin: 0;
}
.dg-shop .dg-card__media > picture img {
display: block;
width: 100% !important;
height: 100% !important;
max-width: none;
margin: 0;
object-fit: contain;
}
.dg-shop .dg-card__media > img {
position: absolute;
top: 22px;
left: 22px;
display: block;
width: calc(100% - 44px) !important;
height: calc(100% - 44px) !important;
max-width: none;
margin: 0;
object-fit: contain;
}
.dg-shop .screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.dg-card__badge {
position: absolute;
top: 14px;
left: 14px;
padding: 4px 10px;
border: 1px solid var(--dg-line);
border-radius: 999px;
background: #FFFFFF;
color: var(--dg-dark);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.dg-card__sale {
position: absolute;
top: 14px;
right: 14px;
padding: 4px 10px;
border-radius: 999px;
background: #A9DE40;
color: #10200A;
font-size: 12px;
font-weight: 700;
}
.dg-card__body {
display: flex;
flex: 1;
flex-direction: column;
gap: 8px;
padding: 16px 18px 18px;
}
.dg-card__cat {
color: var(--dg-green);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.dg-shop .dg-card__title {
display: -webkit-box;
min-height: 2.7em;
margin: 0;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-family: Montserrat, sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1.35;
letter-spacing: 0;
text-transform: none;
}
.dg-shop .dg-card__title a {
color: var(--dg-ink);
text-decoration: none;
}
.dg-shop .dg-card__title a:hover {
color: var(--dg-green);
}
.dg-card__meta {
color: var(--dg-muted);
font-size: 13px;
}
.dg-card__foot {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: auto;
padding-top: 8px;
}
.dg-card__price {
color: var(--dg-dark);
font-size: 20px;
font-weight: 800;
}
.dg-card__price del {
color: #7A8572;
font-size: 14px;
font-weight: 500;
}
.dg-card__price ins {
text-decoration: none;
}
.dg-shop .dg-card__btn {
display: flex !important;
align-items: center;
justify-content: center;
width: 100%;
height: 46px;
margin: 0 !important;
padding: 0 12px !important;
border: 2px solid var(--dg-dark) !important;
border-radius: 999px !important;
background: transparent !important;
color: var(--dg-dark) !important;
font-family: Montserrat, sans-serif !important;
font-size: 14px !important;
font-style: normal !important;
font-weight: 700 !important;
line-height: 1 !important;
letter-spacing: 0.03em;
text-decoration: none !important;
text-transform: none !important;
transition: background 0.2s, color 0.2s;
}
.dg-shop .dg-card__btn:hover,
.dg-shop .dg-card__btn:focus-visible {
background: var(--dg-dark) !important;
color: #FFFFFF !important;
}
.dg-shop .dg-card__btn.loading {
opacity: 0.6;
pointer-events: none;
}
.dg-shop .dg-card__btn.loading::after {
content: none !important;
}
.dg-shop .dg-card__btn.added::after {
content: "\2713" !important;
margin-left: 8px;
font-family: inherit !important;
vertical-align: baseline;
}
.dg-shop a.added_to_cart {
display: none !important;
} .dg-shop__banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
margin: 0 0 56px;
padding: 36px 48px;
border-radius: 20px;
background: var(--dg-dark);
color: #FFFFFF;
}
.dg-shop__banner-title {
display: block;
color: #FFFFFF;
font-size: 24px;
font-weight: 700;
}
.dg-shop__banner-text {
display: block;
margin-top: 6px;
color: #D6E6C4;
font-size: 15px;
}
.dg-shop .dg-shop__banner a {
display: inline-flex;
align-items: center;
height: 50px;
padding: 0 28px;
border-radius: 999px;
background: #A9DE40;
color: #10200A;
font-size: 15px;
font-weight: 700;
white-space: nowrap;
text-decoration: none;
}
.dg-shop .dg-shop__banner a:hover {
background: #FFFFFF;
color: #10200A;
}
.dg-shop__seo {
max-width: 860px;
padding: 0 0 64px;
color: var(--dg-body);
font-size: 15px;
line-height: 1.7;
}
.dg-shop .dg-shop__seo h2 {
margin: 0 0 12px;
color: var(--dg-ink);
font-family: Montserrat, sans-serif;
font-size: 26px;
font-weight: 700;
letter-spacing: 0;
text-transform: none;
}
.dg-shop__seo p {
margin: 0 0 12px;
color: var(--dg-body);
font-size: 15px;
line-height: 1.7;
}
@media (max-width: 1024px) {
.dg-shop__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.dg-shop .dg-shop__title {
font-size: 36px;
}
}
@media (max-width: 767px) {
.dg-shop__wrap {
padding: 0 16px;
}
.dg-shop__hero {
padding: 20px 0 22px;
}
.dg-shop__crumbs {
margin-bottom: 10px;
font-size: 12px;
}
.dg-shop .dg-shop__title {
margin-bottom: 10px;
font-size: 28px;
line-height: 1.2;
}
.dg-shop__intro {
font-size: 14px;
line-height: 1.55;
}
.dg-shop__trust {
flex-direction: column;
gap: 6px;
margin-top: 14px;
font-size: 13px;
}
.dg-shop__bar {
position: sticky;
top: var(--dg-sticky-top, 0px);
z-index: 20;
}
.dg-shop__bar .dg-shop__wrap {
padding-top: 12px;
padding-bottom: 12px;
}
.dg-shop__toolbar {
margin-bottom: 12px;
}
.dg-shop__chips {
flex-wrap: nowrap;
margin: 0 -16px;
padding: 0 16px;
overflow-x: auto;
scrollbar-width: none;
}
.dg-shop__chips::-webkit-scrollbar {
display: none;
}
.dg-shop .dg-chip {
height: 40px;
padding: 0 14px;
font-size: 13px;
}
.dg-shop__sort {
font-size: 13px;
}
.dg-shop__main {
padding-top: 16px;
padding-bottom: 32px;
}
.dg-shop .dg-shop__count {
font-size: 13px;
}
.dg-shop__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.dg-card {
border-radius: 14px;
}
.dg-shop .dg-card__media > picture {
inset: 12px;
}
.dg-shop .dg-card__media > img {
top: 12px;
left: 12px;
width: calc(100% - 24px) !important;
height: calc(100% - 24px) !important;
}
.dg-card__badge {
top: 8px;
left: 8px;
padding: 3px 8px;
font-size: 10px;
}
.dg-card__sale {
top: 8px;
right: 8px;
padding: 3px 8px;
font-size: 11px;
}
.dg-card__body {
gap: 5px;
padding: 10px 10px 12px;
}
.dg-card__cat {
display: none;
}
.dg-shop .dg-card__title {
min-height: 2.6em;
font-size: 14px;
line-height: 1.3;
}
.dg-card__meta {
font-size: 12px;
}
.dg-card__foot {
gap: 8px;
padding-top: 6px;
}
.dg-card__price {
font-size: 17px;
}
.dg-shop .dg-card__btn {
height: 44px;
font-size: 13px !important;
}
.dg-shop__banner {
flex-direction: column;
align-items: flex-start;
gap: 14px;
margin-bottom: 32px;
padding: 24px 20px;
border-radius: 16px;
}
.dg-shop__banner-title {
font-size: 19px;
line-height: 1.3;
}
.dg-shop__banner-text {
font-size: 14px;
}
.dg-shop__seo {
padding-bottom: 40px;
}
.dg-shop .dg-shop__seo h2 {
font-size: 21px;
}
}