:root {
--pekoe-cookie-bg: #314D25;
--pekoe-cookie-text: #FBF9F4;
--pekoe-cookie-button-bg: #FBF9F4;
--pekoe-cookie-button-text: #314D25;
--pekoe-cookie-focus: #18AEBB;
--pekoe-cookie-switch-on: #577434;
--pekoe-cookie-switch-off: #75886D;
--pekoe-cookie-radius: 6px;
--pekoe-cookie-font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
--pekoe-cookie-heading-font: "bree", "Montserrat", system-ui, sans-serif;
}
.pekoe-cookie,
.pekoe-cookie *,
.pekoe-cookie__embed,
.pekoe-cookie__embed * {
box-sizing: border-box;
}
.pekoe-cookie [hidden],
.pekoe-cookie[hidden] {
display: none !important;
}
.pekoe-cookie {
font-family: var(--pekoe-cookie-font);
font-size: 15px;
line-height: 1.5;
letter-spacing: normal;
text-align: left;
}
.pekoe-cookie__banner {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 2147483000;
padding: 16px;
background: var(--pekoe-cookie-bg);
color: var(--pekoe-cookie-text);
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
}
.pekoe-cookie__banner-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px 32px;
max-width: 1240px;
margin: 0 auto;
}
.pekoe-cookie__banner-text {
flex: 1 1 420px;
min-width: 0;
}
.pekoe-cookie .pekoe-cookie__title {
margin: 0 0 4px;
padding: 0;
font-family: var(--pekoe-cookie-heading-font);
font-size: 19px;
font-weight: 700;
line-height: 1.3;
color: inherit;
text-transform: none;
}
.pekoe-cookie .pekoe-cookie__message,
.pekoe-cookie .pekoe-cookie__intro {
margin: 0;
color: inherit;
}
.pekoe-cookie .pekoe-cookie__link {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
.pekoe-cookie__actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.pekoe-cookie .pekoe-cookie__button,
.pekoe-cookie__embed .pekoe-cookie__button {
display: inline-block;
min-width: 128px;
min-height: 44px;
margin: 0;
padding: 10px 18px;
border: 2px solid var(--pekoe-cookie-button-bg);
border-radius: var(--pekoe-cookie-radius);
font-family: var(--pekoe-cookie-font);
font-size: 15px;
font-weight: 600;
line-height: 1.2;
text-align: center;
text-transform: none;
cursor: pointer;
box-shadow: none;
}
.pekoe-cookie .pekoe-cookie__button--primary,
.pekoe-cookie__embed .pekoe-cookie__button--embed {
background: var(--pekoe-cookie-button-bg);
color: var(--pekoe-cookie-button-text);
}
.pekoe-cookie .pekoe-cookie__button--secondary,
.pekoe-cookie__embed .pekoe-cookie__button--embed-secondary {
background: transparent;
color: var(--pekoe-cookie-text);
}
.pekoe-cookie .pekoe-cookie__button:hover,
.pekoe-cookie__embed .pekoe-cookie__button:hover {
text-decoration: underline;
}
.pekoe-cookie button:focus-visible,
.pekoe-cookie a:focus-visible,
.pekoe-cookie input:focus-visible + .pekoe-cookie__switch-track,
.pekoe-cookie__embed button:focus-visible,
.pekoe-cookie-settings-link:focus-visible {
outline: 3px solid var(--pekoe-cookie-focus);
outline-offset: 2px;
}
html.pekoe-cookie-open {
overflow: hidden;
}
.pekoe-cookie__overlay {
position: fixed;
inset: 0;
z-index: 2147483001;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
background: rgba(14, 19, 8, 0.6);
}
.pekoe-cookie__modal {
width: 100%;
max-width: 640px;
max-height: calc(100vh - 32px);
overflow-y: auto;
padding: 24px;
border-radius: var(--pekoe-cookie-radius);
background: var(--pekoe-cookie-bg);
color: var(--pekoe-cookie-text);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.pekoe-cookie__modal:focus {
outline: none;
}
.pekoe-cookie__modal-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 8px;
}
.pekoe-cookie .pekoe-cookie__close {
width: 44px;
height: 44px;
margin: -8px -8px 0 0;
padding: 0;
border: 0;
background: transparent;
color: inherit;
font-size: 28px;
line-height: 1;
cursor: pointer;
}
.pekoe-cookie .pekoe-cookie__categories {
margin: 16px 0;
padding: 0;
list-style: none;
}
.pekoe-cookie__category {
margin: 0;
padding: 12px 0;
border-top: 1px solid rgba(251, 249, 244, 0.3);
}
.pekoe-cookie__category-head {
display: flex;
align-items: center;
gap: 12px;
}
.pekoe-cookie .pekoe-cookie__category-label {
flex: 1 1 auto;
margin: 0;
font-weight: 700;
color: inherit;
cursor: pointer;
}
.pekoe-cookie__always-on {
font-size: 13px;
font-weight: 600;
}
.pekoe-cookie .pekoe-cookie__category-description {
margin: 4px 0 0;
font-size: 14px;
color: inherit;
}
.pekoe-cookie__switch {
position: relative;
flex: 0 0 auto;
width: 52px;
height: 30px;
}
.pekoe-cookie .pekoe-cookie__switch-input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.pekoe-cookie .pekoe-cookie__switch-input:disabled {
cursor: not-allowed;
}
.pekoe-cookie__switch-track {
display: block;
width: 100%;
height: 100%;
border: 2px solid var(--pekoe-cookie-text);
border-radius: 15px;
background: var(--pekoe-cookie-switch-off);
pointer-events: none;
transition: background-color 0.15s ease;
}
.pekoe-cookie__switch-track::after {
content: "";
position: absolute;
top: 5px;
left: 5px;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--pekoe-cookie-text);
transition: transform 0.15s ease;
}
.pekoe-cookie__switch-input:checked + .pekoe-cookie__switch-track {
background: var(--pekoe-cookie-switch-on);
}
.pekoe-cookie__switch-input:checked + .pekoe-cookie__switch-track::after {
transform: translateX(22px);
}
.pekoe-cookie__switch-input:disabled + .pekoe-cookie__switch-track {
opacity: 0.7;
}
.pekoe-cookie__embed {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 200px;
padding: 16px;
border-radius: var(--pekoe-cookie-radius);
background: var(--pekoe-cookie-bg);
color: var(--pekoe-cookie-text);
font-family: var(--pekoe-cookie-font);
font-size: 15px;
line-height: 1.5;
text-align: center;
}
.pekoe-cookie__embed-inner {
max-width: 420px;
}
.pekoe-cookie__embed .pekoe-cookie__embed-text {
margin: 0 0 12px;
color: inherit;
}
.pekoe-cookie__embed-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.pekoe-cookie__embed--elementor {
aspect-ratio: 16 / 9;
}
.pekoe-cookie__embed--elementor ~ * {
display: none !important;
}
.pekoe-cookie-settings-link {
display: inline;
margin: 0;
padding: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
text-decoration: underline;
cursor: pointer;
}
.pekoe-cookie-list__table {
width: 100%;
margin: 0 0 24px;
border-collapse: collapse;
}
.pekoe-cookie-list__table th,
.pekoe-cookie-list__table td {
padding: 8px;
border: 1px solid #C9CCC8;
text-align: left;
vertical-align: top;
}
@media (max-width: 600px) {
.pekoe-cookie__actions {
width: 100%;
}
.pekoe-cookie .pekoe-cookie__button {
flex: 1 1 100%;
}
.pekoe-cookie__modal {
padding: 16px;
}
}
@media (prefers-reduced-motion: reduce) {
.pekoe-cookie__switch-track,
.pekoe-cookie__switch-track::after {
transition: none;
}
}