/*!
 * Responsive styles for the Mosaic Initiative theme.
 */

@media (min-width: 1200px) {
  /* merged from 6 blocks that used this breakpoint, kept in their original order */
  .single-product .first {
    width: 100%;
  }
  .woocommerce div.product div.images,
  .woocommerce div.product div.images {
    width: 35%;
  }
  .woocommerce #content div.product div.summary,
  .woocommerce div.product div.summary,
  .woocommerce-page #content div.product div.summary,
  .woocommerce-page div.product div.summary {
    width: 55%;
  }

  .top-login {
    padding-bottom: 15px;
  }

  .post-ver .post-ver-details {
    padding-left: 0;
  }
  .post-ver-details h4 {
    margin: 0;
    /* max-height: 40px;
        min-height: 40px; */
  }

  /* .first {
        width: 30%;
    } */
  .second {
    /*        width: 23%;*/
    width: 30%;
  }

  #give_secure_site_wrapper {
    color: green;
    float: right;
    margin-top: -53px;
  }
  .donation-section-main #give_secure_site_wrapper {
    color: #fff;
    float: none;
    margin-top: 0;
  }
  .blog-item {
    min-height: 203.09px;
  }
  .blog-item img {
    border-radius: 4px;
  }
  .single-post-img-box {
    min-height: 344px;
  }
  #campaigns .campaign-box {
    min-height: 201.97px;
  }
  #account #campaigns .campaign-box {
    min-height: 190.38px;
  }
  .project-donate {
    min-height: 129.92px;
  }
  .single-project-image {
    min-height: 344.81px;
  }
  .cat-project-image {
    min-height: 344.81px;
  }
  .page-about-image {
    min-height: 370px;
  }
  .contact-image {
    min-height: 370.17px;
  }
  .page-faq-image {
    min-height: 349.22px;
  }
  .slider-container {
    /*        min-height: 450px;*/
    background-color: #fff;
  }

  #events .tribe-events-event-image {
    background: #f1f1f1;
    margin-bottom: 0 !important;
    padding-bottom: 59px;
    border: 1px #ddd solid;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
  }
  #events .tribe-events-event-image img {
    border-radius: 0;
    max-height: 432px;
  }
  #events .col-md-8 {
    padding-right: 0;
  }
  #events aside {
    padding-left: 0;
  }
  #events aside .aside-box {
    background: #fff;
    padding-left: 20px;
    min-height: 492px;
    margin-top: 1px;
    border: 1px #ddd solid;
    border-top-right-radius: 4px;
    border-left: none;
    border-bottom-right-radius: 4px;
  }
  .custom-search .col-md-7 {
    padding: 0;
  }
  .custom-search .col-md-5 {
    padding-left: 10px;
  }
  .donation-main-menu {
    display: none;
  }
}

@media only screen and (max-width: 768px) {
  /* merged from 20 blocks that used this breakpoint, kept in their original order */
  .my-menu {
    display: none;
  }

  .projects-main-page {
    margin-top: 50px;
  }

  .projects-main-page {
    margin-top: 50px;
  }

  .footer-logo {
    margin-top: 20px;
  }

  .projects-current .projects-item .caption {
    height: 36%;
    padding: 0;
  }

  .mobile-logo-new {
    width: 107px;
    padding: 0 !important;
    padding-left: 6px !important;
  }

  .slider-container #transition-timer-carousel .carousel-inner .carousel-item {
    background-size: cover !important;
    background-position: 89% bottom !important;
    height: auto;
    padding-top: 50px;
  }
  .carousel-caption {
    position: inherit;
    left: inherit;
    right: inherit;
    padding: 0;
    text-shadow: none;
    margin-top: initial !important;
    display: inline-block;

    background: rgb(0 0 0 / 50%);
    padding: 10px;
    width: 82%;
    margin-left: 20px;
  }

  .carousel-caption .carousel-caption-header {
    text-align: center !important;
    line-height: 29px !important;
    padding: 0px !important;
  }

  .carousel-caption .carousel-caption-header span {
    display: inline-block !important;
    text-align: left !important;
    background: none !important;
    margin-bottom: 0px !important;
    padding: 0px !important;
    font-size: 26px !important;
    float: left !important;
  }

  .carousel-caption .btn {
    text-shadow: none !important;
    /*            float: none!important;*/
    font-size: 16px !important;
    width: 235px !important;
    height: 45px !important;
    margin-top: 0 !important;
    margin-left: 20px;
  }
  .carousel-control {
    left: -20px;
  }

  .carousel-inner .carousel-item {
    min-height: 322px;
  }

  .news-title p {
    font-size: 16px !important;
    text-align: left !important;
    margin-bottom: 5px !important;
    padding-left: 5px !important;
  }
  .formError .formErrorContent {
    right: 220px;
    bottom: 140px;
  }
  .news-letter {
    padding: 50px 15px;
  }

  .desktop-slider {
    display: none;
  }

  #mobile-icon {
    display: inline-block !important;
  }
  .mobile-slider {
    display: block;
  }
  .logo {
    margin-top: 5px;
    padding-top: 5px;
    padding-left: 12px;
    padding-bottom: 0;
  }
  .desktop {
    display: none;
  }
  .donation-main-menu {
    padding: 0;
  }
  .donation-btn {
    border: none;
    padding: 0;
  }
  .top-login {
    padding: 6px 10px;
  }
  .logo img {
    padding: 9px;
  }

  .vision .jumbotron {
    background-position: bottom;
  }

  footer {
    padding: 40px 5px;
  }
  .social-con {
    text-align: center;
  }
  .nav-footer li {
    display: block;
    margin-bottom: 6px;
  }
  .nav-con {
    padding-right: 0;
  }
  footer .mobile img {
    margin-top: 5px;
  }
  .footer-address {
    margin-top: 15px;
    margin-bottom: 20px;
  }

  .donation-btn .dropdown-menu {
    margin-top: -2px;
    min-width: 100%;
    margin-left: 0;
  }

  .menu_is_opened {
    top: 0 !important;
  }
  .sticky {
    position: fixed;
    top: 0px;
    width: 100%;
    background-color: #ddd;
    z-index: 400;
  }

  .mian-wrap #single-Campaign .project-btn-me {
    padding: 0 20px;
  }
  #tribe-events-content .project-btn-me {
    padding-left: 0 !important;
  }

  #single-Campaign .project-amount-me {
    padding-left: 0;
    min-height: 50px;
  }
  #tribe-events-content .project-amount-me {
    padding-left: 0;
    min-height: 50px;
  }
  #single-Campaign .col-md-6 {
    padding-left: 20px !important;
    margin-bottom: 0;
  }
  #tribe-events-content .col-md-6 {
    padding-left: 20px !important;
  }

  .projects-cat .project-btn-me {
    padding-left: 5px;
  }
  .projects-cat .project-amount-me {
    min-height: 50px;
  }

  table.give-table th {
    padding: 2px !important;
    font-size: 12px;
  }
  table.give-table tbody tr td {
    padding: 10px !important;
    font-size: 12px;
  }

  .sticky-main-menu {
    display: none !important;
  }

  .comment-form-author,
  .comment-form-email {
    width: 100%;
    padding: 0;
  }

  .donation-project-box {
    width: 65%;
    margin: auto;
  }
  .project-donate-info h1 {
    font-size: 22px;
  }

  #single-Campaign #give-donation-level-button-wrap {
    width: 100%;
    position: relative;
  }

  .tribe-events-sub-nav li a {
    background-color: #ddd;
    border-radius: 4px;
    color: #ec932b;
    font-weight: 400;
  }
  .my-venue-box-footer .dropup .dropdown-menu {
    left: -222%;
  }

  .tribe-events-schedule .tribe-events-cost {
    top: 59px;
  }
  .tribe-events-schedule {
    border-color: transparent !important;
  }

  .vision .jumbotron .col-md-8 {
    background-position: center bottom;
  }
  .vision .jumbotron .btn {
    margin-top: 16px;
  }

  .beta {
    display: none;
  }
  .mian-wrap .project-amount-me .give-donation-amount {
    padding: 0 20px;
  }
  .mian-wrap .project-amount-me .give-donation-amount {
    margin-bottom: 22px;
    padding-left: 20px;
  }
  .mian-wrap .give-recurring-donors-choice {
    width: 100%;
    margin-right: 0;
    padding: 27px 15px 15px 16px;
    position: relative;
  }
  .mian-wrap #give-ffm-section {
    width: 100%;
    margin-left: 0;
    position: relative;
  }
  .mian-wrap .username-contact {
    top: 236px;
  }
  .mian-wrap #giftaid-wrap {
    top: 494px;
  }
  .mian-wrap .giftaid .second-p {
    padding-left: 0;
  }
  .mian-wrap .giftaid .btn-blank {
    float: none !important;
    margin-top: 93px !important;
  }
  .mian-wrap .giftaid .second-p {
    margin-top: 20px;
  }
  .projects-cat .project-btn-me {
    padding: 0 20px !important;
  }
  .mian-wrap .projects-cat .username-contact {
    top: 182px;
  }
  .mian-wrap .projects-cat #giftaid-wrap {
    top: 422px;
  }
  .mian-wrap .projects-cat .giftaid .second-p {
    padding-left: 0;
    margin-top: 20px;
  }
  .mian-wrap .projects-cat .giftaid .second-p {
    float: none !important;
  }
  .mian-wrap .giftaid .first-p {
    margin-left: 0;
  }
  .mian-wrap #give-ffm-section label {
    padding-left: 27px;
  }
  .mian-wrap #give-ffm-section #anonymous-wrap label {
    padding-left: 0px;
  }
  .mian-wrap .give-submit-button-wrap {
    float: none;
  }
  .mian-wrap .give-submit-button-wrap input {
    width: 100%;
  }

  .other-donation.first,
  .other-donation.second {
    padding: 0 15px;
  }
  .news-letter .col-md-4,
  .news-letter .col-md-7 {
    padding: 0;
  }
  /*    .slider-container{display: none;}*/

  .mosaic_projects-template-default .give-btn-reveal {
    width: 89%;
    position: relative;
    left: 22px;
    top: -16px;
  }

  .mosaic_projects-template-default .give-recurring-donors-choice {
    top: 0;
  }
  .make_donation-template-default .give-recurring-donors-choice {
    top: 0;
  }
  .donation-list button {
    font-size: 12px;
  }
  .donation-list .dropdown-menu > li > a {
    font-size: 12px;
  }

  .woocommerce-MyAccount-content .woocommerce-orders-table tbody tr {
    margin-bottom: 16px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
  }

  .woocommerce-MyAccount-content .woocommerce-orders-table tbody tr:last-child {
    margin-bottom: 0;
  }

  /* WooCommerce hides this with .woocommerce table.shop_table_responsive
     tbody th, which is two classes and three elements; naming both of the
     table's own classes outranks it without resorting to !important. */
  .woocommerce-MyAccount-content
    table.woocommerce-orders-table.shop_table_responsive
    tbody
    th {
    display: block;
    padding: 12px 15px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #ddd;
    font-size: 15px;
    text-align: start;
  }

  .woocommerce-MyAccount-content .woocommerce-orders-table tbody td {
    padding: 10px 15px;
    border-bottom: 1px solid #f0f0f0;
    text-align: end;
  }

  .woocommerce-MyAccount-content .woocommerce-orders-table tbody td:last-child {
    border-bottom: none;
  }

  /* WooCommerce writes the column name into this pseudo-element; left as a
     plain float it collides with long values, so the cell is a flex row and
     the label is its first item. */
  .woocommerce-MyAccount-content .woocommerce-orders-table tbody td:before {
    float: none;
    font-weight: 600;
    color: #8a8a8a;
  }

  .woocommerce-MyAccount-content .woocommerce-orders-table tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  /* --- Cart: stacked table (moved out of style.css) --- */
  /* WooCommerce stacks the cart table from its own woocommerce-smallscreen.css,
     which is enqueued at "only screen and (max-width: 768px)" -- the same query
     this group uses. One pixel out and at 768px the cells are blocks while the
     remove column is still pinned to 54px. */
  .woocommerce-cart table.shop_table td.product-remove {
    width: auto;
    padding: 10px 15px;
    text-align: end;
  }
}

@media (max-width: 585px) {
  .board {
    width: 90%;
    height: auto !important;
  }
  .board span.round-tabs {
    font-size: 16px;
    width: 20px;
    height: 20px;
    line-height: 13px;
  }
  .board .tab-content .head {
    font-size: 20px;
  }
  .board .nav-tabs > li a {
    width: 20px;
    height: 20px;
    line-height: 13px;
  }
  .board .nav-tabs > li.active:after {
    content: " ";
    position: absolute;
    left: 35%;
  }
  .board .btn-outline-rounded {
    padding: 12px 20px;
  }
}

@media (max-width: 1200px) {
  /* merged from 2 blocks that used this breakpoint, kept in their original order */
  .contact-image .caption h5 {
    font-size: 13px;
  }
  .contact-image .caption p {
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 2px;
    margin: 0;
    font-size: 12px;
    font-weight: 300;
  }
  .contact-image .caption .btn {
    margin-top: 5px;
    margin-right: 2px;
  }

  .direction {
    margin-top: 0px;
  }
}

@media (min-width: 768px) {
  /* merged from 2 blocks that used this breakpoint, kept in their original order */
  .nav-tabs.nav-justified > li > a {
    border: 1px solid #ddd;
  }
  .slider-mobile {
    display: none;
  }

  .mobile {
    display: none;
  }
}

@media (min-width: 900px) {
  .nav2-footer {
    margin-top: 50px;
  }
}

@media only screen and (max-width: 991px) {
  #mega-menu-wrap-primary-menu
    #mega-menu-primary-menu
    > li.mega-menu-flyout
    ul.mega-sub-menu
    li
    a {
    font-size: 12px !important;
  }

  /* --- Order received: the overview strip --- */
  /* Five labelled values share one row above this width. Below it the row is
     under about 970px, which squeezes each cell to around 94px and wraps
     values like "September 20, 2026" onto a second line, leaving the strip
     ragged. Stack them one per line instead and move the divider to the bottom
     edge. Screen only: on paper the row has the width to stay as it is. */
  .woocommerce .woocommerce-order ul.woocommerce-order-overview {
    display: block;
  }

  .woocommerce .woocommerce-order ul.woocommerce-order-overview li {
    border-inline-end: none;
    border-bottom: 1px solid #f0f0f0;
  }

  .woocommerce .woocommerce-order ul.woocommerce-order-overview li:last-child,
  .woocommerce .woocommerce-order ul.woocommerce-order-overview li:last-of-type {
    border-bottom: none;
  }
}

@media only screen and (max-width: 767.98px) {
  /* merged from 4 blocks that used this breakpoint, kept in their original order */
  .mobile-top-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    padding-right: 15px;
  }

  .mobile-top-actions .btn-orange {
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 4px;
    white-space: nowrap;
  }

  /* The toggle used to sit in the logo column, where it was floated left with a
     negative offset. It is now a flex item on the right, so neither applies. */
  .mobile-top-actions #mobile-icon {
    float: none;
    margin-left: 0;
    flex: 0 0 auto;
  }

  /* Keep the logo and the Donate button on one line, vertically centred. */
  .logo {
    display: flex;
    align-items: center;
  }

  .mobile-utility-bar {
    background: #f7f7f7;
    border-bottom: 1px solid #eee;
  }

  .mobile-utility-links {
    list-style: none;
    margin: 0;
    padding: 7px 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    font-size: 13px;
  }

  .mobile-utility-links li {
    margin: 0;
    padding: 0;
  }

  .mobile-utility-links a {
    color: #5a5a5a;
    text-decoration: none;
    white-space: nowrap;
  }

  .mobile-utility-links a:hover,
  .mobile-utility-links a:focus {
    color: #ec932b;
  }

  .mobile-utility-links .fa-user {
    margin-right: 4px;
    color: #ec932b;
  }

  /* The switcher's link carries .text-right, which the Bootstrap 3 compatibility
     layer forces to text-align:right !important. Follow the writing direction
     instead -- "start" is left in English and right in Arabic. */
  .mobile-utility-links .text-right {
    text-align: start !important;
  }

  .donation-section-main .donation-section-title {
    font-size: 22px;
  }

  .donation-section-main .donation-section-text {
    font-size: 15px;
  }

  /* --- Utility row --- */
  /* Separators rather than a plain gap, which is what the desktop header does
     between the same three links. */
  .mobile-utility-links {
    gap: 0;
    padding: 4px 0;
  }

  .mobile-utility-links > li {
    display: flex;
    align-items: center;
    padding: 0 12px;
  }

  .mobile-utility-links > li + li {
    border-inline-start: 1px solid #e4e4e4;
  }

  .mobile-utility-links > li:last-child {
    padding-inline-end: 0;
  }

  .mobile-utility-links a {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
  }

  /* The switcher's icon is a pale glyph that reads as a smudge at 15px next to
     13px text; size it to the text and let it sit on the line. */
  .mobile-utility-links > li:last-child img {
    width: 14px;
    height: 14px;
    margin-inline-end: 5px;
  }

  /* In Arabic the icon leads the text from the right, so a physical
     margin-right puts the gap on the outside of the pair instead of between
     the two. */
  .mobile-utility-links .fa-user {
    margin-right: 0;
    margin-inline-end: 5px;
  }

  .mobile-utility-links .mosaic-cart-link {
    padding-right: 0;
    padding-inline-end: 4px;
  }

  /* --- Logo / actions row --- */
  /* One shared row height so the logo, the Donate button and the toggle sit on
     a single centre line instead of three. .logo carries a 17px top margin
     from the desktop header that has no meaning here. */
  .logo,
  .mobile-top-actions {
    min-height: 58px;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
  }

  .logo {
    padding-inline: 15px;
  }

  /* Both the column and the image were padded, putting the logo 18px in while
     the utility row above it starts at 15px. */
  .logo .mobile-logo-new {
    width: 118px;
    padding: 0 !important;
  }

  .mobile-top-actions {
    padding-inline: 15px;
    gap: 10px;
  }

  /* --- Donate --- */
  /* This is the one call to action in the mobile header, and it was reading as
     the quietest thing in it: 85x38 in sentence case against a 44px menu
     toggle, where the desktop header gives the same link 184x50 in uppercase
     at 16px. Matching the desktop's case and weight makes it read as the same
     button on a phone, at a size that still leaves the logo room at 320px. */
  .mobile-top-actions .btn-orange {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    border: none;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition:
      background-color 0.2s linear,
      box-shadow 0.2s linear,
      transform 0.1s linear;
  }

  /* Arabic is a cursive script: letter-spacing pulls joined glyphs apart, and
     uppercasing is meaningless there. DIN Next LT Arabic happens to survive
     0.6px, but the tracking is doing nothing for it either way. */
  [dir="rtl"] .mobile-top-actions .btn-orange {
    letter-spacing: normal;
  }

  .mobile-top-actions .btn-orange:hover,
  .mobile-top-actions .btn-orange:focus {
    background-color: #da8420;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  }

  /* A touch needs to look like it landed; there is no hover state on a phone
     to confirm the tap before the page navigates. */
  .mobile-top-actions .btn-orange:active {
    background-color: #c9761a;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
    transform: translateY(1px);
  }

  /* Keyboard focus was relying on the browser default outline, which the theme
     clears on .btn (see ".btn:focus { outline: 0 }"). */
  .mobile-top-actions .btn-orange:focus-visible {
    outline: 2px solid #464646;
    outline-offset: 2px;
  }

  /* 28x23 is well under the 44px minimum for a touch target, and it was the
     only way to open the menu. The icon keeps its size; the button grows
     around it, with the end gutter pulled back so the glyph still lines up
     with the 15px margin. */
  .mobile-top-actions #mobile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-inline-end: -10px;
    border-radius: 4px;
  }

  /* The icon is drawn here rather than left to the 20x20 SVG in the markup,
     because that SVG does not survive a tap: script.js swaps the button's
     innerHTML for a bare "×" on open and "☰" on close, and the
     panel's close button then puts the <img> back. Painting the bars on the
     button itself means the icon looks the same whichever of those three
     states the JS has left behind, and it can pick up the brand colour, which
     a flat-filled SVG cannot. The img and the injected glyphs are hidden. */
  .mobile-top-actions #mobile-icon img {
    display: none;
  }

  .mobile-top-actions #mobile-icon {
    position: relative;
    font-size: 0;
    color: transparent;
  }

  /* Three bars out of one pseudo-element: the middle one is the box, the outer
     two are its box-shadows. ::after is the second stroke of the X, kept at
     zero opacity until the menu opens. */
  .mobile-top-actions #mobile-icon:before,
  .mobile-top-actions #mobile-icon:after {
    content: "";
    position: absolute;
    inset: 0;
    width: 22px;
    height: 2px;
    margin: auto;
    background-color: #464646;
    border-radius: 2px;
    transition:
      transform 0.25s ease,
      box-shadow 0.15s ease,
      opacity 0.15s ease,
      background-color 0.2s linear;
  }

  .mobile-top-actions #mobile-icon:before {
    box-shadow:
      0 -7px 0 #464646,
      0 7px 0 #464646;
  }

  .mobile-top-actions #mobile-icon:after {
    opacity: 0;
  }

  /* script.js toggles .opened on the button. The panel slides open over half a
     second, so the morph is on screen while it travels. */
  .mobile-top-actions #mobile-icon.opened:before {
    box-shadow: none;
    transform: rotate(45deg);
  }

  .mobile-top-actions #mobile-icon.opened:after {
    opacity: 1;
    transform: rotate(-45deg);
  }

  .mobile-top-actions #mobile-icon:hover,
  .mobile-top-actions #mobile-icon:focus {
    background-color: #f5f5f5;
  }

  .mobile-top-actions #mobile-icon:hover:before,
  .mobile-top-actions #mobile-icon:focus:before {
    background-color: #ec932b;
    box-shadow:
      0 -7px 0 #ec932b,
      0 7px 0 #ec932b;
  }

  .mobile-top-actions #mobile-icon.opened:hover:before,
  .mobile-top-actions #mobile-icon.opened:focus:before {
    box-shadow: none;
  }

  .mobile-top-actions #mobile-icon:hover:after,
  .mobile-top-actions #mobile-icon:focus:after {
    background-color: #ec932b;
  }

  .mobile-top-actions #mobile-icon:active {
    transform: scale(0.94);
  }

  /* The theme clears the default outline on buttons, so focus needs its own. */
  .mobile-top-actions #mobile-icon:focus-visible {
    outline: 2px solid #464646;
    outline-offset: 2px;
  }

  /* A hairline under the header. Without it the white row runs straight into
     the hero on the home page with nothing marking where the header ends.
     :has() picks out the header row specifically -- .row is far too generic to
     carry a border, and this is the only row holding the logo. */
  .row:has(> .logo) {
    border-bottom: 1px solid #eee;
  }
}

@media (max-width: 767px) {
  /* merged from 2 blocks that used this breakpoint, kept in their original order */
  /* Below the medium breakpoint the plugin drops the column gutters that were
     doing duty as the card's inner padding, so the date tag and the poster end
     up flush against the border. Pad the card itself instead and flatten the
     inner row's negative margins. */
  .tribe-events .tribe-events-calendar-list__event-row {
    padding: 0 12px;
  }

  .tribe-events .tribe-events-calendar-list__event {
    margin-left: 0;
    margin-right: 0;
    padding-top: 12px;
  }

  .tribe-events .tribe-events-calendar-list__event > .tribe-common-g-col {
    padding-left: 0;
    padding-right: 0;
  }

  .tribe-events .tribe-events-calendar-list__event-date-tag {
    padding-bottom: 0;
    border-inline-end: none;
  }

  .tribe-events .tribe-events-calendar-list__event-featured-image-wrapper {
    max-width: none;
  }

  .tribe-events .tribe-events-calendar-list__event-featured-image {
    height: 200px;
  }

  .tribe-events .tribe-events-c-top-bar__datepicker-button {
    font-size: 18px;
  }

  .tribe-events-single .tribe-events-single-event-title {
    font-size: 24px;
  }

  .tribe-events-single .tribe-events-event-image img {
    max-height: 260px;
  }

  .tribe-events-single .tribe-events-single-section.tribe-events-event-meta {
    gap: 20px 0;
    padding: 15px;
  }

  .custom-search #searchform {
    padding: 15px;
  }

  /* Side by side, the field collapses to a few characters on a narrow screen;
     below the breakpoint the button gets its own full-width line instead. */
  .custom-search #searchform .input-group {
    flex-wrap: wrap;
  }

  .custom-search #searchform .search-box {
    width: 100%;
    flex: 0 0 100%;
    border-start-end-radius: 4px;
    border-end-end-radius: 4px;
  }

  .custom-search #searchform .input-group-btn {
    width: 100%;
    margin-top: 10px;
  }

  .custom-search #searchform .input-group-btn > .btn {
    width: 100%;
    border-radius: 4px;
  }

  .custom-search .post-line h4 {
    font-size: 16px;
  }

  /* --- Cart and Checkout (moved out of style.css) --- */
  .woocommerce-cart table.shop_table td.actions .coupon {
    flex-wrap: wrap;
  }

  .woocommerce-cart table.shop_table td.actions .coupon .input-text {
    width: 100%;
  }

  .woocommerce-checkout form.checkout .woocommerce-billing-fields,
  .woocommerce-checkout form.checkout .woocommerce-additional-fields {
    padding: 15px;
  }

  .woocommerce-checkout form.checkout .form-row-first,
  .woocommerce-checkout form.checkout .form-row-last {
    width: 100% !important;
  }
}

@media only screen and (max-width: 360px) {
  .mobile-utility-links {
    font-size: 12px;
  }

  .mobile-utility-links > li {
    padding: 0 8px;
  }

  .logo .mobile-logo-new {
    width: 104px;
  }

  .mobile-top-actions .btn-orange {
    padding: 0 14px;
  }
}

/* ======== Cart and Checkout ========================================
   Moved here from the end of style.css so every media query lives in this
   file. The two blocks above this point were merged into the existing
   768px and 767px groups, which use exactly the same query text.

   These two keep blocks of their own:
   * 992px is a breakpoint no other rule in this file uses.
   * "(max-width: 991px)" is NOT the same query as the
     "only screen and (max-width: 991px)" group further up -- that one is
     screen-only, this one also applies to print. Merging them would have
     silently dropped the cart totals rule from printed pages.
==================================================================== */

/* Checkout: two columns. WooCommerce ships #customer_details,
   #order_review_heading and #order_review as three siblings that stack. With
   the full width available they are placed side by side: details on the left,
   the order summary in a column of its own that stays in view while the form
   is filled in. Grid rather than float, because the summary is replaced
   wholesale by WooCommerce's update_order_review AJAX and a grid item
   survives that where a float clearfix would not. */
@media (min-width: 992px) {
  .woocommerce-checkout form.checkout.woocommerce-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    grid-template-rows: auto 1fr;
    gap: 0 34px;
    align-items: start;
  }

  .woocommerce-checkout form.checkout #customer_details {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .woocommerce-checkout form.checkout #order_review_heading {
    grid-column: 2;
    grid-row: 1;
    /* No margin-top reset here on purpose. While this block lived at the end
       of style.css a later rule in the same file set margin-top: 20px and won,
       so the reset never applied. Moving the block into this file, which loads
       after style.css, would have switched it on and lifted "Your order" 20px
       clear of "Billing details" -- the two headings line up only with the
       20px kept. The move is meant to be structural, so the rendering stays
       as it was. */
  }

  .woocommerce-checkout form.checkout #order_review {
    grid-column: 2;
    grid-row: 2;
    position: sticky;
    top: 20px;
  }
}

@media (max-width: 991px) {
  .woocommerce-cart .cart-collaterals .cart_totals {
    width: 100%;
    float: none;
  }
}