/* Hop Pickers visual refresh: layered over clay-s.css so the original stylesheet stays untouched. */

:root {
    --hp-charcoal: #4c4c42;
    --hp-charcoal-dark: #3f3f36;
    --hp-olive: #83846d;
    --hp-green: #758f76;
    --hp-sage: #abae99;
    --hp-cream: #efe8db;
    --hp-ease: cubic-bezier(.22, .8, .2, 1);
}

/* Fixed header height, used for sticky offsets and anchor scrolling. */
html { --hp-top: 148px; scroll-padding-top: calc(var(--hp-top) + 16px); }
html.hp-scrolled { --hp-top: 100px; }
@media (max-width: 63.9375rem) {
    html { --hp-top: 105px; }
    html.hp-scrolled { --hp-top: 64px; }
    html.hp-scrolled.hp-header-hidden { --hp-top: 0px; }
}
@media (max-width: 39.9375rem) {
    html { --hp-top: 64px; }
}
html:has(.property-page-menu) { scroll-padding-top: calc(var(--hp-top) + 72px); }
html { scroll-behavior: smooth; }

/* Slidebars is retired: let the page scroll normally so sticky elements work. */
html { overflow-x: hidden; }
body { overflow: visible; overflow-x: clip; }
[canvas=container] { height: auto; overflow: visible; }
.sb-slidebar { display: none !important; }

/* ---------- Desktop header ---------- */

div.topbar { transition: box-shadow .3s ease; }
.hp-scrolled div.topbar { box-shadow: 0 6px 24px rgba(30, 30, 24, .25); }
div.strapline { transition: transform .35s var(--hp-ease); }
.hp-scrolled div.strapline { transform: translateY(-100%); }

.topbar ul.hovermenu > li { display: inline-block !important; margin: 0; }
.topbar ul.hovermenu > li > a {
    padding: 0 18px !important;
    border-radius: 0;
    background: none !important;
    transition: color .2s ease;
}
.topbar ul.hovermenu > li > a::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 10px;
    height: 2px;
    border-radius: 2px;
    background: var(--hp-sage);
    transform: scaleX(0);
    transition: transform .25s var(--hp-ease);
}
.topbar ul.hovermenu > li:hover > a::after,
.topbar ul.hovermenu > li:focus-within > a::after,
.topbar ul.hovermenu > li.is-open > a::after,
.topbar ul.hovermenu > li.current > a::after,
.topbar ul.hovermenu > li.current-menu-ancestor > a::after { transform: scaleX(1); }
.topbar ul.hovermenu > li.menu-item-has-children > a {
    padding-right: 34px !important;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23efe8db' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center / 11px auto !important;
}
.topbar ul.hovermenu > li.menu-item-has-children > a::after { right: 34px; }

/* Dropdown panels: CSS hover/focus with a short close delay instead of Superfish. */
.topbar ul.hovermenu ul.sub-menu {
    display: block !important;
    top: 100% !important;
    left: 50% !important;
    width: auto;
    min-width: 250px;
    margin-top: 6px;
    padding: 8px !important;
    overflow: visible;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(20, 20, 16, .3);
    text-align: left;
    visibility: hidden;
    opacity: 0;
    transform: translate(-50%, 8px);
    transition: opacity .18s ease .12s, transform .18s ease .12s, visibility 0s linear .3s;
}
.topbar ul.hovermenu ul.sub-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -16px;
    height: 16px;
}
.topbar ul.hovermenu ul.sub-menu::after {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    background: var(--hp-charcoal-dark);
    transform: rotate(45deg);
    border-radius: 2px;
}
.topbar ul.hovermenu > li:hover > ul.sub-menu,
.topbar ul.hovermenu > li:focus-within > ul.sub-menu,
.topbar ul.hovermenu > li.is-open > ul.sub-menu {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0);
    transition: opacity .2s ease, transform .2s var(--hp-ease), visibility 0s;
}
.topbar ul.hovermenu ul.sub-menu li { width: auto !important; margin: 0; }
.topbar ul.hovermenu ul.sub-menu li a {
    position: relative;
    width: auto;
    padding: 10px 22px 10px 18px !important;
    border-radius: 8px;
    font-size: 18px;
    white-space: nowrap;
    color: #fff;
    transition: background-color .18s ease, padding .2s var(--hp-ease), color .18s ease;
}
.topbar ul.hovermenu ul.sub-menu li a::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 3px;
    background: var(--hp-sage);
    transform: translateY(-50%);
    transition: height .2s var(--hp-ease);
}
.topbar ul.hovermenu ul.sub-menu li a:hover,
.topbar ul.hovermenu ul.sub-menu li a:focus-visible {
    background: rgba(239, 232, 219, .08) !important;
    padding-left: 24px !important;
    padding-right: 16px !important;
    color: var(--hp-cream);
}
.topbar ul.hovermenu ul.sub-menu li a:hover::before,
.topbar ul.hovermenu ul.sub-menu li a:focus-visible::before,
.topbar ul.hovermenu ul.sub-menu li.current > a::before { height: 18px; }
.topbar ul.hovermenu ul.sub-menu li a:focus-visible { outline-offset: -2px; }

/* Book Online: one clear button with the availability note beneath. */
.book-box { overflow: visible; }
.topbar .book-box { top: 18px; }
.book-box .inner { background: none; padding: 0; gap: 6px; }
.book-box .inner .title {
    padding: 11px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    transition: background-color .2s ease, transform .2s var(--hp-ease), box-shadow .2s ease;
}
.book-box .inner .text { color: var(--hp-cream); opacity: .8; font-size: 12px; line-height: 1.2; }
.book-box .inner .button { display: none; }
.book-box:hover .inner .title { background: #82a083; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 0, 0, .25); }

/* ---------- Mobile header ---------- */

@media (max-width: 63.9375rem) {
    .mobile-menu {
        height: 64px;
        border-bottom: 0;
        background-position: 47% -190px;
        transition: transform .35s var(--hp-ease), box-shadow .3s ease !important;
    }
    .hp-scrolled .mobile-menu { box-shadow: 0 4px 18px rgba(30, 30, 24, .25); }
    .hp-header-hidden .mobile-menu { transform: translateY(-100%); box-shadow: none; }
    div.strapline { top: 64px; padding: .5rem 0; font-size: 1rem; }
    .hp-scrolled div.strapline { transform: translateY(calc(-100% - 64px)); }

    .mobile-menu .columns { display: flex; align-items: center; gap: 10px; height: 64px; }
    #mobile-nav { display: none; }
    a.menubutton {
        position: relative;
        flex: none;
        width: 44px;
        height: 44px;
        margin: 0 0 0 -8px !important;
        border-radius: 8px;
        background: none !important;
        -webkit-tap-highlight-color: transparent;
        transition: background-color .2s ease;
    }
    a.menubutton:active { background: rgba(255, 255, 255, .1) !important; }
    a.menubutton span,
    a.menubutton span::before,
    a.menubutton span::after {
        position: absolute;
        left: 11px;
        width: 22px;
        height: 2px;
        border-radius: 2px;
        background: #fff;
        transition: transform .3s var(--hp-ease), width .3s var(--hp-ease);
    }
    a.menubutton span { top: 21px; }
    a.menubutton span::before, a.menubutton span::after { content: ""; left: 0; }
    a.menubutton span::before { top: -7px; }
    a.menubutton span::after { top: 7px; width: 15px; }
    a.menubutton:hover span::after { width: 22px; }

    a.home-link { position: static; flex: none; width: 150px; height: 44px; background-size: contain; }
    .mobile-menu .book-box { position: static; width: auto; margin-left: auto; transform: none; }
    .mobile-menu .book-box .inner .title { padding: 10px 16px; font-size: 18px; box-shadow: none; }
    .mobile-menu .book-box .inner .text { display: none; }

    div.main_wrapper { margin-top: 64px; }
}
@media (min-width: 40rem) and (max-width: 63.9375rem) {
    div.main_wrapper { margin-top: 105px; }
}
@media (max-width: 23.125rem) {
    a.home-link { width: 118px; }
    .mobile-menu .book-box { transform: none; }
    .mobile-menu .book-box .inner .title { padding: 9px 12px; font-size: 16px; }
}

/* ---------- Mobile drawer ---------- */

.hp-drawer { position: fixed; inset: 0; z-index: 100000; visibility: hidden; transition: visibility 0s linear .4s; }
.hp-drawer-open .hp-drawer { visibility: visible; transition: none; }
.hp-drawer-open, .hp-drawer-open body { overflow: hidden; }
.hp-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(28, 28, 22, .55);
    opacity: 0;
    transition: opacity .4s ease;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.hp-drawer-open .hp-drawer__backdrop { opacity: 1; }
.hp-drawer__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: min(86vw, 380px);
    background: var(--hp-charcoal);
    color: #fff;
    box-shadow: 12px 0 40px rgba(0, 0, 0, .3);
    transform: translateX(-102%);
    transition: transform .4s var(--hp-ease);
    will-change: transform;
}
.hp-drawer-open .hp-drawer__panel { transform: none; }
.hp-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
    height: 64px;
    padding: 0 10px 0 20px;
    border-bottom: 1px solid rgba(239, 232, 219, .12);
    background: url(/design/hoppickers/images/hops25.svg) no-repeat right -150px top -205px / 400px auto;
}
.hp-drawer__logo img { display: block; width: 140px; height: 44px; object-fit: contain; }
.hp-drawer__close {
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .2s ease, transform .3s var(--hp-ease);
}
.hp-drawer__close:hover { background: rgba(255, 255, 255, .16); transform: rotate(90deg); }
.hp-drawer__close span::before,
.hp-drawer__close span::after {
    content: "";
    position: absolute;
    top: 21px;
    left: 13px;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transform: rotate(45deg);
}
.hp-drawer__close span::after { transform: rotate(-45deg); }

.hp-drawer__nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 6px 0 16px; }
.hp-drawer__menu, .hp-drawer__menu ul { list-style: none; margin: 0; padding: 0; text-align: left; }
.hp-drawer__menu li { position: relative; margin: 0; }
.hp-drawer__menu > li { border-bottom: 1px solid rgba(239, 232, 219, .1); }
.hp-drawer__menu a { display: block; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.hp-drawer__menu > li > a {
    padding: 15px 64px 15px 20px;
    font-family: "Quincy CF", Georgia, serif;
    font-size: 22px;
    line-height: 1.2;
    color: var(--hp-cream);
}
.hp-drawer__menu > li > a:active, .hp-drawer__menu .sub-menu a:active { background: rgba(255, 255, 255, .06); }
.hp-drawer__menu li.current > a,
.hp-drawer__menu li.current-menu-ancestor > a { color: #fff; }
.hp-drawer__menu li.current > a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--hp-sage);
}
.hp-drawer__menu .sub-menu li.current > a::before { top: 8px; bottom: 8px; }

.hp-drawer__toggle {
    position: absolute;
    top: 4px;
    right: 8px;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23efe8db' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 14px auto;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform .3s var(--hp-ease), background-color .2s ease;
}
.hp-drawer__toggle:active { background-color: rgba(255, 255, 255, .08); }
.is-open > .hp-drawer__toggle { transform: rotate(180deg); }
.hp-drawer__sub {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows .32s var(--hp-ease), visibility 0s linear .32s;
}
.is-open > .hp-drawer__sub { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .32s var(--hp-ease); }
.hp-drawer__sub > ul { min-height: 0; overflow: hidden; }
.hp-drawer__sub > ul > li:first-child { padding-top: 2px; }
.hp-drawer__sub > ul > li:last-child { padding-bottom: 12px; }
.hp-drawer__menu .sub-menu a { padding: 9px 20px 9px 34px; font-family: Georgia, serif; font-size: 17px; line-height: 1.3; color: rgba(255, 255, 255, .82); }
.hp-drawer__menu .sub-menu li.current > a { color: #fff; }

.hp-drawer-open .hp-drawer__menu > li { animation: hp-drawer-in .45s var(--hp-ease) both; animation-delay: calc(var(--i, 0) * 45ms + 80ms); }
@keyframes hp-drawer-in { from { opacity: 0; transform: translateX(-14px); } }

.hp-drawer__foot {
    flex: none;
    padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(239, 232, 219, .12);
    background: rgba(0, 0, 0, .14);
}
.hp-drawer__book {
    display: block;
    padding: 11px 16px 10px;
    border-radius: 10px;
    background: var(--hp-green);
    color: #fff;
    font-family: "Quincy CF", Georgia, serif;
    font-size: 22px;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
    transition: background-color .2s ease;
}
.hp-drawer__book:hover { background: #82a083; }
.hp-drawer__book small { display: block; margin-top: 3px; font-family: Georgia, serif; font-size: 12px; opacity: .85; }
.hp-drawer__contact { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin-top: 14px; font-size: 14px; }
.hp-drawer__contact a { color: var(--hp-cream); text-decoration: none; }
.hp-drawer__contact a:hover { text-decoration: underline; }
@media (min-width: 64rem) { .hp-drawer { display: none; } }

/* ---------- Content polish ---------- */

/* Long bulleted lists read badly centred on phones. */
@media only screen and (max-width: 641px) {
    div.pageBodyContent ul, div.sectiontext ul { text-align: left; list-style-type: disc; margin-left: 1.25rem; }
    div.page_intro h3 { font-size: 25px; line-height: 1.3; }
}

/* Buttons share one radius and a gentle lift. */
a.book-now-button, a.readmorelink, div.container input[type=submit] {
    border-radius: 8px;
    transition: background-color .2s ease, transform .2s var(--hp-ease), box-shadow .2s ease;
}
a.book-now-button:hover, a.readmorelink:hover, div.container input[type=submit]:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(50, 50, 40, .18);
}
a.book-now-button:active, a.readmorelink:active, div.container input[type=submit]:active { transform: none; box-shadow: none; }
div.container input[type=submit]:disabled { opacity: .6; cursor: wait; transform: none; box-shadow: none; }

/* Property cards. */
div.property_box { border-radius: 10px; transition: transform .3s var(--hp-ease), box-shadow .3s ease; }
div.property_box .imageFrame { overflow: hidden; }
div.property_box img { transition: transform .6s var(--hp-ease); }
div.property_box:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(60, 60, 50, .16); }
div.property_box:hover img { transform: scale(1.04); }

/* Property page section tabs: sticky, with the current section highlighted. */
.row:has(> .columns > .property-page-menu) {
    position: sticky;
    top: calc(var(--hp-top) + 10px);
    z-index: 50;
    pointer-events: none;
    transition: top .35s var(--hp-ease);
}
.property-page-menu { pointer-events: auto; }
.property-page-menu {
    gap: 4px;
    padding: 5px;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(50, 50, 40, .15);
}
.property-page-menu a { padding: 8px 16px; border-radius: 7px; transition: background-color .2s ease, color .2s ease; }
.property-page-menu a:hover { text-decoration: none; background: rgba(255, 255, 255, .16); }
.property-page-menu a.is-active { background: #fff; color: var(--hp-charcoal); }
@media (max-width: 39.9375rem) {
    .property-page-menu { gap: 2px; }
    .property-page-menu a { padding: 8px 10px; font-size: 16px; }
}
@media (max-width: 23.125rem) {
    .property-page-menu { flex-direction: row; justify-content: space-between; }
    .property-page-menu a { padding: 8px 6px; font-size: 14px; }
}

/* Forms: comfortable fields, visible focus, no iOS zoom on focus. */
div.container :is(input[type=text], input[type=email], input[type=tel]),
div.container textarea,
div.container select {
    padding: .7rem .8rem;
    border-radius: 8px;
    font-size: 1rem;
    transition: box-shadow .2s ease;
}
div.container :is(input[type=text], input[type=email], input[type=tel]):focus,
div.container textarea:focus,
div.container select:focus { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--hp-green); }
.hp-form-message { margin-top: 12px; border-radius: 8px; }

/* ---------- Footer ---------- */

/* The centre footer column is always empty: give the enquiry form the full left half. */
.footer .large-4:has(> .portal.empty) { display: none; }
@media (min-width: 64em) { .footer .large-8:has(#footer-left) { width: 100%; } }
div.footer { padding: 3rem 0; }
.footer .hp-enquiry fieldset { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.footer .hp-enquiry fieldset > * { grid-column: 1 / -1; }
.footer .hp-enquiry fieldset > .field_enquiryname,
.footer .hp-enquiry fieldset > .field_telephone { grid-column: auto; }
.footer .hp-enquiry div.formRow { margin: 0; }
.footer .hp-enquiry textarea { min-height: 120px; resize: vertical; }
div.footer .hp-enquiry input[type=submit] { margin-top: 14px; padding: 10px 28px 12px; background: var(--hp-charcoal); }
div.footer .hp-enquiry input[type=submit]:hover { background: var(--hp-charcoal-dark); }
@media (max-width: 39.9375rem) {
    .footer .hp-enquiry fieldset { grid-template-columns: 1fr; }
    .footer .hp-enquiry fieldset > * { grid-column: 1 / -1 !important; }
}

/* Contact column: a quiet divider between numbers and address. */
div.portlet.contactinfo div.widgettext { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .25); }
div.portlet.contactinfo div.widgettext p { margin-bottom: 6px; }
div.portlet.contactinfo div.widgettext a { color: #fff; text-decoration: none; background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 0 1px; transition: background-size .3s var(--hp-ease); }
div.portlet.contactinfo div.widgettext a:hover { background-size: 100% 1px; }
div.portlet.contactinfo p { margin-bottom: 1.25rem; }

/* Accreditation logos: matching tiles so mismatched artwork reads as one set. */
.logostrip { padding-top: 3rem; }
.logostrip .widgetbody::before {
    content: "Accredited & award-winning";
    display: block;
    margin-bottom: 1.5rem;
    font-family: "Bali-Script";
    font-size: 34px;
    line-height: 1.1;
    color: #867d71;
}
.logostrip .image_group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    max-width: calc(168px * 5 + 14px * 4);
    margin: 0 auto;
    --tile: 168px;
}
.logostrip div.imageBox,
.logostrip #imagebox_635 {
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: var(--tile);
    max-width: none !important;
    height: 100px !important;
    margin: 0 !important;
    padding: 12px;
    border-radius: 12px;
    background: #f5f2ec;
    transition: transform .25s var(--hp-ease), box-shadow .25s ease, background-color .25s ease;
}
.logostrip #imagebox_2120 { width: calc(var(--tile) * 2 + 14px); }
.logostrip div.imageBox .imageFrame,
.logostrip div.imageBox .imageFrame a,
.logostrip #imagebox_635 .imageFrame,
.logostrip #imagebox_635 .imageFrame a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100% !important;
}
.logostrip div.imageBox img.cms_image,
.logostrip #imagebox_635 .cms_image {
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}
.logostrip div.imageBox:has(a[href]):hover { transform: translateY(-2px); background: #fff; box-shadow: 0 10px 24px rgba(60, 60, 50, .14); }
.logostrip div.imageBox:has(a[href]):hover img.cms_image { mix-blend-mode: normal; }
@media (max-width: 39.9375rem) {
    .logostrip { padding-top: 2.25rem; padding-bottom: 210px; background-size: 270px auto; }
    .logostrip .widgetbody::before { font-size: 28px; margin-bottom: 1.1rem; }
    .logostrip .image_group { gap: 10px; --tile: calc((100% - 20px) / 3); max-width: none; }
    .logostrip div.imageBox, .logostrip #imagebox_635 { height: 68px !important; padding: 10px; border-radius: 10px; }
    .logostrip #imagebox_2120 { width: 100%; height: 76px !important; }
}

.subfooter { padding: .9rem 0 .4rem; }
.subfooter p { font-size: 14px; }

/* ---------- Cookie consent ---------- */

/* Accept and Reject are deliberately identical so neither choice is nudged. */
.hp-cookie {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 9990;
    box-sizing: border-box;
    width: 360px;
    max-width: calc(100% - 32px);
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--hp-charcoal);
    color: var(--hp-cream);
    box-shadow: 0 12px 32px rgba(20, 20, 16, .28);
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .3s ease, transform .35s var(--hp-ease);
}
.hp-cookie.is-visible { opacity: 1; transform: none; }
.hp-cookie p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: inherit; text-align: left; }
.hp-cookie a { color: #fff; text-decoration: underline; }
.hp-cookie__actions { display: flex; gap: 8px; }
.hp-cookie button {
    flex: 1;
    padding: 8px 14px 9px;
    border: 1px solid rgba(239, 232, 219, .55);
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font-family: "Quincy CF", Georgia, serif;
    font-size: 17px;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}
.hp-cookie button:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
@media (max-width: 39.9375rem) {
    .hp-cookie { left: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); max-width: calc(100% - 20px); width: auto; right: 10px; padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; }
}