/* v1.2.58 — MOBILE arrows keep side position, Blogger circle shape +
   mobile footer stack (user correction, 2 Nov 2026). Scope: ONLY
   @media(max-width:760px).
   1. ARROWS: user correction — arrows STAY where they are (the v1.2.55
   side overlays, mid-left/mid-right of each section); ONLY their inner
   shape changes to Blogger's clean circle: flat white, light #efedf2
   border, purple chevron, NO shadow. No position/overlay rule is
   touched. Desktop arrows are untouched.
   2. FOOTER: the 4-column .footer-grid (and 1.2.30's squeezed 2-col
   mobile rule) becomes a single comfortable column on phones; .copy
   stacks instead of squeezing side by side. Colours, fonts and text
   are unchanged — layout only. This sheet loads LAST. */
@media (max-width: 760px) {
  /* Arrows: side position UNCHANGED — only the button shape becomes
     Blogger's circle (flat white, light border, purple chevron). */
  html body .section .mg-sec-head .mg-arrow {
    pointer-events: auto !important;
    box-shadow: none !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    border: 1px solid #efedf2 !important;
    background: #fff !important;
    color: #875ff5 !important;
    font-size: 16px !important;
    display: grid !important;
    place-items: center !important;
  }
  /* Footer: single column, comfortable gap. */
  html body .footer .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
  html body .footer .copy {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
}