/* =========================================================
   MEGA-MENU.CSS — RUSTIC PARCHMENT STYLE
   Siivottu versio
   ========================================================= */


/* =========================================================
   1. MEGA MENU WRAPPERS
   ========================================================= */

.products-mega,
.guide-mega,
.journal-mega {
  position: fixed;
  top: calc(var(--banner-top) + var(--banner-height) + 12px);
  left: var(--banner-visual-side-gap);
  right: var(--banner-visual-side-gap);
  z-index: 99999;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-8px);

  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    visibility 0.22s ease;
}

.products-mega.is-open,
.guide-mega.is-open,
.journal-mega.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.products-mega-inner,
.guide-mega-inner,
.journal-mega-inner,
.info-mega-inner {
  width: min(1280px, 100%);
  max-width: 1280px;
  margin-inline: auto;
  padding: 20px;
  overflow: visible;

  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;

  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}


/* =========================================================
   2. MEGA MENU GRIDS
   ========================================================= */

.products-mega-grid.services-mega-grid,
.products-mega-grid.services-mega-grid--three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: center;
  align-items: stretch;
  gap: 18px;

  max-width: 1280px;
  margin-inline: auto;
}

.products-mega-grid.services-mega-grid--two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: center;
  align-items: stretch;
  gap: 18px;

  max-width: 860px;
  margin-inline: auto;
}


/* =========================================================
   3. BASE MEGA CARDS — PARCHMENT
   ========================================================= */

.service-mega-card,
.journal-mega-card {
  position: relative;

  display: flex;
  flex-direction: column;

  width: 100%;
  height: 200px;
  min-height: 200px;
  max-height: 200px;

  padding: 17px 18px 15px;
  overflow: hidden;

  border: 1px solid rgba(120, 78, 34, 0.72);
  border-radius: 19px;

  color: #20160d;
  font: inherit;
  text-align: center;
  text-decoration: none;

  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, 0.34), transparent 28%),
    radial-gradient(circle at 82% 80%, rgba(96, 61, 26, 0.12), transparent 35%),
    linear-gradient(180deg, #eadcc3 0%, #e2d0b3 48%, #cdb78f 100%);

  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.48),
    0 2px 0 rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 0 0 1px rgba(255, 246, 220, 0.20),
    inset 0 -20px 38px rgba(84, 52, 20, 0.11);

  cursor: pointer;
  appearance: none;

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    filter 0.18s ease;
}

.service-mega-card::before,
.journal-mega-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 0;

  border: 1px solid rgba(126, 91, 42, 0.36);
  border-radius: 14px;

  background:
    linear-gradient(
      135deg,
      rgba(82, 58, 28, 0.13) 0%,
      transparent 16%,
      transparent 84%,
      rgba(82, 58, 28, 0.11) 100%
    ),
    repeating-linear-gradient(
      0deg,
      rgba(72, 48, 21, 0.035) 0px,
      rgba(72, 48, 21, 0.035) 1px,
      transparent 1px,
      transparent 7px
    );

  pointer-events: none;
}

.service-mega-card::after,
.journal-mega-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  background:
    radial-gradient(circle at 2% 5%, rgba(69, 42, 17, 0.20), transparent 15%),
    radial-gradient(circle at 98% 8%, rgba(69, 42, 17, 0.16), transparent 16%),
    radial-gradient(circle at 0% 98%, rgba(69, 42, 17, 0.18), transparent 16%),
    radial-gradient(circle at 100% 100%, rgba(69, 42, 17, 0.18), transparent 16%);

  opacity: 0.75;
  pointer-events: none;
}


/* =========================================================
   4. NORMAL CARD IMAGE AREA
   ========================================================= */

.service-mega-card:not(#info-mega-guide) .service-mega-image-wrap,
.journal-mega-card .journal-mega-image-wrap {
  position: relative;
  z-index: 2;

  flex: 1 1 auto;

  display: block;
  width: min(78%, 260px);
  min-height: 0;
  margin: 0 auto 10px;
  overflow: hidden;

  border: 1px solid rgba(69, 43, 18, 0.46);
  border-radius: 7px;

  background:
    linear-gradient(180deg, rgba(10, 8, 6, 0.92), rgba(25, 16, 9, 0.86));

  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.service-mega-card:not(#info-mega-guide) .service-mega-image,
.journal-mega-card .journal-mega-image {
  position: absolute;
  top: 50%;
  left: 50%;

  display: block;

  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;

  margin: 0;
  padding: 0;

  border-radius: 6px;

  object-fit: cover;
  object-position: center center;

  transform: translate(-50%, -50%);

  filter:
    brightness(0.88)
    contrast(1.08)
    saturate(0.88)
    sepia(0.10);
}

.service-mega-image-contain {
  object-fit: contain;
  padding: 0;
  background: transparent;
}


/* =========================================================
   5. IMAGE ADJUSTMENTS
   ========================================================= */

#products-mega .service-mega-card:not(#info-mega-guide) .service-mega-image,
#journal-mega .service-mega-card .service-mega-image,
#info-mega-history .service-mega-image {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
}

#mega-open-tours .service-mega-image {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;

  object-fit: cover !important;
  object-position: center 15% !important;

  transform: translate(-50%, -50%) scale(1.06) !important;
}

#mega-open-tours .service-mega-image-wrap {
  border-radius: 7px !important;
  background:
    linear-gradient(180deg, rgba(10, 8, 6, 0.92), rgba(25, 16, 9, 0.86)) !important;
}

#info-mega-history .service-mega-image {
  object-fit: cover;
}


/* =========================================================
   6. NORMAL CARD TEXT
   ========================================================= */

.service-mega-card:not(#info-mega-guide) .service-mega-content,
.journal-mega-card .journal-mega-content {
  position: relative;
  z-index: 3;

  flex: 0 0 auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 48px;

  margin: 0;
  padding: 4px 8px 0;

  text-align: center;
  overflow: visible;
}

.service-mega-card:not(#info-mega-guide) .service-mega-content::after,
.journal-mega-card .journal-mega-content::after {
  content: "";
  display: block;

  width: 44px;
  height: 1px;
  margin-top: 7px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(176, 119, 28, 0.92),
      transparent
    );
}

.service-mega-card:not(#info-mega-guide) .service-mega-content h3,
.journal-mega-card .journal-mega-content h3 {
  margin: 0;

  color: #21160c;
  font-family: var(--font-vollkorn);
  font-size: clamp(1.05rem, 1.16vw, 1.28rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.055em;
  text-align: center;
  text-transform: none;

  text-shadow:
    0 1px 0 rgba(255, 245, 221, 0.70),
    0 2px 8px rgba(92, 54, 20, 0.12);
}

.service-mega-card:not(#info-mega-guide) .service-mega-content p,
.journal-mega-card .journal-mega-content p {
  display: none;
}


/* =========================================================
   7. DECORATIVE CARD ORNAMENTS
   ========================================================= */

#mega-open-tours::before {
  background:
    linear-gradient(
      135deg,
      rgba(82, 58, 28, 0.13) 0%,
      transparent 16%,
      transparent 84%,
      rgba(82, 58, 28, 0.11) 100%
    ),
    radial-gradient(ellipse at 10% 64%, rgba(74, 57, 30, 0.16), transparent 18%),
    repeating-linear-gradient(
      0deg,
      rgba(72, 48, 21, 0.035) 0px,
      rgba(72, 48, 21, 0.035) 1px,
      transparent 1px,
      transparent 7px
    );
}

#products-mega .service-mega-card:nth-child(2)::before,
#journal-mega .service-mega-card:nth-child(2)::before {
  background:
    linear-gradient(
      135deg,
      transparent 0%,
      transparent 70%,
      rgba(82, 58, 28, 0.13) 100%
    ),
    radial-gradient(ellipse at 84% 16%, rgba(74, 57, 30, 0.13), transparent 20%),
    repeating-linear-gradient(
      0deg,
      rgba(72, 48, 21, 0.035) 0px,
      rgba(72, 48, 21, 0.035) 1px,
      transparent 1px,
      transparent 7px
    );
}

#products-mega .service-mega-card:nth-child(3)::before,
#info-mega-history::before {
  background:
    linear-gradient(
      135deg,
      rgba(82, 58, 28, 0.10) 0%,
      transparent 22%,
      transparent 74%,
      rgba(82, 58, 28, 0.18) 100%
    ),
    radial-gradient(ellipse at 90% 66%, rgba(74, 57, 30, 0.18), transparent 22%),
    repeating-linear-gradient(
      0deg,
      rgba(72, 48, 21, 0.035) 0px,
      rgba(72, 48, 21, 0.035) 1px,
      transparent 1px,
      transparent 7px
    );
}


/* =========================================================
   8. WIP / COMING SOON BADGE
   ========================================================= */

.service-mega-card-wip .service-mega-image-wrap::before {
  content: "Work in progress";

  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;

  padding: 8px 18px;

  border: 2px solid rgba(176, 119, 28, 0.92);
  border-radius: 999px;

  color: #2b1b0d;
  background: rgba(236, 218, 184, 0.88);

  font-family: var(--font-inter);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;

  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.36),
    0 0 18px rgba(250, 186, 0, 0.10);

  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-18deg);
}

.service-mega-card-wip .service-mega-image {
  filter:
    brightness(0.62)
    saturate(0.75);
}

.service-mega-image-wrap--coming-soon {
  position: relative;
}

.coming-soon-badge {
  position: absolute;
  inset: 0;
  z-index: 6;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(5, 8, 12, 0.48);
  color: #fff7df;

  font-family: var(--font-cinzel, serif);
  font-size: clamp(1.1rem, 2.4vw, 2rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
  pointer-events: none;
}


/* =========================================================
   9. DESKTOP CARD LAYOUT OVERRIDES
   ========================================================= */

@media (min-width: 901px) {
  :root {
    --mega-image-top: 15px;
    --mega-image-side: 15px;
    --mega-image-height: 138px;
    --mega-text-bottom: 9px;
  }

  .service-mega-card:not(#info-mega-guide) .service-mega-image-wrap,
  .journal-mega-card .journal-mega-image-wrap {
    position: absolute !important;

    top: var(--mega-image-top) !important;
    left: var(--mega-image-side) !important;
    right: var(--mega-image-side) !important;

    width: auto !important;
    height: var(--mega-image-height) !important;
    min-height: var(--mega-image-height) !important;
    max-height: var(--mega-image-height) !important;

    margin: 0 !important;
  }

  .service-mega-card:not(#info-mega-guide) .service-mega-image,
  .journal-mega-card .journal-mega-image {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;

    object-fit: cover !important;
  }

  .service-mega-card:not(#info-mega-guide) .service-mega-content,
  .journal-mega-card .journal-mega-content,
  #info-mega-history .info-mega-content {
    position: absolute !important;

    left: 12px !important;
    right: 12px !important;
    bottom: var(--mega-text-bottom) !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 28px !important;
    min-height: 28px !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: center !important;
  }

  .service-mega-card:not(#info-mega-guide) .service-mega-content::before,
  .service-mega-card:not(#info-mega-guide) .service-mega-content::after,
  .journal-mega-card .journal-mega-content::before,
  .journal-mega-card .journal-mega-content::after,
  #info-mega-history .info-mega-content::before,
  #info-mega-history .info-mega-content::after {
    display: none !important;
    content: none !important;
  }
}


/* =========================================================
   10. HOVER — HILLITTY HARMAA, EI LIIKETTÄ
   ========================================================= */

@media (min-width: 901px) {
  .service-mega-card:hover,
  .service-mega-card:focus-visible,
  .journal-mega-card:hover,
  .journal-mega-card:focus-visible,
  #info-mega-history:hover,
  #info-mega-history:focus-visible {
    transform: none !important;

    background: #9f927c !important;
    border-color: rgba(62, 50, 35, 0.95) !important;

    box-shadow:
      0 16px 34px rgba(0, 0, 0, 0.54),
      0 0 0 1px rgba(255, 235, 190, 0.18),
      0 0 22px rgba(68, 55, 38, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.26),
      inset 0 -16px 30px rgba(44, 34, 22, 0.18) !important;
  }

  .service-mega-card:hover .service-mega-content h3,
  .service-mega-card:focus-visible .service-mega-content h3,
  .journal-mega-card:hover .journal-mega-content h3,
  .journal-mega-card:focus-visible .journal-mega-content h3,
  #info-mega-history:hover .info-mega-content h3,
  #info-mega-history:focus-visible .info-mega-content h3 {
    color: #140d06 !important;
    text-shadow:
      0 1px 0 rgba(230, 220, 200, 0.45),
      0 2px 5px rgba(45, 32, 18, 0.24) !important;
  }

  .service-mega-card:hover .service-mega-image-wrap,
  .service-mega-card:focus-visible .service-mega-image-wrap,
  .journal-mega-card:hover .journal-mega-image-wrap,
  .journal-mega-card:focus-visible .journal-mega-image-wrap,
  #info-mega-history:hover .service-mega-image-wrap,
  #info-mega-history:focus-visible .service-mega-image-wrap {
    border-color: rgba(48, 36, 22, 0.88) !important;
    box-shadow:
      0 8px 18px rgba(0, 0, 0, 0.42),
      0 0 0 1px rgba(255, 245, 220, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  }

  .service-mega-card:hover .service-mega-image,
  .service-mega-card:focus-visible .service-mega-image,
  .journal-mega-card:hover .journal-mega-image,
  .journal-mega-card:focus-visible .journal-mega-image,
  #info-mega-history:hover .service-mega-image,
  #info-mega-history:focus-visible .service-mega-image {
    filter:
      brightness(0.93)
      contrast(1.12)
      saturate(0.82)
      sepia(0.06) !important;
  }
}


/* =========================================================
   11. INFO MEGA — GRID, KORTIT JA REUNALOGOT
   ========================================================= */

@media (min-width: 901px) {
  #info-mega .info-mega-inner {
    position: relative !important;

    display: grid !important;
    grid-template-columns:
      minmax(120px, 1fr)
      minmax(0, 421px)
      minmax(0, 421px)
      minmax(120px, 1fr) !important;

    column-gap: 18px !important;
    align-items: start !important;

    width: min(1280px, 100%) !important;
    max-width: 1280px !important;
    margin-inline: auto !important;
    padding: 20px !important;
    overflow: visible !important;
  }

  #info-mega .info-mega-grid {
    grid-column: 2 / 4 !important;
    grid-row: 1 !important;

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;

    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  #info-mega .info-mega-card,
  #info-mega-guide,
  #info-mega-history {
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
  }

  .info-floating-korpiretket-logo,
  .info-floating-oulanka-logo {
    position: static !important;
    z-index: 50 !important;

    display: block !important;
    width: 118px !important;
    height: auto !important;

    align-self: start !important;
    justify-self: center !important;

    margin-top: 42px !important;

    opacity: 0.98 !important;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45)) !important;
    transform: none !important;
  }

  .info-floating-korpiretket-logo {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .info-floating-oulanka-logo {
    grid-column: 4 !important;
    grid-row: 1 !important;
  }

  .info-floating-korpiretket-logo img,
  .info-floating-oulanka-logo img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  .info-floating-oulanka-logo img {
    transform: scaleY(1.15) !important;
    transform-origin: center center !important;
  }
}

@media (max-width: 1100px) and (min-width: 901px) {
  #info-mega .info-mega-inner {
    grid-template-columns:
      minmax(90px, 1fr)
      minmax(0, 421px)
      minmax(0, 421px)
      minmax(90px, 1fr) !important;
  }

  .info-floating-korpiretket-logo,
  .info-floating-oulanka-logo {
    width: 92px !important;
    margin-top: 46px !important;
  }
}

@media (max-width: 900px) {
  .info-floating-korpiretket-logo,
  .info-floating-oulanka-logo {
    display: none !important;
  }
}


/* =========================================================
   12. INFO MEGA — OPASKORTTI
   ========================================================= */

@media (min-width: 901px) {
  #info-mega-guide {
    display: flex !important;
    flex-direction: column !important;
    padding: 17px 18px 15px !important;
    overflow: hidden !important;
  }

  /* Poistaa opaskortin yleisen kulma-overlayn */
  #info-mega-guide::after {
    background: none !important;
  }

  #info-mega-guide .service-mega-image-wrap {
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    right: 15px !important;

    display: grid !important;
    grid-template-columns: 170px minmax(0, 1fr) !important;
    column-gap: 16px !important;
    align-items: center !important;

    height: 155px !important;
    min-height: 138px !important;
    max-height: 155px !important;

    margin: 0 !important;
    padding: 0 18px 0 10px !important;
    box-sizing: border-box !important;

    overflow: hidden !important;

    border: none !important;
    border-radius: 7px !important;

    background: transparent !important;
    background-image: none !important;

    box-shadow: none !important;
  }

  #info-mega-guide .service-mega-image-wrap::before {
    display: none !important;
    content: none !important;
  }

  #info-mega-guide .service-mega-image-wrap::after {
    content: "" !important;
    position: absolute !important;
    left: 10px !important;
    bottom: 8px !important;
    z-index: 5 !important;

    width: 165px !important;
    height: 28px !important;

    border: none !important;
    border-radius: 999px !important;

    background: rgba(226, 208, 179, 0.72) !important;
    box-shadow: none !important;
    filter: blur(5px) !important;

    pointer-events: none !important;
  }

  #info-mega-guide .info-guide-photo {
    position: relative !important;
    z-index: 4 !important;

    display: block !important;

    width: 165px !important;
    height: 150px !important;
    max-width: 165px !important;
    max-height: 150px !important;

    justify-self: center !important;
    align-self: end !important;

    border-radius: 0 !important;

    object-fit: contain !important;
    object-position: center bottom !important;

    transform: none !important;

    -webkit-mask-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) 72%,
      rgba(0, 0, 0, 0.92) 80%,
      rgba(0, 0, 0, 0.55) 94%,
      rgba(0, 0, 0, 0) 100%
    );
    mask-image: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 1) 0%,
      rgba(0, 0, 0, 1) 72%,
      rgba(0, 0, 0, 0.92) 80%,
      rgba(0, 0, 0, 0.55) 94%,
      rgba(0, 0, 0, 0) 100%
    );
  }

  #info-mega-guide .info-guide-korpiretket-logo {
    display: none !important;
  }

  #info-mega-guide .info-guide-mini {
    position: relative !important;
    z-index: 20 !important;

    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    text-align: left !important;
  }

  #info-mega-guide .info-guide-mini > span:not(.info-guide-readmore) {
    display: none !important;
  }

  #info-mega-guide .info-guide-mini strong {
    display: block !important;
    margin: 0 0 8px !important;

    color: #2a1b10 !important;
    font-family: var(--font-cormorant) !important;
    font-size: 1.92rem !important;
    font-weight: 700 !important;
    line-height: 0.95 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
  }

  #info-mega-guide .info-guide-mini strong::after {
    content: "" !important;
    display: block !important;

    width: 150px !important;
    height: 1px !important;
    margin: 8px 0 0 !important;

    background:
      linear-gradient(
        90deg,
        rgba(144, 92, 24, 0.85),
        rgba(144, 92, 24, 0.25),
        transparent
      ) !important;
  }

  #info-mega-guide .info-guide-mini ul {
    display: grid !important;
    list-style: none !important;
    row-gap: 4px !important;

    margin: 0 0 9px !important;
    padding: 0 !important;
  }

  #info-mega-guide .info-guide-mini li {
    display: grid !important;
    grid-template-columns: 17px minmax(0, 1fr) !important;
    column-gap: 7px !important;
    align-items: center !important;

    color: #342316 !important;
    font-family: var(--font-dimension) !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
  }

  #info-mega-guide .info-guide-mini li span:last-child {
    display: block !important;
    min-width: 0 !important;
    overflow: hidden !important;

    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #info-mega-guide .info-guide-icon {
    display: block !important;

    width: 17px !important;
    min-width: 17px !important;

    color: #9a6518 !important;
    font-size: 0.78rem !important;
    text-align: center !important;
  }

  #info-mega-guide .info-guide-readmore {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: fit-content !important;
    min-height: 24px !important;

    margin-top: 1px !important;
    padding: 4px 13px 5px !important;

    border: 1px solid rgba(126, 91, 42, 0.58) !important;
    border-radius: 999px !important;

    color: #25170b !important;
    background:
      linear-gradient(
        180deg,
        rgba(245, 231, 198, 0.92),
        rgba(199, 167, 103, 0.72)
      ) !important;

    font-family: var(--font-raleway) !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    letter-spacing: 0.11em !important;
    text-transform: uppercase !important;

    box-shadow:
      0 4px 9px rgba(0, 0, 0, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;

    text-shadow: 0 1px 0 rgba(255, 245, 221, 0.65) !important;
  }

  #info-mega-guide:hover .info-guide-readmore,
  #info-mega-guide:focus-visible .info-guide-readmore {
    color: #140d06 !important;
    border-color: rgba(92, 58, 18, 0.72) !important;
    background:
      linear-gradient(
        180deg,
        rgba(250, 235, 200, 0.98),
        rgba(176, 119, 28, 0.82)
      ) !important;
  }

  #info-mega-guide .service-mega-content {
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 9px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 28px !important;
    min-height: 28px !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  #info-mega-guide .service-mega-content::before,
  #info-mega-guide .service-mega-content::after {
    display: none !important;
    content: none !important;
  }

  #info-mega-guide .service-mega-content h3 {
    margin: 0 !important;

    color: #21160c !important;
    font-family: var(--font-vollkorn) !important;
    font-size: clamp(1.05rem, 1.16vw, 1.28rem) !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    letter-spacing: 0.055em !important;
    text-align: center !important;

    text-shadow:
      0 1px 0 rgba(255, 245, 221, 0.70),
      0 2px 8px rgba(92, 54, 20, 0.12) !important;
  }
}


/* =========================================================
   13. INFO MEGA — HISTORIA-KORTTI
   ========================================================= */

@media (min-width: 901px) {
  #info-mega-history .service-mega-image-wrap {
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    right: 15px !important;

    width: auto !important;
    height: 138px !important;
    min-height: 138px !important;
    max-height: 138px !important;

    margin: 0 !important;
  }

  #info-mega-history .service-mega-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  #info-mega-history .info-mega-content {
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 9px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    height: 28px !important;
    min-height: 28px !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  #info-mega-history .info-mega-content::before,
  #info-mega-history .info-mega-content::after {
    display: none !important;
    content: none !important;
  }
}


/* =========================================================
   14. MOBILE GUIDE LINK
   ========================================================= */

@media (max-width: 900px) {
  #mobile-guide-link .mobile-guide-text em {
    display: none !important;
  }

  #mobile-guide-link .mobile-guide-text strong {
    color: #f4ead8 !important;
    font-family: var(--font-vollkorn) !important;
    font-size: 1.28rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.055em !important;
  }
}
#info-mega-guide .service-mega-image-wrap::after {
  display: none !important;
  content: none !important;
}