/* HOOJA responsive preview phase 1 - intentionally disabled for visitors.
 * Active only on logged-in admin requests with ?hooja_mobile_preview=1.
 * Keep WPtouch enabled while this work is in progress.
 */
body.hooja-responsive-preview .hooja-mobile-header {
  display: none;
}

@media screen and (max-width: 767px) {
  body.hooja-responsive-preview {
    min-width: 0;
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
  }
  body.hooja-responsive-preview *,
  body.hooja-responsive-preview *::before,
  body.hooja-responsive-preview *::after {
    box-sizing: border-box;
  }
  body.hooja-responsive-preview #wrapper {
    width: 100%;
    overflow: visible;
    background: #fff;
  }
  body.hooja-responsive-preview #header {
    display: none;
  }
  body.hooja-responsive-preview .hooja-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 68px;
    padding: 8px 12px;
    background: #fff;
    border-top: 5px solid #f29700;
    border-bottom: 2px solid #eb6fa5;
    position: relative;
    z-index: 1000;
  }
  body.hooja-responsive-preview .hooja-mobile-logo {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1 1 auto;
  }
  body.hooja-responsive-preview .hooja-mobile-logo img {
    display: block;
    max-width: min(190px, 100%);
    width: auto;
    max-height: 55px;
    height: auto;
  }
  body.hooja-responsive-preview .hooja-mobile-menu-root {
    position: relative;
    flex: 0 0 auto;
  }
  body.hooja-responsive-preview .hooja-mobile-menu-trigger {
    list-style: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 62px;
    min-height: 52px;
    padding: 6px;
    border: 1px solid #dfdfdf;
    border-radius: 5px;
    color: #323232;
    background: #fff;
    user-select: none;
  }
  body.hooja-responsive-preview .hooja-mobile-menu-trigger::-webkit-details-marker,
  body.hooja-responsive-preview .hooja-mobile-menu-group > summary::-webkit-details-marker {
    display: none;
  }
  body.hooja-responsive-preview .hooja-mobile-menu-lines {
    display: grid;
    gap: 4px;
    width: 22px;
  }
  body.hooja-responsive-preview .hooja-mobile-menu-lines i {
    display: block;
    width: 100%;
    height: 2px;
    background: #333;
    border-radius: 2px;
  }
  body.hooja-responsive-preview .hooja-mobile-menu-word {
    font-weight: 700;
    font-size: 10px;
    line-height: 1.2;
  }
  body.hooja-responsive-preview .hooja-mobile-menu-panel {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    width: min(380px, calc(100vw - 24px));
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    border: 1px solid #e5d0da;
    border-top: 4px solid #f29700;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    padding: 8px 12px 12px;
  }
  body.hooja-responsive-preview .hooja-mobile-home-link {
    display: block;
    padding: 13px 10px;
    font-size: 15px;
    font-weight: 700;
    border-bottom: 1px solid #eee;
    text-decoration: none;
  }
  body.hooja-responsive-preview .hooja-mobile-menu-group {
    padding: 0;
    border-bottom: 1px solid #eee;
  }
  body.hooja-responsive-preview .hooja-mobile-menu-group > summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 48px;
    cursor: pointer;
    padding: 12px 10px;
    font-size: 15px;
    font-weight: 700;
    color: #323232;
  }
  body.hooja-responsive-preview .hooja-mobile-menu-group > summary::after {
    content: '＋';
    color: #e27500;
    font-size: 19px;
  }
  body.hooja-responsive-preview .hooja-mobile-menu-group[open] > summary::after {
    content: '－';
  }
  body.hooja-responsive-preview .hooja-mobile-menu-list {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
  }
  body.hooja-responsive-preview .hooja-mobile-menu-list li {
    list-style: none;
    background: none;
    float: none;
    margin: 0;
    padding: 0;
  }
  body.hooja-responsive-preview .hooja-mobile-menu-list a {
    display: block;
    padding: 11px 12px 11px 22px;
    border-bottom: 1px solid #f3f3f3;
    color: #333;
    background: #fff7f9;
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
  }
  body.hooja-responsive-preview .hooja-mobile-menu-panel a:focus-visible,
  body.hooja-responsive-preview .hooja-mobile-header summary:focus-visible {
    outline: 3px solid #0a65d8;
    outline-offset: 2px;
  }
  /* Basic content constraints so the first mobile-header preview is usable.
   * Detailed page-specific layout follows in the next phases. */
  body.hooja-responsive-preview #main {
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 18px 12px;
    overflow: visible;
  }
  body.hooja-responsive-preview #container {
    float: none;
    width: 100%;
    margin: 0;
  }
  body.hooja-responsive-preview #content {
    width: 100%;
    margin: 0;
    overflow-wrap: anywhere;
  }
  body.hooja-responsive-preview #primary,
  body.hooja-responsive-preview #secondary {
    display: none;
  }
  body.hooja-responsive-preview #content img,
  body.hooja-responsive-preview #main img,
  body.hooja-responsive-preview #footer img {
    max-width: 100%;
    height: auto;
  }
  body.hooja-responsive-preview #top_szone {
    width: 100%;
    max-width: 100%;
  }
  body.hooja-responsive-preview #fs_slide_prev,
  body.hooja-responsive-preview #fs_slide_next {
    display: none;
  }
  body.hooja-responsive-preview #colophon {
    width: 100%;
    padding: 22px 14px;
  }
  body.hooja-responsive-preview #site-info,
  body.hooja-responsive-preview .f_menu {
    float: none;
    margin: 0 0 18px;
    border: 0;
  }
  body.hooja-responsive-preview #copy_right {
    width: 100%;
    margin: 10px 0;
  }
  body.hooja-responsive-preview #Page_left {
    display: none;
  }
}


/* ================================================================
 * Phase 2: shared article layout + submission /upload page
 * Applies ONLY during logged-in admin preview at <= 767px.
 * Does not affect the live desktop or WPtouch view.
 * ================================================================ */
@media screen and (max-width: 767px) {
  /* Let narrow pages flow without inheriting Twenty Ten's fixed widths. */
  body.hooja-responsive-preview #main,
  body.hooja-responsive-preview #container,
  body.hooja-responsive-preview #content,
  body.hooja-responsive-preview #content .hentry,
  body.hooja-responsive-preview #content .entry-content,
  body.hooja-responsive-preview #content .entry-summary,
  body.hooja-responsive-preview #content .ind,
  body.hooja-responsive-preview #content .tab-w,
  body.hooja-responsive-preview #content .upload-info {
    min-width: 0;
    max-width: 100%;
  }
  body.hooja-responsive-preview #content .entry-content {
    padding: 12px 0 0;
  }
  body.hooja-responsive-preview #content h1 {
    min-height: 34px;
    height: auto;
    padding: 4px 0 6px 42px;
    background-size: 33px auto;
    font-size: 20px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  body.hooja-responsive-preview #content h2 {
    min-height: 0;
    font-size: 17px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }
  body.hooja-responsive-preview #content .entry-title {
    font-size: 20px;
    line-height: 1.45;
  }
  body.hooja-responsive-preview #content img,
  body.hooja-responsive-preview #content video,
  body.hooja-responsive-preview #content iframe,
  body.hooja-responsive-preview #content embed,
  body.hooja-responsive-preview #content object {
    max-width: 100%;
  }
  body.hooja-responsive-preview #content .wp-caption {
    max-width: 100% !important;
  }
  body.hooja-responsive-preview #content .wp-caption img {
    max-width: 100%;
    height: auto;
  }
  /* Page-specific images with 100% width but a fixed HTML width attribute. */
  body.hooja-responsive-preview #content .entry-content img {
    height: auto;
  }

  /* Submission category switcher: the two .wdt1 tabs were 723px wide. */
  body#upload.hooja-responsive-preview #content .tab-w {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    margin: 10px 0 16px;
    overflow: visible;
  }
  body#upload.hooja-responsive-preview #content .tab-cat {
    float: none;
    display: flex;
    flex: 1 1 calc(50% - 4px);
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 10px 8px;
    background: #f5a7ca;
    color: #4f1730;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
    overflow-wrap: anywhere;
    cursor: pointer;
    user-select: none;
  }
  body#upload.hooja-responsive-preview #content .tab-cat.wdt1 {
    flex-basis: 100%;
  }
  body#upload.hooja-responsive-preview #content .tab-cat.select,
  body#upload.hooja-responsive-preview #content .tab-cat.hover {
    background: #eb6ea5;
    color: #fff;
  }
  body#upload.hooja-responsive-preview #content .tab-cat:focus-visible {
    outline: 3px solid #0a65d8;
    outline-offset: 2px;
  }
  body#upload.hooja-responsive-preview #content .upload-info {
    width: 100%;
    padding: 12px 0;
    overflow-wrap: anywhere;
  }
  /* Keep the existing .no-upload display:none; jQuery will toggle inline display. */
  body#upload.hooja-responsive-preview #content .wpcf7,
  body#upload.hooja-responsive-preview #content .wpcf7 form,
  body#upload.hooja-responsive-preview #content .wpcf7-form-control-wrap {
    max-width: 100%;
  }
  body#upload.hooja-responsive-preview #content .wpcf7 input[type="text"],
  body#upload.hooja-responsive-preview #content .wpcf7 input[type="email"],
  body#upload.hooja-responsive-preview #content .wpcf7 input[type="tel"],
  body#upload.hooja-responsive-preview #content .wpcf7 input[type="number"],
  body#upload.hooja-responsive-preview #content .wpcf7 input[type="url"],
  body#upload.hooja-responsive-preview #content .wpcf7 input[type="date"],
  body#upload.hooja-responsive-preview #content .wpcf7 textarea,
  body#upload.hooja-responsive-preview #content .wpcf7 select,
  body#upload.hooja-responsive-preview #content .wpcf7 input[type="file"] {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    padding: 9px;
    font-size: 16px;
    line-height: 1.5;
  }
  body#upload.hooja-responsive-preview #content .wpcf7 textarea {
    min-height: 110px;
  }
  /* Existing CF7 forms often use dl/dt/dd for left labels and right fields. */
  body#upload.hooja-responsive-preview #content .wpcf7 dl {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 0 16px;
    overflow: visible;
  }
  body#upload.hooja-responsive-preview #content .wpcf7 dt,
  body#upload.hooja-responsive-preview #content .wpcf7 dd {
    float: none;
    display: block;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    text-align: left;
  }
  body#upload.hooja-responsive-preview #content .wpcf7 dt {
    padding: 8px 10px;
    line-height: 1.45;
  }
  body#upload.hooja-responsive-preview #content .wpcf7 dd {
    padding: 8px 0;
    background: transparent;
  }
  body#upload.hooja-responsive-preview #content .wpcf7 .wpcf7-list-item {
    max-width: 100%;
    margin: 0 0 8px;
  }
  body#upload.hooja-responsive-preview #content .entry-content > br {
    /* Existing multiple breaks remain for now; page HTML will be cleaned later. */
    line-height: 1.2;
  }
}


/* ======================================================================
 * Phase 3 (preview only): home page layout repairs
 *
 * page-top.php does not use #content, unlike normal pages. Its first .section
 * has an inline display:flex and the bottom .section has inline width:1020px.
 * These overrides apply only with the admin-preview body class on mobile.
 * ====================================================================== */
@media screen and (max-width: 767px) {
  body.hooja-responsive-preview #main > #container > .entry-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0;
    margin: 0;
  }
  body.hooja-responsive-preview #main > #container > .entry-content .section {
    max-width: 100%;
    min-width: 0;
  }

  /* On desktop this is Facebook + the three information cards side by side.
     On mobile show navigation cards first, Facebook second. */
  body.hooja-responsive-preview #main > #container > .entry-content > .section:first-child {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 18px;
    width: 100% !important;
    margin-bottom: 22px;
  }
  body.hooja-responsive-preview #main .top3area_outer {
    order: 1;
    float: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
  }
  body.hooja-responsive-preview #main .top3area {
    float: none;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    height: auto;
    margin: 0;
    padding: 12px 10px;
    border-width: 3px;
    text-align: left;
  }
  body.hooja-responsive-preview #main .top3area img {
    display: block;
    float: none;
    width: 72px;
    max-width: 100%;
    height: auto;
    margin: 0;
  }
  body.hooja-responsive-preview #main .top3area ul {
    display: block;
    float: none;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
  }
  body.hooja-responsive-preview #main .top3area ul li {
    display: block;
    float: none;
    width: 100%;
    min-width: 0;
    margin: 0 0 5px;
    padding: 0;
    background: none;
    font-size: 14px;
    line-height: 1.5;
    white-space: normal;
    word-break: normal;
    overflow-wrap: anywhere;
  }
  body.hooja-responsive-preview #main .top3area ul li:last-child {
    margin-bottom: 0;
  }
  body.hooja-responsive-preview #main .top3area ul li a {
    display: block;
    text-decoration: none;
  }
  body.hooja-responsive-preview #main #top_infoOuter {
    order: 2;
    float: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
  }
  body.hooja-responsive-preview #main #top_info,
  body.hooja-responsive-preview #main .waku-info,
  body.hooja-responsive-preview #main .content-info {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  body.hooja-responsive-preview #main #top_info {
    padding: 10px;
    overflow: hidden;
  }
  body.hooja-responsive-preview #main #top_infoOuter .fb-page {
    display: block;
    float: none;
    max-width: 100%;
    margin-top: 0;
    overflow: hidden;
  }
  body.hooja-responsive-preview #main #top_infoOuter .fb-page > span,
  body.hooja-responsive-preview #main #top_infoOuter .fb-page iframe {
    max-width: 100% !important;
  }

  /* News: prevent date and link title from overlapping at phone width. */
  body.hooja-responsive-preview #main .tab-w,
  body.hooja-responsive-preview #main .waku-info {
    max-width: 100%;
    margin: 0;
  }
  body.hooja-responsive-preview #main .content-info {
    padding: 8px;
  }
  body.hooja-responsive-preview #main .content-info ul {
    width: 100%;
    max-width: 100%;
    margin: 8px 0 0;
    padding: 0;
  }
  body.hooja-responsive-preview #main .content-info ul li.osrs_outer {
    float: none;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px 8px;
    align-items: start;
    width: 100%;
    margin: 0;
    padding: 8px 0;
  }
  body.hooja-responsive-preview #main .content-info li.osrs_outer > a.cate {
    float: none;
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 1px 0 0;
  }
  body.hooja-responsive-preview #main .content-info li.osrs_outer .date {
    float: none;
    display: block;
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    margin: 0;
    font-size: 12px;
    line-height: 1.4;
  }
  body.hooja-responsive-preview #main .content-info li.osrs_outer .item_tit {
    float: none;
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
    font-size: 14px;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }

  /* The calendar iframe is fixed at 980px in page-top.php.
     Keep all days reachable by scrolling within its border, rather than
     clipping the page or stretching the entire viewport. */
  body.hooja-responsive-preview #main #top_gcal,
  body.hooja-responsive-preview #main #border_area {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
  }
  body.hooja-responsive-preview #main #border_area {
    padding: 12px 8px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  body.hooja-responsive-preview #main #border_area iframe {
    display: block;
    width: 760px !important;
    max-width: none !important;
    height: 420px;
    margin: 8px 0 14px;
    border: 0;
  }
  body.hooja-responsive-preview #main #border_area::before {
    content: 'カレンダーは左右にスクロールしてご覧ください';
    display: block;
    font-size: 12px;
    line-height: 1.5;
    color: #666;
    margin: 0 0 6px;
  }

  /* The final home banner area has inline width:1020px. Reset it for phones. */
  body.hooja-responsive-preview #main > #container > .entry-content .section[style*='1020px'] {
    float: none;
    display: block;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    margin: 20px auto 0 !important;
    padding: 0;
    overflow: hidden;
  }
  body.hooja-responsive-preview #main > #container > .entry-content img,
  body.hooja-responsive-preview #main > #container > .entry-content video,
  body.hooja-responsive-preview #main > #container > .entry-content embed,
  body.hooja-responsive-preview #main > #container > .entry-content object {
    max-width: 100% !important;
    height: auto !important;
  }
  body.hooja-responsive-preview #main > #container > .entry-content .section[style*='1020px'] > * {
    max-width: 100%;
    min-width: 0;
  }

  /* Avoid the familiar huge empty gaps when the home content has fixed margins. */
  body.hooja-responsive-preview #main > #container > .entry-content > .section {
    margin-bottom: 24px;
  }
}

/* ======================================================================
 * Phase 4 (admin mobile preview only): contain the top FlexSlider.
 * Prevent adjacent slides/images from protruding outside the phone width.
 * Do not override JavaScript-managed widths or transforms on the slides list.
 * ====================================================================== */
@media screen and (max-width: 767px) {
  body.hooja-responsive-preview #top_szone {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 auto;
    overflow: hidden;
  }

  body.hooja-responsive-preview #top_szone .flexslider {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
  }

  body.hooja-responsive-preview #top_szone .flexslider .flex-viewport {
    width: 100%;
    max-width: 100%;
    overflow: hidden !important;
  }

  body.hooja-responsive-preview #top_szone .flexslider .slides > li {
    overflow: hidden;
    box-sizing: border-box;
  }

  body.hooja-responsive-preview #top_szone .flexslider .slides > li img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}

/* ======================================================================
 * Phase 5 (admin-only preview): homepage bottom banners and link area.
 * Desktop remains unchanged. Uses existing WordPress page-content IDs.
 * ====================================================================== */
@media screen and (max-width: 767px) {
  /* The bottom HTML is supplied by the WordPress page with slug "top".
     If the two banner columns have a flex parent, stack them on phones. */
  body.home.hooja-responsive-preview #main .section[style*="1020px"] :has(> #top_lbanner) {
    display: block !important;
    width: 100% !important;
    max-width: 100%;
    min-width: 0;
    height: auto !important;
    overflow: visible;
  }

  body.home.hooja-responsive-preview #main #top_lbanner,
  body.home.hooja-responsive-preview #main #top_rbanner {
    display: block !important;
    float: none !important;
    clear: both;
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    height: auto !important;
    margin: 0 0 12px !important;
    padding: 0;
    text-align: center;
  }

  /* Make individual banners readable and easy to tap. */
  body.home.hooja-responsive-preview #main #top_lbanner a,
  body.home.hooja-responsive-preview #main #top_rbanner a {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 10px;
    padding: 0;
  }
  body.home.hooja-responsive-preview #main #top_lbanner img,
  body.home.hooja-responsive-preview #main #top_rbanner img {
    display: block;
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border: 1px solid #ccc;
  }

  /* Extra three-banner row, if it is present in the saved page body. */
  body.home.hooja-responsive-preview #main #bnr3a {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 0 16px;
    text-align: center;
  }
  body.home.hooja-responsive-preview #main #bnr3a a {
    display: block;
    min-width: 0;
  }
  body.home.hooja-responsive-preview #main #bnr3a img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 !important;
  }

  /* Association/logo and other links at the very bottom. */
  body.home.hooja-responsive-preview #main #top_linkarea {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto !important;
    min-height: 0;
    padding: 12px 8px;
    margin: 14px 0 0;
    overflow: visible;
  }
  body.home.hooja-responsive-preview #main #top_linkarea img {
    display: block;
    float: none !important;
    width: auto;
    max-width: 100%;
    height: auto !important;
    margin: 0;
  }
  body.home.hooja-responsive-preview #main #top_linkarea a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    min-width: 0;
  }

  /* Footer's page-top button has a desktop-only -66px negative top margin. */
  body.home.hooja-responsive-preview #footer #pageTop {
    display: block;
    float: none;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 14px auto;
  }
  body.home.hooja-responsive-preview #footer #pageTop img {
    display: block;
    float: none;
    max-width: 100%;
    height: auto;
    margin: 0;
  }
}


/* =====================================================================
 * Phase 6 (admin preview only): compact SNS links in the shared footer.
 * Keep original desktop footer and WPtouch rendering unchanged.
 * ===================================================================== */
@media screen and (max-width: 767px) {
  body.hooja-responsive-preview #footer #site-info {
    float: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  body.hooja-responsive-preview #footer #f_text {
    width: auto;
    max-width: 100%;
    margin: 10px 0 0;
  }
  body.hooja-responsive-preview #footer #f_icon {
    display: grid;
    grid-template-columns: repeat(4, 48px);
    justify-content: center;
    justify-items: center;
    align-items: center;
    column-gap: 12px;
    row-gap: 10px;
    width: 100%;
    max-width: 100%;
    margin: 18px 0 14px;
    padding: 0;
  }
  body.hooja-responsive-preview #footer #f_icon a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    line-height: 1;
  }
  body.hooja-responsive-preview #footer #f_icon a img,
  body.hooja-responsive-preview #footer #f_icon a:last-child img {
    display: block;
    float: none !important;
    width: 44px !important;
    height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    object-fit: contain;
    margin: 0 !important;
    padding: 0;
  }
}