.home .wp-block-columns {
/*   gap: 0 !important; */
}
.sidebar-nav {
  padding-top: 32px;
  padding-bottom: 32px;
}
.sidebar-sticky{
  position: fixed;
  top: 272px; /* header height */
  z-index: 50;

  /* remove left:0 and use container padding instead */
  left: 1080px;              /* try 24px first */
  width: 280px;            /* match your sidebar column */
  max-height: calc(100vh - 120px);
  overflow: auto;
}
.dashicons-phone {
  font-size: 18px;
  vertical-align: middle;
  margin-right: 6px;
}
/* Mobile: prevent phone number breaking into vertical digits */
@media (max-width: 600px) {
  a[href^="tel:"] {
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: 100% !important;
/*     font-size: 16px !important; */
/*     padding: 10px 14px !important; */
  }
}
@media (max-width: 768px) {

  /* 1) Give the logo AREA room (theme often sets this super narrow on mobile) */
  .site-branding,
  .site-logo,
  .logo,
  .custom-logo-link {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
  }

  /* 2) Make the image scale proportionally (no squish) */
  .custom-logo-link img,
  img.custom-logo {
    height: 70px !important;      /* adjust: 60–90 */
    width: auto !important;
    max-width: none !important;
    object-fit: contain !important;
  }
}
@media (max-width: 768px) {

  /* 1) Make the My Account sc-button a compact icon-only square */
  sc-button[href*="my-account"]{
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    transform: none !important; /* remove the scale trick */
  }

  /* 2) Hide any text label inside the button (without breaking layout) */
  sc-button[href*="my-account"] .label,
  sc-button[href*="my-account"] .text,
  sc-button[href*="my-account"] span,
  sc-button[href*="my-account"] sc-text {
    display: none !important;
  }

  /* 3) Set a consistent icon size */
  sc-button[href*="my-account"] sc-icon,
  sc-button[href*="my-account"] svg,
  sc-button[href*="my-account"] i {
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
    line-height: 1 !important;
  }
}
@media (max-width: 768px) {

  /* Make the My Account sc-button a compact icon-only square */
  sc-button[href*="my-account"]{
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  /* Hide ANY text nodes/labels inside the component (works for a lot of SureCart outputs) */
  sc-button[href*="my-account"] *:not(sc-icon):not(svg):not(path):not(i) {
    display: none !important;
  }

  /* Web-component parts (if SureCart exposes them) */
  sc-button[href*="my-account"]::part(label),
  sc-button[href*="my-account"]::part(text),
  sc-button[href*="my-account"]::part(content) {
    display: none !important;
  }

  /* Keep icon visible & sized */
  sc-button[href*="my-account"] sc-icon,
  sc-button[href*="my-account"] svg,
  sc-button[href*="my-account"] i {
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    display: inline-block !important;
  }
}
@media (max-width: 768px) {

  /* Center the icon inside the blue My Account button */
  sc-button[href*="my-account"]{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  sc-button[href*="my-account"] sc-icon,
  sc-button[href*="my-account"] svg {
    display: block !important;
    margin: 0 auto !important;
  }
}
@media (max-width: 768px) {
  sc-button[href*="my-account"] * {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}
@media (max-width: 768px) {
  /* Nudge the account icon to true visual center */
  sc-button[href*="my-account"] sc-icon,
  sc-button[href*="my-account"] svg {
    transform: translateX(-1px) translateY(0px) !important;
    margin: 0 !important;
  }
}
@media (max-width: 768px) {
  sc-button[href*="my-account"] {
    position: relative !important;
  }

  sc-button[href*="my-account"] sc-icon,
  sc-button[href*="my-account"] svg {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    margin: 0 !important;
  }
}