@media (max-width: 1600px) {
  .product-modal {
    top: 70%;
  }
}

@media (max-width: 1500px) {
  .both-page .tariff-banner {
    font-size: 14px;
  }

  .both-page.package-item .p-30 {
    padding: 30px 24px;
  }
}

@media (max-width: 1476px) {
  .bg-lightViolet {
    padding-left: 48px;
    padding-right: 48px;
  }

  .py-100.container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (min-width: 1400px) {
  .category-item.col-md-4 {
    width: 31.7%;
  }

  .bg-light-teal .d-flex {
    padding: 0;
  }
}

@media (max-width: 1393px) {
  .bg-lightGray {
    padding-left: 16px;
    padding-right: 16px;
  }

  .alert-message-padding {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .easy-steps .container {
    display: flex;
    justify-content: center;
    padding: 100px 16px;
  }

  .compare-block .container {
    justify-content: center;
  }

  .header-left li {
    padding: 0 8px;
  }

  .header-right .violet-btn {
    margin: 0 10px;
  }

  .check-availability {
    padding-right: 10px;
  }

  .bg-dark-gray .step-item {
    width: 30%;
  }

  .add-ons-item {
    width: 30%;
  }

  .bg-darkGray {
    padding-left: 16px;
    padding-right: 16px;
  }
  .honest-comparison {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (max-width: 1312px) {
  .packages-col-right .btns .violet-btn,
  .packages-col-right .btns .violet-white-btn {
    display: inline-block;
    margin: 8px 0;
    text-align: center;
  }
}

@media (max-width: 1280px) {
  .item-subtitle-24 {
    font-size: 18px !important;
    line-height: 24px !important;
  }
  .usp-bar__item {
    align-items: center;
  }
}

@media (max-width: 1236px) {
  .both-page.package-item ul li {
    font-size: 20px;
  }
  .both-page.package-item p {
    font-size: 15px;
  }
  .fibre-page.both-page.package-item p {
    font-size: 16px;
  }
}

@media (max-width: 1200px) {
  .call-mobile,
  .mobile-order {
    display: block;
  }

  .header-right .violet-btn,
  .header-right .signin-btn {
    display: none;
  }
  .speed-section a {
    margin-top: 24px;
    display: inline-block;
  }
  .alert-message {
    margin-top: 64px;
    height: unset;
  }

  .alert-message .container {
    flex-wrap: nowrap;
    align-items: start !important;
  }

  .fix-nav-legal {
    display: none;
  }

  .legal-dropdown {
    display: block;
  }

  .legal-pure {
    padding: 0 0 64px;
  }

  .legal-pure .container {
    padding: 0;
  }

  .legal-pure .tab-content {
    padding: 0 16px;
  }

  /* .bg-main-green .carousel-better-way .slick-prev, .bg-main-green .carousel-better-way .slick-next {
        display: none !important;
    } */
  .fix-nav-legal {
    width: 100%;
  }

  .choice-item {
    border: none;
  }

  .warning-info {
    flex-direction: column;
  }

  .help-container .gap-30 {
    flex-direction: column;
  }

  .help-item.col-4 {
    width: 100%;
    max-width: unset;
  }

  header {
    padding: 16px;
  }

  .header-full {
    height: 100% !important;
  }

  .header-left,
  .header-right {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;

    padding: 0 16px 16px;
    /* margin-top: 10px; */
  }

  .header-full {
    background-color: var(--backgroundGray);
  }

  header ul li a {
    display: block;
    width: 100%;
    padding: 8px 0;
    font-size: 20px;
    color: var(--textPrimary);
  }

  header ul li a:hover {
    text-decoration: underline;
  }

  .check-availability {
    border-right: none;
    padding-right: 0;
    display: inline;
  }

  .header-right .violet-btn,
  .signin-btn {
    margin: 8px 0;
  }

  .grey-badge .violet-btn {
    margin: 0 24px;
  }

  .logo {
    flex: 1;
  }

  .p-100 {
    /* padding: 132px 16px 64px; */
    padding: 64px 0 64px;
  }

  header {
    height: 64px;
    padding: 0;
  }

  .mob-header {
    display: flex;
    justify-content: space-between;
    width: 100%;
    background-color: var(--backgroundLight);
    align-items: center;
    height: 64px;
    padding: 16px;
  }

  .header-right {
    text-align: center;
  }

  .header-right .violet-btn {
    height: 40px;
    padding: 8px;
    margin-bottom: 16px;
  }

  .header-right .signin-btn {
    height: 40px;
    padding: 4px;
    margin-bottom: 16px;
  }

  .container {
    flex-wrap: wrap;
    position: relative;
  }

  .menu-toggle {
    display: flex;
    font-size: 28px;
    cursor: pointer;
    color: var(--mainViolet);
  }

  .homepage.bg-lightGray h1 {
    font-size: 56px;
    line-height: 64px;
  }

  .star-label {
    display: flex;
    text-align: left;
    line-height: 26px;
  }

  .star-label svg {
    margin-top: 3px;
  }

  .homepage .mobile-bg {
    padding-right: 20px;
  }
}

@media (max-width: 1186px) {
  /* .news-badge h4 {
    text-align: left;
  } */

  .news-badge.align-items-center {
    align-items: start !important;
  }

  .new-titles h1 {
    text-align: left;
    font-size: 42px;
    line-height: 52px;
  }

  .container.new-titles,
  .packages-wrapper,
  .accordion.legal.legal-inner {
    padding-left: 16px;
    padding-right: 16px;
  }

  .new-titles p {
    font-size: 18px;
    text-align: left;
    margin-bottom: 64px !important;
  }

  .bg-darkgreen {
    margin-bottom: 64px;
  }
}

@media (max-width: 1178px) {
  .packages-two-col {
    flex-wrap: wrap;
  }
  .packages-col-left,
  .packages-col-right {
    max-width: 100%;
    flex: 1;
  }
  .news-badge .white-badge {
    margin-top: 48px;
    width: 100%;
    max-width: unset;
  }

  .add-ons-item {
    width: 100%;
    min-height: unset;
    gap: 24px;
  }

  .cookie-table thead tr:first-child th:first-child {
    width: auto;
  }

  .cookie-table thead tr:first-child th:nth-child(2) {
    width: auto;
  }

  .mob-overflow {
    overflow: auto;
  }
  /* 
  p.tooltip-info {
    width: auto;
  }
  .find-eircode {
    width: 50%;
  } */
}

@media (max-width: 1126px) {
  .usp-bar {
    padding: 24px 16px;
  }
  .usp-section .container {
    padding: 0 16px;
  }
  .usp-bar__items {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .usp-bar .mid-separator {
    display: none;
  }
}

@media (max-width: 1100px) {
  .product-modal {
    width: 95%;
    flex-wrap: wrap;
  }

  #modal1 .product-modal {
    top: 110%;
  }

  #modal2 .product-modal {
    top: 100%;
  }

  #modal3 .product-modal {
    top: 105%;
  }

  .product-modal img {
    max-width: 100%;
  }

  .checker-window {
    min-width: unset;
  }

  .tooltip-link.from-top {
    width: 250px;
  }
}

@media (min-width: 991px) {
  .packages-carousel .slick-slide:not(.slick-center) .package-item::after,
  .packages-carousel-5g .slick-slide:not(.slick-center) .package-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    border-radius: 12px;
    opacity: 1;
  }
}

@media (max-width: 991px) {
  .packages-redesign .plans-pills {
    flex-direction: column;
    gap: 20px;
  }

  /* Banner: keep the photo's aspect ratio and scale the heading down */
  .plans-carousel-outer {
    padding-top: 40px;
  }
  /* cover rather than `auto 220px`: at this height the photo is only 831px wide
     (220 x 5440/1440), so it left a gap either side between 832px and 991px. */
  .plans-carousel-outer::before {
    height: 220px;
    background-size:
      100% 220px,
      cover;
  }
  .plans-banner-title {
    margin-bottom: 16px;
    font-size: 24px;
    line-height: 30px;
    letter-spacing: -0.5px;
  }
  .plans-carousel-outer .sort-by-wrapper {
    margin-bottom: 32px;
  }

  .locations-grid {
    padding: 0 24px;
  }
  .light-green-bg .locations-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .oc-cols {
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }
  .oc-next-card,
  .oc-pay-card {
    width: 100%;
  }
  .packages-col-right__title {
    font-size: 48px;
  }
  .half-input {
    width: 100%;
  }

  .half-input:first-of-type {
    margin-bottom: 16px;
  }
}

@media (max-width: 956px) {
  .green-label .text-end {
    text-align: left !important;
  }
}

@media (max-width: 992px) {
  .connection-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .bg-green-dots h1 {
    font-size: 30px;
    text-align: center;
    line-height: 38px;
    margin-bottom: 12px;
  }
  .bg-green-dots p {
    text-align: center;
  }
  .bg-green-dots .container {
    gap: 32px;
  }
  .default-hide.is-revealed .d-flex {
    flex-wrap: wrap;
    gap: 0 !important;
  }
  .input-icon-wrap {
    flex: unset;
    width: 100%;
  }
  .bg-green-dots {
    padding: 40px 0;
  }
  .desk-hide {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .homepage .mobile-grey-bg.align-items-end {
    align-items: center !important;
  }
  .hero-check.d-flex {
    display: none !important;
  }
  .homepage.bg-lightGray h1 {
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -3%;
    text-align: center;
  }
  .homepage.bg-lightGray h1 span {
    font-size: 44px;
    line-height: 44px;
  }
  .dark-green-bg .view-location {
    margin-bottom: 20px;
  }
  .dark-green-bg .white-btn,
  .dark-green-bg .view-location {
    display: block;
    text-align: center;
    width: 100%;
  }
  .dark-green-bg h1 {
    text-align: center;
  }
  .light-green-bg {
    padding: 64px 16px;
  }
  .news-badge h1.fs-48 {
    font-size: 36px;
  }
  .pd-page-header {
    justify-content: center !important;
    display: none;
  }
  .oc-page-wrap {
    flex-direction: column;
  }
  .oc-page-wrap > .pd-page-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 294px;
    margin: 0 auto;
    padding: 40px 0 24px;
    justify-content: center !important;
  }
  .pd-help-link {
    text-align: center;
  }
  .pay-tabs {
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
  }
  .pay-tab {
    width: 100%;
    justify-content: center;
  }
  #blogSearch {
    width: 100%;
  }
  .blog-single-back-wrap {
    margin-top: 48px;
  }
  .blog-single-related {
    padding: 48px 16px;
  }
  .blog-single-layout {
    flex-wrap: wrap;
    flex-direction: column;
  }
  .blog-card {
    flex: 1;
    max-width: 100%;
  }
  .search-wrapper,
  .search-wrapper .search-container {
    width: 100%;
  }
  .first-article-card {
    flex-direction: column;
  }

  .first-article-image {
    width: 100%;
    height: 220px;
  }

  .first-article-content {
    height: auto;
    padding: 24px 16px;
  }

  .first-article-author-date {
    flex-wrap: wrap;
    gap: 8px;
  }

  .blog-cards-row {
    flex-direction: column;
    gap: 16px;
  }

  .blog-card-image {
    height: 200px;
  }
  /* .bg-lightGray.homepage {
        padding-top: 115px !important;
    } */

  .alert-message-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .homepage .mobile-bg {
    /* display: flex; */
    flex-direction: column;
    padding: 40px 16px 16px;
  }

  .leave-link-popup.no-underline {
    font-size: 14px;
  }

  .banner-label {
    font-size: 14px;
  }

  .desk-hide {
    margin-top: 32px;
  }
  .homepage .mobile-bg h1 {
    order: 1;
  }

  .homepage .mobile-bg p {
    order: 2;
    margin-bottom: 26px !important;
  }

  .homepage .mobile-bg .star-label {
    order: 3;
    margin-bottom: 0;
  }

  .news-badge h4 {
    font-size: 16px;
    line-height: 26px;
  }

  .coverage-address {
    font-size: 14px;
    line-height: 24px;
  }

  .news-badge .fs-18-bold svg {
    display: block;
    margin-bottom: 12px;
  }

  .bg-darkgreen {
    padding: 64px 0;
  }

  .news-badge h1 {
    font-size: 36px;
    line-height: 44px;
    text-align: center;
  }

  .violet-36 {
    font-size: 30px;
    line-height: 38px;
  }

  .bg-darkGray {
    padding: 128px 16px 64px;
  }

  .bg-darkGray h1 {
    font-size: 36px;
  }

  .warning-info .violet-btn {
    width: 100%;
  }

  .grey-badge {
    padding: 32px;
  }

  .bg-light-green,
  .bg-dark-green {
    padding: 64px 16px;
  }

  .accordion.legal {
    padding-left: 16px;
    padding-right: 16px;
    margin-top: 24px;
  }

  .plans-carousel-outer.sort-hidden .plans-carousel-scroll {
    margin-top: 0;
  }

  .packages-redesign .plans-tabs .plans-tab {
    font-size: 16px;
  }

  #fibre .package-item:last-child::before,
  .fibre-package .package-item:last-child::before {
    width: 100%;
  }

  #fibre .package-item:last-child,
  .fibre-package .package-item:last-child {
    margin-top: 32px;
  }

  .bg-grey-green .col {
    flex: 100%;
  }

  .mob-hide {
    display: none;
  }

  .compare-item {
    max-width: unset;
  }

  .btns {
    display: flex;
    flex-direction: column;
  }

  .contact-banner .btns .violet-btn {
    margin-right: 0;
    margin-left: 0;
  }

  header .container {
    padding: 0;
  }

  .homepage {
    padding: 0;
    /* Mobile hero art: full-width, top-anchored. Headline is centered here, so the
       "!" ring (right end of the 390-wide SVG) stays behind the purple dot. The Y
       offset pushes the art down to clear the fixed header + .mobile-bg spacing. */
    background-image: url(../img/home-mobile.png);
    background-size: 100% auto;
    background-position: center 68px;
  }

  .homepage .container {
    padding: 0;
  }

  .mobile-bg {
    padding: 64px 16px;
    margin-top: 64px;
  }

  .list-icons .violet-btn {
    width: 100%;
  }

  .bg-lightGray h1,
  .about-banner h1 {
    font-size: 36px;
    line-height: 46px;
  }

  .mobile-grey-bg {
    padding: 0 16px 40px;
  }

  .bg-darkGray .checker-window {
    margin-top: 48px;
  }

  .bg-main-green h1,
  .compare-block h2,
  .bg-main-green.easy-steps h1,
  .help-container h2,
  .package-heading h3,
  .bg-dark-gray h1,
  .add-ons h2 {
    font-size: 32px;
  }

  .bg-main-green {
    padding: 64px 0 120px;
  }

  .desktop-hide {
    display: block;
  }

  .checker-window {
    max-width: unset;
  }

  .carousel-better-way .slick-slide {
    width: 80%;
    margin: 0 16px;
  }

  .choice-item {
    background-color: var(--itemGreen);
    padding: 24px;
    border-radius: 16px;
    min-height: 288px;
  }

  .carousel-better-way.container {
    padding-right: 0;
    padding-left: 0;
  }

  .title-26,
  .compare-item h3 {
    font-size: 20px;
  }

  .compare-block .gap-32 {
    gap: 24px;
  }

  .star-text {
    margin-bottom: 64px !important;
  }

  .compare-item {
    margin-top: 0;
  }

  .carousel-better-way .slick-next {
    right: 0;
  }

  .carousel-better-way .slick-prev {
    left: 0;
  }

  .carousel-better-way .slick-prev,
  .carousel-better-way .slick-next {
    bottom: -54px !important;
    z-index: 10;
    top: unset;
  }

  .carousel-better-way .slick-prev {
    /* right: 0% !important; */
    right: 55px !important;
  }
  .carousel-testimonials .slick-prev {
    /* right: 0% !important; */
    /* right: 55px !important; */
    left: 40% !important;
  }

  .carousel-better-way .slick-next {
    /* left: 0% !important; */
    left: 55px !important;
  }
  .carousel-testimonials .slick-next {
    left: 60% !important;
  }

  /* .packages h1 {
        font-size: 36px;
    } */

  .custom-tabs .nav-link {
    font-size: 20px;
  }

  .custom-tabs {
    margin: 40px 0;
  }

  .custom-tabs.fixed {
    top: 64px;
    width: 100%;
    border-radius: 0;
    box-shadow: 0px 4px 24px 0px #00515233;
    padding: 12px;
    margin: 0 auto;
  }

  .container.packages {
    padding: 64px 16px 0;
  }

  .accordion.legal {
    padding-bottom: 64px;
  }

  .mob-left {
    text-align: left;
  }

  .package-item {
    max-width: unset;
  }

  .contact-banner {
    padding: 32px !important;
  }

  .contact-banner .violet-btn {
    margin-bottom: 16px;
    margin-top: 0;
  }

  .subtitle-h3 {
    font-size: 20px;
    line-height: 30px;
  }

  .compare-block,
  .our-story {
    padding: 64px 16px;
  }

  .bg-main-green.easy-steps {
    padding: 64px 16px;
    text-align: center;
  }

  .bg-main-green.easy-steps .title-26 {
    font-size: 26px;
  }

  .easy-steps .container {
    gap: 48px;
  }

  .easy-steps .step-item.col {
    flex: 100%;
  }

  .easy-steps .save-btn {
    width: 100%;
  }

  .bg-lightViolet h1 {
    font-size: 32px;
  }

  .bg-lightViolet {
    padding: 64px 16px 140px;
  }

  .carousel-testimonials {
    padding: 48px 24px;
  }

  .faqs {
    padding: 40px 16px;
  }

  .faqs .accordion-button {
    font-size: 14px;
    padding: 8px 16px !important;
  }

  .warning-info .violet-btn {
    width: 100%;
    font-size: 14px;
    padding: 8px;
    height: unset;
  }
  .faqs h2 {
    font-size: 26px;
  }

  .mob-100 {
    width: 100%;
  }

  .warning-info .violet-btn {
    max-width: unset;
  }

  .need-help {
    padding: 64px 16px;
  }

  .help-container.container {
    padding: 0;
  }

  .help-container .gap-30 {
    gap: 24px;
  }

  .warning-info {
    padding: 24px !important;
  }

  .warning-info .gap-14 {
    flex-wrap: wrap;
    gap: 18px;
  }

  .warning-info h3 {
    font-size: 18px;
  }

  .warning-info .violet-btn {
    margin: 24px auto;
    text-align: center;
  }

  .warning-info .link.text-end {
    text-align: center !important;
    font-size: 16px;
  }

  .mob-100 {
    width: 100%;
  }

  .mob-flex {
    border-top: 1px solid #395660;
    margin-top: 24px;
  }

  .mob-flex .mt-20 {
    margin-top: 32px;
  }

  footer {
    padding: 64px 16px;
  }

  footer .container {
    padding: 0;
  }

  footer h5 {
    margin: 32px 0 18px;
  }

  footer .mob-flex h5 {
    margin-bottom: 24px;
  }

  .mob-flex-3 {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    margin-bottom: 0;
  }

  footer hr {
    margin-top: 32px;
  }

  .copyright {
    margin-top: 46px;
    flex-direction: column;
    gap: 16px;
    align-items: start;
  }

  .product-banner .violet-btn {
    width: 100%;
  }

  .about-banner {
    padding: 128px 16px 64px;
  }

  .bg-lightGray.product-banner {
    padding: 88px 16px 8px;
  }

  .package-page .package-heading .w-100 {
    flex-wrap: wrap;
    gap: 16px;
  }

  .package-head-item {
    width: 100%;
  }

  .contact-banner .btns .violet-btn {
    margin-bottom: 16px;
  }

  .bg-dark-gray,
  .add-ons,
  .easy-steps .container {
    padding: 40px 16px;
  }

  .usp-bar__icon {
    width: 44px;
    height: 44px;
  }

  .usp-bar__icon img {
    width: 24px;
    height: 24px;
  }

  .usp-section .container {
    padding: 0;
  }

  .usp-bar__text {
    font-size: 20px;
  }

  .packages-redesign {
    padding: 40px 0;
  }

  .packages-redesign .plans-tabs-track {
    background-color: #fff;
  }

  .plans-banner-title {
    color: var(--textPrimary);
    font-size: 16px;
  }

  .sort-by-trigger {
    max-width: 240px;
    margin: 0 auto;
    padding: 6px 12px;
    gap: 0;
  }

  .plans-carousel-outer .sort-by-wrapper {
    margin-bottom: 12px;
  }

  .sort-by-label {
    font-size: 14px;
  }

  .sort-by-value {
    font-size: 12px;
  }

  .packages-redesign .plans-pills {
    margin: 24px 0 16px;
  }

  .plans-carousel-outer {
    padding: 0;
  }

  /* No photo banner on mobile */
  .plans-carousel-outer::before {
    display: none;
  }

  .packages-redesign h1 {
    font-size: 30px;
  }

  .add-ons .container {
    padding: 0;
  }

  .news-badge h2 {
    font-size: 32px;
  }

  .btns .violet-btn,
  .btns .violet-white-btn {
    width: 100% !important;
    margin: 0;
  }

  .cols-2 {
    flex-wrap: wrap;
  }

  .cols-2 .step-item,
  .value-item.col {
    flex: 100%;
    /* max-width: unset; */
  }

  .grey-badge h2 {
    font-size: 32px;
  }

  .grey-badge {
    margin-top: 64px;
  }

  .py-100.container {
    padding: 64px 16px;
  }

  .content-info {
    flex-wrap: wrap;
  }

  .device-img {
    width: 100%;
  }

  .devices-grey .tab-content {
    padding: 32px 16px;
  }

  .device-img .slick-next {
    right: 0;
  }

  .device-img .slick-prev {
    left: -8px;
  }

  .nav-devices {
    max-width: unset;
    width: 100%;
  }

  .devices-grey {
    padding: 64px 8px;
  }

  .bg-dark-gray .step-item {
    flex: 100%;
    text-align: center;
  }

  .bg-dark-gray .gap-32 {
    gap: 48px;
  }

  .devices-grey .tab-pane .violet-btn {
    width: 100%;
    text-align: center;
  }

  .news-badge-grey {
    padding: 32px !important;
  }

  .packages .tab-content > .active {
    gap: 48px;
  }

  .tariff-price span {
    font-size: 36px;
  }

  .tariff-price {
    font-size: 20px;
    margin-top: 24px;
  }

  /* .tooltip-close::before,
  .tooltip-info-close::before {
    font-weight: 400;
  } */

  .package-item ul li {
    font-size: 16px;
  }

  .testimonial-item {
    padding: 0;
  }

  .help-container .violet-btn {
    width: 100%;
  }

  .warning-info p {
    font-size: 16px;
  }

  .package-heading h5,
  .add-ons h5 {
    font-size: 20px;
  }

  .modal-img {
    display: none;
  }

  .yellow-message {
    height: unset;
    flex-wrap: wrap;
    padding: 8px;
  }

  .yellow-message.message-5g .message-icon {
    display: none;
  }

  .news-badge {
    padding: 0 16px !important;
    /* margin-bottom: 64px; */
  }

  .fs-20-bold {
    font-size: 20px;
  }

  .grey-badge .btns .violet-btn,
  .news-badge-grey .btns .violet-btn {
    margin-bottom: 16px;
  }

  .about-texts h4 {
    font-size: 26px;
  }

  .bg-dark-green .title-26 {
    font-size: 26px;
  }

  .bg-dark-green .gap-32.cols-2 {
    gap: 48px;
  }

  .bg-light-green h2,
  .our-story h2 {
    font-size: 32px;
  }

  .value-item .title-26 {
    font-size: 24px;
  }

  .our-story h2 {
    margin-bottom: 64px;
  }

  .timeline-item h5 {
    margin-top: 48px;
  }

  .grey-badge h2 {
    margin-bottom: 0;
  }

  #modal1 .product-modal,
  #modal2 .product-modal,
  #modal3 .product-modal {
    top: 70px;
    left: 0;
    transform: unset;
    position: relative;
  }

  .product-modal .close-modal {
    top: 15px;
    right: 20px;
  }

  .product-modal .violet-btn {
    width: 100%;
    text-align: center;
  }

  .not-found .help-item {
    width: 100%;
  }

  .help-item.col-6 {
    width: 100% !important;
  }

  .checker-window::before {
    font-size: 14px;
    background-size: 20px;
    background-position-x: 40px;
    max-width: 370px;
  }

  .article-video {
    width: 100%;
  }

  .pt-116 {
    padding-top: 104px;
  }

  .search-wrapper {
    width: 100% !important;
    margin: 16px 0;
  }

  .subcategory-item {
    width: 100%;
    max-width: unset;
  }
}

@media (max-width: 500px) {
  .carousel-better-way .slick-slide {
    width: 100%;
    margin: 0 20px 0 0;
  }

  .choice-item {
    min-height: 230px;
  }

  .tooltip-body {
    width: 88%;
  }

  .packages-col-left,
  .packages-col-right {
    padding: 60px 16px;
  }
}
/* 
@media (max-width: 436px) {
    .bg-lightGray.homepage {
        padding-top: 145px !important;
    }
} */

@media (max-width: 392px) {
  .check-btn {
    padding: 8px 11px;
    letter-spacing: -0.5px;
  }
  .checker-window h2 {
    font-size: 20px;
  }
  .checker-window {
    padding: 16px;
  }
  .packages-redesign .plans-pills {
    flex-direction: unset;
    transform: scale(0.9);
  }
}

@media (max-width: 390px) {
  .checker-window::before {
    background-position-x: 20px;
  }
}

@media (max-width: 385px) {
  .choice-item {
    min-height: 260px;
  }
}

/* @media (max-width: 312px) {
    .bg-lightGray.homepage {
        padding-top: 200px !important;
    }
} */

/* Personal Details Page — Mobile */
@media (max-width: 767px) {
  .pd-summary-header svg {
    display: block;
  }
  .bg-light-switch h1 {
    font-size: 32px;
  }
  .pd-field {
    width: 100%;
  }
  .new-titles h1 {
    text-align: center;
    font-size: 32px;
    line-height: 40px;
  }
  .bg-dark-gray .mid-separator {
    display: none;
  }
  .address-pill {
    width: 100%;
  }
  .cta-row {
    flex-direction: column;
    margin: 0 auto;
    gap: 8px;
  }
  .cta-row .short-separator {
    display: none;
  }
  .bg-dark-gray.mob-start .justify-content-center {
    justify-content: start !important;
    gap: 32px !important;
  }
  .help-me {
    flex-direction: column;
  }

  .new-titles.pt-100 {
    padding-top: 48px;
  }

  .green-label {
    gap: 20px;
  }

  .mob-p-16 {
    padding: 0 16px;
  }

  .light-grey-content {
    padding: 48px 0;
  }

  .light-grey-content .violet-btn {
    width: 100%;
    text-align: center;
  }

  .help-me .help-me-btn {
    width: 100%;
    justify-content: center;
    margin-top: 24px;
  }
  /* Steps bar */
  .top-steps-inner {
    gap: 2px;
  }
  .top-step-circle {
    width: 28px;
    height: 28px;
    font-size: 12px;
    line-height: 16px;
  }
  .top-step-label {
    font-size: 12px;
    line-height: 14px;
    white-space: normal;
    text-align: center;
    max-width: 56px;
  }
  .top-step-line {
    max-width: 24px;
    margin-top: 0;
  }

  /* Layout: stack with explicit order */
  .pd-layout {
    flex-direction: column;
    padding-bottom: 40px;
    gap: 0;
  }

  /* 1. Order Summary */
  .pd-summary {
    order: 1;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    border: none;
    padding: 12px 16px;
  }

  /* 2. Page header */
  .pd-layout > .pd-page-header {
    order: 2;
    margin-bottom: 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    max-width: 294px;
    margin: 0 auto;
    padding: 40px 0 24px;
  }

  .pd-help-link img {
    margin-right: 5px;
  }

  .pd-help-link {
    white-space: unset;
    display: block;
  }
  .pd-page-title {
    font-size: 24px;
    line-height: 34px;
    font-family: DM_Sans_med;
  }

  /* 3. Form card */
  .pd-form-card {
    order: 3;
  }

  /* Summary accordion */
  .pd-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
  }
  .pd-summary-chevron {
    display: block;
    flex-shrink: 0;
    transition: transform 0.25s;
  }
  .pd-summary-body {
    display: none;
  }
  .pd-summary--open .pd-summary-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .pd-summary--open .pd-summary-chevron {
    transform: rotate(180deg);
  }
  /* Collapsed-only lines: the expanded panel repeats them, so hide them once open. */
  .pd-summary--open .collapse-hide {
    display: none;
  }

  /* Form card */
  .pd-form-card {
    padding: 32px 16px;
    max-width: 100%;
    gap: 32px;
    margin: 0;
    box-shadow: unset;
  }
  .pd-form-subtitle {
    font-size: 16px;
    line-height: 26px;
  }
  .pd-form-title {
    font-size: 24px;
    line-height: 32px;
  }

  /* Rows: stack fields */
  .pd-row {
    flex-direction: column;
    gap: 16px;
  }

  .pd-section-title {
    display: none;
  }

  .pd-summary-plan-name {
    margin-top: 0;
  }

  /* Marketing options: stack */
  .pd-marketing-options {
    flex-direction: column;
    gap: 12px;
  }
  .pd-marketing-options .pd-checkbox-label {
    padding-right: 0;
  }

  /* Buttons: full width, stacked */
  .pd-buttons {
    flex-direction: column;
    gap: 12px;
  }
  .pd-btn-back,
  .pd-btn-continue {
    width: 100%;
    justify-content: center;
    text-align: center;
    height: 48px;
    font-size: 16px;
  }
  .pd-btn-back {
    justify-content: center;
  }

  /* Check / try-again modals */
  .check-modal-popup,
  .try-again-popup {
    margin: 16px;
    padding: 24px 16px;
  }
  .check-modal-title {
    font-size: 22px;
    line-height: 30px;
  }
  .check-modal-subtitle {
    font-size: 16px;
    line-height: 24px;
  }
  .oc-card {
    padding: 36px 16px;
  }
  .oc-next-card,
  .oc-pay-card {
    padding: 24px 16px;
  }
  .oc-title {
    font-size: 24px;
    line-height: 32px;
  }
  .leave-link-popup.fs-26 {
    font-size: 20px;
  }
  .leave-link-popup {
    margin-top: 8px;
  }
  .speed-titles h1 {
    font-size: 36px;
    text-align: center;
    max-width: 358px;
  }
  .speed-titles p {
    font-size: 16px;
  }
  .mob-p-16 {
    padding: 0 16px;
  }
  .speed-iframe {
    padding: 16px !important;
  }
  .contact-section h3 {
    font-size: 26px;
  }
  .contact-section p {
    font-size: 14px;
  }
  .banner-items {
    flex-wrap: wrap;
  }
  .banner-items div {
    font-size: 14px;
    max-width: 260px;
  }
  .contact-section .btns .violet-btn {
    margin-bottom: 16px;
    font-size: 14px;
    padding: 8px;
    height: unset;
  }
  .contact-section .btns .violet-white-btn {
    font-size: 14px;
    padding: 8px;
    height: unset;
  }
}

@media (max-width: 638px) {
  .cp-option {
    height: unset;
    padding: 4px 12px;
  }
}

/* "Why choose Imagine" grid: fewer columns on smaller screens */
@media (max-width: 1100px) {
  .better-way-grid .choice-item {
    flex: 0 1 calc((100% - 48px) / 3);
  }
}

@media (max-width: 767px) {
  .better-way-grid .choice-item {
    flex: 0 1 calc((100% - 24px) / 2);
  }
}

@media (max-width: 500px) {
  .better-way-grid .choice-item {
    flex: 0 1 100%;
  }
}

/* Plans carousel: fewer cards per view on smaller screens (always + a 60px peek) */
@media (min-width: 901px) and (max-width: 1200px) {
  #plans-carousel .package-item {
    flex: 0 0 calc((100% - 144px) / 3);
    width: calc((100% - 144px) / 3);
  }
}

@media (min-width: 577px) and (max-width: 900px) {
  #plans-carousel .package-item {
    flex: 0 0 calc((100% - 116px) / 2);
    width: calc((100% - 116px) / 2);
  }
}

@media (max-width: 576px) {
  .connection-cards {
    grid-template-columns: 1fr;
  }
  .light-green-bg .locations-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .leave-link-popup.from-top .tooltip-link {
    width: 100%;
    left: 75px;
  }
  #plans-carousel {
    display: flex;
    flex-wrap: wrap;
    gap: 42px;
    overflow: visible;
  }

  #plans-carousel .package-item {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
  }

  .plans-nav {
    display: none;
  }

  .sort-by-wrapper {
    min-width: 100%;
  }

  .category-divider {
    display: none;
  }

  .oc-items-box .oc-item-row:last-child {
    flex-wrap: wrap;
  }
  .oc-item-row.mob-wrap {
    flex-wrap: wrap;
  }
  .oc-item-row.mob-wrap div {
    width: 100%;
  }
  .packages-two-col .packages-col-left .custom-tabs {
    flex-wrap: nowrap;
    padding: 0;
  }
  .packages-two-col .custom-tabs .nav-link {
    padding: 8px 12px;
  }
  .fs-42-team {
    font-size: 24px !important;
  }
  .location-plans .package-item h2 {
    font-size: 36px;
  }
  .package-item h3 {
    font-size: 20px;
  }
  .location-plans .tariff-price span {
    font-size: 48px;
  }
  .location-plans .tariff-banner {
    font-size: 14px;
  }
  .packages-two-col .packages-col-right {
    margin-top: 0;
    margin-bottom: 0;
  }
}

@media (max-width: 430px) {
  .location-plans .package-item {
    min-width: 100%;
  }

  .location-plans .package-item .p-30 {
    padding: 18px 20px;
  }
}

@media (max-width: 380px) {
  .choose-plan-popup {
    padding: 80px 32px;
  }
}

@media (max-width: 373px) {
  .form-checker .check-btn {
    font-size: 14px;
  }

  .form-checker p.tooltip-info {
    width: 100%;
  }

  .contact-banner .btns .violet-btn {
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
}

@media (max-width: 353px) {
  .find-eircode {
    margin-left: 6px;
  }
  p.tooltip-info {
    padding-right: 6px;
  }
  p.tooltip-info img,
  .find-eircode img {
    width: 16px;
  }
  .form-checker p.tooltip-info,
  .find-eircode {
    font-size: 12px;
  }
  p.tooltip-info {
    min-width: 127px;
  }
}

/* ===== Honest Broadband Comparison ===== */
@media (max-width: 991px) {
  .honest-comparison {
    padding: 56px 16px;
  }
  .honest-comparison h2 {
    font-size: 30px;
    line-height: 38px;
    letter-spacing: -1px;
  }
  .hc-badge {
    font-size: 16px;
    padding: 6px 16px;
  }
  .hc-table th,
  .hc-table td {
    padding: 12px 16px;
  }
}

@media (max-width: 767px) {
  .plan-badge.plan-badge--fibre,
  .plan-badge.plan-badge--5g {
    line-height: 14px;
  }
  .honest-comparison h2 {
    font-size: 26px;
    line-height: 34px;
  }
  .honest-comparison__badges {
    gap: 8px;
  }
  .hc-badge {
    font-size: 12px;
    padding: 4px 12px;
  }
  .hc-why__title {
    font-size: 18px;
    font-family: DM_Sans_bold;
  }
  .hc-why__text {
    font-size: 16px;
  }

  /* Stacked comparison: hide the header row and lay each criterion out as a
     full-width grey label bar with the competitor + Imagine values side by side. */
  .hc-table,
  .hc-table tbody,
  .hc-table tr,
  .hc-table td {
    display: block;
    width: 100%;
  }
  .hc-table thead {
    display: none;
  }
  .hc-table tr {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #e9eaeb;
  }
  .hc-table tbody tr:last-child {
    border-bottom: none;
  }
  .hc-cell {
    padding: 12px 16px;
    border-bottom: none;
  }
  .hc-cell--label {
    flex: 0 0 100%;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e9eaeb;
  }
  .hc-cell--competitor,
  .hc-cell--imagine {
    flex: 1 1 0;
    min-width: 0;
  }
  .hc-cell--competitor {
    border-left: none;
    border-right: 1px solid #e9eaeb;
  }
  /* Per-cell provider labels (the header row is hidden on mobile). */
  .hc-cell--competitor::before,
  .hc-cell--imagine::before {
    display: block;
    margin-bottom: 6px;
    font-family: DM_Sans_semibold;
    font-size: 16px;
    letter-spacing: -0.32px;
  }
  .hc-cell--competitor::before {
    content: attr(data-tag);
    color: #0a0d12;
  }
  .hc-cell--imagine::before {
    content: "Imagine";
    color: var(--mainViolet);
  }

  .hc-save {
    font-size: 16px;
    line-height: 28px;
  }

  .hc-cta {
    width: 100%;
    justify-content: center;
  }

  .bg-main-green.why-imagine {
    padding: 40px 16px;
  }

  .why-imagine h2 {
    font-size: 30px;
  }
  .better-way-grid .choice-item {
    padding: 16px;
  }
  .better-way-grid .choice-item img {
    height: 24px;
    margin-bottom: 12px !important;
  }
  .better-way-grid .title-26 {
    font-size: 18px;
    margin: 0 0 4px;
  }
  .better-way-grid .choice-item .text-18 {
    font-size: 14px;
    line-height: 20px;
  }

  .why-imagine__btn {
    font-size: 14px;
    padding: 8px 16px;
  }
  .bg-lightViolet h2 {
    font-size: 30px;
  }
  .bg-lightViolet.testimonial {
    padding: 40px 16px 100px;
  }
  .carousel-testimonials {
    margin-top: 32px;
  }
  .fs-18 {
    font-size: 16px;
  }
}

/* ===== Mobile plans carousel (Figma): one card per view + dots/arrows below ===== */
@media (max-width: 767px) {
  #plans-carousel {
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    padding: 22px 20px 8px;
  }
  #plans-carousel .package-item {
    flex: 0 0 86%;
    width: 86%;
    max-width: 86%;
    scroll-snap-align: center;
  }
  /* Side arrows are replaced by the bottom pagination bar on mobile. */
  .plans-carousel-scroll > .plans-nav {
    display: none;
  }
  .plans-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-top: 20px;
  }
  .plans-pagination .plans-nav {
    display: block;
    position: static;
    transform: none;
    left: auto;
    right: auto;
    flex-shrink: 0;
  }
  .plans-dots {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 9999px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .plans-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background: #e5e5e5;
    cursor: pointer;
    transition:
      width 0.2s ease,
      background 0.2s ease;
  }
  .plans-dot.active {
    width: 16px;
    background: #8653cb;
  }
  .accordion.legal.products {
    padding: 0 16px;
  }
}
/* ===== Compare all plans side-by-side ===== */
@media (max-width: 1200px) {
  .plans-comparison__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .plans-comparison__table {
    min-width: 1296px;
  }
  /* .plans-comparison__label {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #fff;
    box-shadow: 1px 0 0 #d0dde2;
  } */
  .plans-comparison__row:nth-child(even) .plans-comparison__label {
    background: #f2f6f7;
  }
}

@media (max-width: 1100px) {
  .plans-comparison__scroll {
    max-height: 70vh;
  }

  .plans-comparison__row--plan,
  .plans-comparison__row--price {
    position: sticky;
    z-index: 3;
  }

  .plans-comparison__row--plan {
    top: 0;
    min-height: 96px;
    background: #fff;
  }

  /* No shadow at rest — it fades in once rows actually start passing underneath, so it
     reads as depth rather than a permanent border. The transparent shadow (rather than
     `none`) is what lets the alpha transition. index.js toggles .is-scrolled. */
  .plans-comparison__row--price {
    top: 96px;
    background: #f2f6f7;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0);
    transition: box-shadow 0.2s ease;
  }

  .plans-comparison__scroll.is-scrolled .plans-comparison__row--price {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
  }
}

@media (max-width: 767px) {
  .plans-comparison__bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-height: 0;
  }
  .plans-comparison__intro-icon {
    width: 40px;
    height: 40px;
  }
  .plans-comparison__intro-title {
    font-size: 18px;
    line-height: 26px;
  }
  .plans-comparison__toggle {
    align-self: flex-end;
  }
  .plans-comparison__label {
    flex: 0 0 120px;
    width: 120px;
    font-size: 14px;
  }
  .plans-comparison__table {
    min-width: 1270px;
  }
  .plans-comparison__plan {
    font-size: 18px;
  }
}

/* ===== "Move to Imagine broadband" steps =====
   Below 1200px the three-across timeline becomes a vertical one: a rail of 56px circles
   down the left with the copy left-aligned beside it. Selectors stay at 2+ classes so
   they outrank bootstrap.css, which is loaded after this file. */
@media (max-width: 1200px) {
  .bg-light-gray {
    padding: 40px 16px;
  }

  .bg-light-gray h2 {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -1.28px;
  }

  .bg-light-gray .fs-18 {
    max-width: 576px;
    margin: 12px auto 40px !important;
    font-size: 16px;
    line-height: 26px;
    color: var(--textPrimary);
  }

  /* Stack the steps and centre the timeline on the 576px copy measure. */
  .bg-light-gray.switch .container {
    max-width: 656px !important; /* 56 rail + 24 gap + 576 copy */
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 40px;
    padding: 0;
    margin: 0 auto;
  }

  /* Circle in column one, copy in column two. */
  .bg-light-gray .step-item {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 24px;
    width: 100%;
    max-width: none;
    margin: 0;
    text-align: left;
  }

  .bg-light-gray .step-item > :not(img) {
    grid-column: 2;
  }

  /* Circle and its title share row one, both centred, so the circle's centre lines up
     with the title rather than hanging below it. Row one is 56px (the circle), the
     description and link auto-flow into rows two and three of column two. */
  .bg-light-gray .step-item > img,
  .bg-light-gray .step-item > .title-26 {
    grid-row: 1;
    align-self: center;
  }

  .bg-light-gray .step-item > img {
    grid-column: 1;
    width: 56px;
  }

  /* Rule now runs vertically through the circle centres (28px in, 28px down). */
  .bg-light-gray .step-item::before {
    top: -60px;
    right: auto;
    bottom: -60px;
    left: 26px;
    width: 4px;
    height: auto;
  }

  .bg-light-gray .step-item:first-child::before {
    top: 28px;
    left: 26px;
  }

  .bg-light-gray .step-item:last-child::before {
    right: auto;
    bottom: calc(100% - 28px);
  }

  .bg-light-gray .step-item .title-26 {
    margin: 0;
    font-size: 20px;
    line-height: 28px;
    letter-spacing: -0.6px;
  }

  .bg-light-gray .step-item .text-18 {
    /* Row one is 56px tall for the circle, which already leaves ~14px under the
       centred title — close to the design's 12px, so no extra top margin. */
    margin: 0;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.32px;
    color: #3c4449;
  }

  .bg-light-gray .step-item .violet-link {
    margin-top: 2px;
    font-size: 14px;
    line-height: 24px;
  }

  .bg-light-gray .violet-btn {
    margin: 32px auto 0 !important;
    padding: 8px 16px;
    font-size: 14px;
    line-height: 20px;
  }

  .bg-light-gray .violet-btn img {
    width: 18px;
  }
}

/* ===== Mobile compare sheet =====
   At <=767px the inline "Compare all plans side-by-side" block is replaced by a sheet
   fixed to the bottom of the viewport: tap to open a picker, choose two plans, then see
   just those two side by side. Every column is in the markup; index.js hides the rest. */
@media (max-width: 767px) {
  .plans-comparison-container {
    display: none;
  }

  /* Stops the collapsed bar covering the end of the page. Class is added by index.js
     only when a sheet is actually on the page. */
  body.has-compare-sheet {
    padding-bottom: 96px;
  }

  /* Scrim behind the open sheet. It has to clear the site header (z 10000) and the
     floating scroll button (1000) or those two stay lit while the rest of the page
     dims — and the scroll button draws over the sheet itself. The open sheet goes one
     higher again, so the order is page < scrim < sheet. A click on the scrim falls
     through to the dismiss-on-outside-click handler in index.js. */
  .plans-compare-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: #0000001A;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }

  .plans-compare-sheet.open ~ .plans-compare-backdrop {
    opacity: 1;
    visibility: visible;
  }

  .plans-compare-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    display: flex;
    flex-direction: column;
    max-height: 92vh;
    background: #fff;
    border: 1px solid #dee1e3;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.06);
    /* Settles the sheet open or closed once a drag on the bar is released; index.js
       kills it mid-drag so the sheet tracks the finger 1:1. */
    transition: transform 0.25s ease;
  }

  /* Only lifted above the header while open — collapsed, the bar stays where it was
     in the stacking order so it can't cover the header or anything opened from it. */
  .plans-compare-sheet.open {
    z-index: 10002;
  }

  /* Collapsed bar, which stays on as the sheet header once open. */
  .plans-compare-sheet__bar {
    flex-shrink: 0;
    width: 100%;
    padding: 6px 20px 8px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: grab;
    /* The bar is a drag handle, so the browser must not claim the vertical
       gesture for page scrolling. */
    touch-action: none;
  }

  .plans-compare-sheet__bar:active {
    cursor: grabbing;
  }

  .plans-compare-sheet__grip {
    display: block;
    width: 36px;
    height: 4px;
    margin: 0 auto 6px;
    border-radius: 2px;
    background: #cbd5e1;
  }

  .plans-compare-sheet__title {
    display: block;
    font-family: DM_Sans_bold;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.54px;
    color: #005152;
  }

  .plans-compare-sheet__sub {
    display: block;
    font-family: DM_Sans;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.56px;
    color: #3c4449;
  }

  /* Body stays collapsed until the bar is tapped. */
  .plans-compare-sheet__body {
    display: none;
    min-height: 0;
    flex-direction: column;
    /* index.js measures the picker on open and locks that height here, so switching
       to the result view keeps the sheet exactly as tall — the grid scrolls inside
       instead of pushing the sheet up the screen. Falls back to auto without JS. */
    height: var(--compare-sheet-h, auto);
  }

  .plans-compare-sheet.open .plans-compare-sheet__body {
    display: flex;
  }

  .plans-compare-sheet__view {
    display: none;
    /* Fills the locked height rather than sizing to its own content. */
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
  }

  .plans-compare-sheet.open .plans-compare-sheet__view--picker {
    display: flex;
  }

  .plans-compare-sheet.open.results .plans-compare-sheet__view--picker {
    display: none;
  }

  .plans-compare-sheet.open.results .plans-compare-sheet__view--result {
    display: flex;
  }

  /* --- Picker --- */
  .plans-compare-picker {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    /* Scrolling to either end stops here rather than dragging the page behind the
       sheet, which also keeps the swipe-to-close gesture in index.js predictable. */
    overscroll-behavior: contain;
    padding: 4px 16px;
  }

  .plans-compare-picker__item {
    position: relative;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 12px;
    border: 1px solid #dfe8ec;
    border-radius: 8px;
    background: #f9fafb;
    cursor: pointer;
  }

  .plans-compare-picker__item.selected {
    border-color: #005152;
    background: #eaf6f6;
  }

  /* Native input carries the state; .__box is the visible tick. */
  .plans-compare-picker__check {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .plans-compare-picker__box {
    position: relative;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 1px solid #c0d2d8;
    border-radius: 2px;
    background: #fff;
  }

  .plans-compare-picker__item.selected .plans-compare-picker__box {
    border-color: #005152;
    background: #005152;
  }

  .plans-compare-picker__item.selected .plans-compare-picker__box::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 5px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }

  /* Once two are picked, the rest are dimmed out. */
  .plans-compare-picker__item.disabled {
    opacity: 0.5;
  }

  .plans-compare-picker__info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
  }

  .plans-compare-picker__name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: DM_Sans_bold;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.56px;
    color: #0b0d0e;
  }

  .plans-compare-picker__pill {
    padding: 2px 6px;
    border-radius: 4px;
    font-family: DM_Sans_bold;
    font-size: 9px;
    line-height: normal;
  }

  .plans-compare-picker__pill--5g {
    background: #ebe3fd;
    color: #7540bc;
  }

  .plans-compare-picker__pill--fibre {
    background: #dbeff0;
    color: #005152;
  }

  .plans-compare-picker__note {
    font-family: DM_Sans;
    font-size: 12px;
    line-height: 18px;
    color: #3c4449;
  }

  .plans-compare-picker__price {
    flex-shrink: 0;
    font-family: DM_Sans_bold;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: -0.56px;
    color: #005152;
  }

  /* --- Picker footer --- */
  .plans-compare-sheet__footer {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: #fff;
  }

  .plans-compare-sheet__count {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: DM_Sans;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.42px;
    color: #3c4449;
  }

  .plans-compare-sheet__badge {
    padding: 4px 8px;
    border-radius: 100px;
    background: #005152;
    font-family: DM_Sans_bold;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.36px;
    color: #fff;
  }

  .plans-compare-sheet__cta {
    width: 100%;
    height: 40px;
    padding: 8px 20px;
    border: none;
    border-radius: 8px;
    background: var(--mainViolet);
    font-family: DM_Sans_semibold;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.32px;
    color: #fff;
    cursor: pointer;
  }

  .plans-compare-sheet__cta:disabled {
    background: #EFECF3;
    color: #b19ccd;
    cursor: default;
  }

  /* --- Result view --- */
  .plans-compare-sheet__back {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 20px 8px;
    border: none;
    background: transparent;
    font-family: DM_Sans_bold;
    font-size: 16px;
    line-height: 28px;
    letter-spacing: -0.64px;
    color: #005152;
    cursor: pointer;
  }

  .plans-banner-info {
    display: none;
  } 

  /* Reuses the right arrow rather than shipping a mirrored copy. */
  .plans-compare-sheet__back img {
    transform: rotate(180deg);
  }

  /* Takes whatever the locked sheet height leaves after the back button, and scrolls
     the rows that don't fit. */
  .plans-compare-grid {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0 12px 12px;
    border: 1px solid #dae2db;
    border-radius: 8px;
    /* Keeps the rounded corners on the clipped content while scrolling. */
    -webkit-overflow-scrolling: touch;
  }

  /* Plan names stay put while the rows below scroll under them. */
  .plans-compare-grid__head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 4px;
    background: #005152;
  }

  .plans-compare-grid__plan {
    font-family: DM_Sans_bold;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.64px;
    color: #fff;
  }

  .plans-compare-grid__label {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 6px 12px;
    border-bottom: 1px solid #ecf1f3;
    background: #f2f6f7;
    font-family: DM_Sans_bold;
    font-size: 12px;
    line-height: 14px;
    letter-spacing: -0.36px;
    color: #73818a;
  }

  .plans-compare-grid__values,
  .plans-compare-grid__actions {
    display: flex;
    align-items: stretch;
    background: #fff;
  }

  .plans-compare-grid__actions {
    gap: 20px;
    padding: 12px;
  }

  .plans-compare-grid__cell {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 8px 12px;
    text-align: center;
  }

  .plans-compare-grid__actions .plans-compare-grid__cell {
    padding: 0;
  }

  .plans-compare-grid__price {
    font-family: DM_Sans_bold;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.64px;
    color: #005152;
  }

  .plans-compare-grid__note {
    font-family: DM_Sans;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.36px;
    color: #3c4449;
  }

  .plans-compare-grid__offer,
  .plans-compare-grid__speed,
  .plans-compare-grid__value,
  .plans-compare-grid__timing {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
  }

  .plans-compare-grid__offer {
    font-family: DM_Sans_med;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: -0.36px;
    color: #0f6b6c;
  }

  .plans-compare-grid__speed {
    font-family: DM_Sans_bold;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.56px;
    color: #7540bc;
  }

  .plans-compare-grid__value {
    font-family: DM_Sans_semibold;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.56px;
    color: #3c4449;
  }

  .plans-compare-grid__value--teal {
    color: #0d6263;
  }

  .plans-compare-grid__timing {
    font-family: DM_Sans;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: -0.36px;
    color: #3c4449;
  }

  .plans-compare-grid .plans-comparison__btn {
    gap: 4px;
    width: 100%;
    padding: 4px 8px;
    font-size: 14px;
    line-height: 20px;
  }

  /* Columns not chosen; index.js adds this class. */
  .plans-compare-grid__cell.hidden {
    display: none;
  }
}

/* ===== Product page hero, mobile copy =====
   The mobile design runs its own shorter wording, so both variants are in the markup and
   swapped by the theme mob-hide / desktop-hide pair at this breakpoint. */
@media (max-width: 767px) {
  /* The design insets the hero by 16px total. Bootstrap's .container adds another 12px
     each side, which left only 334px of copy width — just tight enough to wrap both the
     title and the USP line onto two rows. */
  .product-banner .container {
    padding-left: 0;
    padding-right: 0;
  }

  .product-banner h1.violet-title-big {
    font-size: 32px;
    line-height: 38px;
    letter-spacing: -1.28px;
    margin-bottom: 12px;
  }

  /* Beats .product-banner p.fs-20, which sets size and bold with !important. */
  .product-banner p.fs-20 {
    margin-bottom: 0 !important;
    font-family: DM_Sans_med;
    font-size: 16px !important;
    font-weight: normal;
    line-height: 26px;
    letter-spacing: -0.32px;
  }

  .product-banner p.fs-20 .violet-link {
    letter-spacing: -0.64px;
    text-decoration: underline;
  }

  /* "Leave anytime / No price hikes / Price Frozen till Dec 2030", dot-separated. */
  .product-banner__usps.desktop-hide {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 8px 0 0;
  }

  .product-banner__usps span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: DM_Sans_semibold;
    font-size: 12px !important;
    line-height: 18px;
    color: #005152 !important;
    white-space: nowrap;
  }

  .product-banner__usps span + span::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #99a3a9;
  }
}