#drg-ss-root {
--drg-leaf: #A9DC87;
--drg-leaf-hover: #97d06f;
--drg-green: #3F6B17;
--drg-lemon: #FFF1A6;
--drg-ink: #1d2a14;
--drg-muted: #5a6650;
--drg-line: #e3e9d8;
--drg-soft: #f6f9f0;
--drg-white: #ffffff;
font-family: inherit;
}
#drg-ss-root *,
#drg-ss-root *::before,
#drg-ss-root *::after {
box-sizing: border-box;
}
#drg-ss-root button {
font-family: inherit;
letter-spacing: 0;
text-transform: none;
text-shadow: none;
} #drg-ss-root .drg-ss-fab {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 9995;
display: inline-flex;
align-items: center;
gap: 10px;
width: auto;
height: 52px;
margin: 0;
padding: 0 22px 0 18px;
border: 1px solid rgba(63, 107, 23, .18);
border-radius: 999px;
background: var(--drg-leaf);
color: var(--drg-ink);
font-size: 15px;
font-weight: 600;
line-height: 1;
box-shadow: 0 6px 20px rgba(29, 42, 20, .18);
cursor: pointer;
transition: background-color .15s ease, box-shadow .15s ease;
}
#drg-ss-root .drg-ss-fab:hover,
#drg-ss-root .drg-ss-fab:focus {
background: var(--drg-leaf-hover);
color: var(--drg-ink);
box-shadow: 0 8px 24px rgba(29, 42, 20, .24);
}
#drg-ss-root .drg-ss-fab:focus-visible {
outline: 3px solid var(--drg-green);
outline-offset: 3px;
}
#drg-ss-root .drg-ss-fab .drg-ss-icon {
flex: none;
}
html.drg-ss-locked #drg-ss-root .drg-ss-fab {
visibility: hidden;
} #drg-ss-root .drg-ss-panel[hidden] {
display: none;
}
#drg-ss-root .drg-ss-panel {
position: fixed;
inset: 0;
z-index: 99990;
color: var(--drg-ink);
}
#drg-ss-root .drg-ss-backdrop {
position: absolute;
inset: 0;
background: rgba(20, 30, 14, .38);
opacity: 0;
transition: opacity .2s ease;
}
#drg-ss-root .drg-ss-sheet {
position: absolute;
top: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
width: min(440px, 100vw);
background: var(--drg-white);
color: var(--drg-ink);
box-shadow: -10px 0 40px rgba(29, 42, 20, .18);
transform: translateX(100%);
transition: transform .22s ease;
}
#drg-ss-root .drg-ss-panel.is-open .drg-ss-backdrop {
opacity: 1;
}
#drg-ss-root .drg-ss-panel.is-open .drg-ss-sheet {
transform: none;
}
html.drg-ss-locked,
html.drg-ss-locked body {
overflow: hidden;
}
#drg-ss-root .drg-ss-head {
display: flex;
align-items: center;
gap: 10px;
padding: 22px 20px 14px 24px;
background: var(--drg-lemon);
}
#drg-ss-root .drg-ss-slogan {
flex: 1;
margin: 0;
font-size: 19px;
font-weight: 500;
line-height: 1.25;
color: var(--drg-ink);
}
#drg-ss-root .drg-ss-slogan strong {
font-weight: 700;
color: var(--drg-green);
}
#drg-ss-root .drg-ss-badge {
padding: 4px 8px;
border-radius: 999px;
background: var(--drg-white);
color: var(--drg-muted);
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
#drg-ss-root .drg-ss-close {
display: inline-flex;
flex: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
color: var(--drg-ink);
box-shadow: none;
cursor: pointer;
}
#drg-ss-root .drg-ss-close:hover,
#drg-ss-root .drg-ss-close:focus {
background: rgba(255, 255, 255, .7);
color: var(--drg-ink);
}
#drg-ss-root .drg-ss-close:focus-visible {
outline: 2px solid var(--drg-green);
}
#drg-ss-root .drg-ss-form {
position: relative;
margin: 0;
padding: 0 20px 16px 24px;
background: var(--drg-lemon);
}
#drg-ss-root .drg-ss-form .drg-ss-icon {
position: absolute;
top: 15px;
left: 40px;
color: var(--drg-muted);
pointer-events: none;
}
#drg-ss-root .drg-ss-input {
display: block;
width: 100%;
height: 52px;
margin: 0;
padding: 0 16px 0 48px;
border: 1px solid var(--drg-line);
border-radius: 14px;
background: var(--drg-white);
color: var(--drg-ink);
font: inherit;
font-size: 16px; box-shadow: none;
}
#drg-ss-root .drg-ss-input:focus {
border-color: var(--drg-green);
outline: 2px solid rgba(63, 107, 23, .25);
outline-offset: 0;
}
#drg-ss-root .drg-ss-sr {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
#drg-ss-root .drg-ss-body {
flex: 1;
overflow-y: auto;
overscroll-behavior: contain;
padding: 14px 20px 28px 24px;
}
#drg-ss-root .drg-ss-filters,
#drg-ss-root .drg-ss-suggest__chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
#drg-ss-root .drg-ss-filters[hidden],
#drg-ss-root .drg-ss-suggest[hidden] {
display: none;
}
#drg-ss-root .drg-ss-filters {
margin-bottom: 12px;
}
#drg-ss-root .drg-ss-chip {
min-height: 36px;
margin: 0;
padding: 6px 14px;
border: 1px solid var(--drg-line);
border-radius: 999px;
background: var(--drg-white);
color: var(--drg-ink);
font-size: 14px;
font-weight: 500;
line-height: 1.2;
box-shadow: none;
cursor: pointer;
}
#drg-ss-root .drg-ss-chip--soft {
background: var(--drg-soft);
}
#drg-ss-root .drg-ss-chip:hover,
#drg-ss-root .drg-ss-chip:focus {
border-color: var(--drg-green);
background: var(--drg-soft);
color: var(--drg-ink);
}
#drg-ss-root .drg-ss-chip[aria-pressed="true"],
#drg-ss-root .drg-ss-chip[aria-pressed="true"]:hover,
#drg-ss-root .drg-ss-chip[aria-pressed="true"]:focus {
border-color: var(--drg-green);
background: var(--drg-leaf);
color: var(--drg-ink);
}
#drg-ss-root .drg-ss-chip:focus-visible,
#drg-ss-root .drg-ss-btn:focus-visible,
#drg-ss-root .drg-ss-more:focus-visible,
#drg-ss-root .drg-ss-card__title a:focus-visible {
outline: 2px solid var(--drg-green);
outline-offset: 2px;
}
#drg-ss-root .drg-ss-suggest__title {
margin: 4px 0 10px;
color: var(--drg-muted);
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
}
#drg-ss-root .drg-ss-status {
min-height: 1em;
margin: 0 0 10px;
color: var(--drg-muted);
font-size: 14px;
}
#drg-ss-root .drg-ss-status:empty {
margin: 0;
}
#drg-ss-root .drg-ss-results {
margin: 0;
padding: 0;
list-style: none;
}
#drg-ss-root .drg-ss-item {
margin: 0;
padding: 0;
border-bottom: 1px solid var(--drg-line);
}
#drg-ss-root .drg-ss-item::before {
content: none;
}
#drg-ss-root .drg-ss-card {
display: grid;
grid-template-columns: 72px 1fr;
gap: 14px;
padding: 14px 0;
}
#drg-ss-root .drg-ss-card__media {
display: block;
width: 72px;
height: 72px;
overflow: hidden;
border-radius: 12px;
background: var(--drg-soft);
}
#drg-ss-root .drg-ss-card__media img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
#drg-ss-root .drg-ss-card__body {
min-width: 0;
}
#drg-ss-root .drg-ss-card__title {
margin: 0 0 4px;
font-size: 16px;
font-weight: 600;
line-height: 1.3;
color: var(--drg-ink);
}
#drg-ss-root .drg-ss-card__title a {
color: inherit;
text-decoration: none;
}
#drg-ss-root .drg-ss-card__title a:hover {
color: var(--drg-green);
text-decoration: underline;
}
#drg-ss-root .drg-ss-card__meta,
#drg-ss-root .drg-ss-card__info {
margin: 0 0 4px;
color: var(--drg-muted);
font-size: 13px;
line-height: 1.4;
}
#drg-ss-root .drg-ss-card__info strong {
color: var(--drg-ink);
font-weight: 600;
}
#drg-ss-root .drg-ss-card__foot {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 12px;
margin-top: 8px;
}
#drg-ss-root .drg-ss-card__price {
font-size: 15px;
font-weight: 700;
color: var(--drg-ink);
}
#drg-ss-root .drg-ss-card__price del {
margin-right: 4px;
color: var(--drg-muted);
font-weight: 400;
}
#drg-ss-root .drg-ss-card__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
width: 100%;
}
#drg-ss-root .drg-ss-btn {
display: inline-flex;
align-items: center;
min-height: 40px;
margin: 0;
padding: 8px 11px;
border-radius: 10px;
font-size: 13px;
font-weight: 600;
line-height: 1.2;
text-decoration: none;
text-transform: none;
letter-spacing: 0;
box-shadow: none;
white-space: nowrap;
}
#drg-ss-root .drg-ss-btn--details {
border: 1px solid var(--drg-green);
background: var(--drg-white);
color: var(--drg-green);
}
#drg-ss-root .drg-ss-btn--details:hover,
#drg-ss-root .drg-ss-btn--details:focus {
background: var(--drg-soft);
color: var(--drg-green);
} #drg-ss-root .drg-ss-btn--cart {
border: 1px solid var(--drg-line);
background: var(--drg-soft);
color: var(--drg-ink);
}
#drg-ss-root .drg-ss-btn--cart:hover,
#drg-ss-root .drg-ss-btn--cart:focus {
border-color: var(--drg-leaf);
background: var(--drg-leaf);
color: var(--drg-ink);
}
#drg-ss-root .drg-ss-btn--cart.loading {
opacity: .6;
pointer-events: none;
}
#drg-ss-root .drg-ss-btn--cart.added::after {
content: " ✓";
}
#drg-ss-root .added_to_cart {
color: var(--drg-green);
font-size: 13px;
font-weight: 600;
text-decoration: underline;
}
#drg-ss-root .drg-ss-card__oos {
color: var(--drg-muted);
font-size: 13px;
}
#drg-ss-root .drg-ss-more {
display: block;
width: 100%;
min-height: 44px;
margin: 16px 0 0;
padding: 10px 16px;
border: 1px solid var(--drg-line);
border-radius: 12px;
background: var(--drg-white);
color: var(--drg-ink);
font-size: 14px;
font-weight: 600;
box-shadow: none;
cursor: pointer;
}
#drg-ss-root .drg-ss-more[hidden] {
display: none;
}
#drg-ss-root .drg-ss-more:hover,
#drg-ss-root .drg-ss-more:focus {
background: var(--drg-soft);
color: var(--drg-ink);
} #drg-ss-root .drg-ss-ainote {
margin: 0;
padding: 0 20px 12px 24px;
background: var(--drg-lemon);
color: var(--drg-muted);
font-size: 12px;
line-height: 1.4;
}
#drg-ss-root .drg-ss-ainote a {
color: var(--drg-green);
text-decoration: underline;
}
#drg-ss-root .drg-ss-ask[hidden] {
display: none;
}
#drg-ss-root .drg-ss-ask {
margin: 0 0 14px;
}
#drg-ss-root .drg-ss-askbtn {
display: block;
width: 100%;
min-height: 44px;
margin: 0;
padding: 10px 14px;
border: 1px dashed var(--drg-green);
border-radius: 12px;
background: var(--drg-white);
color: var(--drg-green);
font-size: 14px;
font-weight: 600;
line-height: 1.3;
text-align: left;
white-space: normal; box-shadow: none;
cursor: pointer;
overflow-wrap: anywhere;
}
#drg-ss-root .drg-ss-askbtn::before {
content: "✦ ";
}
#drg-ss-root .drg-ss-ask.is-question .drg-ss-askbtn {
border-style: solid;
background: var(--drg-leaf);
color: var(--drg-ink);
}
#drg-ss-root .drg-ss-askbtn:hover,
#drg-ss-root .drg-ss-askbtn:focus {
background: var(--drg-soft);
color: var(--drg-green);
}
#drg-ss-root .drg-ss-ask.is-question .drg-ss-askbtn:hover,
#drg-ss-root .drg-ss-ask.is-question .drg-ss-askbtn:focus {
background: var(--drg-leaf-hover);
color: var(--drg-ink);
}
#drg-ss-root .drg-ss-askbtn:focus-visible {
outline: 2px solid var(--drg-green);
outline-offset: 2px;
}
#drg-ss-root .drg-ss-turn {
margin: 0 0 18px;
}
#drg-ss-root .drg-ss-question {
margin: 0 0 8px auto;
max-width: 85%;
width: fit-content;
padding: 8px 12px;
border-radius: 14px 14px 4px 14px;
background: var(--drg-soft);
color: var(--drg-ink);
font-size: 14px;
overflow-wrap: anywhere;
}
#drg-ss-root .drg-ss-answer {
padding: 12px 14px;
border: 1px solid var(--drg-line);
border-radius: 14px 14px 14px 4px;
background: var(--drg-white);
font-size: 14px;
line-height: 1.5;
}
#drg-ss-root .drg-ss-answer.is-pending {
color: var(--drg-muted);
font-style: italic;
}
#drg-ss-root .drg-ss-answer.is-safety {
border-color: #e7c66b;
background: #fffbea;
}
#drg-ss-root .drg-ss-answer p {
margin: 0 0 8px;
}
#drg-ss-root .drg-ss-answer__clarify {
font-weight: 600;
color: var(--drg-green);
}
#drg-ss-root .drg-ss-answer__notes {
margin: 8px 0;
padding: 8px 10px;
border-left: 3px solid #e7c66b;
background: var(--drg-white);
font-size: 13px;
}
#drg-ss-root .drg-ss-answer__notes-title {
font-weight: 600;
}
#drg-ss-root .drg-ss-answer__products {
margin: 4px 0 0;
}
#drg-ss-root .drg-ss-answer__products .drg-ss-item:last-child {
border-bottom: 0;
}
#drg-ss-root .drg-ss-answer .drg-ss-answer__label {
margin: 6px 0 0;
color: var(--drg-muted);
font-size: 11px;
letter-spacing: .02em;
} @media (max-width: 767px) {
#drg-ss-root .drg-ss-fab {
right: 16px;
bottom: 16px;
width: 56px;
height: 56px;
padding: 0;
justify-content: center;
}
#drg-ss-root .drg-ss-fab .drg-ss-fab__label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
} body:has(#dg-sticky-atc.is-visible) #drg-ss-root .drg-ss-fab {
bottom: 85px;
}
#drg-ss-root .drg-ss-sheet {
width: 100vw;
height: 100dvh;
box-shadow: none;
}
#drg-ss-root .drg-ss-head {
padding: 14px 8px 12px 16px;
}
#drg-ss-root .drg-ss-slogan {
font-size: 17px;
}
#drg-ss-root .drg-ss-form {
padding: 0 16px 14px;
}
#drg-ss-root .drg-ss-ainote {
padding: 0 16px 10px;
}
#drg-ss-root .drg-ss-form .drg-ss-icon {
left: 32px;
}
#drg-ss-root .drg-ss-body {
padding: 12px 16px 24px;
}
}
@media (prefers-reduced-motion: reduce) {
#drg-ss-root .drg-ss-sheet,
#drg-ss-root .drg-ss-backdrop,
#drg-ss-root .drg-ss-fab {
transition: none;
}
}
@media print {
#drg-ss-root {
display: none !important;
}
}