/* Responsive behaviour that the design expressed as JS state (wide >= 900px) */
.main-bg{background:url(/assets/geometric-strong.svg) right -160px top -120px/1150px auto no-repeat,radial-gradient(1100px 620px at 92% -8%,#DDF0EA 0%,rgba(255,255,255,0) 62%),radial-gradient(800px 520px at 8% 4%,#FCF3E6 0%,rgba(255,255,255,0) 58%),#FFFFFF;background-repeat:no-repeat}
.guide-nav{position:static;max-width:100%}
@media (min-width:1300px){.guide-nav{position:sticky;max-width:280px}}
@media (min-width:900px){.n-only{display:none!important}}
@media (max-width:899px){
  /* the desktop pattern is anchored top-right at 1150px; on a phone that crops into the middle of
     its radial fade and slices motifs flat at both screen edges. Fit its full width instead so the
     SVG's own fade lands on-screen. */
  .main-bg{background-image:url(/assets/geometric.svg),radial-gradient(1100px 620px at 92% -8%,#DDF0EA 0%,rgba(255,255,255,0) 62%),radial-gradient(800px 520px at 8% 4%,#FCF3E6 0%,rgba(255,255,255,0) 58%);
           background-size:130% auto,auto,auto;background-position:center top,0 0,0 0}
  .w-only{display:none!important}
  /* v6 rail: no pattern until the menu opens, tighter gutters, taller tap targets */
  .rail{height:auto!important;gap:8px!important;padding:0 18px!important;border-right:0!important;
        background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 50%,#F1F8F5 100%)!important}
  .rail.menu-open{height:100vh!important;
        background:url(/assets/rail-pattern.svg) center bottom/100% auto no-repeat,linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 50%,#F1F8F5 100%)!important}
  .rail-nav{border-top:1px solid #E3E9E7!important}
  .nav-btn{border-bottom:1px solid #EEF2F0!important;padding:14px 0!important;min-height:48px!important}
  .nav-label{font-size:17px!important}
  .rail-foot{padding-bottom:24px!important}
  .rail-body{display:none!important}
  .rail.menu-open .rail-body{display:flex!important}
  .menu-open-icon{display:none}
  .rail.menu-open .menu-open-icon{display:block}
  .rail.menu-open .menu-closed-icon{display:none}
}
@media (max-width:359px){.m-logo{font-size:26px!important}}
/* state-driven bits */
.toast{display:none!important}
.toast.on{display:block!important}
.faq-panel{display:none!important}
.faq-panel.open{display:flex!important}
.form-sent{display:none!important}
.form-sent.show{display:flex!important}
.form-live.hide{display:none!important}
.enquiry-box{display:none!important}
.enquiry-box.show{display:block!important}
.basket-empty,.basket-full{display:none!important}
.basket-empty.show{display:flex!important}
.basket-full.show{display:grid!important}
.line-donation{display:none!important}
.basket-badge{display:none!important}
.basket-badge.show{display:block!important}
.line-donation.show{display:inline!important}
.thumb{outline:none}
a.h-link{text-decoration:none}

.h1:hover{opacity:0.8!important}
.h2:hover{background:#13211F!important}
.h3:hover{border-color:#1F5E57!important}
.h4:hover{border-color:#1F5E57!important;background:#FFFFFF!important}
.h5:hover{color:#1F5E57!important}
.h6:hover{background:#EAF4F0!important}