@charset "utf-8";

/* 首頁門市位置：所有樣式限定於 .store-location，避免影響原網站 */
.store-location,
.store-location * {
  box-sizing: border-box;
}

.store-location {
  --store-red: #d93629;
  --store-ink: #47221b;
  --store-card: rgba(255, 255, 255, .95);
  --store-shadow: 0 10px 28px rgba(100, 66, 48, .13);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  min-height: 900px;
  margin: 0;
  padding: 145px 20px 115px;
  color: var(--store-ink);
  font-family: "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
  background: #eef9ff url("../upload/store-location/store-location-bg.png") center / cover no-repeat;
}

.store-location::before,
.store-location::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -160px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  filter: blur(9px);
  background: rgba(158, 193, 99, .12);
}

.store-location::before { left: -190px; }
.store-location::after { right: -190px; }

.store-location__inner {
  position: relative;
  display: block;
  width: min(1260px, 100%);
  margin: 0 auto;
  padding: 0;
}

.store-location__side-note {
  position: absolute;
  top: 34px;
  z-index: 1;
  margin: 0;
  color: #8d3027;
  font-family: "DFKai-SB", "BiauKai", "Microsoft JhengHei", cursive;
  font-size: 21px;
  font-style: italic;
  letter-spacing: .08em;
  line-height: 1.45;
  transform: rotate(-7deg);
}

.store-location__side-note::after {
  content: "";
  display: block;
  width: 255px;
  height: 1px;
  margin-top: 8px;
  background: #a9493d;
}

.store-location__side-note--left { left: -54px; }
.store-location__side-note--right {
  right: 25px;
  text-align: center;
  transform: rotate(-8deg);
}
.store-location__side-note--right::after { display: none; }

.store-location__header {
  margin: 0 0 24px;
  text-align: center;
}

.store-location__eyebrow {
  margin: 0 0 3px;
  color: #a55a43;
  font-family: Georgia, serif;
  font-size: 17px;
  letter-spacing: .34em;
}

.store-location__pin {
  display: block;
  width: 31px;
  height: 31px;
  margin: 0 auto -3px;
  color: var(--store-red);
}

.store-location__title {
  margin: 0;
  color: #692719;
  font-family: "Noto Serif TC", "Microsoft JhengHei", serif;
  font-size: clamp(42px, 4vw, 60px);
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.12;
}

.store-location__subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin: 9px 0 0;
  color: #7b4437;
  font-size: 17px;
  letter-spacing: .12em;
}

.store-location__subtitle::before,
.store-location__subtitle::after {
  content: "";
  width: 65px;
  height: 1px;
  background: #a2695b;
}

.store-location__grid {
  display: grid;
  grid-template-columns: .95fr 1.12fr .95fr;
  gap: 15px;
  align-items: stretch;
}

.store-card {
  min-width: 0;
  margin: 0;
  padding: 16px 20px 0;
  overflow: hidden;
  border: 1px solid rgba(110, 77, 59, .10);
  border-radius: 18px;
  background: var(--store-card);
  box-shadow: var(--store-shadow);
  backdrop-filter: blur(6px);
}

.store-card__heading {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 9px;
}

.store-card__icon {
  display: grid;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #f65f46, #cf241e);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
}

.store-card--bus .store-card__icon { color: #67301f; background: #f5cabc; }
.store-card--mrt .store-card__icon { color: #3e562a; background: #cadcad; }
.store-card__icon svg { width: 30px; height: 30px; fill: currentColor; }

.store-card__title {
  margin: 0;
  color: #54221c;
  font-size: 25px;
  font-weight: 800;
  line-height: 1.05;
}

.store-card__en {
  display: block;
  margin-top: 5px;
  color: #b98d82;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
}

.store-card__text {
  min-height: 82px;
  margin: 0;
  color: #342726;
  font-size: 16px;
  line-height: 1.65;
}

.drive-visual {
  position: relative;
  min-height: 150px;
  margin: 0 -20px;
  background: #d8eef7 url("../upload/store-location/driving-scene.png") center 58% / cover no-repeat;
}

.drive-visual > span {
  position: absolute;
  top: 8px;
  left: 50%;
  width: max-content;
  min-width: 142px;
  padding: 5px 16px;
  transform: translateX(-50%);
  border: 3px solid #fff;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  background: #188971;
  box-shadow: 0 4px 10px rgba(0,0,0,.14);
}

.drive-visual > span small { font-size: 15px; }

.bus-list {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.bus-list li {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  line-height: 1.35;
}

.bus-list__no {
  padding: 3px 7px;
  border-radius: 999px;
  color: #fff;
  text-align: center;
  background: #e95649;
}

.bus-list__stop { color: #5c4b47; white-space: nowrap; }

.bus-note {
  margin: 12px -8px 10px;
  padding: 11px;
  border-radius: 13px;
  color: #4a2c27;
  text-align: center;
  font-size: 16px;
  background: #fff0ed;
}
.bus-note__icon { color: #d52e26; }
.bus-note strong { color: #d52e26; font-size: 20px; }

.mrt-route {
  position: relative;
  min-height: 110px;
  margin-top: 9px;
  padding: 13px 148px 13px 13px;
  border-radius: 13px;
  background: linear-gradient(100deg, #e6f6ff, #f5fbff);
}

.mrt-route--green { background: linear-gradient(100deg, #e9f8ed, #f6fcf8); }

.mrt-route__title {
  display: block;
  margin-bottom: 7px;
  color: #087cb7;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.3;
}
.mrt-route--green .mrt-route__title { color: #198246; }

.mrt-route__text {
  display: block;
  color: #3e3937;
  font-size: 13px;
  line-height: 1.55;
}

.mrt-route__train {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 30px;
  width: 118px;
  height: auto;
  transform: translateY(-50%);
  object-fit: contain;
  filter: drop-shadow(0 5px 5px rgba(43, 64, 75, .22));
  pointer-events: none;
}

.mrt-route__badge {
  position: absolute;
  z-index: 1;
  right: 7px;
  top: 50%;
  display: grid;
  width: 45px;
  height: 45px;
  transform: translateY(-50%);
  place-items: center;
  border: 4px solid #fff;
  border-radius: 50%;
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  background: #087cb7;
  box-shadow: 0 3px 9px rgba(0,0,0,.13);
}
.mrt-route--green .mrt-route__badge { background: #198246; }

.store-address {
  display: grid;
  grid-template-columns: auto minmax(290px, 1fr) auto auto;
  align-items: center;
  gap: 22px;
  margin-top: 14px;
  padding: 14px 18px;
  border: 1px solid rgba(110, 77, 59, .10);
  border-radius: 18px;
  background: rgba(255,255,255,.95);
  box-shadow: var(--store-shadow);
}

.store-address__label {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-right: 22px;
  border-right: 1px solid #aa7c72;
  color: #54221c;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.1;
}
.store-address__label svg { width: 38px; height: 38px; fill: var(--store-red); }
.store-address__label small {
  display: block;
  margin-top: 4px;
  color: #b78b82;
  font-size: 11px;
  letter-spacing: .12em;
}

.store-address__value {
  color: #54221c;
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 800;
}

.store-address__map {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 10px 22px;
  border-radius: 999px;
  color: #fff !important;
  font-size: 16px;
  font-weight: 800;
  text-decoration: none !important;
  white-space: nowrap;
  background: linear-gradient(135deg, #ef4d39, #d82420);
  box-shadow: 0 8px 18px rgba(216, 36, 32, .25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.store-address__map:hover,
.store-address__map:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 11px 22px rgba(216, 36, 32, .33);
}

.store-address__wish {
  min-width: 230px;
  color: #984137;
  font-family: "DFKai-SB", "BiauKai", "Microsoft JhengHei", cursive;
  font-size: 15px;
  font-style: italic;
  letter-spacing: .06em;
  text-align: center;
  transform: rotate(-5deg);
}
.store-address__wish::after {
  content: "";
  display: block;
  width: 205px;
  height: 1px;
  margin: 7px auto 0;
  background: #a9493d;
}

@media (max-width: 1199.98px) {
  .store-location { min-height: 0; padding: 100px 20px 95px; }
  .store-location__side-note { display: none; }
  .store-address { grid-template-columns: auto 1fr auto; }
  .store-address__wish { display: none; }
}

@media (max-width: 991.98px) {
  .store-location__grid { grid-template-columns: 1fr 1fr; }
  .store-card--mrt { grid-column: 1 / -1; padding-bottom: 18px; }
  .store-address { grid-template-columns: auto 1fr; }
  .store-address__map { grid-column: 1 / -1; width: 100%; }
}

@media (max-width: 767.98px) {
  .store-location { padding: 60px 14px 70px; background-position: center bottom; }
  .store-location__grid { grid-template-columns: 1fr; }
  .store-card--mrt { grid-column: auto; }
  .store-card { padding-left: 16px; padding-right: 16px; }
  .drive-visual { margin-left: -16px; margin-right: -16px; }
  .store-address { grid-template-columns: 1fr; gap: 13px; }
  .store-address__label { padding-right: 0; border-right: 0; }
  .store-address__map { grid-column: auto; }
  .store-location__subtitle { gap: 10px; font-size: 14px; }
  .store-location__subtitle::before,
  .store-location__subtitle::after { width: 28px; }
  .bus-list li { grid-template-columns: 58px minmax(0, 1fr); }
  .bus-list__stop { grid-column: 2; }
  .mrt-route { padding-right: 112px; }
  .mrt-route__train { right: 25px; width: 86px; }
}

@media (max-width: 420px) {
  .store-location__title { font-size: 38px; }
  .store-card__title { font-size: 22px; }
  .mrt-route { padding-right: 86px; }
  .mrt-route__train { width: 65px; right: 22px; }
  .mrt-route__badge { width: 38px; height: 38px; font-size: 14px; }
}