@charset "UTF-8";
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Base reset & helpers */
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Noto Sans TC', Helvetica, Arial, sans-serif, serif;
}

img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  /* height: 100%; */
  min-height: 1px;
  display: none;
}

[dir="rtl"] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license

Copyright (c) 2013 Daniel Eden

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

@-webkit-keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  60% {
    -webkit-transform: translateY(-15px);
    transform: translateY(-15px);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
}

@-webkit-keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}

@keyframes flash {
  0%, 50%, 100% {
    opacity: 1;
  }
  25%, 75% {
    opacity: 0;
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes pulse {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
}

@keyframes shake {
  0%, 100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
  }
  40% {
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
  }
  60% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
  }
  80% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  -webkit-animation-name: swing;
  animation-name: swing;
}

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

@keyframes tada {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  10%, 20% {
    -webkit-transform: scale(0.9) rotate(-3deg);
    transform: scale(0.9) rotate(-3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale(1.1) rotate(3deg);
    transform: scale(1.1) rotate(3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale(1.1) rotate(-3deg);
    transform: scale(1.1) rotate(-3deg);
  }
  100% {
    -webkit-transform: scale(1) rotate(0);
    transform: scale(1) rotate(0);
  }
}

.tada {
  -webkit-animation-name: tada;
  animation-name: tada;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
  }
  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
  }
  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}

@keyframes wobble {
  0% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  15% {
    -webkit-transform: translateX(-25%) rotate(-5deg);
    transform: translateX(-25%) rotate(-5deg);
  }
  30% {
    -webkit-transform: translateX(20%) rotate(3deg);
    transform: translateX(20%) rotate(3deg);
  }
  45% {
    -webkit-transform: translateX(-15%) rotate(-3deg);
    transform: translateX(-15%) rotate(-3deg);
  }
  60% {
    -webkit-transform: translateX(10%) rotate(2deg);
    transform: translateX(10%) rotate(2deg);
  }
  75% {
    -webkit-transform: translateX(-5%) rotate(-1deg);
    transform: translateX(-5%) rotate(-1deg);
  }
  100% {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  70% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
  }
  70% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(30px);
    transform: translateY(30px);
  }
  80% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.bounceInDown {
  -webkit-animation-name: bounceInDown;
  animation-name: bounceInDown;
}

@-webkit-keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
  80% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bounceInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(30px);
    transform: translateX(30px);
  }
  80% {
    -webkit-transform: translateX(-10px);
    transform: translateX(-10px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.bounceInLeft {
  -webkit-animation-name: bounceInLeft;
  animation-name: bounceInLeft;
}

@-webkit-keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }
  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes bounceInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(-30px);
    transform: translateX(-30px);
  }
  80% {
    -webkit-transform: translateX(10px);
    transform: translateX(10px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.bounceInRight {
  -webkit-animation-name: bounceInRight;
  animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  80% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes bounceInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(-30px);
    transform: translateY(-30px);
  }
  80% {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.bounceInUp {
  -webkit-animation-name: bounceInUp;
  animation-name: bounceInUp;
}

@-webkit-keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  25% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }
}

@keyframes bounceOut {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  25% {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0.3);
    transform: scale(0.3);
  }
}

.bounceOut {
  -webkit-animation-name: bounceOut;
  animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

@keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

@-webkit-keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes bounceOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
}

@-webkit-keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes bounceOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

.bounceOutRight {
  -webkit-animation-name: bounceOutRight;
  animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  20% {
    opacity: 1;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  animation-name: bounceOutUp;
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig;
}

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}

@keyframes fadeOutDown {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
}

.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

@keyframes fadeOutDownBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig;
}

@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}

@keyframes fadeOutLeft {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }
}

.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft;
}

@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes fadeOutLeftBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig;
}

@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
}

@keyframes fadeOutRight {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
}

.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight;
}

@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes fadeOutRightBig {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes fadeOutUpBig {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

@keyframes flip {
  0% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  40% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  50% {
    -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  80% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(0.95);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-animation-name: flip;
  animation-name: flip;
}

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }
  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateX(-10deg);
    transform: perspective(400px) rotateX(-10deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotateX(10deg);
    transform: perspective(400px) rotateX(10deg);
  }
  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
}

.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
}

@-webkit-keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }
  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

@keyframes flipInY {
  0% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
  40% {
    -webkit-transform: perspective(400px) rotateY(-10deg);
    transform: perspective(400px) rotateY(-10deg);
  }
  70% {
    -webkit-transform: perspective(400px) rotateY(10deg);
    transform: perspective(400px) rotateY(10deg);
  }
  100% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
}

.flipInY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInY;
  animation-name: flipInY;
}

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

@keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    transform: perspective(400px) rotateX(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    transform: perspective(400px) rotateX(90deg);
    opacity: 0;
  }
}

.flipOutX {
  -webkit-animation-name: flipOutX;
  animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

@keyframes flipOutY {
  0% {
    -webkit-transform: perspective(400px) rotateY(0deg);
    transform: perspective(400px) rotateY(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: perspective(400px) rotateY(90deg);
    transform: perspective(400px) rotateY(90deg);
    opacity: 0;
  }
}

.flipOutY {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipOutY;
  animation-name: flipOutY;
}

@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}

@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}

.lightSpeedIn {
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}

@keyframes lightSpeedOut {
  0% {
    -webkit-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(100%) skewX(-30deg);
    transform: translateX(100%) skewX(-30deg);
    opacity: 0;
  }
}

.lightSpeedOut {
  -webkit-animation-name: lightSpeedOut;
  animation-name: lightSpeedOut;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateIn {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(-200deg);
    transform: rotate(-200deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateIn {
  -webkit-animation-name: rotateIn;
  animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInDownLeft {
  -webkit-animation-name: rotateInDownLeft;
  animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInDownRight {
  -webkit-animation-name: rotateInDownRight;
  animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInUpLeft {
  -webkit-animation-name: rotateInUpLeft;
  animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

@keyframes rotateInUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
}

.rotateInUpRight {
  -webkit-animation-name: rotateInUpRight;
  animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}

@keyframes rotateOut {
  0% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(200deg);
    transform: rotate(200deg);
    opacity: 0;
  }
}

.rotateOut {
  -webkit-animation-name: rotateOut;
  animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

.rotateOutDownLeft {
  -webkit-animation-name: rotateOutDownLeft;
  animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

@keyframes rotateOutDownRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

.rotateOutDownRight {
  -webkit-animation-name: rotateOutDownRight;
  animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpLeft {
  0% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    opacity: 0;
  }
}

.rotateOutUpLeft {
  -webkit-animation-name: rotateOutUpLeft;
  animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

@keyframes rotateOutUpRight {
  0% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(0);
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
  }
}

.rotateOutUpRight {
  -webkit-animation-name: rotateOutUpRight;
  animation-name: rotateOutUpRight;
}

@-webkit-keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes slideInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
}

@-webkit-keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}

@-webkit-keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}

@-webkit-keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

@keyframes slideOutLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(-2000px);
    transform: translateX(-2000px);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}

@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

@keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(2000px);
    transform: translateX(2000px);
  }
}

.slideOutRight {
  -webkit-animation-name: slideOutRight;
  animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

@keyframes slideOutUp {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-2000px);
    transform: translateY(-2000px);
  }
}

.slideOutUp {
  -webkit-animation-name: slideOutUp;
  animation-name: slideOutUp;
}

@-webkit-keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  100% {
    -webkit-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0;
  }
}

@keyframes hinge {
  0% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  20%, 60% {
    -webkit-transform: rotate(80deg);
    transform: rotate(80deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  40% {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  80% {
    -webkit-transform: rotate(60deg) translateY(0);
    transform: rotate(60deg) translateY(0);
    opacity: 1;
    -webkit-transform-origin: top left;
    transform-origin: top left;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  100% {
    -webkit-transform: translateY(700px);
    transform: translateY(700px);
    opacity: 0;
  }
}

.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}

@keyframes rollIn {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%) rotate(-120deg);
    transform: translateX(-100%) rotate(-120deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
}

.rollIn {
  -webkit-animation-name: rollIn;
  animation-name: rollIn;
}

/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
@-webkit-keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg);
  }
}

@keyframes rollOut {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0px) rotate(0deg);
    transform: translateX(0px) rotate(0deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(100%) rotate(120deg);
    transform: translateX(100%) rotate(120deg);
  }
}

.rollOut {
  -webkit-animation-name: rollOut;
  animation-name: rollOut;
}

/*
* 提示訊息
* alert message
*/
.alert_message {
  text-align: center;
  padding: 0.625em;
  color: #212529;
}

.alert_message.modal {
  z-index: 1099;
}

.alert_message.modal.warning .modal-header {
  color: #f27474;
}

.alert_message.modal.warning .modal-header .icon {
  border-color: #f27474;
}

.alert_message.modal.warning .modal-body p {
  word-break: break-all;
}

.alert_message.modal .modal-dialog {
  width: 32rem;
  max-width: 80%;
  margin: 0 auto;
}

.alert_message.modal .modal-content {
  border-radius: 0.8rem;
  -webkit-box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.7);
          box-shadow: 2px 2px 10px 0 rgba(0, 0, 0, 0.7);
}

.alert_message.modal .modal-header {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-bottom: none;
  padding: 1.5rem 1.875rem 0 1.875rem;
}

.alert_message.modal .modal-header .icon {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0.125rem 0.125rem 0 0;
  border: 0.125rem solid transparent;
  border-radius: 50%;
  border-color: #000;
  font-family: inherit;
  cursor: default;
  font-style: normal;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.alert_message.modal .modal-header .icon .icon_content {
  font-size: 1.25rem;
}

.alert_message.modal .modal-header h4 {
  margin: 0;
  font-size: 1.875rem;
  font-weight: 600;
  letter-spacing: 0.2rem;
  text-indent: 0.2rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.alert_message.modal .modal-body {
  padding: 1.125rem 1.8rem 0 1.8rem;
  line-height: 1.5;
}

.alert_message.modal .modal-body p {
  font-size: 1.125rem;
  font-weight: 400;
  margin: 0;
  overflow-wrap: break-word;
}

.alert_message.modal .modal-footer {
  padding: 1.25rem 0 1.25rem 0;
  border: none;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.alert_message.modal .modal-footer button {
  width: auto;
  color: #fff;
  font-size: 1rem;
  border-radius: 0.25rem;
  margin: 0 0.5rem;
  padding: 0.5rem 0.75rem;
  line-height: 1.25;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  border: 1px solid transparent;
  cursor: pointer;
  -webkit-transition: border-color 0.15s ease-in-out background-color 0.15s ease-in-out;
  transition: border-color 0.15s ease-in-out background-color 0.15s ease-in-out;
}

.alert_message.modal .modal-footer .btn_cancel {
  background-color: #6e7881;
}

.alert_message.modal .modal-footer .btn_cancel:hover {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0.1)));
  background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
}

.alert_message.modal .modal-footer .btn_enter {
  background-color: #28a745;
  border-color: #28a745;
}

.alert_message.modal .modal-footer .btn_enter:hover {
  background-color: #218838;
  border-color: #1e7e34;
}

/*
* 通知樣式
*
*/
.notify_container {
  position: fixed;
  top: 20px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  z-index: 1200;
  -webkit-transition: all 0.5s ease-in-out 0s;
  transition: all 0.5s ease-in-out 0s;
}

.notify_container .close {
  color: #000;
  outline: 0;
}

.notify_container .alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.notify_container .alert-warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
}

/* 前台 notify 補充樣式（後台有 Bootstrap 不需要） */
.notify_container {
  max-width: 360px;
  width: calc(100% - 40px);
  right: auto;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.notify_container .alert {
  position: relative;
  padding: 12px 40px 12px 16px;
  margin-bottom: 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.notify_container .close {
  position: absolute;
  top: 8px;
  right: 12px;
  padding: 0;
  background: none;
  border: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.5;
}

.notify_container .close:hover {
  opacity: 0.8;
}

/*
* 彈跳視窗
* 有用 bootstrap 就不需要載入這隻檔案
*/
.mr-1,
.mx-1 {
  margin-right: 0.25rem !important;
}

.modal-open {
  overflow: hidden;
}

.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 0.5rem;
  pointer-events: none;
}

.modal.fade .modal-dialog {
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  -webkit-transform: translate(0, -50px);
          transform: translate(0, -50px);
}

@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    -webkit-transition: none;
    transition: none;
  }
}

.modal.show .modal-dialog {
  -webkit-transform: none;
          transform: none;
}

.modal.modal-static .modal-dialog {
  -webkit-transform: scale(1.02);
          transform: scale(1.02);
}

.modal-dialog-scrollable {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-height: calc(100% - 1rem);
}

.modal-dialog-scrollable .modal-content {
  max-height: calc(100vh - 1rem);
  overflow: hidden;
}

.modal-dialog-scrollable .modal-header,
.modal-dialog-scrollable .modal-footer {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

.modal-dialog-centered {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: calc(100% - 1rem);
}

.modal-dialog-centered::before {
  display: block;
  height: calc(100vh - 1rem);
  height: -webkit-min-content;
  height: -moz-min-content;
  height: min-content;
  content: "";
}

.modal-dialog-centered.modal-dialog-scrollable {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
}

.modal-dialog-centered.modal-dialog-scrollable .modal-content {
  max-height: none;
}

.modal-dialog-centered.modal-dialog-scrollable::before {
  content: none;
}

.modal-content {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
  outline: 0;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: #000;
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop.show {
  opacity: 0.5;
}

.modal-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 1rem 1rem;
  border-bottom: 1px solid #dee2e6;
  border-top-left-radius: calc(0.3rem - 1px);
  border-top-right-radius: calc(0.3rem - 1px);
}

.modal-header .close {
  padding: 1rem 1rem;
  margin: -1rem -1rem -1rem auto;
}

.modal-title {
  margin-bottom: 0;
  line-height: 1.5;
}

.modal-body {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  padding: 1rem;
}

.modal-footer {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding: 0.75rem;
  border-top: 1px solid #dee2e6;
  border-bottom-right-radius: calc(0.3rem - 1px);
  border-bottom-left-radius: calc(0.3rem - 1px);
}

.modal-footer > * {
  margin: 0.25rem;
}

.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

@media (min-width: 576px) {
  .modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
  }
  .modal-dialog-scrollable {
    max-height: calc(100% - 3.5rem);
  }
  .modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - 3.5rem);
  }
  .modal-dialog-centered {
    min-height: calc(100% - 3.5rem);
  }
  .modal-dialog-centered::before {
    height: calc(100vh - 3.5rem);
    height: -webkit-min-content;
    height: -moz-min-content;
    height: min-content;
  }
  .modal-sm {
    max-width: 300px;
  }
}

@media (min-width: 992px) {
  .modal-lg,
  .modal-xl {
    max-width: 800px;
  }
}

@media (min-width: 1200px) {
  .modal-xl {
    max-width: 1140px;
  }
}

/*
* Spinners 頁面的加載狀態
* 有用 bootstrap 就不需要載入這隻檔案
*/
.text-light {
  color: #f8f9fa;
}

@-webkit-keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

.spinner-border {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  border: 0.25em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: .75s linear infinite spinner-border;
          animation: .75s linear infinite spinner-border;
}

.spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 0.2em;
}

@-webkit-keyframes spinner-grow {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  50% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes spinner-grow {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  50% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.spinner-grow {
  display: inline-block;
  width: 2rem;
  height: 2rem;
  vertical-align: text-bottom;
  background-color: currentColor;
  border-radius: 50%;
  opacity: 0;
  -webkit-animation: .75s linear infinite spinner-grow;
          animation: .75s linear infinite spinner-grow;
}

.spinner-grow-sm {
  width: 1rem;
  height: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .spinner-border,
  .spinner-grow {
    -webkit-animation-duration: 1.5s;
            animation-duration: 1.5s;
  }
}

/*
* 共用 css
*
*/
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.hide_input {
  position: fixed;
  top: 50%;
  left: -9999px;
}

.daterangepicker.single.ltr .ranges {
  display: block !important;
}

.slick-dots > li:only-child {
  display: none;
}

/*
* 遮罩
*/
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  outline: 0;
  background-color: #1e1e1e;
  background-color: rgba(0, 0, 0, 0.5);
}

.overlay .overlay_inner {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

/*
* loading
*/
.loading_overlay.overlay {
  z-index: 1080;
}

/*
* popup 彈窗
*/
.popup_container.modal {
  z-index: 1056;
}

@media (min-width: 576px) and (max-width: 991px) {
  .popup_container.modal .modal-lg, .popup_container.modal .modal-xl {
    max-width: 90%;
  }
}

@media (max-width: 575px) {
  .popup_container.modal .modal-dialog {
    margin: 0;
    max-height: none;
  }
}

.popup_overlay.overlay {
  z-index: 1056;
}

.popup_scrollbar_measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

/* common.css */
:root {
  /* Luxury Refined Colors - Medical Aesthetics Soft Tone */
  --color-bg-primary: #fcfbf8;
  /* Soft Cream */
  --color-bg-secondary: #f6f3ed;
  /* Warm Light Beige */
  --color-bg-dark: #ece5db;
  /* Muted Taupe/Warm Grey */
  --color-text-primary: #1d1b19;
  /* Deepest Warm Graphite, almost black */
  --color-text-secondary: #383431;
  /* Deep Warm Charcoal */
  --color-text-light: #f6f3ed;
  /* For contrast when needed */
  --color-text-placeholder: #aaa;
  /* Form placeholder */
  --color-accent: #c49a80;
  /* Soft Dusty Rose / Champagne Gold */
  --color-white: #ffffff;
  --color-border: rgba(196, 154, 128, 0.2);
  /* Tinted Border */
  /* Typography Hierarchy */
  --font-family-tc: "Noto Serif TC", serif;
  /* Display */
  --font-family-en: "Gilda Display", serif;
  /* Display EN */
  --font-family-sans: "Inter", sans-serif;
  /* Body */
  --font-size-h1: 3.8rem;
  --font-size-h2: 2.5rem;
  --font-size-h3: 1.6rem;
  --font-size-h4: 1.25rem;
  --font-size-body: 1.05rem;
  --font-size-sm: 0.9rem;
  /* Spacing */
  --spacing-sm: 1.5rem;
  --spacing-md: 3rem;
  --spacing-lg: 5rem;
  --spacing-section: 9rem;
  /* Layout */
  --container-max-width: 1400px;
  /* Utilities */
  --transition-normal: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  --transition-slow: all 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  /* ===== Shop Flow — Global Tokens (safe, non-conflicting) ===== */
  /* Brand */
  --color-primary: #c49a80;
  --color-primary-rgb: 196, 154, 128;
  --color-primary-dark: #9f7a61;
  --color-primary-light: #e7d2c0;
  --color-secondary: #7d5c46;
  /* Extended palette — used by shop_common.css */
  --color-seaweed: #7d5c46;
  /* 企業色加深版，shop hero 背景、active 色 */
  --color-carbon: #1d1b19;
  /* 深暖炭黑，done 步驟文字 */
  --color-ivory: #f5f0e8;
  /* 溫潤象牙白，done 步驟背景 */
  --color-cider-pear: #c49a80;
  /* 企業色（玫瑰金），done 步驟邊框、分隔線 */
  /* Status */
  --color-success: #6b8f6b;
  --color-warning: #c9a24a;
  --color-danger: #b4564b;
  --color-info: #7a8fa4;
  /* Text aliases */
  --color-text-white: #ffffff;
  --color-text-disabled: #c2bdb8;
  /* Backgrounds */
  --color-bg-white: #ffffff;
  --color-bg-light: #fcfbf8;
  --color-bg-soft: #f6f3ed;
  --color-bg-overlay: rgba(29, 27, 25, 0.45);
  /* Borders */
  --color-border-strong: rgba(29, 27, 25, 0.16);
  --color-border-active: var(--color-primary);
  /* Radius — medical style prefers sharp corners */
  --radius-xs: 1px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 9999px;
  --radius-circle: 50%;
  /* Font aliases (point to medical fonts) */
  --font-family-base: var(--font-family-sans);
  --font-family-heading: var(--font-family-tc);
  /* Shop-only font sizes (not used by medical) */
  --font-size-xs: 0.75rem;
  --font-size-lg: 1.15rem;
  --font-size-h5: 1.15rem;
  /* Shop-only spacing tokens (not used by medical) */
  --spacing-xxs: 4px;
  --spacing-xs: 8px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(29, 27, 25, 0.04);
  --shadow-md: 0 4px 12px rgba(29, 27, 25, 0.08);
  --shadow-lg: 0 8px 24px rgba(29, 27, 25, 0.12);
  --shadow-overlay: -4px 0 20px rgba(29, 27, 25, 0.1);
  /* Transitions */
  --transition-fast: 0.15s ease;
  /* Z-index */
  --z-header: 1000;
  --z-dropdown: 1010;
  --z-cart-overlay: 1100;
  --z-cart-sidebar: 1101;
  --z-modal-overlay: 1200;
  --z-modal: 1201;
  --z-toast: 1300;
  /* Layout */
  --header-height: 92px;
  --content-max-width: var(--container-max-width);
}

/* ===== Shop Flow — Scoped Overrides (only on shop pages) ===== */
/* These override medical values (rem-based) with shop-expected px values
   for task-oriented pages. Scope prevents bleed onto medical pages. */
body[class$="_page"] {
  /* Spacing (medical uses 1.5rem/3rem/5rem; shop expects 12/16/24 px) */
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  /* Task-page font sizes (tighter than medical display) */
  --font-size-body: 0.95rem;
  --font-size-sm: 0.85rem;
  --font-size-h4: 1.3rem;
  --font-size-h3: 1.5rem;
  --font-size-h2: 1.8rem;
  --font-size-h1: 2.2rem;
  /* Text helper tint (medical light tone is #f6f3ed for contrast-use;
     shop uses it as "muted text"; override for readability) */
  --color-text-light: #8a837d;
  /* Shop pages sit on light bg regardless of host site theme */
  background-color: var(--color-bg-light);
}

/* Keep shop page headings crisp (medical global h1-h4 use Serif 300 weight;
   on forms/order pages, use heading font at normal weight) */
body[class$="_page"] h1,
body[class$="_page"] h2,
body[class$="_page"] h3,
body[class$="_page"] h4 {
  letter-spacing: 0.02em;
  line-height: 1.4;
}

body {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: var(--font-family-sans);
  line-height: 1.8;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.is-menu-locked {
  overflow: hidden;
  -ms-touch-action: none;
      touch-action: none;
}

/* Base Typography */
h1,
h2,
h3,
h4 {
  font-family: var(--font-family-tc);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0.08em;
}

p {
  font-size: var(--font-size-body);
  color: var(--color-text-secondary);
  font-weight: 300;
  letter-spacing: 0.03em;
}

/* Links */
a {
  text-decoration: none;
  color: inherit;
  -webkit-transition: var(--transition-normal);
  transition: var(--transition-normal);
}

@media (hover: hover) {
  a:hover {
    color: var(--color-accent);
  }
}

.for_m {
  display: none !important;
}

@media (max-width: 768px) {
  .for_pc {
    display: none !important;
  }
  .for_m {
    display: block !important;
  }
}

/* Common Layout */
.container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 5%;
}

section {
  position: relative;
  padding: var(--spacing-section) 0;
}

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

.bg-alt {
  background-color: var(--color-bg-secondary);
}

.bg-dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-primary);
}

.bg-dark p {
  color: var(--color-text-secondary);
}

.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4 {
  color: var(--color-text-primary);
}

/* Buttons */
.btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 1rem 3rem;
  font-family: var(--font-family-tc);
  letter-spacing: 0.2em;
  font-size: 0.95rem;
  cursor: pointer;
  -webkit-transition: var(--transition-normal);
  transition: var(--transition-normal);
  border: 1px solid transparent;
  text-decoration: none;
}

.btn-primary {
  background-color: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 2px;
}

.btn-pill {
  border-radius: 50px;
}

@media (hover: hover) {
  .btn-primary:hover {
    background-color: var(--color-accent);
    color: var(--color-white);
  }
}

.btn-outline {
  border-bottom: 1px solid var(--color-text-primary);
  padding: 0 0 0.5rem 0;
  color: var(--color-text-primary);
  letter-spacing: 0.1em;
}

@media (hover: hover) {
  .btn-outline:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
  }
}

/* Section Header Shared */
.section_header {
  margin-bottom: var(--spacing-lg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.section_header.text-center {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.section_title {
  font-size: var(--font-size-h2);
  margin-bottom: 2rem;
  color: var(--color-text-primary);
  position: relative;
}

.section_subtitle {
  font-family: var(--font-family-en);
  font-size: 0.85rem;
  color: var(--color-accent);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  display: block;
}

.section_intro {
  max-width: 800px;
  font-size: 1.15rem;
  line-height: 2;
}

/* Animations */
.js-animate {
  opacity: 0;
  visibility: hidden;
  /* Prevent interaction until visible */
}

/* Floating Widgets */
.floating_widgets {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  z-index: 999;
}

.btn_back_to_top {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-text-primary);
  border: none;
  color: var(--color-white);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
  -webkit-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  -webkit-transition: var(--transition-normal);
  transition: var(--transition-normal);
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
}

.btn_back_to_top.is-visible {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.btn_back_to_top:hover {
  background-color: #aaa8a5;
  color: var(--color-white);
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
}

.btn_back_to_top svg {
  width: 20px;
  height: 20px;
}

.fab_container {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.fab_menu {
  position: absolute;
  bottom: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.8rem;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(20px);
          transform: translateY(20px);
  -webkit-transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
}

.fab_container.is-active .fab_menu {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  pointer-events: auto;
}

.fab_item {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--color-text-primary);
  color: var(--color-white);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  -webkit-transition: var(--transition-normal);
  transition: var(--transition-normal);
  text-decoration: none;
  border: none;
}

.fab_item svg {
  width: 20px;
  height: 20px;
}

.fab_item:hover {
  background-color: #aaa8a5;
  color: var(--color-white);
  -webkit-transform: translateY(-3px);
          transform: translateY(-3px);
}

@-webkit-keyframes fab-pulse {
  0% {
    -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 0 0 0 rgba(196, 154, 128, 0.3);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 0 0 0 rgba(196, 154, 128, 0.3);
  }
  70% {
    -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 0 0 12px rgba(196, 154, 128, 0);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 0 0 12px rgba(196, 154, 128, 0);
  }
  100% {
    -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 0 0 0 rgba(196, 154, 128, 0);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 0 0 0 rgba(196, 154, 128, 0);
  }
}

@keyframes fab-pulse {
  0% {
    -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 0 0 0 rgba(196, 154, 128, 0.3);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 0 0 0 rgba(196, 154, 128, 0.3);
  }
  70% {
    -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 0 0 12px rgba(196, 154, 128, 0);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 0 0 12px rgba(196, 154, 128, 0);
  }
  100% {
    -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 0 0 0 rgba(196, 154, 128, 0);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 0 0 0 rgba(196, 154, 128, 0);
  }
}

.fab_toggle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-accent);
  color: var(--color-white);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
  -webkit-box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  border: none;
  -webkit-transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  -webkit-animation: fab-pulse 2.5s ease-out infinite;
          animation: fab-pulse 2.5s ease-out infinite;
}

.fab_toggle:hover {
  -webkit-transform: scale(1.08);
          transform: scale(1.08);
  -webkit-animation: none;
          animation: none;
}

.fab_toggle svg {
  position: absolute;
  width: 22px;
  height: 22px;
  -webkit-transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.fab_toggle .icon-times {
  opacity: 0;
  -webkit-transform: rotate(-90deg) scale(0.5);
          transform: rotate(-90deg) scale(0.5);
}

/* fab stays pink when active */
.fab_container.is-active .icon-comment {
  opacity: 0;
  -webkit-transform: rotate(90deg) scale(0.5);
          transform: rotate(90deg) scale(0.5);
}

.fab_container.is-active .icon-times {
  opacity: 1;
  -webkit-transform: rotate(0) scale(1);
          transform: rotate(0) scale(1);
}

/* ========================================================================= */
/* 標題樣式一 (Title Style 1) */
/* 粉色英文副標 + 深灰中文大標 + 淺灰說明文字 */
/* 使用方法：
   <div class="title-style-1">
     <span class="title-sub">English Sub</span>
     <h2 class="title-main">中文大標</h2>
     <p class="title-desc">說明文字</p>
   </div>
*/
/* ========================================================================= */
.title-style-1 {
  margin-bottom: 3rem;
  position: relative;
  z-index: 10;
}

/* 粉色英文副標（與 .section_subtitle 相同的視覺效果） */
.title-style-1 .title-sub {
  font-family: var(--font-family-en);
  font-size: 0.85rem;
  color: var(--color-accent);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  display: block;
}

/* 深灰中文大標（與 .section_title 相同的視覺效果） */
.title-style-1 .title-main {
  font-family: var(--font-family-tc);
  font-size: var(--font-size-h2);
  font-weight: 300;
  line-height: 1.3;
  letter-spacing: 0.08em;
  margin-bottom: 2rem;
  color: var(--color-text-primary);
}

/* 淺灰說明文字（與 .section_intro 相同的視覺效果） */
.title-style-1 .title-desc {
  max-width: 800px;
  font-size: 1.15rem;
  line-height: 2;
  color: var(--color-text-secondary);
  font-weight: 300;
  /* margin-left: inherit;
  margin-right: inherit;
  margin-bottom: 0; */
  margin: 0 auto;
}

/* 文本截斷 Utilities */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ========================================================================= */
/* 按鈕樣式一 (Button Style 1) */
/* 圓角膠囊按鈕：左側實心圓 Icon + 右側大寫英文文字 */
/* Hover 效果：深色背景從左延伸填滿整顆按鈕，文字變白 */
/* 使用方法：
   <a href="#" class="btn-style-1">
     <span class="btn-style-1-circle">
       <svg class="icon-explore-btn" ...> (箭頭 SVG) </svg>
     </span>
     <span class="btn-style-1-text">TEXT</span>
   </a>
*/
/* ========================================================================= */
.btn-style-1 {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 56px;
  padding: 0 32px 0 6px;
  border: 1px solid var(--color-text-primary);
  border-radius: 50px;
  color: var(--color-text-primary);
  overflow: hidden;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  text-decoration: none;
  -ms-flex-item-align: start;
      align-self: flex-start;
  margin-top: 2rem;
}

/* 按鈕的滑動背景層，預設為圓形 */
.btn-style-1::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 44px;
  height: 44px;
  background-color: var(--color-text-primary);
  border-radius: 50px;
  -webkit-transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 0;
}

/* 懸停時背景層展開填滿整個按鈕 */
@media (hover: hover) {
  .btn-style-1:hover::before {
    width: calc(100% - 10px);
  }
}

/* 左側圓形 Icon 的容器 */
.btn-style-1-circle {
  position: relative;
  width: 44px;
  height: 44px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 1;
  color: var(--color-bg-primary);
}

/* Icon 本身定位 */
.btn-style-1 .icon-explore-btn {
  position: absolute;
}

/* 箭頭群組位移動畫 */
.btn-style-1 .arrow-group {
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  transition: -webkit-transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

/* 箭頭後方的水平線，預設隱藏 */
.btn-style-1 .btn-line {
  stroke-dasharray: 7;
  stroke-dashoffset: 7;
  opacity: 0;
  -webkit-transition: stroke-dashoffset 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.1s 0.3s;
  transition: stroke-dashoffset 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.1s 0.3s;
}

@media (hover: hover) {
  /* 懸停時箭頭向右移動 */
  .btn-style-1:hover .arrow-group {
    -webkit-transform: translateX(4px);
            transform: translateX(4px);
  }
  /* 懸停時畫出後方的水平線 */
  .btn-style-1:hover .btn-line {
    stroke-dashoffset: 0;
    opacity: 1;
    -webkit-transition: stroke-dashoffset 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.1s 0s;
    transition: stroke-dashoffset 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.1s 0s;
  }
  /* 懸停時文字變白色 */
  .btn-style-1:hover .btn-style-1-text {
    color: var(--color-bg-primary);
  }
}

/* 按鈕文字 */
.btn-style-1-text {
  position: relative;
  z-index: 1;
  margin-left: 1.2rem;
  font-size: 0.85rem;
  font-family: var(--font-family-sans);
  letter-spacing: 0.2em;
  font-weight: 500;
  -webkit-transition: color 0.4s ease;
  transition: color 0.4s ease;
  text-transform: uppercase;
}

/* ========================================================================= */
/* NEXT 按鈕樣式 (.next) */
/* ========================================================================= */
.btn-style-1.next {
  padding: 0 6px 0 32px;
}

.btn-style-1.next::before {
  left: auto;
  right: 5px;
}

.btn-style-1.next .btn-style-1-text {
  margin-left: 0;
  margin-right: 1.2rem;
}

@media (hover: hover) {
  /* 懸停時箭頭向右移動 */
  .btn-style-1.next:hover .arrow-group {
    -webkit-transform: translateX(4px);
            transform: translateX(4px);
  }
}

/* ========================================================================= */
/* 共用內頁 Hero 區塊與按鈕 (Shared Inner Page Hero Section & Explore Button) */
/* ========================================================================= */
.btn-explore {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 56px;
  padding: 0 32px 0 6px;
  border: 1px solid var(--color-text-primary);
  border-radius: 50px;
  color: var(--color-text-primary);
  overflow: hidden;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
  text-decoration: none;
  -ms-flex-item-align: start;
      align-self: flex-start;
}

.btn-explore::before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 44px;
  height: 44px;
  background-color: var(--color-text-primary);
  border-radius: 50px;
  -webkit-transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 0;
}

@media (hover: hover) {
  .btn-explore:hover::before {
    width: calc(100% - 10px);
  }
}

.btn-explore-circle {
  position: relative;
  width: 44px;
  height: 44px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  z-index: 1;
  color: var(--color-bg-primary);
}

.icon-explore-btn {
  position: absolute;
}

.btn-explore .arrow-group {
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  transition: -webkit-transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

.btn-explore .btn-line {
  stroke-dasharray: 7;
  stroke-dashoffset: 7;
  opacity: 0;
  -webkit-transition: stroke-dashoffset 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.1s 0.3s;
  transition: stroke-dashoffset 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.1s 0.3s;
}

@media (hover: hover) {
  .btn-explore:hover .arrow-group {
    -webkit-transform: translateX(4px);
            transform: translateX(4px);
  }
  .btn-explore:hover .btn-line {
    stroke-dashoffset: 0;
    opacity: 1;
    -webkit-transition: stroke-dashoffset 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.1s 0s;
    transition: stroke-dashoffset 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.1s 0s;
  }
  .btn-explore:hover .btn-explore-text {
    color: var(--color-bg-primary);
  }
}

.btn-explore-text {
  position: relative;
  z-index: 1;
  margin-left: 1.2rem;
  font-size: 0.85rem;
  font-family: var(--font-family-sans);
  letter-spacing: 0.2em;
  font-weight: 500;
  -webkit-transition: color 0.4s ease;
  transition: color 0.4s ease;
  text-transform: uppercase;
}

.page-hero-section {
  position: relative;
  /* margin-top: 92px; Header height */
  margin-top: 92px;
  background-color: #ece5db;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 8rem 0;
  overflow-x: hidden;
}

.page-hero-container {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5rem;
  padding-right: 0;
}

.page-hero-gallery-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  gap: 0.8rem;
  /* 鎖住高度以達「縮短」需求，並加上 max-content 允許圖片無拘束往右排 */
  height: clamp(350px, 50vh, 480px);
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
}

.page-hero-portrait-wrap {
  position: relative;
  z-index: 1;
  /* 強制指定比例，高度已知，讓寬度自動推算 */
  aspect-ratio: 3 / 4;
  height: 100%;
  overflow: hidden;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

/* 設定右側第二張照片只出現寬度的 1/2 */
.page-hero-portrait-wrap:nth-child(2) {
  /* 固定高度的 0.75 為原寬度，再取一半 (0.375) */
  width: calc(clamp(350px, 50vh, 480px) * 0.375);
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc(clamp(350px, 50vh, 480px) * 0.375);
          flex: 0 0 calc(clamp(350px, 50vh, 480px) * 0.375);
  aspect-ratio: auto;
}

.page-hero-portrait {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
  display: block;
}

.page-hero-content {
  position: relative;
  z-index: 2;
  text-align: left;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

@media (max-width: 991px) {
  .page-hero-section {
    padding: 5rem 0;
  }
  .page-hero-container {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding-right: 5%;
  }
  .page-hero-gallery-wrap {
    width: 100%;
    height: auto;
    margin-right: 0;
    margin-left: -5%;
    width: 110%;
    /* Break out of padding */
  }
  .page-hero-portrait-wrap {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
    height: auto;
    aspect-ratio: 3/4;
    width: 100%;
  }
  .page-hero-portrait-wrap:nth-child(2) {
    display: none;
    /* Hide 2nd image on mobile */
    width: 100%;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
  }
}

/* ========================================================================= */
/* 動畫工具 (Animation Utilities) */
/* ========================================================================= */
/* 平滑捲動 */
html {
  scroll-behavior: smooth;
}

/* Fade Up 進場動畫 */
.fade-up {
  opacity: 0;
  -webkit-transform: translateY(40px);
          transform: translateY(40px);
  -webkit-transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1), transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.fade-up.is-visible {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

/* 動畫延遲工具類 */
.delay-100 {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}

.delay-200 {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

.delay-300 {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}

.delay-400 {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}

.delay-500 {
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}

/* 圖片遮罩顯現動畫 */
.img-reveal {
  position: relative;
  overflow: hidden;
}

.img-reveal::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-bg-primary);
  -webkit-transition: -webkit-transform 1.5s cubic-bezier(0.77, 0, 0.175, 1);
  transition: -webkit-transform 1.5s cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform 1.5s cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform 1.5s cubic-bezier(0.77, 0, 0.175, 1), -webkit-transform 1.5s cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transform-origin: top;
          transform-origin: top;
  z-index: 10;
}

.img-reveal.is-visible::after {
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
}

.img-reveal img {
  -webkit-transition: -webkit-transform 2s cubic-bezier(0.25, 1, 0.5, 1);
  transition: -webkit-transform 2s cubic-bezier(0.25, 1, 0.5, 1);
  transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1);
  transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 2s cubic-bezier(0.25, 1, 0.5, 1);
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

.img-reveal.is-visible img {
  -webkit-transform: scale(1);
          transform: scale(1);
}

/* ========================================================================= */
/* 共用工具類 (Shared Utilities) */
/* ========================================================================= */
/* 區塊底部 CTA 容器 */
.section_cta {
  margin-top: 4rem;
  text-align: center;
}

/* 繼承顏色連結（用於 footer 版權等） */
.link_inherit {
  color: inherit;
  text-decoration: none;
}

/* ========================================================================= */
/* 共用卡片樣式一 (Card Style 1) */
/* 適用於：Transformation Gallery 或其他圖文展示卡片 */
/* ========================================================================= */
.card-style-1 {
  background-color: var(--color-bg-secondary);
  border-radius: 0;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  text-decoration: none;
  color: inherit;
  -webkit-transition: -webkit-transform 0.4s ease, -webkit-box-shadow 0.4s ease;
  transition: -webkit-transform 0.4s ease, -webkit-box-shadow 0.4s ease;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  transition: transform 0.4s ease, box-shadow 0.4s ease, -webkit-transform 0.4s ease, -webkit-box-shadow 0.4s ease;
}

@media (hover: hover) {
  .card-style-1:hover {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
    -webkit-box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
  }
}

.card-style-1 .card-img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  width: 100%;
  border-radius: 0;
  background-color: var(--color-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.card-style-1 .card-img-wrap img:not([src$=".png"]):not([src$=".PNG"]):not(.logo-img) {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  transition: -webkit-transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* PNG 圖片自動縮小置中 1:1 */
.card-style-1 .card-img-wrap img[src$=".png"],
.card-style-1 .card-img-wrap img[src$=".PNG"] {
  width: 50%;
  height: auto;
  aspect-ratio: 1 / 1;
  -o-object-fit: contain;
     object-fit: contain;
  -webkit-transition: -webkit-transform 0.6s ease;
  transition: -webkit-transform 0.6s ease;
  transition: transform 0.6s ease;
  transition: transform 0.6s ease, -webkit-transform 0.6s ease;
}

/* 確保直式卡片圖片縮小後，背景也能正確填滿指定顏色 */
.card-style-1 .card-img-wrap:has(img[src$=".png"]),
.card-style-1 .card-img-wrap:has(img[src$=".PNG"]) {
  background-color: #ece5db;
}

@media (hover: hover) {
  .card-style-1:hover .card-img-wrap img:not([src$=".png"]):not([src$=".PNG"]):not(.logo-img) {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  .card-style-1:hover .card-img-wrap img[src$=".png"],
  .card-style-1:hover .card-img-wrap img[src$=".PNG"] {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}

/* 針對 Logo + 底色 的圖片區塊特殊處理 */
.card-style-1 .card-img-wrap.logo-bg-wrap {
  background-color: var(--color-primary);
  /* 使用品牌主色作為底色 */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.card-style-1 .card-img-wrap.logo-bg-wrap .logo-img {
  width: 50%;
  /* Logo 按比例縮小置中 */
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
  -webkit-transition: -webkit-transform 0.6s ease;
  transition: -webkit-transform 0.6s ease;
  transition: transform 0.6s ease;
  transition: transform 0.6s ease, -webkit-transform 0.6s ease;
}

@media (hover: hover) {
  .card-style-1:hover .card-img-wrap.logo-bg-wrap .logo-img {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
    /* Hover 時稍微放大 Logo */
  }
}

.card-style-1 .card-body {
  padding: 3rem;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-height: 19rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  border: 1px solid var(--color-border);
  border-top: none;
  background-color: #ffffff;
  /* Default to white bg */
}

.card-style-1 .card-title {
  font-family: var(--font-family-tc);
  font-size: 1.5rem;
  line-height: 1.4;
  margin-bottom: 1rem;
  font-weight: 500;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-style-1 .card-date {
  font-family: var(--font-family-en);
  font-size: 0.85rem;
  color: var(--color-accent);
  letter-spacing: 0.1em;
  margin-bottom: 0.8rem;
  display: block;
}

/* 如果 .card-date 是空的，或者根本沒有，不佔空間 */
.card-style-1 .card-date:empty {
  display: none;
}

.card-style-1 .card-desc {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  line-height: 1.8;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

@media (hover: hover) {
  .card-style-1:hover .card-title {
    color: var(--color-accent);
  }
}

@media (max-width: 991px) {
  .card-style-1 .card-body {
    min-height: 16.5rem;
  }
}

@media (max-width: 575px) {
  .card-style-1 .card-body {
    min-height: auto;
  }
}

/* ========================================================================= */
/* 共用卡片樣式二 (Card Style 2) */
/* 適用於：診所專欄的橫式卡片 (左圖右文或左文右圖) */
/* ========================================================================= */
.card-style-2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  text-decoration: none;
  color: var(--color-text-primary);
  -webkit-transition: var(--transition-normal);
  transition: var(--transition-normal);
  gap: 0;
  height: 320px;
  background-color: var(--color-bg-primary);
}

.card-style-2 .card-img-wrap {
  width: 45%;
  overflow: hidden;
  border-radius: 0 4px 4px 0;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  height: 100%;
  background-color: var(--color-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.card-style-2 .card-img-wrap img:not([src$=".png"]):not([src$=".PNG"]):not(.logo-img) {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  transition: -webkit-transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* PNG 圖片自動縮小置中 1:1 */
.card-style-2 .card-img-wrap img[src$=".png"],
.card-style-2 .card-img-wrap img[src$=".PNG"] {
  width: 50%;
  height: auto;
  aspect-ratio: 1 / 1;
  -o-object-fit: contain;
     object-fit: contain;
  -webkit-transition: -webkit-transform 0.6s ease;
  transition: -webkit-transform 0.6s ease;
  transition: transform 0.6s ease;
  transition: transform 0.6s ease, -webkit-transform 0.6s ease;
}

/* 確保橫式卡片圖片縮小後，背景也能正確填滿指定顏色 */
.card-style-2 .card-img-wrap:has(img[src$=".png"]),
.card-style-2 .card-img-wrap:has(img[src$=".PNG"]) {
  background-color: #ece5db;
}

/* 針對 Logo + 底色 的圖片區塊特殊處理 (卡片樣式二) */
.card-style-2 .card-img-wrap.logo-bg-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: var(--color-primary);
}

.card-style-2 .card-img-wrap.logo-bg-wrap .logo-img {
  width: 50%;
  /* 讓圖片縮小置中 */
  height: auto;
  aspect-ratio: 1 / 1;
  /* 強制維持 1:1 或使用 object-fit: contain 來等比縮放包含在內 */
  -o-object-fit: contain;
     object-fit: contain;
  -webkit-transition: -webkit-transform 0.6s ease;
  transition: -webkit-transform 0.6s ease;
  transition: transform 0.6s ease;
  transition: transform 0.6s ease, -webkit-transform 0.6s ease;
}

.card-style-2 .card-body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: 1px solid var(--color-border);
  border-right: none;
  padding: 3rem;
  border-radius: 4px 0 0 4px;
  background-color: #ffffff;
}

.card-style-2 .card-date {
  font-family: var(--font-family-en);
  font-size: 0.85rem;
  color: var(--color-accent);
  letter-spacing: 0.1em;
  margin-bottom: 0.8rem;
  display: block;
}

.card-style-2 .card-title {
  font-family: var(--font-family-tc);
  font-size: 1.5rem;
  line-height: 1.4;
  margin-bottom: 1rem;
  font-weight: 500;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-style-2 .card-desc {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  line-height: 1.8;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

@media (hover: hover) {
  .card-style-2:hover .card-img-wrap img:not([src$=".png"]):not([src$=".PNG"]):not(.logo-img) {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
  .card-style-2:hover .card-img-wrap img[src$=".png"],
  .card-style-2:hover .card-img-wrap img[src$=".PNG"] {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  .card-style-2:hover .card-title {
    color: var(--color-accent);
  }
  .card-style-2:hover .card-img-wrap.logo-bg-wrap .logo-img {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
}

/* RWD for card-style-2 on mobile */
@media (max-width: 991px) {
  .card-style-2 {
    gap: 2rem;
  }
  .card-style-2 .card-img-wrap {
    width: 40%;
  }
}

@media (max-width: 768px) {
  .card-style-2 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 1.5rem;
    height: auto;
  }
  .card-style-2 .card-body {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    border-radius: 0 0 4px 4px;
    border: 1px solid var(--color-border);
    border-top: none;
    padding: 2rem;
  }
  .card-style-2 .card-img-wrap {
    width: 100%;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    border-radius: 4px 4px 0 0;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

/* ========================================================================= */
/* 按鈕樣式二 (Button Style 2)                                               */
/* 預設：透明底色 + 香檳金描邊，Hover：實心香檳金底 + 白字                   */
/* 使用方法：                                                                 */
/*   <a href="#" class="btn-style-2">TEXT</a>                                */
/* ========================================================================= */
.btn-style-2 {
  /* 基本排版 */
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  /* 尺寸與外型 */
  height: 40px;
  padding: 0 1.8rem;
  border-radius: 50px;
  /* 顏色：預設透明描邊 */
  background-color: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  /* 字型 */
  font-family: var(--font-family-sans);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  /* 動畫過渡 */
  -webkit-transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
  transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

/* 懸停時：填色，改為實心香檳金底 + 白字 */
@media (hover: hover) {
  .btn-style-2:hover {
    background-color: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
  }
}

/* ========================================================================= */
/* 分頁樣式 (Pagination)                                                      */
/* ========================================================================= */
.pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0;
  margin-top: 8rem;
  padding-bottom: 2rem;
  list-style: none;
}

.pagination .page-item {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.pagination .page-link {
  position: relative;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: var(--font-family-en);
  text-decoration: none;
  -webkit-transition: opacity 0.35s ease, color 0.35s ease;
  transition: opacity 0.35s ease, color 0.35s ease;
  cursor: pointer;
}

/* 頁碼數字 */
.pagination .page-link.page-num {
  min-width: 2.5rem;
  height: 2.5rem;
  font-size: 1.05rem;
  letter-spacing: 0.2em;
  color: var(--color-text-secondary);
  opacity: 0.45;
}

.pagination .page-link.page-num:hover {
  opacity: 0.75;
  color: var(--color-text-primary);
}

.pagination .page-item.active .page-link.page-num {
  opacity: 1;
  color: var(--color-accent);
  pointer-events: none;
}

/* Prev / Next 箭頭 */
.pagination .page_arrow .page-link {
  height: 30px;
  padding: 0 1rem;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: 2rem;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.pagination .page_arrow .page-link:hover {
  color: var(--color-text-primary);
  border-color: var(--color-text-primary);
}

/* 首頁/末頁按鈕隱藏（只保留上下頁） */
.pagination .page_arrow .page-link.page-first,
.pagination .page_arrow .page-link.page-last {
  display: none;
}

/* RWD */
@media (max-width: 768px) {
  .pagination {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 3.5rem;
  }
}

/* assets/css/header.css */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 1rem 5%;
  background-color: var(--color-bg-primary);
  /* Add background to avoid clashing with hero */
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.header.is-scrolled {
  background-color: rgba(252, 251, 249, 0.95);
  /* matching --color-bg-primary */
  backdrop-filter: blur(15px);
  padding: 1rem 5%;
  border-bottom: 1px solid rgba(33, 32, 30, 0.05);
  /* matching --color-text-primary */
}

.header_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.header_actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1rem;
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
}

.btn-reserve {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  white-space: nowrap;
}

.header_nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2rem;
  /* Reduced from 3rem to fit more items */
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  margin-left: auto;
  margin-right: 2rem;
}

.header_link {
  font-size: 0.95rem;
  letter-spacing: 0.15em;
  display: inline-block;
  font-family: var(--font-family-tc);
  position: relative;
  padding: 6px 3px;
  color: var(--color-text-primary);
}

/* Dropdown Container */
.nav_item_has_children {
  position: relative;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* Dropdown Menu */
.header_dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background-color: var(--color-bg-primary);
  min-width: 160px;
  -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 1001;
}

/* Dropdown Item */
.header_dropdown_link {
  display: block;
  padding: 0.8rem 1.5rem;
  color: var(--color-text-primary);
  font-family: var(--font-family-tc);
  font-size: 0.9rem;
  text-decoration: none;
  letter-spacing: 0.1em;
  text-align: center;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.header_dropdown_link:hover {
  background-color: rgba(230, 222, 213, 0.3);
  /* subtle highlight */
  color: var(--color-accent);
}

/* Show Dropdown on Hover */
.nav_item_has_children:hover .header_dropdown {
  opacity: 1;
  visibility: visible;
}

.header_link span {
  display: block;
  -webkit-transition: opacity 0.4s ease, -webkit-transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  transition: opacity 0.4s ease, -webkit-transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease, -webkit-transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.header_link::before {
  content: attr(data-en);
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  font-family: var(--font-family-en);
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  color: var(--color-accent);
  -webkit-transition: top 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
  transition: top 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease;
  white-space: nowrap;
  opacity: 0;
  /* 配合移除了 overflow hidden，一開始加透明度隱藏 */
}

/* Hover：中文上移隱藏，英文滑入 */
.header_link:hover span {
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  opacity: 0;
}

.header_link:hover::before {
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 1;
}

/* Active：中文粉色常駐 + 底線，hover 時不做英文切換 */
.header_link.is-current {
  color: var(--color-accent);
}

.header_link.is-current span {
  color: var(--color-accent);
  display: inline-block;
  position: relative;
  -webkit-transform: none !important;
          transform: none !important;
  opacity: 1 !important;
}

.header_link.is-current span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.15em;
  /* 補償 letter-spacing 最後字後的空格 */
  bottom: -4px;
  height: 1.5px;
  background-color: var(--color-accent);
}

.header_link.is-current::before {
  display: none;
}

.header_link.is-current:hover span {
  -webkit-transform: none;
          transform: none;
  opacity: 1;
}

.header_logo a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.header_logo img {
  height: 60px;
  /* Increased from 48px to 60px (48 * 1.25) */
  width: auto;
}

.header_menu_toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 5px;
  cursor: pointer;
}

.header_menu_toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background-color: currentColor;
  -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transition: transform 0.3s ease, opacity 0.3s ease, -webkit-transform 0.3s ease;
}

.header_submenu_toggle {
  display: none;
}

.header.is-menu-open .header_menu_toggle span:nth-child(1) {
  -webkit-transform: translateY(6.5px) rotate(45deg);
          transform: translateY(6.5px) rotate(45deg);
}

.header.is-menu-open .header_menu_toggle span:nth-child(2) {
  opacity: 0;
}

.header.is-menu-open .header_menu_toggle span:nth-child(3) {
  -webkit-transform: translateY(-6.5px) rotate(-45deg);
          transform: translateY(-6.5px) rotate(-45deg);
}

.header .btn-primary {
  padding: 0.5rem 1.8rem;
  font-family: var(--font-family-sans);
  letter-spacing: 0.15em;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
}

.header .btn-primary span {
  font-family: var(--font-family-en);
  margin-left: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
}

/* ========================================================================= */
/* 手機版 Header / Mobile Header */
/* 套用全頁 header：漢堡選單、全螢幕覆蓋選單、收合子選單 */
/* ========================================================================= */
@media (max-width: 991px) {
  .header {
    position: fixed;
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    padding: 0.9rem 5%;
    z-index: 1003;
  }
  .header.is-scrolled {
    position: fixed;
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    padding: 0.9rem 5%;
    z-index: 1003;
  }
  .header_inner {
    width: 100%;
    max-width: 100%;
    position: relative;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 0.75rem;
    z-index: 1002;
  }
  .header_logo,
  .header_actions {
    position: relative;
    z-index: 1004;
  }
  .header_logo img {
    height: 46px;
  }
  .header_menu_toggle {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
  }
  .header_nav {
    position: fixed;
    inset: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    margin: 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: 0;
    padding: calc(6.75rem + env(safe-area-inset-top, 0px)) Max(5%, 1.5rem) calc(2rem + env(safe-area-inset-bottom, 0px));
    background-color: var(--color-bg-primary);
    overflow-y: auto;
    overflow-x: hidden;
    -ms-scroll-chaining: none;
        overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    -webkit-transform: translateY(-18px);
            transform: translateY(-18px);
    -webkit-transition: opacity 0.28s ease, visibility 0s linear 0.32s, -webkit-transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    transition: opacity 0.28s ease, visibility 0s linear 0.32s, -webkit-transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.32s;
    transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.32s, -webkit-transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
    z-index: 1001;
  }
  .header_nav::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  .header.is-menu-open .header_nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-transition: opacity 0.28s ease, visibility 0s linear 0s, -webkit-transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    transition: opacity 0.28s ease, visibility 0s linear 0s, -webkit-transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
    transition: opacity 0.28s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s, -webkit-transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .header_nav::before {
    content: "";
    display: block;
    width: 100%;
    border-top: 1px solid rgba(33, 32, 30, 0.08);
    margin-bottom: 1.1rem;
  }
  .header_link,
  .nav_item_has_children > .header_link {
    display: block;
    width: 100%;
    padding: 0.95rem 3rem 0.95rem 0;
    font-size: 1rem;
    letter-spacing: 0.12em;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .header_link::before {
    display: none;
  }
  .header_link:hover span,
  .header_link.is-current:hover span,
  .header_link span {
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
  .nav_item_has_children {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    min-width: 0;
  }
  .header_submenu_toggle {
    position: absolute;
    top: 0.72rem;
    right: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-primary);
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    cursor: pointer;
  }
  .header_submenu_toggle span {
    position: absolute;
    width: 14px;
    height: 1.5px;
    background-color: currentColor;
    -webkit-transition: opacity 0.25s ease, -webkit-transform 0.25s ease;
    transition: opacity 0.25s ease, -webkit-transform 0.25s ease;
    transition: transform 0.25s ease, opacity 0.25s ease;
    transition: transform 0.25s ease, opacity 0.25s ease, -webkit-transform 0.25s ease;
  }
  .header_submenu_toggle span:last-child {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .nav_item_has_children.is-open .header_submenu_toggle span:last-child {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    opacity: 0;
  }
  .nav_item_has_children.is-open > .header_dropdown {
    display: block;
  }
  .header_dropdown {
    position: static;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
    visibility: visible;
    width: 100%;
    min-width: 0;
    height: auto;
    max-height: none;
    margin: 0.1rem 0 0.6rem;
    padding: 0.25rem 0 0.4rem 1rem;
    border: 0;
    border-left: 1px solid rgba(196, 154, 128, 0.35);
    border-radius: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
    background: transparent;
    display: none;
    overflow: visible;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .header_dropdown > * {
    display: block;
  }
  .header_dropdown_link {
    display: block;
    width: 100%;
    padding: 0.5rem 0;
    text-align: left;
    font-size: 0.88rem;
    letter-spacing: 0.08em;
    line-height: 1.65;
    color: var(--color-text-primary) !important;
    opacity: 1;
    visibility: visible;
    -webkit-transform: none !important;
            transform: none !important;
    position: relative;
    z-index: 1;
  }
  .header_nav .btn-style-2 {
    display: none;
  }
  .btn-reserve {
    height: 40px;
    padding: 0 1rem;
    font-size: 0.75rem;
    border-radius: 20px;
  }
}

/* ========================================================================= */
/* 語系切換 / Language Switch */
/* ========================================================================= */
.lang_switch {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.4rem;
}

.lang_switch a {
  font-family: var(--font-family-en);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
  text-decoration: none;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

.lang_switch a:hover {
  color: var(--color-accent);
}

.lang_switch a.active {
  color: var(--color-accent);
}

.lang_switch span {
  color: var(--color-border);
  font-size: 0.7rem;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

/* =================================================================
   購物流程 — 會員／購物車／語系 header 元件
   Shop Flow — Member / Cart / Language header components
   （若無購物流程可整段移除）
   ================================================================= */
/* Header 上的圖示按鈕（購物車、會員） */
.header_icon_btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-text-primary);
  font-size: 1.3rem;
  -webkit-transition: color var(--transition-normal);
  transition: color var(--transition-normal);
  position: relative;
  text-decoration: none;
}

@media (hover: hover) {
  .header_icon_btn:hover {
    color: var(--color-primary);
  }
}

/* 已登入：會員頭像（email 首字母） */
.member_btn.is_logged_in {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.member_avatar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-bg-white);
  font-family: var(--font-family-en);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

@media (hover: hover) {
  .member_btn.is_logged_in:hover {
    background-color: transparent;
  }
  .member_btn.is_logged_in:hover .member_avatar {
    background: var(--color-primary-dark);
  }
}

/* 會員下拉選單 */
.member_dropdown {
  position: relative;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.member_dropdown_menu {
  position: absolute;
  top: 100%;
  right: 0;
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
  min-width: 260px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-bg-soft);
  -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 14px 0 8px;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  z-index: 1010;
}

.member_dropdown.is-open .member_dropdown_menu {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.member_dropdown_header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  padding: 4px 20px 14px;
}

.member_avatar_lg {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.member_email {
  font-size: 0.9rem;
  color: var(--color-text-primary);
  word-break: break-all;
  line-height: 1.3;
}

.member_dropdown_divider {
  height: 1px;
  background: var(--color-bg-soft);
  margin: 0 0 6px;
}

.member_dropdown_item {
  display: block;
  width: 100%;
  padding: 11px 20px;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--color-text-primary);
  text-align: left;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-transition: background 0.15s;
  transition: background 0.15s;
}

@media (hover: hover) {
  .member_dropdown_item:hover {
    background: var(--color-bg-soft);
    color: var(--color-primary);
  }
}

@media (max-width: 768px) {
  .member_dropdown_menu {
    right: -10px;
  }
}

/* 購物車數量徽章 */
.cart_badge {
  position: absolute;
  top: 50%;
  right: 6px;
  -webkit-transform: translateY(-70%);
          transform: translateY(-70%);
  background-color: var(--color-primary);
  color: var(--color-bg-white);
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0 4px;
  line-height: 1;
}

.cart_badge:empty {
  display: none;
}

@media (max-width: 1100px) {
  .header_icons {
    margin-left: 0;
  }
  .header_icon_btn {
    width: 40px;
  }
}

@media (max-width: 768px) {
  .header_icons {
    position: absolute;
    right: 60px;
    top: 0;
    height: var(--header-height);
    margin-left: 0;
    z-index: 1002;
  }
  .header_icon_btn {
    width: 44px;
    height: 100%;
    font-size: 1.4rem;
  }
}

/* 語系下拉選單（自訂下拉，禁用原生 select） */
.lang_dropdown {
  position: relative;
  height: 100%;
}

.lang_dropdown_toggle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  padding: 0 12px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-family-base);
  -webkit-transition: all var(--transition-normal);
  transition: all var(--transition-normal);
}

.lang_current {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-text-primary);
  border: 1.5px solid var(--color-text-primary);
  border-radius: 4px;
  background: transparent;
  -webkit-transition: all var(--transition-normal);
  transition: all var(--transition-normal);
}

@media (hover: hover) {
  .lang_dropdown_toggle:hover .lang_current {
    color: var(--color-primary);
    border-color: var(--color-primary);
  }
}

.lang_dropdown_menu {
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(-4px);
          transform: translateX(-50%) translateY(-4px);
  min-width: auto;
  background-color: var(--color-text-light);
  border-radius: 6px;
  -webkit-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  list-style: none;
  margin: 6px 0 0;
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  z-index: 1010;
}

.lang_dropdown.is-open .lang_dropdown_menu {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateX(-50%) translateY(0);
          transform: translateX(-50%) translateY(0);
}

.lang_option {
  display: block;
  padding: 8px 20px;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  -webkit-transition: all var(--transition-normal);
  transition: all var(--transition-normal);
  white-space: nowrap;
}

@media (hover: hover) {
  .lang_option:hover {
    color: var(--color-bg-white);
    background-color: var(--color-primary-light);
  }
}

.lang_option.active {
  color: var(--color-bg-white);
  font-weight: 700;
  background-color: var(--color-primary-light);
}

@media (max-width: 768px) {
  .lang_dropdown {
    height: var(--header-height);
  }
  .lang_dropdown_toggle {
    font-size: 1.2rem;
  }
  .lang_dropdown_menu {
    right: auto;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-4px);
            transform: translateX(-50%) translateY(-4px);
  }
  .lang_dropdown.is-open .lang_dropdown_menu {
    -webkit-transform: translateX(-50%) translateY(0);
            transform: translateX(-50%) translateY(0);
  }
}

/* assets/css/footer.css */
/* Footer Component */
.footer {
  background-color: var(--color-bg-dark);
  padding: 5rem 0 3rem;
  color: var(--color-text-primary);
}

.footer_top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid rgba(33, 32, 30, 0.1);
  padding-bottom: 2rem;
}

/* Logo、標語、地圖垂直排列（左半邊） */
.footer_brand {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 400px;
          flex: 1 1 400px;
  max-width: 600px;
  margin-bottom: 0;
  min-width: 0;
}

/* Logo 與標語同一行 */
.footer_brand_top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2rem;
  margin-bottom: 0;
}

.footer_logo {
  margin-bottom: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.footer_logo img {
  height: 56px;
  width: auto;
}

.footer_quote {
  font-size: 0.95rem;
  color: var(--color-text-primary);
  letter-spacing: 0.1em;
  margin-top: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--font-family-tc);
}

/* Google Map iframe 容器 */
.footer_map {
  width: 100%;
  margin-top: 1.5rem;
  margin-bottom: 0;
  border-radius: var(--border-radius-sm, 4px);
  overflow: hidden;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  min-height: 150px;
}

.footer_map iframe {
  width: 100%;
  height: 100%;
  min-height: 150px;
  display: block;
  border: 0;
}

/* Footer 右半邊資訊欄 */
.footer_info {
  /* flex: 1 1 300px; */
  /* min-width: 300px; */
  -ms-flex-item-align: stretch;
      align-self: stretch;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  text-align: left;
}

@media screen and (max-width: 1024px) {
  .footer_top {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .footer_brand {
    max-width: none;
    margin-right: 0;
  }
  .footer_info {
    width: 100%;
    margin-left: 0;
    -ms-flex-item-align: auto;
        align-self: auto;
  }
}

/* 資訊標題 */
.info_label {
  display: block;
  font-size: 0.85rem;
  font-family: var(--font-family-tc);
  letter-spacing: 0.12em;
  color: var(--color-accent) !important;
  margin-bottom: 0.3rem;
  font-weight: 500;
}

/* 資訊內文 */
.info_value {
  display: block;
  color: var(--color-text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0.8rem;
  font-family: var(--font-family-tc);
  letter-spacing: 0.05em;
}

/* footer_social 間距縮短 */
.footer_social {
  margin-top: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.5rem;
}

.footer_social a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.footer_social a svg {
  width: 20px;
  height: 20px;
}

.footer_social a:hover {
  background-color: var(--color-accent);
  color: var(--color-white);
}

/* 免責聲明文字縮小 */
.footer_disclaimer {
  margin-bottom: 0;
  padding: 0;
  text-align: left;
  max-width: none;
  overflow: hidden;
}

.footer_disclaimer p {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  margin: 0;
  letter-spacing: 0.02em;
}

/* Copyright 滿版米色背景 */
.footer_bottom_wrapper {
  background-color: var(--color-bg-alt);
  padding: 0.5rem 0;
  margin-top: 2rem;
}

/* copyright 和 legal_links 同行 */
.footer_bottom_wrapper .footer_bottom_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.75rem 1.5rem;
}

/* Copyright 文字 */
.copyright {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  opacity: 0.8;
  margin: 0;
  letter-spacing: 0.03em;
}

/* JCA Creative 可點擊連結顏色 */
.link_accent {
  color: var(--color-accent);
  text-decoration: none;
}

.link_accent:hover {
  opacity: 0.8;
}

/* legal_links 縮小、分隔線 */
.legal_links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.6rem;
  font-family: var(--font-family-tc);
}

.legal_links a {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  opacity: 0.8;
  text-decoration: none;
  letter-spacing: 0.03em;
}

.legal_links a:hover {
  color: var(--color-accent);
  opacity: 1;
}

.legal_divider {
  color: var(--color-text-secondary);
  opacity: 0.4;
  font-size: 0.8rem;
}

/* footer 主容器白底（帶透明度） */
.footer > .container.footer_bottom_inner {
  background-color: rgba(255, 255, 255, 0.75);
  border-radius: 12px;
  padding: 2rem 5%;
  position: relative;
  z-index: 1;
}

.footer_bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

/* RWD for Footer */
@media screen and (max-width: 768px) {
  .footer > .container.footer_bottom_inner {
    margin-left: 5%;
    margin-right: 5%;
    width: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .footer_bottom_wrapper {
    margin: 2rem 5% 0;
    border-radius: 12px;
    padding: 0.75rem 1rem;
  }
  .footer_bottom_wrapper .footer_bottom_inner {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .footer_brand {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 1rem;
  }
  .footer_bottom {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1rem;
  }
}

#editor {
  margin-bottom: 0;
  font-size: 16px;
  letter-spacing: 0.05em;
  line-height: calc(24 / 16);
  position: relative;
  color: #000;
}

#editor #editor {
  overflow: hidden;
}

#editor * span {
  color: inherit !important;
  font-size: 1em;
}

#editor * b,
#editor * strong {
  color: inherit !important;
  font-size: 1em !important;
}

#editor h2 {
  letter-spacing: 0.05em;
  margin-top: 64px;
  margin-bottom: 0;
  color: #000;
  font-size: 40px;
  line-height: calc(56 / 40);
}

#editor h2:first-child {
  margin-top: 0;
}

#editor h3 {
  letter-spacing: 0.05em;
  font-size: 32px;
  color: #000;
  line-height: calc(48 / 32);
  margin-top: 32px;
  margin-bottom: 0;
}

#editor h3:first-child {
  margin-top: 0;
}

#editor h4 {
  font-size: 28px;
  letter-spacing: 0.05em;
  color: #000;
  line-height: calc(40 / 28);
  margin-top: 32px;
  margin-bottom: 0;
}

#editor h4:first-child {
  margin-top: 0;
}

#editor h5 {
  font-size: 24px;
  letter-spacing: 0.05em;
  color: #000;
  line-height: calc(36 / 24);
  margin-top: 32px;
  margin-bottom: 0;
}

#editor h5:first-child {
  margin-top: 0;
}

#editor h6 {
  font-size: 20px;
  letter-spacing: 0.05em;
  color: #000;
  line-height: calc(32 / 20);
  margin-top: 32px;
  margin-bottom: 0;
}

#editor h6:first-child {
  margin-top: 0;
}

#editor p,
#editor table tr td,
#editor ol li,
#editor ul li,
#editor blockquote {
  margin-bottom: 0;
  font-size: 16px;
  letter-spacing: 0.05em;
  line-height: calc(24 / 16);
  position: relative;
  margin-top: 32px;
  color: #000;
}

#editor p:first-child {
  margin-top: 0;
}

#editor p img {
  display: block;
  width: 100%;
  margin: 0 auto;
}

#editor span {
  color: #000;
  margin-bottom: 0;
  position: relative;
}

#editor span:first-child {
  margin-top: 0;
}

#editor span img {
  display: block;
  width: 100%;
  margin: 0 auto;
}

#editor s,
#editor strike {
  text-decoration: line-through;
}

#editor i,
#editor em {
  font-style: italic;
}

#editor a {
  display: inline;
  margin-bottom: 0;
  font-size: 1em;
  letter-spacing: 0.05em;
  line-height: 2;
  text-decoration: underline;
  text-decoration-color: #000;
  text-underline-offset: 3px;
  color: #000;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

@media (hover: hover) {
  #editor a:hover {
    color: #ee3517;
  }
}

#editor img {
  display: block;
  width: 100%;
  margin: 0 auto;
}

#editor ol,
#editor ul {
  margin: 0;
  padding: 0;
  margin-top: 32px;
  margin-left: 20px;
}

#editor ol:first-child,
#editor ul:first-child {
  margin-top: 0;
}

#editor ol li,
#editor ul li {
  list-style-position: initial;
  padding: 0;
  margin-top: 0 !important;
}

#editor ul {
  list-style: disc;
}

#editor ol {
  list-style: decimal;
}

#editor pre {
  display: block;
  color: #000;
  font-size: 14px;
  line-height: 2;
  letter-spacing: 0.05em;
  white-space: normal;
  margin: 0;
  margin-top: 5px;
  margin-bottom: 10px;
  padding: 0;
}

#editor pre:first-child {
  margin-top: 0;
}

#editor pre a {
  cursor: pointer;
}

#editor hr {
  margin: 64px auto;
}

#editor blockquote {
  margin: 0;
  border: none;
  border: solid 1px #000;
  border-radius: 10px;
  padding: 25px 40px;
  margin-top: 64px;
  color: #000;
  text-align: justify;
}

#editor blockquote h1,
#editor blockquote h2,
#editor blockquote h3,
#editor blockquote h4,
#editor blockquote h5,
#editor blockquote p,
#editor blockquote ul,
#editor blockquote ol {
  margin-top: 0px;
}

#editor blockquote:first-child {
  margin-top: 0;
}

#editor blockquote .title_wrap {
  margin-bottom: 10px;
}

#editor table {
  width: 100%;
  margin-top: 32px;
  table-layout: fixed;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
}

#editor table:first-child {
  margin-top: 0;
}

#editor table tr td {
  padding: 15px 10px;
  border: solid 1px #707070;
  vertical-align: middle;
}

#editor table img {
  max-width: 300px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  #editor h2 {
    font-size: 35px;
  }
  #editor h3 {
    font-size: 30px;
  }
  #editor h4 {
    font-size: 26px;
  }
  #editor h5 {
    font-size: 23px;
  }
  #editor h6 {
    font-size: 20px;
  }
  #editor p img {
    width: 100% !important;
    height: auto !important;
  }
  #editor blockquote {
    padding: 20px 30px;
  }
  #editor table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    border: none;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  #editor table img {
    min-width: 200px;
    max-width: 100%;
  }
}

/* 圖說 */
#editor figure {
  position: relative;
  margin-top: 32px;
}

#editor figure::after {
  content: "";
  display: block;
  clear: both;
}

#editor figcaption {
  margin-bottom: 0;
  font-size: 14px;
  letter-spacing: 0.05em;
  line-height: calc(20 / 14);
  position: relative;
  margin-top: 10px;
}

/* 嵌入媒體 */
#editor .instagram_container {
  margin-top: 32px;
}

#editor .instagram_container iframe {
  margin: 0 auto;
  max-width: 420px;
  width: calc(100% - 2px);
  /* max-height: 500px; */
  border-radius: 3px;
  border: 1px solid #dbdbdb;
  -webkit-box-shadow: none;
          box-shadow: none;
  display: block;
  padding: 0px;
  background: white;
  /* height: 710px; */
}

#editor .video_container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  margin: 32px auto 0;
}

#editor .video_container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

@media (max-width: 768px) {
  #editor iframe {
    width: 100%;
  }
  #editor .video_container {
    width: 100%;
    padding-bottom: 56.25%;
  }
}

/* 圖片並排 */
#editor .editor_images_sidebyside {
  margin-top: 40px;
}

#editor .editor_images_sidebyside:first-child {
  margin-top: 0;
}

#editor .editor_images_sidebyside .sidebyside_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
}

#editor .editor_images_sidebyside .sidebyside_wrap .item {
  width: 20%;
  padding: 12% 10px 0;
  position: relative;
}

#editor .editor_images_sidebyside .sidebyside_wrap .item img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: auto;
  max-width: 80%;
  max-height: 72%;
}

#editor .editor_images_sidebyside .sidebyside_wrap .item::before {
  content: "";
  width: 1px;
  height: 30px;
  background-color: #707070;
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

#editor .editor_images_sidebyside .sidebyside_wrap .item:nth-child(5n)::before {
  display: none;
}

#editor .editor_images_sidebyside .sidebyside_wrap .item:last-child::before {
  display: none;
}

@media (max-width: 768px) {
  /* 圖片並排 */
  #editor .editor_images_sidebyside .sidebyside_wrap .item {
    width: 33.3333%;
    padding: 15% 10px 0;
  }
  #editor .editor_images_sidebyside .sidebyside_wrap .item img {
    max-height: 80%;
  }
  #editor .editor_images_sidebyside .sidebyside_wrap .item::before {
    height: 18px;
  }
  #editor .editor_images_sidebyside .sidebyside_wrap .item:nth-child(5n)::before {
    display: block;
  }
  #editor .editor_images_sidebyside .sidebyside_wrap .item:nth-child(3n)::before {
    display: none;
  }
}

/* 輪播 */
#editor .carousel-gallery-v3 {
  margin-top: 32px;
  position: relative;
}

#editor .carousel-gallery-v3 .carousel-stage {
  position: relative;
  max-width: 990px;
  margin: 0 auto;
  border-radius: 10px;
  outline: none;
}

#editor .carousel-gallery-v3 .carousel-stage:focus-visible {
  -webkit-box-shadow: 0 0 0 2px rgba(236, 209, 153, 0.65);
          box-shadow: 0 0 0 2px rgba(236, 209, 153, 0.65);
}

#editor .carousel-gallery-v3 .carousel-frame {
  width: 100%;
  aspect-ratio: 1920 / 1080;
  border-radius: 10px;
  overflow: hidden;
  background: #f5f5f5;
  position: relative;
  cursor: -webkit-grab;
  cursor: grab;
}

#editor .carousel-gallery-v3 .carousel-stage.is-dragging .carousel-frame {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

#editor .carousel-gallery-v3 .carousel-track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 100%;
  will-change: transform;
  -webkit-transition: -webkit-transform 0.6s ease;
  transition: -webkit-transform 0.6s ease;
  transition: transform 0.6s ease;
  transition: transform 0.6s ease, -webkit-transform 0.6s ease;
  -ms-touch-action: pan-y;
      touch-action: pan-y;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

#editor .carousel-gallery-v3 .carousel-slide {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  height: 100%;
}

#editor .carousel-gallery-v3 .carousel-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

#editor .carousel-gallery-v3 .arrow {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border: none;
  background-color: transparent;
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.05em;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

@media (hover: hover) {
  #editor .carousel-gallery-v3 .arrow:hover {
    -webkit-transform: translateY(-50%) scale(1.15);
            transform: translateY(-50%) scale(1.15);
  }
}

#editor .carousel-gallery-v3 .arrow svg {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
}

#editor .carousel-gallery-v3 .prev-arrow {
  left: 24px;
}

#editor .carousel-gallery-v3 .next-arrow {
  right: 24px;
}

#editor .carousel-gallery-v3 .arrow:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}

#editor .carousel-gallery-v3 .carousel-dots {
  margin-top: 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 12px;
}

#editor .carousel-gallery-v3 .carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: #ddd;
  cursor: pointer;
  padding: 0;
  -webkit-transition: background 0.2s ease, opacity 0.2s ease;
  transition: background 0.2s ease, opacity 0.2s ease;
}

#editor .carousel-gallery-v3 .carousel-dot.is-active {
  background: #000;
}

#editor .carousel-gallery-v3 .carousel-dot:focus-visible {
  outline: 2px solid rgba(236, 209, 153, 0.85);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  #editor .carousel-gallery-v3 .arrow {
    width: 35px;
    height: 35px;
  }
  #editor .carousel-gallery-v3 .prev-arrow {
    left: 10px;
  }
  #editor .carousel-gallery-v3 .next-arrow {
    right: 10px;
  }
  #editor .carousel-gallery-v3 .carousel-dots {
    gap: 10px;
  }
}

/* 引用段落裡的編輯器 */
#editor .editor_quote h1,
#editor .editor_quote h2,
#editor .editor_quote h3,
#editor .editor_quote h4,
#editor .editor_quote h5,
#editor .editor_quote p,
#editor .editor_quote ul,
#editor .editor_quote ol {
  margin-top: 0px;
}

#editor .clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* 圖文樣式 */
#editor .image_text_labels_section {
  background-color: #EBEBEB;
  padding: 40px;
  margin: 60px 0;
}

#editor .image_text_title {
  margin-bottom: 20px;
}

#editor .image_text_labels_container {
  max-height: 800px;
  overflow-y: auto;
}

#editor .image_text_labels_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 24px;
}

#editor .image_text_label_card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  background-color: #ffffff;
  overflow: hidden;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
  text-decoration: none;
  color: inherit;
  position: relative;
}

#editor .image_text_label_image {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 40%;
          flex: 0 0 40%;
  width: 40%;
  height: auto;
  overflow: hidden;
  position: relative;
}

#editor .image_text_label_image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 4 / 3;
  -webkit-transition: -webkit-transform 0.6s ease;
  transition: -webkit-transform 0.6s ease;
  transition: transform 0.6s ease;
  transition: transform 0.6s ease, -webkit-transform 0.6s ease;
  border: none;
  outline: none;
  border-radius: 0;
}

#editor .image_text_label_content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#editor .image_text_label_title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #000;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

#editor .image_text_label_desc {
  font-size: 1rem;
  color: #000;
  line-height: 1.8;
  margin-bottom: 24px;
  margin-top: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (hover: hover) {
  #editor .image_text_label_card:hover .image_text_label_image img {
    -webkit-transform: scale(1.08);
            transform: scale(1.08);
  }
}

@media (max-width: 768px) {
  #editor .image_text_labels_section {
    padding: 30px;
  }
  #editor .image_text_label_content {
    padding: 30px 20px;
  }
  #editor .image_text_label_card {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  #editor .image_text_label_image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 100%;
  }
}

/*
 * editor_custom.css — 設計系統 token 對齊覆寫
 * ============================================================
 * editor.css 是框架核心檔，不動；本檔負責把硬編碼值
 * （16px / 32px margin / #000）一對一換成 :root 設計系統變數，
 * 讓 #editor 與頁面其他區塊共用同一套視覺語言。
 *
 * 變數定義於 common.css :root，本檔僅引用，不重新定義。
 */
/* ============================================================
 * 1. 基底文字：字型 / 字級 / 顏色 / 行高
 * 取代 editor.css: #editor { font-size: 16px; color: #000; }
 * ============================================================ */
#editor {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  line-height: 1.8;
  letter-spacing: 0.03em;
  color: var(--color-text-secondary);
}

#editor *,
#editor * span,
#editor * b,
#editor * strong {
  color: inherit;
}

/* ============================================================
 * 2. 標題系統：h1-h6
 * 取代 editor.css 寫死的 40 / 32 / 28 / 24 / 20 px
 * ============================================================ */
#editor h1,
#editor h2,
#editor h3,
#editor h4,
#editor h5,
#editor h6 {
  font-family: var(--font-family-tc);
  color: var(--color-text-primary);
  letter-spacing: 0.08em;
  line-height: 1.4;
  margin-bottom: 0;
}

#editor h2 {
  font-size: var(--font-size-h2);
  font-weight: 300;
  margin-top: 4rem;
}

#editor h3 {
  font-size: var(--font-size-h3);
  font-weight: 400;
  margin-top: 2.5rem;
}

#editor h4 {
  font-size: var(--font-size-h4);
  font-weight: 500;
  margin-top: 2rem;
}

#editor h5 {
  font-size: 1.15rem;
  font-weight: 500;
  margin-top: 1.75rem;
}

#editor h6 {
  font-size: 1rem;
  font-weight: 600;
  margin-top: 1.5rem;
}

#editor h2:first-child,
#editor h3:first-child,
#editor h4:first-child,
#editor h5:first-child,
#editor h6:first-child {
  margin-top: 0;
}

/* ============================================================
 * 3. 內文 / 列表 / 表格儲存格 / 引用
 * 取代 editor.css 寫死的 16px / margin-top: 32px / color: #000
 * ============================================================ */
#editor p,
#editor ol,
#editor ul,
#editor table,
#editor blockquote,
#editor figure {
  margin-top: 1.25rem;
  margin-bottom: 0;
}

#editor p:first-child,
#editor ol:first-child,
#editor ul:first-child,
#editor table:first-child,
#editor blockquote:first-child {
  margin-top: 0;
}

#editor p,
#editor li,
#editor table tr td,
#editor blockquote {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  letter-spacing: 0.03em;
  line-height: 1.8;
  color: var(--color-text-secondary);
}

#editor ol,
#editor ul {
  padding-left: 1.5rem;
  margin-left: 0;
}

#editor ol li,
#editor ul li {
  margin-top: 0.5rem !important;
  list-style-position: outside;
}

#editor ol li:first-child,
#editor ul li:first-child {
  margin-top: 0 !important;
}

#editor ul li::marker {
  color: var(--color-accent);
}

#editor ol li::marker {
  color: var(--color-text-light);
}

/* ============================================================
 * 4. 連結 / 刪除線
 * 取代 editor.css: color: #000; text-decoration-color: #000; hover: #ee3517
 * ============================================================ */
#editor a {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}

@media (hover: hover) {
  #editor a:hover {
    color: var(--color-accent);
  }
}

#editor s,
#editor strike {
  text-decoration: line-through;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 1.5px;
  color: var(--color-text-light);
}

/* ============================================================
 * 5. blockquote — 玫瑰金 accent 左邊條 + bg-secondary 底
 * 取代 editor.css: border: solid 1px #000; border-radius: 10px;
 * ============================================================ */
#editor blockquote {
  background-color: var(--color-bg-secondary);
  border: none;
  border-left: 2px solid var(--color-accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 1.5rem 1.75rem;
  color: var(--color-text-secondary);
}

#editor blockquote h1,
#editor blockquote h2,
#editor blockquote h3,
#editor blockquote h4,
#editor blockquote h5,
#editor blockquote p,
#editor blockquote ul,
#editor blockquote ol {
  margin-top: 0;
}

/* ============================================================
 * 6. table — 圓角 + 細邊 + 表頭微底色
 * 取代 editor.css: border: solid 1px #707070;
 * ============================================================ */
#editor table {
  width: 100%;
  border-radius: var(--radius-lg);
  border-style: hidden;
  -webkit-box-shadow: 0 0 0 1px var(--color-border-strong);
          box-shadow: 0 0 0 1px var(--color-border-strong);
  overflow: hidden;
  table-layout: fixed;
}

#editor table tr td {
  border: 1px solid var(--color-border-strong);
  padding: 14px 16px;
  vertical-align: middle;
  font-size: var(--font-size-body);
}

#editor table tr:first-child td {
  background: var(--color-bg-secondary);
  font-weight: 500;
  color: var(--color-text-primary);
  font-family: var(--font-family-sans);
}

/* 表格內獨立圖片填滿儲存格 */
#editor table tr td:has(> img:only-child),
#editor table tr td:has(> p:only-child > img:only-child) {
  padding: 0;
}

#editor table tr td > img:only-child,
#editor table tr td > p:only-child > img:only-child {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  max-width: none;
  display: block;
  margin: 0;
  border-radius: 0;
}

/* ============================================================
 * 7. hr / 圖片 / 圖說
 * ============================================================ */
#editor hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 3rem auto;
}

#editor img,
#editor p img,
#editor figure img,
#editor .editor_images_sidebyside .sidebyside_wrap .item img {
  border-radius: var(--radius-lg);
}

#editor figcaption {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  letter-spacing: 0.03em;
  margin-top: 10px;
}

/* ============================================================
 * 8. 圖文標籤區塊（沿用原 editor_custom.css 規則，token 化）
 * ============================================================ */
#editor .image_text_labels_section {
  background-color: var(--color-bg-secondary);
  padding: 30px;
  border-radius: var(--radius-lg);
  margin: 60px 0;
}

#editor .image_text_labels_box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

#editor .image_text_label_card {
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 30px;
  border-radius: var(--radius-lg);
}

#editor .image_text_label_image {
  width: 100%;
  -webkit-box-flex: 0;
      -ms-flex: none;
          flex: none;
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: 24px;
  margin-bottom: 24px;
}

#editor .image_text_label_content {
  padding: 0;
  display: contents;
}

#editor .image_text_label_date {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
  margin-bottom: 0;
  font-family: var(--font-family-en);
  font-size: var(--font-size-sm);
  letter-spacing: 0.15em;
  color: var(--color-accent);
}

#editor .image_text_label_title {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
  font-family: var(--font-family-tc);
  color: var(--color-text-primary);
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 12px;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

#editor .image_text_label_desc {
  -webkit-box-ordinal-group: 5;
      -ms-flex-order: 4;
          order: 4;
  color: var(--color-text-secondary);
  font-size: var(--font-size-body);
  margin-bottom: 0;
}

@media (hover: hover) {
  #editor .image_text_label_card:hover .image_text_label_title {
    color: var(--color-accent);
  }
}

@media (max-width: 991px) {
  #editor .image_text_labels_box {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  #editor .image_text_labels_box {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
 * 9. 響應式：≤768px 字級壓縮
 * ============================================================ */
@media (max-width: 768px) {
  #editor h2 {
    font-size: 1.8rem;
  }
  #editor h3 {
    font-size: 1.35rem;
  }
  #editor h4 {
    font-size: 1.2rem;
  }
  #editor h5 {
    font-size: 1.1rem;
  }
  #editor h6 {
    font-size: 1rem;
  }
  #editor p,
  #editor li,
  #editor table tr td,
  #editor blockquote {
    font-size: var(--font-size-body);
  }
  #editor blockquote {
    padding: 1.25rem 1.25rem;
  }
  #editor table tr td {
    padding: 10px 12px;
  }
  #editor table {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
}

/* index.css */
/* Hero Section - 區塊一 */
.index .hero_section {
  height: calc(100vh - 92px);
  margin-top: 92px;
  padding: 0;
  background-color: var(--color-bg-dark);
  overflow: hidden;
}

.index .hero_frame {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.index .hero_carousel {
  width: 50%;
  height: 100%;
  position: relative;
}

.index .carousel_slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: opacity 1.5s ease-in-out;
  transition: opacity 1.5s ease-in-out;
}

.index .carousel_slide.active {
  opacity: 1;
  z-index: 1;
}

.index .carousel_slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center 20%;
     object-position: center 20%;
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  -webkit-transition: -webkit-transform 6s ease-out;
  transition: -webkit-transform 6s ease-out;
  transition: transform 6s ease-out;
  transition: transform 6s ease-out, -webkit-transform 6s ease-out;
}

.index .carousel_slide.active img {
  -webkit-transform: scale(1);
          transform: scale(1);
}

/* Carousel Dots */
.index .carousel_dots {
  position: absolute;
  right: 1.2rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.7rem;
  z-index: 10;
}

.index .carousel_dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  padding: 0;
  -webkit-transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.index .carousel_dot.active {
  background-color: var(--color-accent);
  -webkit-transform: scale(1.5);
          transform: scale(1.5);
}

.index .carousel_dot:hover:not(.active) {
  background-color: rgba(255, 255, 255, 0.85);
}

.index .hero_content {
  width: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0 8%;
  z-index: 2;
  background-color: var(--color-bg-dark);
}

.index .hero_subtitle {
  font-family: var(--font-family-en);
  color: var(--color-accent);
  margin-bottom: 2rem;
  font-size: 1rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}

.index .hero_title {
  font-size: var(--font-size-h1);
  line-height: 1.4;
  margin-bottom: 2.5rem;
  color: var(--color-text-primary);
  font-weight: 300;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.index .hero_desc {
  margin-bottom: 4rem;
  font-size: 1.15rem;
  color: var(--color-text-secondary);
  line-height: 2.2;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: calc(11.2 * var(--font-size-h1));
}

/* Scroll Indicator */
.index .hero_scroll_indicator {
  position: absolute;
  left: 8%;
  bottom: 3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.2rem;
  z-index: 5;
  opacity: 0;
  -webkit-animation: scroll-indicator-in 1s ease 2s forwards;
          animation: scroll-indicator-in 1s ease 2s forwards;
}

@-webkit-keyframes scroll-indicator-in {
  to {
    opacity: 1;
  }
}

@keyframes scroll-indicator-in {
  to {
    opacity: 1;
  }
}

.index .hero_scroll_line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, transparent 0%, var(--color-accent) 100%);
  position: relative;
  overflow: hidden;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.index .hero_scroll_line::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent 0%, var(--color-accent) 100%);
  -webkit-animation: scroll-line-flow 1.8s ease-in-out infinite;
          animation: scroll-line-flow 1.8s ease-in-out infinite;
}

@-webkit-keyframes scroll-line-flow {
  0% {
    top: -100%;
  }
  100% {
    top: 100%;
  }
}

@keyframes scroll-line-flow {
  0% {
    top: -100%;
  }
  100% {
    top: 100%;
  }
}

.index .hero_scroll_text {
  font-family: var(--font-family-sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  color: var(--color-accent);
  text-transform: uppercase;
  -webkit-writing-mode: vertical-rl;
      -ms-writing-mode: tb-rl;
          writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* Philosophy & Trust - 區塊二 */
.index .philosophy_section {
  padding-top: 12rem;
  padding-bottom: 12rem;
}

.index .philosophy_section .section_header {
  max-width: 700px;
  margin-bottom: 0;
}

.index .philosophy_section .section_subtitle {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.index .philosophy_section .section_title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.index .philosophy_section .section_intro {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}

.index .core_values {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-top: 2rem;
}

.index .value_item {
  position: relative;
  padding-top: 6rem;
}

.index .value_item::before {
  content: '';
  position: absolute;
  top: 4.8rem;
  left: 0;
  width: 250px;
  height: 1px;
  background-color: var(--color-accent);
}

.index .value_num {
  font-family: var(--font-family-en);
  font-size: 3.5rem;
  font-weight: 300;
  color: rgba(184, 156, 121, 0.2);
  /* very subtle accent */
  position: absolute;
  left: 0;
  top: 1rem;
  line-height: 1;
  z-index: -1;
}

.index .value_title {
  font-size: var(--font-size-h3);
  margin-bottom: 1rem;
  color: var(--color-text-primary);
  letter-spacing: 0.08em;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.index .value_desc {
  line-height: 2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}

/* Medical Team - 區塊三 */
.index .team_section {
  background-color: var(--color-bg-secondary);
  background-image: url("../images/index/abstract_aesthetics_1771842526798.png");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  position: relative;
}

.index .team_section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color-bg-secondary);
  opacity: 0.95;
  z-index: 0;
  pointer-events: none;
}

.index .team_list {
  margin-top: 6rem;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

.index .team_item {
  width: 50%;
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
  border-right: 1px solid rgba(0, 0, 0, 0.15);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background-color: transparent;
  -webkit-transition: background-color 0.3s ease;
  transition: background-color 0.3s ease;
}

.index .team_item:hover {
  background-color: rgba(0, 0, 0, 0.03);
}

.index .team_item.is-active {
  background-color: #EBE7DD;
}

.index .team_header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  height: 200px;
  padding: 0;
  cursor: pointer;
  position: relative;
  z-index: 10;
}

.index .team_thumb {
  width: 200px;
  height: 200px;
  margin-top: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  position: relative;
  z-index: 2;
  overflow: hidden;
  background-color: #cbd1d3;
  border-right: 1px solid rgba(0, 0, 0, 0.15);
}

.index .team_thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}

.index .team_title_wrap {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 0 4rem 0 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 0;
}

.index .team_role {
  display: block;
  font-size: 0.85rem;
  font-family: var(--font-family-tc);
  color: var(--color-accent);
  margin-bottom: 0.6rem;
  font-weight: 400;
}

.index .team_name {
  font-size: 1.6rem;
  color: var(--color-text-primary);
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.index .team_en {
  display: block;
  font-size: 0.95rem;
  color: #888888;
  font-family: var(--font-family-tc);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.6rem;
}

.index .team_toggle {
  position: absolute;
  right: 2rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  height: 40px;
  opacity: 0.6;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  z-index: 15;
}

.index .team_item:hover .team_toggle,
.index .team_item.is-active .team_toggle {
  opacity: 1;
}

/* 奇數總數時，最後一張卡片撐滿整行 */
.index .team_item:last-child:nth-child(odd) {
  width: 100%;
}

/* Accordion Body */
.index .team_body {
  width: 200%;
  display: none;
  background-color: #EBE7DD;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 5;
}

.index .team_item.is-active .team_body {
  display: block;
}

.index .team_item:nth-child(even) .team_body {
  margin-left: -100%;
}

/* 最後一張且為奇數位時（總數為奇數），展開面板只佔自身寬度 */
.index .team_item:last-child:nth-child(odd) .team_body {
  width: 100%;
  margin-left: 0;
}

.index .team_body_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 5rem;
  gap: 5rem;
}

.index .team_body_img {
  width: 35%;
  max-width: 380px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  aspect-ratio: 3/4;
  overflow: hidden;
  background-color: var(--color-bg-primary);
}

.index .team_body_img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.index .team_body_content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding-top: 2rem;
}

.index .team_body_head {
  margin-bottom: 1.5rem;
}

.index .team_role_tag {
  display: block;
  font-family: var(--font-family-tc);
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}

.index .team_name_large {
  font-size: 2rem;
  color: var(--color-text-primary);
  font-weight: 400;
}

.index .team_en_large {
  display: block;
  font-size: 1.1rem;
  color: #888888;
  font-family: var(--font-family-tc);
  font-weight: 400;
  margin-top: 0.6rem;
  margin-left: 0;
}

.index .team_info_group {
  margin-bottom: 2.5rem;
}

.index .team_info_label {
  display: block;
  width: 30px;
  height: 2px;
  background-color: var(--color-accent);
  margin-bottom: 1.5rem;
}

.index .team_info_text {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--color-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Fallback if JS animation fails */
.index .team_item.is-active .icon-plus {
  display: none;
}

.index .team_item.is-active .icon-minus {
  display: block !important;
}

@media (max-width: 991px) {
  .index .team_item {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--color-text-primary);
  }
  .index .team_item:nth-child(even) {
    border-right: none;
  }
  .index .team_item:last-child {
    border-bottom: none;
  }
  .index .team_item:nth-child(even) .team_body {
    margin-left: 0;
  }
  .index .team_body {
    width: 100%;
  }
  .index .team_body_inner {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 2.5rem 1.5rem;
    gap: 3rem;
  }
  .index .team_body_img {
    width: 100%;
    max-width: none;
  }
}

/* Specialized Services - 區塊四 */
.index .services_section,
#services.bg-alt {
  background-image: url("../images/index/abstract_aesthetics_1771842526798.png");
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-color: transparent;
  position: relative;
  text-align: center;
}

#services.bg-alt::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: #EEE9E1;
  opacity: 0.88;
  z-index: 0;
  pointer-events: none;
}

#services.bg-alt > * {
  position: relative;
  z-index: 1;
}

.index .services_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 5rem;
}

.index .service_card {
  position: relative;
  height: 500px;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  padding: 3rem 2rem;
  text-align: left;
  color: var(--color-white);
}

.index .service_card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(31, 30, 28, 0.9)), color-stop(60%, rgba(31, 30, 28, 0.2)), to(rgba(31, 30, 28, 0)));
  background: linear-gradient(to top, rgba(31, 30, 28, 0.9) 0%, rgba(31, 30, 28, 0.2) 60%, rgba(31, 30, 28, 0) 100%);
  z-index: 1;
}

.index .service_bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  z-index: 0;
  -webkit-transition: -webkit-transform 1.2s ease;
  transition: -webkit-transform 1.2s ease;
  transition: transform 1.2s ease;
  transition: transform 1.2s ease, -webkit-transform 1.2s ease;
}

@media (hover: hover) {
  .index .service_card:hover .service_bg {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
}

.index .service_content {
  position: relative;
  z-index: 2;
}

.index .service_title {
  font-size: var(--font-size-h3);
  margin-bottom: 1rem;
  color: var(--color-white);
}

.index .service_desc {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0;
  font-size: 0.95rem;
}

/* Service Card Alt - 外層 <a> 連結 */
.index .service_card_alt {
  display: block;
  text-decoration: none;
  color: inherit;
  background-color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(33, 32, 30, 0.15);
  border-radius: 0;
  margin-bottom: 1.2rem;
  -webkit-transition: background-color 0.35s ease, -webkit-transform 0.35s ease, -webkit-box-shadow 0.35s ease;
  transition: background-color 0.35s ease, -webkit-transform 0.35s ease, -webkit-box-shadow 0.35s ease;
  transition: background-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
  transition: background-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease, -webkit-transform 0.35s ease, -webkit-box-shadow 0.35s ease;
}

/* 內層 flex 排版容器 */
.index .service_card_body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 2.5rem 3.5rem;
  text-align: left;
}

/* 左側內容欄 */
.index .service_card_content {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.index .service_tag {
  display: inline-block;
  font-size: 0.9rem;
  color: #aaa;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  -webkit-transition: color 0.25s ease;
  transition: color 0.25s ease;
  letter-spacing: 0.02em;
}

.index .service_tag::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--color-accent);
  -webkit-transition: width 0.3s ease;
  transition: width 0.3s ease;
}

@media (hover: hover) {
  .index .service_tag:hover {
    color: var(--color-accent);
  }
  .index .service_tag:hover::after {
    width: 100%;
  }
}

.index .space_section {
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.index .space_image {
  width: 50%;
  position: relative;
  overflow: hidden;
  min-height: 720px;
}

.index .space_slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.8s ease, visibility 0.8s;
  transition: opacity 0.8s ease, visibility 0.8s;
}

.index .space_slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.index .space_slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.index .space_content {
  width: 50%;
  padding: 20px 50px;
  max-width: 500px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.index .space_title {
  font-size: var(--font-size-h2);
  margin-bottom: 2rem;
}

.index .space_desc {
  line-height: 2.2;
  font-size: 1.15rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.index .space_thumbnails {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.2rem;
  margin-top: 4rem;
}

.index .space_thumb {
  width: 70px;
  height: 70px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}

.index .space_thumb::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--color-bg-dark);
  opacity: 0.6;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.index .space_thumb.is-active::after,
.index .space_thumb:hover::after {
  opacity: 0;
}

.index .space_thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: -webkit-transform 0.6s ease;
  transition: -webkit-transform 0.6s ease;
  transition: transform 0.6s ease;
  transition: transform 0.6s ease, -webkit-transform 0.6s ease;
}

.index .space_thumb:hover img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
}

/* Transformation Gallery - 區塊六 */
.index .transformation_section {
  background-color: var(--color-bg-primary);
}

.index .gallery_carousel_wrap {
  margin-top: 5rem;
  position: relative;
  padding: 1rem 0;
  /* extra padding to prevent shadow clipping */
}

.index .gallery_track_container {
  overflow-x: hidden;
  overflow-y: visible;
  width: 100%;
  padding-bottom: 2rem;
  margin-bottom: -2rem;
}

.index .gallery_track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 2rem;
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  transition: -webkit-transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.index .gallery_dots {
  display: none;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0.7rem;
  margin-top: 1.5rem;
}

.index .gallery_dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background-color: rgba(29, 27, 25, 0.2);
  -webkit-transition: background-color 0.3s ease, -webkit-transform 0.3s ease;
  transition: background-color 0.3s ease, -webkit-transform 0.3s ease;
  transition: transform 0.3s ease, background-color 0.3s ease;
  transition: transform 0.3s ease, background-color 0.3s ease, -webkit-transform 0.3s ease;
}

.index .gallery_dot.is-active {
  background-color: var(--color-accent);
  -webkit-transform: scale(1.45);
          transform: scale(1.45);
}

.index .gallery_card {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc((100% - 4rem) / 3);
          flex: 0 0 calc((100% - 4rem) / 3);
}

@media (max-width: 991px) {
  .index .gallery_card {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 2rem) / 2);
            flex: 0 0 calc((100% - 2rem) / 2);
  }
}

@media (max-width: 575px) {
  .index .gallery_card {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
  }
  .index .gallery_track_container {
    padding-bottom: 1rem;
    margin-bottom: -1rem;
  }
  .index .gallery_dots {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 0.75rem;
  }
  .index .carousel_nav {
    display: none;
  }
}

/* margin-bottom to separate image from text body visually in new DOM structure */
.index .gallery_card .card-img-wrap {
  margin-bottom: 0;
  /* Let flex/padding handle it natively in the new style */
}

.index .carousel_nav {
  position: absolute;
  top: calc(50% - 24px);
  /* approximate center */
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-white);
  border: 1px solid rgba(0, 0, 0, 0.05);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  z-index: 10;
  -webkit-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  color: var(--color-text-primary);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.index .carousel_nav:hover {
  background-color: var(--color-text-primary);
  color: var(--color-white);
}

.index .carousel_nav svg {
  width: 20px;
  height: 20px;
}

.index .carousel_prev {
  left: -24px;
}

.index .carousel_next {
  right: -24px;
}

@media (max-width: 1200px) {
  .index .carousel_prev {
    left: 0px;
  }
  .index .carousel_next {
    right: 0px;
  }
}

/* ========================================================================= */
/* Hero Section - 頁面專屬補充 */
/* ========================================================================= */
/* 背景大字裝飾 */
.index .hero_section .overlap-text {
  position: absolute;
  left: 5%;
  top: 50%;
  -webkit-transform: translateY(-50%) rotate(-90deg);
          transform: translateY(-50%) rotate(-90deg);
  -webkit-transform-origin: left center;
          transform-origin: left center;
  font-family: var(--font-family-en);
  font-size: 8vw;
  color: rgba(0, 0, 0, 0.03);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}

/* Hero 輪播圖片遮罩覆寫 */
.index .hero_carousel.img-reveal::after {
  left: 0;
  right: auto;
  bottom: 0;
  width: 30%;
  height: auto;
  background: -webkit-gradient(linear, left top, right top, from(#eae6df), to(rgba(234, 230, 223, 0)));
  background: linear-gradient(to right, #eae6df 0%, rgba(234, 230, 223, 0) 100%);
  z-index: 10;
  -webkit-transform-origin: top;
          transform-origin: top;
}

.index .hero_carousel.img-reveal .carousel_slide img {
  -webkit-transform: scale(1.1);
          transform: scale(1.1);
  -webkit-transition: -webkit-transform 2s cubic-bezier(0.25, 1, 0.5, 1);
  transition: -webkit-transform 2s cubic-bezier(0.25, 1, 0.5, 1);
  transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1);
  transition: transform 2s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 2s cubic-bezier(0.25, 1, 0.5, 1);
}

.index .hero_carousel.img-reveal.is-visible .carousel_slide img {
  -webkit-transform: scale(1);
          transform: scale(1);
}

/* ========================================================================= */
/* Philosophy Section - 區塊二 */
/* ========================================================================= */
/* 非對稱格線排版 */
.index .asymmetric-grid {
  display: grid;
  grid-template-columns: 4.5fr 5fr;
  gap: 6rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* 無圖片時：單欄滿版 */
.index .asymmetric-grid--no-img {
  grid-template-columns: 1fr;
}

/* 哲學區塊圖片容器 */
.index .philosophy_img {
  aspect-ratio: 3/4;
  overflow: hidden;
}

.index .philosophy_img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}

@media (max-width: 991px) {
  .index .asymmetric-grid {
    grid-template-columns: 1fr;
    gap: 4rem;
  }
}

/* ========================================================================= */
/* Team Section - 區塊三 */
/* ========================================================================= */
/* icon-minus 預設隱藏（JS 透過 is-active 控制顯示） */
.index .icon-minus {
  display: none;
}

/* ========================================================================= */
/* Services Section - 區塊四 */
/* ========================================================================= */
/* 服務卡片內部主橫排佈局 */
.index .service_card_body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* 服務卡片中文主標題 */
.index .service_card_title {
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  color: var(--color-text-primary);
  font-family: var(--font-family-tc);
  font-weight: 300;
  letter-spacing: 0.05em;
}

/* 服務卡片英文副標題 */
.index .service_card_en {
  font-family: var(--font-family-en);
  font-size: 0.9rem;
  color: var(--color-accent);
  letter-spacing: 0.2em;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(33, 32, 30, 0.12);
}

/* 服務細項標籤容器 */
.index .service_card_tags {
  margin-top: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0.6rem 2.5rem;
}

/* 服務卡片右側箭頭 SVG */
.index .service_card_arrow {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-left: 2rem;
  color: var(--color-text-primary);
  opacity: 0.6;
}

/* ========================================================================= */
/* Space Section - 區塊五 */
/* ========================================================================= */
/* 空間區塊 btn-explore 上間距 */
.index .space_content .btn-explore {
  margin-top: 3rem;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

/* ========================================================================= */
/* Card Hover Enhancements */
/* ========================================================================= */
/* Service Card Hover Effects */
@media (hover: hover) {
  .index .service_card_alt:hover {
    -webkit-transform: translateY(-4px);
            transform: translateY(-4px);
    -webkit-box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
  }
  .index .service_card_alt:hover .service_card_arrow {
    color: var(--color-accent);
    opacity: 1;
    -webkit-transform: translateX(5px);
            transform: translateX(5px);
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
}

.index .service_card_arrow {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

/* Gallery Card Hover Link styling */
.index .gallery_card_link {
  text-decoration: none;
  display: block;
  color: inherit;
  -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  transition: -webkit-transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), -webkit-box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

@media (hover: hover) {
  .index .gallery_card_link:hover {
    -webkit-transform: translateY(-8px);
            transform: translateY(-8px);
    -webkit-box-shadow: 0 6px 16px rgba(0, 0, 0, 0.07);
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.07);
  }
  .index .gallery_card_link:hover .card_title {
    color: var(--color-accent);
  }
  .index .gallery_card_link:hover .card_img img {
    -webkit-transform: scale(1.08);
            transform: scale(1.08);
  }
}

.index .gallery_card_link .card_title {
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

.index .gallery_card_link .card_img img {
  -webkit-transition: -webkit-transform 0.8s ease;
  transition: -webkit-transform 0.8s ease;
  transition: transform 0.8s ease;
  transition: transform 0.8s ease, -webkit-transform 0.8s ease;
}

@media (max-width: 991px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }
  .index,
  .index .wrapper,
  .index .hero_section,
  .index .hero_frame,
  .index .hero_content,
  .index .hero_carousel {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }
  .index .hero_section {
    height: auto;
    min-height: auto;
    margin-top: 78px;
  }
  .index .hero_frame {
    display: block;
    width: 100%;
    height: auto;
    min-height: auto;
  }
  .index .hero_content,
  .index .hero_carousel {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
  }
  .index .hero_content {
    -webkit-box-ordinal-group: initial;
        -ms-flex-order: initial;
            order: initial;
    padding: 3rem 5% 4.5rem;
  }
  .index .hero_carousel {
    height: auto;
    min-height: auto;
    aspect-ratio: 1 / 1;
  }
  .index .hero_title {
    font-size: clamp(2.2rem, 8vw, 3rem);
    margin-bottom: 1.5rem;
  }
  .index .hero_desc {
    max-width: none;
    margin-bottom: 2.5rem;
    font-size: 1rem;
    line-height: 1.9;
  }
  .index .carousel_dots {
    top: auto;
    bottom: 1.5rem;
    left: 50%;
    right: auto;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .index .hero_scroll_indicator {
    display: none;
  }
  .index .philosophy_section {
    padding-top: 5.5rem;
    padding-bottom: 5.5rem;
  }
  .index .philosophy_section .section_subtitle,
  .index .philosophy_section .section_title,
  .index .philosophy_section .section_intro {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    -webkit-line-clamp: unset;
    line-clamp: unset;
  }
  .index .core_values {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .index .value_item {
    padding-top: 5rem;
  }
  .index .value_item::before {
    width: 100%;
    max-width: 220px;
  }
  .index .team_section {
    background-attachment: scroll;
  }
  .index .team_list {
    margin-top: 3.5rem;
  }
  .index .team_header {
    height: auto;
    min-height: 120px;
  }
  .index .team_thumb {
    width: 110px;
    height: auto;
    min-height: 120px;
  }
  .index .team_title_wrap {
    padding: 1.5rem 4.5rem 1.5rem 1.25rem;
  }
  .index .team_name {
    font-size: 1.2rem;
    white-space: normal;
  }
  .index .team_en {
    white-space: normal;
    line-height: 1.6;
  }
  .index .team_toggle {
    right: 1rem;
  }
  .index .services_grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 3rem;
  }
  .index .service_card_body {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 1.25rem;
    padding: 1.5rem;
  }
  .index .service_card_title {
    font-size: 1.45rem;
  }
  .index .service_card_tags {
    gap: 0.5rem 1rem;
  }
  .index .space_section {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .index .space_image,
  .index .space_content {
    width: 100%;
  }
  .index .space_image {
    min-height: auto;
    aspect-ratio: 4 / 3;
  }
  .index .space_content {
    padding: 3.5rem 5%;
    max-width: none;
  }
  .index .space_desc {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .index .hero_content .btn-explore {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -ms-flex-item-align: start;
        align-self: flex-start;
    margin-left: 0;
    margin-right: auto;
  }
  .index .section_cta .btn-explore,
  .index .space_content .btn-explore {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    -ms-flex-item-align: center;
        align-self: center;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 575px) {
  .index .hero_section {
    margin-top: 74px;
  }
  .index .hero_frame {
    min-height: auto;
  }
  .index .hero_carousel {
    height: auto;
    min-height: auto;
  }
  .index .hero_subtitle {
    margin-bottom: 1rem;
    font-size: 0.82rem;
    letter-spacing: 0.28em;
  }
  .index .hero_title {
    font-size: 2rem;
    line-height: 1.35;
  }
  .index .team_thumb {
    width: 92px;
    min-height: 104px;
  }
  .index .team_title_wrap {
    padding: 1rem 3.75rem 1rem 1rem;
  }
  .index .team_name {
    font-size: 1.05rem;
  }
  .index .team_en {
    font-size: 0.85rem;
    margin-top: 0.4rem;
  }
  .index .team_body_inner {
    padding: 2rem 1rem;
    gap: 2rem;
  }
  .index .service_card_body {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .index .space_image {
    min-height: auto;
    aspect-ratio: 4 / 3;
  }
}

/* assets/css/about.css */
/* The gap used to contain line-clamp utility classes */
/* Philosophy Section */
.about .philosophy_section {
  position: relative;
  padding: 9rem 0;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--color-white);
  overflow: hidden;
}

.about .philosophy_bg_overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(60, 45, 35, 0.72);
  z-index: 0;
}

.about .philosophy_section .container {
  position: relative;
  z-index: 1;
}

.about .philosophy_header {
  text-align: center;
  margin-bottom: 5rem;
}

.about .philosophy_header .section_subtitle {
  color: rgba(255, 255, 255, 0.6);
}

.about .philosophy_main_title {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 300;
  color: var(--color-white);
  letter-spacing: 0.1em;
  margin-top: 0.8rem;
}

.about .philosophy_cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

/* Extracted from about.html inline styles */
.about .about__hero-title {
  margin-bottom: 0;
}

.about .about__hero-scroll {
  margin-top: 7rem;
}

.about .about__trust-title {
  letter-spacing: -0.02em;
}

.about .about__method-title {
  letter-spacing: -0.02em;
}

.about .about__method-intro {
  font-size: 1.1rem;
  line-height: 2;
  color: var(--color-text-secondary);
}

.about .about__team-header {
  max-width: 700px;
  margin: 0 auto;
}

.about .about__team-title {
  letter-spacing: -0.02em;
  color: #1D1B19;
}

.about .about__team-intro {
  color: rgba(29, 27, 25, 0.7);
}

.about .about__space-inner {
  padding-bottom: 5rem;
}

.about .about__space-subtitle {
  color: var(--color-accent);
}

.about .philosophy_col {
  padding: 0 3rem;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.about .philosophy_col:first-child {
  padding-left: 0;
  border-left: none;
}

.about .philosophy_col:last-child {
  padding-right: 0;
}

.about .philosophy_col_title {
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--color-white);
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
}

.about .philosophy_col_desc {
  font-size: 0.95rem;
  line-height: 2;
  color: rgba(255, 255, 255, 0.72);
}

/* Trust Pillars Section — Sticky Vertical Scroll */
/* 外包層：提供足夠的捲動高度讓 section sticky 住 */
/* 4 張卡片，每次顯示 2 張，共需捲動 2 張的高度，增加為 5 個 viewport 讓我們最後可以停留 */
.about .trust_sticky_outer {
  position: relative;
  height: calc(100vh * 5);
}

/* Section 本身 sticky 固定，並使用 flex 讓內容在可用高度內自動垂直置中 */
.about .trust_section {
  position: sticky;
  top: 92px;
  background-color: var(--color-bg-secondary);
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  overflow: hidden;
  height: calc(100vh - 92px);
  /* 固定為視窗扣除 header 的高度 */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  /* 讓內容上下間距一致置中 */
  /* padding: var(--spacing-sm) 0; */
}

/* 置中標題區 — 拉大 margin 提升區塊餘白，避免與下方圖文靠太近 */
.about .trust_intro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 3.5rem;
  /* 原本是 0.5rem，加大間距以改善視覺壓迫感 */
}

.about .trust_intro_desc {
  font-size: 1rem;
  line-height: 2;
  color: var(--color-text-secondary);
}

/* 左圖 + 右側卡片佈局 — 圖片頂部對齊，右欄跟著圖片高度 */
.about .trust_layout {
  display: grid;
  grid-template-columns: 4fr 5fr;
  gap: 8rem;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}

/* 無圖片時：左欄縮到最小，去除間距 */
.about .trust_layout:has(.trust_img--empty) {
  grid-template-columns: 0.01fr 5fr;
}

/* 左側圖片：比例 3:4，對齊頂部，決定 grid row 高度 */
.about .trust_img {
  overflow: hidden;
  aspect-ratio: 1/1;
  width: 100%;
  min-height: 500px;
  /* max-height: 55vh; */
  /* 縮小，確保整體絕對不會超過螢幕且上下有足夠間隙 */
  -ms-flex-item-align: start;
      align-self: start;
}

.about .trust_img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}

/* 右側：卡片容器，高度由 JS 與左圖同步，避免大量內容撐高整個區塊 */
.about .trust_cards_outer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* [舊版] 捲動容器：高度 = 父容器（左圖等高），JS 控制 translateY */
/* .about .trust_cards_scroll {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: visible;
  will-change: transform;
  transition: transform 0.1s ease-out;
} */
/* [舊版] 每張卡片：佔滿容器一半高度 (顯示兩張)，並加上 min-height 避免擠壓 */
/* .about .trust_card {
  flex: 1 0 50%;
  height: 50%;
  min-height: 280px;
  padding: 2.5rem 6.5rem 2.5rem 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
} */
/* [舊版] 用 ::after 畫限寬的分隔線 */
/* .about .trust_card:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(100% - 5rem);
  height: 1px;
  background-color: rgba(0, 0, 0, 0.08);
} */
/* [新版] 捲動容器：作為卡片堆疊的相對定位父層，高度由父層 trust_cards_outer 決定 */
.about .trust_cards_scroll {
  position: relative;
  height: 100%;
}

/* [新版] 每張卡片：absolute 疊在同一位置，透過 opacity 淡入淡出 */
.about .trust_card {
  position: absolute;
  inset: 0;
  padding: 2.5rem 6.5rem 2.5rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  opacity: 0;
  -webkit-transition: opacity 0.45s ease;
  transition: opacity 0.45s ease;
  pointer-events: none;
  /* 防止隱藏卡片接收點擊 */
}

/* 當前可見的卡片 */
.about .trust_card.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

.about .trust_card .value_num {
  font-family: var(--font-family-en);
  font-size: 3.5rem;
  font-weight: 300;
  color: rgba(141, 91, 76, 0.18);
  line-height: 1;
  margin-bottom: 1.5rem;
}

.about .trust_card .value_title {
  font-size: 1.4rem;
  color: var(--color-text-primary);
  margin-bottom: 1.2rem;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.about .trust_card .value_desc {
  font-size: 1rem;
  line-height: 2;
  color: var(--color-text-secondary);
}

/* 進度提示直式置右 */
.about .trust_scroll_hint {
  position: absolute;
  right: 1.5rem;
  /* 放在卡片右側預留的 5rem 留白區內，避免被 overflow:hidden 裁切 */
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 0;
  z-index: 10;
}

.about .trust_scroll_hint_text {
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--color-text-secondary);
  opacity: 0.55;
}

.about .trust_scroll_dots {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.8rem;
}

.about .trust_dot {
  width: 3px;
  height: 16px;
  background-color: rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.about .trust_dot.active {
  background-color: var(--color-accent);
  height: 36px;
}

/* 介於桌機與平板之間 (1024px 左右)的過渡：縮小間距與字級以防擠壓 */
@media (max-width: 1199px) {
  .about .trust_layout {
    gap: 3rem;
    /* 從 8rem 縮小 */
  }
  .about .trust_card {
    padding: 2rem 4rem 2rem 0;
    /* 從 2.5rem 6.5rem 縮減 */
    /* [舊版] min-height: 240px; */
  }
  .about .trust_card .value_num {
    font-size: 3rem;
    margin-bottom: 1rem;
  }
  .about .trust_card .value_title {
    font-size: 1.25rem;
    margin-bottom: 0.8rem;
  }
}

/* RWD：手機版 — 取消 sticky，改回普通排列 */
@media (max-width: 991px) {
  .about .trust_sticky_outer {
    height: auto;
  }
  .about .trust_section {
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
  }
  .about .trust_intro {
    margin-bottom: 3rem;
  }
  .about .trust_layout {
    grid-template-columns: 1fr;
    gap: 3rem;
    -webkit-box-flex: 0;
        -ms-flex: none;
            flex: none;
  }
  .about .trust_layout:has(.trust_img--empty) {
    gap: 0;
  }
  .about .trust_img {
    aspect-ratio: 4/3;
    height: auto;
  }
  .about .trust_cards_outer {
    height: auto !important;
  }
  .about .trust_cards_scroll {
    position: static;
    height: auto;
  }
  .about .trust_card {
    position: static !important;
    /* 覆蓋 absolute 與 first-child relative */
    opacity: 1 !important;
    pointer-events: auto !important;
    height: auto;
    padding: 2.5rem 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: none;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-transition: none;
    transition: none;
  }
  .about .trust_card:first-child {
    border-top: none;
    padding-top: 0;
  }
  .about .trust_scroll_hint {
    display: none;
  }
}

/* Method Section - Timeline */
.about .method_section {
  padding: 12rem 0;
  background-image: url("../images/about/method_bg.png");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  position: relative;
  color: var(--color-text-primary);
}

.about .method_section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(238, 233, 225, 0.92);
  /* EEE9E1 color with opacity */
  z-index: 0;
}

.about .method_header {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0 auto 7rem;
  text-align: center;
}

.about .method_timeline {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 4rem 0;
}

/* Center vertical line */
.about .method_timeline::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--color-accent);
  opacity: 0.5;
}

/* Item Wrapper */
.about .timeline_item {
  position: relative;
  width: 50%;
  margin-bottom: 2rem;
  padding-bottom: 3rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* Odd items (Left side) */
.about .timeline_item:nth-child(odd) {
  margin-left: 0;
  margin-right: auto;
  padding-right: 3rem;
  padding-left: 5rem;
  text-align: right;
}

/* Even items (Right side) */
.about .timeline_item:nth-child(even) {
  margin-left: auto;
  margin-right: 0;
  padding-left: 3rem;
  padding-right: 5rem;
  text-align: left;
}

/* Timeline Dots at Center Line */
.about .timeline_item::after {
  content: "";
  position: absolute;
  top: 24px;
  width: 9px;
  height: 9px;
  background-color: var(--color-accent);
  border-radius: 50%;
  z-index: 2;
}

.about .timeline_item:nth-child(odd)::after {
  right: -4px;
  /* Center is on the right edge for left items */
}

.about .timeline_item:nth-child(even)::after {
  left: -4px;
  /* Center is on the left edge for right items */
}

/* Timeline Horizontal Dashed Line */
.about .timeline_item::before {
  content: "";
  position: absolute;
  top: 28px;
  height: 1px;
  border-top: 1px dashed var(--color-accent);
  opacity: 0.5;
  z-index: 1;
}

.about .timeline_item:nth-child(odd)::before {
  left: 28px;
  /* from icon center */
  right: 0;
  /* to center line */
}

.about .timeline_item:nth-child(even)::before {
  left: 0;
  /* from center line */
  right: 28px;
  /* to icon center */
}

/* Icon */
.about .timeline_icon {
  position: absolute;
  top: 0;
  width: 56px;
  height: 56px;
  background-color: var(--color-accent);
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #fff;
  z-index: 3;
}

.about .timeline_item:nth-child(odd) .timeline_icon {
  left: 0;
}

.about .timeline_item:nth-child(even) .timeline_icon {
  right: 0;
}

.about .timeline_icon svg,
.about .timeline_icon img {
  width: 28px;
  height: 28px;
  color: #fff;
}

/* Content */
.about .timeline_content {
  padding-top: 50px;
  /* push below horizontal line and icon */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

/* Adjust content alignment based on side */
.about .timeline_item:nth-child(odd) .timeline_content {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.about .timeline_item:nth-child(even) .timeline_content {
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.about .timeline_step {
  position: absolute;
  top: -35px;
  /* 將文字往上提，避免壓在 top: 28px 的虛線上 */
  font-family: var(--font-family-en);
  font-size: 2.75rem;
  font-weight: 800;
  color: rgba(100, 100, 100, 0.2);
  /* 帶透明度的灰色，低調浮水印感 */
  letter-spacing: 0.05em;
  z-index: 0;
  /* 在層級底下 */
  pointer-events: none;
  line-height: 1;
  white-space: nowrap;
}

/* 左側項目， STEP 文字靠右對齊內容區 */
.about .timeline_item:nth-child(odd) .timeline_step {
  right: 3rem;
}

/* 右側項目， STEP 文字靠左對齊內容區 */
.about .timeline_item:nth-child(even) .timeline_step {
  left: 3rem;
}

.about .timeline_title {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--color-accent);
  margin-bottom: 0.5rem;
}

.about .timeline_desc {
  font-size: 1.05rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* RWD: for mobile, switch to single column */
@media (max-width: 991px) {
  .about .method_timeline::after {
    left: 28px;
  }
  .about .timeline_item {
    width: 100%;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
  }
  .about .timeline_item:nth-child(odd),
  .about .timeline_item:nth-child(even) {
    text-align: left;
    padding-left: 80px;
    padding-right: 0;
    margin-left: 0;
  }
  .about .timeline_item:nth-child(odd)::after,
  .about .timeline_item:nth-child(even)::after {
    left: 24px;
    right: auto;
  }
  .about .timeline_item:nth-child(odd)::before,
  .about .timeline_item:nth-child(even)::before {
    display: none;
  }
  .about .timeline_item:nth-child(odd) .timeline_icon,
  .about .timeline_item:nth-child(even) .timeline_icon {
    left: 0;
    right: auto;
  }
  .about .timeline_item:nth-child(odd) .timeline_content,
  .about .timeline_item:nth-child(even) .timeline_content {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding-top: 10px;
  }
  .about .timeline_item:nth-child(odd) .timeline_step,
  .about .timeline_item:nth-child(even) .timeline_step {
    left: 80px;
    right: auto;
    top: -20px;
    font-size: 2rem;
    /* 手機版縮小 1/2 */
  }
}

/* Medical Team Grid */
.about .team_section {
  padding: 10rem 0;
  background-color: #f6f3ed;
  /* 淡米色底色 */
}

/* 底色改為淡色，標題改為深色對於諮可讀 */
.about .team_section .section_subtitle {
  color: var(--color-accent);
}

.about .team_section .section_title {
  color: var(--color-text-primary);
}

.about .team_section .section_intro {
  color: var(--color-text-secondary);
}

.about .team_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 2rem;
  margin-top: 5rem;
}

.about .team_card {
  background-color: var(--color-bg-primary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 100%;
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
}

.about .team_card:hover {
  -webkit-transform: translateY(-8px);
          transform: translateY(-8px);
}

.about .team_card_img {
  aspect-ratio: 1/1;
  /* 將原本的 4/5 改為 1/1 也就是正方形，讓圖片顯得較短 */
  width: 100%;
  overflow: hidden;
  position: relative;
  background-color: #cbd1d3;
}

.about .team_card_img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
}

.about .team_card_body {
  padding: 2.5rem 2rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  background-color: #ffffff;
  /* 文字內容區白色底色 */
}

.about .team_card_role {
  font-family: var(--font-family-tc);
  font-size: 0.85rem;
  color: var(--color-accent);
  margin-bottom: 0.8rem;
}

.about .team_card_name {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
}

.about .team_card_en {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  margin-bottom: 1.5rem;
  display: block;
}

.about .team_card_separator {
  width: 30px;
  height: 1px;
  background-color: var(--color-accent);
  margin-bottom: 1.5rem;
}

.about .team_card_desc {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--color-text-secondary);
}

/* Transformation Gallery */
.about .transformation_section {
  background-color: var(--color-bg-primary);
}

.about .gallery_carousel_wrap {
  margin-top: 5rem;
  padding: 1rem 0;
}

.about .gallery_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.about .gallery_card {
  text-decoration: none;
}

/* The Space Section (New Marquee Design) */
.about .space_section_new {
  position: relative;
  background-color: transparent;
  /* overflow: hidden 移除 — 此屬性會截斷子元素 margin，
     改讓 marquee_wrap 自身 overflow:hidden 來限制跑馬燈 */
  padding-bottom: 6rem;
}

.about .space_section_new .section_header {
  max-width: 800px;
  margin: 0 auto;
  /* 用 padding 或明確的 container 底部推開距離 */
}

.about .space_marquee_wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* 讓跑馬燈本身限制視窗外的圖片 */
  margin-top: 0;
  padding-bottom: 2rem;
}

/* slick 輪播容器 */
.about .space_marquee_track .slick-slide {
  margin: 0 0.4rem;
}

/* 自定義每個圖片區塊大小 */
.about .space_marquee_item {
  position: relative;
  width: 800px !important;
  height: 600px;
  overflow: hidden;
  cursor: pointer;
}

.about .space_marquee_item img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  transition: -webkit-transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 為了讓文字清楚，加上由下而上的黑色漸層疊加層 */
.about .space_marquee_overlay {
  position: absolute;
  inset: 0;
  background: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.7)), color-stop(50%, rgba(0, 0, 0, 0)));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 50%);
  pointer-events: none;
  z-index: 1;
}

.about .space_marquee_text {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  z-index: 2;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Hover 時，圖片稍微放大 */
.about .space_marquee_item:hover img {
  -webkit-transform: scale(1.06);
          transform: scale(1.06);
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .about .philosophy_cols {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .about .philosophy_col {
    padding: 0;
    padding-top: 3rem;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }
  .about .philosophy_col:first-child {
    padding-top: 0;
    border-top: none;
  }
  .about .team_grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .about .gallery_page {
    grid-template-columns: repeat(2, 1fr);
  }
  .about .space_marquee_item {
    width: 480px !important;
    height: 360px;
  }
}

@media (max-width: 768px) {
  .about .team_grid,
  .about .gallery_page {
    grid-template-columns: 1fr;
  }
  .about .space_marquee_item {
    width: 420px !important;
    height: 315px;
  }
}

@media (max-width: 767px) {
  .about .timeline_dot {
    width: 40px;
    height: 40px;
    font-size: 0.9rem;
    margin-right: 1.5rem;
  }
  .about .timeline_line {
    left: 19px;
    top: 40px;
  }
}

/* ==========================================================================
   Transformation Gallery Carousel
   ========================================================================== */
.about .gallery_slider {
  position: relative;
  overflow: hidden;
  margin-top: 3rem;
  padding-bottom: 2rem;
  /* 為了放控制按鈕 */
}

.about .gallery_slides {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  transition: -webkit-transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), -webkit-transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.about .gallery_page {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 100%;
          flex: 0 0 100%;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding: 0 10px;
  /* 小小內縮防裁切陰影 */
}

/* 控制列 */
.about .gallery_controls {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-top: 3.5rem;
  gap: 2rem;
}

.about .gallery_dots {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.8rem;
}

.about .gallery_dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-accent);
  opacity: 0.3;
  -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
  transition: opacity 0.3s ease, transform 0.3s ease;
  transition: opacity 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease;
}

.about .gallery_dots .dot.active {
  opacity: 1;
  -webkit-transform: scale(1.3);
          transform: scale(1.3);
}

.about .gallery_nav {
  background: none;
  border: 1px solid rgba(0, 0, 0, 0.1);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  color: var(--color-text-primary);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.about .gallery_nav svg {
  width: 20px;
  height: 20px;
}

.about .gallery_nav:hover:not(:disabled) {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}

.about .gallery_nav:disabled {
  opacity: 0.3;
  cursor: default;
}

/* ==========================================================================
   services.css — 服務項目專屬樣式
   所有選擇器均限定作用域
   ========================================================================== */
/* 服務列表容器 */
.services .services_section {
  background-color: var(--color-bg-primary);
  padding: 7rem 0 10rem;
}

/* Extracted from services.html inline styles */
.services .services__hero-title {
  margin-bottom: 0;
}

.services .services__hero-scroll {
  margin-top: 5rem;
}

.services .services__section-header {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* 覆寫標題底部為 6rem，與 tab 下方間距一致 */
.services_section .title-style-1 {
  margin-bottom: 6rem;
}

/* Tab 導航按鈕區塊 */
.services_tabs_nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0;
  margin-bottom: 5rem;
}

.tab_btn {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-family: var(--font-family-tc);
  font-size: 1rem;
  padding: 0.8rem 1.5rem;
  border-radius: 30px;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  letter-spacing: 0.05em;
}

.tab_btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.tab_btn.is-active {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

/* Tab 內容區塊 */
.tab_pane {
  display: none;
  -webkit-animation: fadeInTab 0.5s ease forwards;
          animation: fadeInTab 0.5s ease forwards;
}

.tab_pane.is-active {
  display: block;
}

@-webkit-keyframes fadeInTab {
  from {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes fadeInTab {
  from {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

/* Tab 內的卡片網格 (Grid) */
.services_card_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 6rem;
}

/* 覆寫 services 卡片底色 */
.services_card_grid .card-style-1 {
  background-color: #ece5db;
}

/* 針對 card-style-1 在 services 頁面的微調 (無須大幅修改，依賴 common.css) */
.services_card_grid .card-style-1 .card-title {
  font-size: 1.35rem;
  margin-bottom: 0.8rem;
}

.services_card_grid .card-style-1 .card-desc {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  margin-bottom: 0;
}

@media (hover: hover) {
  .services_card_grid .card-style-1:hover .card-title,
  .services_card_grid .card-style-1:hover .card-desc {
    color: #c49a80;
    -webkit-transition: color 0.4s ease;
    transition: color 0.4s ease;
  }
}

/* RWD */
@media (max-width: 992px) {
  .services_card_grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .services_card_grid {
    grid-template-columns: 1fr;
  }
  .services .services_section {
    padding: 5rem 0 7rem;
  }
  .services_tabs_nav {
    width: 100%;
    gap: 0.85rem;
    margin-bottom: 3.75rem;
    padding: 0.5rem 0;
  }
  .tab_btn {
    width: 100%;
    font-size: 0.9rem;
    padding: 0.95rem 1.35rem;
  }
}

/* ==========================================================================
   gallery.css — 美麗見證頁面專屬樣式
   所有選擇器均限定在 .gallery 作用域下
   ========================================================================== */
/* Hero 區塊：頁面頂部大標語 */
.gallery .gallery_hero {
  position: relative;
  min-height: 50vh;
  background-color: var(--color-bg-secondary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: hidden;
}

.gallery .gallery_hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(141, 91, 76, 0.06) 0%, transparent 60%);
  pointer-events: none;
}

.gallery .gallery_hero_inner {
  width: 100%;
  max-width: var(--container-max-width, 1200px);
  margin: 0 auto;
  padding: 10rem 2rem 6rem;
}

.gallery .gallery_hero_content {
  max-width: 700px;
}

.gallery .gallery_hero_subtitle {
  display: block;
  font-family: var(--font-family-en);
  font-size: 0.8rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 1.5rem;
}

.gallery .gallery_hero_title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 400;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 2rem;
}

.gallery .gallery_hero_desc {
  font-size: 1.1rem;
  color: var(--color-text-secondary);
  line-height: 2;
  max-width: 550px;
}

/* Transformation 輪播 / 網格區塊 */
.gallery .transformation_section {
  background-color: var(--color-bg-primary);
  padding: 7rem 0 10rem;
}

/* Extracted from gallery.html inline styles */
.gallery .gallery__hero-title {
  margin-bottom: 0;
}

.gallery .gallery__hero-scroll {
  margin-top: 5rem;
}

.gallery .gallery__section-header {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.gallery .gallery__carousel-spacing {
  margin-top: 4rem;
}

/* 網格佈局 container override for gallery page, ignoring slider mechanics for now if used purely as a grid */
.gallery .transformation_section .gallery_carousel_wrap {
  margin-top: 4rem;
}

.gallery .gallery_slider,
.gallery .gallery_slides {
  display: block;
  width: 100%;
  position: static !important;
  -webkit-transform: none !important;
          transform: none !important;
  overflow: visible !important;
  height: auto !important;
}

.gallery .gallery_page {
  display: none;
  /* Hide all by default */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
  width: 100%;
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Only show the current page */
.gallery .gallery_page.active {
  display: grid !important;
}

/* Only show the current page, simulating pagination without JS for now, or letting JS handle adding an active class */
.gallery .gallery_page:first-child,
.gallery .gallery_page.active {
  display: grid;
}

/* ——————————————————————— RWD ——————————————————————— */
@media (max-width: 991px) {
  .gallery .gallery_hero_inner {
    padding: 8rem 2rem 5rem;
  }
}

@media (max-width: 768px) {
  .gallery .gallery_hero {
    min-height: 40vh;
  }
  .gallery .gallery_hero_inner {
    padding: 7rem 1.5rem 4rem;
  }
  .gallery .gallery_hero_title {
    font-size: 2rem;
  }
  .gallery .transformation_section {
    padding: 5rem 0 7rem;
  }
}

/* Force grid display and override inherited flex/block */
.gallery .gallery_slider .gallery_slides {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

.gallery .gallery_slider .gallery_page {
  display: grid !important;
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  height: auto !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 2rem !important;
}

@media (max-width: 991px) {
  .gallery .gallery_slider .gallery_page {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .gallery .gallery_slider .gallery_page {
    grid-template-columns: 1fr !important;
  }
}

/* Hide inactive pages if needed, otherwise show first/active */
.gallery .gallery_slider .gallery_page:not(.active):not(:first-child) {
  display: none !important;
}

/* Force cleanup of any lingering slider transform logic in JS */
.gallery .gallery_slider .gallery_slides,
.gallery .gallery_slider .gallery_page {
  -webkit-transform: none !important;
          transform: none !important;
  -webkit-transition: opacity 0.4s ease !important;
  transition: opacity 0.4s ease !important;
}

/* ==========================================================================
   news.css — 診所專欄專屬樣式
   所有選擇器均限定作用域
   ========================================================================== */
.news .news_section {
  background-color: var(--color-bg-primary);
  padding: 7rem 0 10rem;
}

/* 覆寫標題底部為 6rem，與 tab 下方間距一致 */
.news .news_section .title-style-1 {
  margin-bottom: 6rem;
}

/* Extracted from news.html inline styles */
.news .news__hero-title {
  margin-bottom: 0;
}

.news .news__hero-scroll {
  margin-top: 5rem;
}

.news .news__section-header {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* Tab 導航按鈕區塊 */
.news_tabs_nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0;
  margin-bottom: 5rem;
}

.tab_btn {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-family: var(--font-family-tc);
  font-size: 1rem;
  padding: 0.8rem 1.5rem;
  border-radius: 30px;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  letter-spacing: 0.05em;
  text-decoration: none;
}

.tab_btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.tab_btn.is-active {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
}

/* Tab 內容區塊 */
.tab_pane {
  display: none;
  -webkit-animation: fadeInTab 0.5s ease forwards;
          animation: fadeInTab 0.5s ease forwards;
}

.tab_pane.is-active {
  display: block;
}

@keyframes fadeInTab {
  from {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

.news .news_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
}

/* 垂直排版卡片專用 Grid (桌面版 3 欄) */
.news .news_grid.vertical-grid {
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

/* 分頁器 */
.news .pagination {
  margin-top: 5rem;
}

/* RWD */
@media (max-width: 768px) {
  .news .news_grid {
    gap: 3rem;
  }
  /* 垂直排版卡片專用 Grid (手機版 1 欄) */
  .news .news_grid.vertical-grid {
    grid-template-columns: 1fr;
  }
  .news .news_section {
    padding: 5rem 0 7rem;
  }
  .news_tabs_nav {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: 0.75rem;
  }
  .tab_btn {
    width: 100%;
    font-size: 0.9rem;
    padding: 0.85rem 1.2rem;
  }
}

/* ==========================================================================
   contact.css — 聯絡我們專屬樣式
   所有選擇器均限定作用域
   ========================================================================== */
.contact .contact_section {
  background-color: var(--color-bg-primary);
  padding: 7rem 0 10rem;
}

.contact .contact_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  max-width: 800px;
  margin: 0 auto;
}

/* Extracted from contact.html inline styles */
.contact .contact__hero-title {
  margin-bottom: 0;
}

.contact .contact__hero-scroll {
  margin-top: 5rem;
}

.contact .contact__section-header {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.contact .contact__grid-spacing {
  margin-top: 4rem;
}

.contact .contact__submit-group {
  text-align: center;
  margin-top: 2rem;
}

.contact .contact__submit-btn {
  cursor: pointer;
  height: 56px;
  padding: 0 4rem;
  font-size: 1rem;
}

/* 左側：聯絡資訊 */
.contact .contact_info_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2.5rem;
}

.contact .info_item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.5rem;
}

.contact .info_label {
  font-family: var(--font-family-en);
  font-size: 0.85rem;
  color: var(--color-accent);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.contact .info_text {
  font-family: var(--font-family-tc);
  font-size: 1.1rem;
  color: var(--color-text-primary);
  line-height: 1.6;
}

.contact .social_links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.contact .social_link {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--color-text-secondary);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.contact .social_link:hover {
  background-color: var(--color-text-primary);
  border-color: var(--color-text-primary);
  color: var(--color-bg-primary);
}

.contact .social_link svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* 右側：聯絡表單 */
.contact .contact_form_wrap {
  background-color: var(--color-white);
  padding: 3rem;
  border-radius: 12px;
  -webkit-box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
          box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
}

.contact .form_group {
  margin-bottom: 2rem;
}

.contact .form_label {
  display: block;
  font-family: var(--font-family-tc);
  font-size: 0.95rem;
  color: var(--color-text-primary);
  margin-bottom: 0.8rem;
  font-weight: 500;
}

.contact .form_input,
.contact .form_textarea {
  width: 100%;
  padding: 1rem 1.2rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background-color: var(--color-bg-secondary);
  font-family: var(--font-family-tc);
  font-size: 1rem;
  color: var(--color-text-primary);
  -webkit-transition: border-color 0.3s ease;
  transition: border-color 0.3s ease;
}

.contact .form_input::-webkit-input-placeholder, .contact .form_textarea::-webkit-input-placeholder {
  color: var(--color-text-placeholder);
}

.contact .form_input::-moz-placeholder, .contact .form_textarea::-moz-placeholder {
  color: var(--color-text-placeholder);
}

.contact .form_input:-ms-input-placeholder, .contact .form_textarea:-ms-input-placeholder {
  color: var(--color-text-placeholder);
}

.contact .form_input::-ms-input-placeholder, .contact .form_textarea::-ms-input-placeholder {
  color: var(--color-text-placeholder);
}

.contact .form_input::placeholder,
.contact .form_textarea::placeholder {
  color: var(--color-text-placeholder);
}

.contact .form_input:focus,
.contact .form_textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  background-color: var(--color-white);
}

.contact .form_textarea {
  resize: vertical;
  min-height: 150px;
}

.contact .contact_form_submit_btn {
  margin-top: 1rem;
  cursor: pointer;
}

/* Map Section */
.contact .map_section {
  width: 100%;
  height: 500px;
  background-color: var(--color-bg-secondary);
}

.contact .map_iframe {
  width: 100%;
  height: 100%;
  border: 0;
  -webkit-filter: grayscale(80%) contrast(1.2) opacity(0.8);
          filter: grayscale(80%) contrast(1.2) opacity(0.8);
  -webkit-transition: -webkit-filter 0.3s ease;
  transition: -webkit-filter 0.3s ease;
  transition: filter 0.3s ease;
  transition: filter 0.3s ease, -webkit-filter 0.3s ease;
}

.contact .map_iframe:hover {
  -webkit-filter: grayscale(0%) contrast(1) opacity(1);
          filter: grayscale(0%) contrast(1) opacity(1);
}

/* RWD */
@media (max-width: 992px) {
  .contact .contact_form_wrap {
    padding: 2rem;
  }
}

@media (max-width: 768px) {
  .contact .contact_grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .contact .contact_section {
    padding: 5rem 0 7rem;
  }
  .contact .contact_form_wrap {
    padding: 2rem 1.5rem;
  }
  .contact .map_section {
    height: 350px;
  }
}

/* Captcha */
.contact .captcha_row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.contact .captcha_row .captcha_input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 150px;
}

.contact .captcha_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}

.contact .captcha_image {
  height: 45px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: var(--color-bg-secondary);
  border-radius: 4px;
  overflow: hidden;
}

.contact .captcha_image img {
  height: 100%;
  width: auto;
  display: block;
}

.contact .captcha_refresh_btn {
  width: 45px;
  height: 45px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  color: var(--color-text-secondary);
}

@media (hover: hover) {
  .contact .captcha_refresh_btn:hover {
    background-color: rgba(0, 0, 0, 0.03);
    border-color: var(--color-accent);
    color: var(--color-accent);
  }
}

/* detail.css */
/* Styles for detail pages: news_detail, gallery_detail, etc. */
.detail .hero {
  padding: 0;
  margin-top: 92px;
}

.hero {
  max-height: 400px;
  overflow: hidden;
}

.hero img {
  width: 100%;
  height: 400px;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.detail_content {
  padding: 60px 0;
  background: var(--color-bg-primary);
}

.detail_top {
  text-align: left;
  margin-bottom: 50px;
}

.detail_title h1 {
  font-size: 2.8rem;
  /* Between H2(2.5rem) and 3rem */
  font-family: var(--font-family-tc);
  font-weight: 700;
  color: #222222;
  margin-bottom: 20px;
}

.detail_info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: 20px;
  margin-bottom: 30px;
  padding-bottom: 25px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 0.9rem;
}

.detail_info p {
  color: #999999;
  margin-bottom: 0;
}

.detail_img {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.detail_img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.article_navigation {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 60px;
  padding-top: 30px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.article_navigation a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  color: var(--color-text-primary);
  text-decoration: none;
  font-weight: 500;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}

.article_navigation .nav_back {
  color: var(--color-accent);
}

.article_navigation a:hover {
  color: var(--color-accent);
}

@media (max-width: 768px) {
  .article_navigation {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 12px;
  }
  .article_navigation a {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .article_navigation .btn-style-1 {
    margin-top: 0;
    -ms-flex-item-align: center;
        align-self: center;
  }
}

/* Related articles section */
.other_articles {
  padding: 60px 0;
  background: var(--color-bg-secondary, #F5F5F5);
}

.other_articles .section_title {
  text-align: center;
  margin-bottom: 40px;
}

.other_articles .news_grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin-top: 40px;
}

.gallery_detail_page #editor p img,
.gallery_detail_page #editor figure img,
.gallery_detail_page #editor table tr td > img:only-child,
.gallery_detail_page #editor table tr td > p:only-child > img:only-child,
.product_detail_page #editor p img,
.product_detail_page #editor figure img,
.product_detail_page #editor table tr td > img:only-child,
.product_detail_page #editor table tr td > p:only-child > img:only-child {
  width: 100%;
  aspect-ratio: 4 / 3;
  -o-object-fit: cover;
     object-fit: cover;
}

/* ==============================================
   購物車 / 會員相關頁面 - 共用按鈕樣式
   適用：login, checkout, order_detail, order_success, order_failed,
         atm_payment, account_orders
   ============================================== */
/* 按鈕基底 */
.shop_btn {
  display: inline-block;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-align: center;
  border-radius: 9999px;
  cursor: pointer;
  line-height: 1.5;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: background 0.2s, color 0.2s, border-color 0.2s;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.shop_btn:disabled,
.shop_btn.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* 預設：企業色底白字 / Hover：灰底白字 */
.shop_btn_solid {
  background: var(--color-primary);
  color: var(--color-text-white);
  border: 1.5px solid var(--color-primary);
}

@media (hover: hover) {
  .shop_btn_solid:hover {
    background: var(--color-text-disabled);
    color: var(--color-text-white);
    border-color: var(--color-text-disabled);
  }
}

/* 透明底綠字綠邊 → hover 變白底 */
.shop_btn_outline {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}

@media (hover: hover) {
  .shop_btn_outline:hover {
    background: #ffffff;
    color: var(--color-primary);
    border-color: var(--color-primary);
  }
}

/* 咖框淡粉底深灰字 → hover 框與底加深，文字維持不變 */
.shop_btn_ghost {
  background: #ece5db;
  color: #9a765f;
  border: 1px solid #9a765f;
}

@media (hover: hover) {
  .shop_btn_ghost:hover {
    background: #ddd1c2;
    border-color: #86624d;
    color: #86624d;
  }
}

/* ==============================================
   麵包屑共用樣式
   適用：account_settings, account_addresses, order_detail, refund
   ============================================== */
.shop_breadcrumb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
  font-size: 0.85rem;
  color: #666;
  margin-bottom: var(--spacing-md);
}

.shop_breadcrumb a {
  color: #666;
  text-decoration: none;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}

@media (hover: hover) {
  .shop_breadcrumb a:hover {
    color: var(--color-primary);
  }
}

.shop_breadcrumb_current {
  color: var(--color-primary);
  font-weight: 500;
}

.shop_breadcrumb li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.shop_breadcrumb li:not(:last-child)::after {
  content: '/';
  margin-left: 8px;
  color: #999;
}

.shop_breadcrumb .is-current,
.shop_breadcrumb_current {
  color: var(--color-primary);
  font-weight: 500;
}

/* ==============================================
   頁面標題共用樣式
   適用：account_settings, account_addresses, refund 等
   ============================================== */
.shop_page_title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-lg);
}

@media (max-width: 768px) {
  .shop_page_title {
    font-size: 1.4rem;
  }
}

/* ==============================================
   訂單卡片共用樣式
   適用：account, account_orders
   ============================================== */
/* 訂單列表 */
.shop_order_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
}

/* 訂單卡片 */
.shop_order_card {
  display: block;
  background: #fff;
  border: 1px solid rgba(58, 69, 52, 0.25);
  border-radius: 12px;
  text-decoration: none;
  -webkit-transition: -webkit-box-shadow 0.2s ease;
  transition: -webkit-box-shadow 0.2s ease;
  transition: box-shadow 0.2s ease;
  transition: box-shadow 0.2s ease, -webkit-box-shadow 0.2s ease;
}

@media (hover: hover) {
  .shop_order_card:hover {
    -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }
}

/* 卡片 header */
.shop_order_card_header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 16px 20px;
  background: transparent;
  border-bottom: 1px solid #eee;
}

.shop_order_card_info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}

.shop_order_number {
  font-weight: 400;
  font-size: 0.8rem;
  color: #555;
  font-family: var(--font-family-en), var(--font-family-base);
  font-variant-numeric: tabular-nums;
}

.shop_order_date {
  font-size: 0.95rem;
  color: #555;
  font-family: var(--font-family-en), var(--font-family-base);
  font-variant-numeric: tabular-nums;
}

/* 狀態徽章 */
.shop_order_badge {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 9999px;
}

.shop_order_badge::before {
  display: none;
}

.shop_order_badge_pending,
.shop_order_badge_confirming {
  background: #fbf1dc;
  color: #b55a2a;
}

.shop_order_badge_confirming {
  background: #ece5db;
  color: var(--color-primary);
}

.shop_order_badge_packing,
.shop_order_badge_shipped,
.shop_order_badge_delivered {
  background: #e7f1e8;
  color: #3ea55a;
}

.shop_order_badge_completed,
.shop_order_badge_cancelled {
  background: #efefef;
  color: #666;
}

.shop_order_badge_confirming {
  background: #ece5db;
  color: var(--color-primary, #8B7355);
}

.shop_order_badge_refunded {
  background: #e8e8ec;
  color: #555;
}

.shop_order_badge_invalid {
  background: #fce8e8;
  color: #b33;
}

/* 淡粉標題列中的 badge 需要更高對比 */
.checkout_block_title .shop_order_badge {
  padding: 5px 14px;
  -webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
          box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.checkout_block_title .shop_order_badge_pending,
.checkout_block_title .shop_order_badge_confirming {
  background: #fffdf9;
  color: #b55a2a;
  -webkit-box-shadow: inset 0 0 0 1px rgba(181, 90, 42, 0.18);
          box-shadow: inset 0 0 0 1px rgba(181, 90, 42, 0.18);
}

.checkout_block_title .shop_order_badge_confirming {
  background: #fffaf7;
  color: #8e6b53;
}

.checkout_block_title .shop_order_badge_packing,
.checkout_block_title .shop_order_badge_shipped,
.checkout_block_title .shop_order_badge_delivered {
  background: #f4fbf6;
  color: #32864a;
}

.checkout_block_title .shop_order_badge_completed,
.checkout_block_title .shop_order_badge_cancelled {
  background: #f8f8f8;
  color: #5f5f5f;
}

.shop_order_status_line {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 0.85rem;
  color: #888;
}

/* 卡片 body */
.shop_order_card_body {
  padding: 14px 20px;
}

.shop_order_thumbs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.product_card_image,
.shop_order_thumb {
  position: relative;
  overflow: hidden;
  background-color: #f5f5f5;
}

.shop_order_thumb {
  width: 58px;
  height: 58px;
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.product_card_image img,
.shop_order_thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}

.shop_order_thumb_more {
  width: 58px;
  height: 58px;
  border-radius: 8px;
  background: #f5f5f5;
  border: 1px solid rgba(0, 0, 0, 0.08);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 0.85rem;
  color: #666;
  font-weight: 600;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.shop_order_item {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.6;
  margin: 0;
}

/* 卡片 footer */
.shop_order_card_footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 14px 20px;
  border-top: 1px solid #eee;
  margin: 0 20px;
  padding: 14px 0;
}

.shop_order_total {
  font-size: 0.95rem;
  color: #555;
}

.shop_order_total span {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-text-primary);
  font-family: var(--font-family-en), var(--font-family-base);
  font-variant-numeric: tabular-nums;
}

.shop_order_payment_method {
  font-size: 0.82rem;
  color: #666;
  margin-top: 6px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
}

.shop_order_actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 8px;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

/* 訂單卡片 RWD */
@media (max-width: 768px) {
  .shop_order_card_header {
    padding: 14px 16px;
  }
  .shop_order_card_info {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 4px;
  }
  .shop_order_card_body {
    padding: 12px 16px;
  }
  .shop_order_card_footer {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 12px;
    margin: 0 16px;
    padding: 14px 0;
  }
  /* 手機版按鈕：靠右、單列不换行 */
  .shop_order_actions {
    width: 100%;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
  .shop_order_actions .shop_btn {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    min-width: 0;
    text-align: center;
  }
}

/* ==============================================
   自訂下拉選單共用樣式
   適用：checkout, account_addresses 等
   ============================================== */
.shop_dropdown {
  position: relative;
  width: 100%;
}

.shop_dropdown_toggle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  font-size: 0.93rem;
  font-family: inherit;
  color: var(--color-text-primary);
  background: #fff;
  border: 1.5px solid var(--color-primary);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: border-color 0.2s;
  transition: border-color 0.2s;
}

.shop_dropdown_toggle i {
  font-size: 0.75rem;
  color: #666;
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.shop_dropdown.is-open .shop_dropdown_toggle {
  border-color: var(--color-primary);
}

.shop_dropdown.is-open .shop_dropdown_toggle i {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.shop_dropdown_text {
  color: #666;
}

.shop_dropdown_text.is-placeholder {
  color: #999;
}

.shop_dropdown_text.is-selected {
  color: var(--color-text-primary);
}

.shop_dropdown_menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10;
  background: #fff;
  border: 1.5px solid var(--color-primary);
  border-top: none;
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 240px;
  overflow-y: auto;
  -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-radius: 0 0 8px 8px;
}

.shop_dropdown.is-open .shop_dropdown_menu {
  display: block;
}

.shop_dropdown_menu li {
  padding: 10px 12px;
  font-size: 0.93rem;
  color: var(--color-text-primary);
  cursor: pointer;
  -webkit-transition: background 0.15s;
  transition: background 0.15s;
}

@media (hover: hover) {
  .shop_dropdown_toggle:hover {
    border-color: var(--color-primary-dark);
  }
  .shop_dropdown_menu li:hover {
    background: rgba(196, 154, 128, 0.18);
  }
}

.shop_dropdown_menu li.is-active {
  color: var(--color-primary);
}

/* Disabled state（例：鄉鎮在未選縣市前不可點） */
.shop_dropdown.is-disabled .shop_dropdown_toggle {
  background: #f5f5f1;
  border-color: #e3e4de;
  color: var(--color-text-placeholder);
  cursor: not-allowed;
}

.shop_dropdown.is-disabled .shop_dropdown_toggle i {
  opacity: 0.4;
}

.shop_dropdown.is-disabled .shop_dropdown_text {
  color: var(--color-text-placeholder);
}

/* ==============================================
   Shop Base 補併共用表單 / menu / badge utility
   來源：舊共用基礎樣式
   ============================================== */
.cart_badge.is-hidden,
.cart_badge[data-count="0"] {
  display: none;
}

.shop_form_group {
  margin-bottom: var(--spacing-md);
}

.shop_form_group:last-child {
  margin-bottom: 0;
}

.shop_form_label {
  display: block;
  margin-bottom: var(--spacing-xxs);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}

.shop_form_required {
  color: var(--color-danger);
  margin-left: var(--spacing-xxs);
}

.shop_form_input,
.shop_form_textarea {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  color: var(--color-text-primary);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: border-color var(--transition-fast), -webkit-box-shadow var(--transition-fast);
  transition: border-color var(--transition-fast), -webkit-box-shadow var(--transition-fast);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), -webkit-box-shadow var(--transition-fast);
}

.shop_form_input::-webkit-input-placeholder, .shop_form_textarea::-webkit-input-placeholder {
  color: var(--color-text-placeholder);
}

.shop_form_input::-moz-placeholder, .shop_form_textarea::-moz-placeholder {
  color: var(--color-text-placeholder);
}

.shop_form_input:-ms-input-placeholder, .shop_form_textarea:-ms-input-placeholder {
  color: var(--color-text-placeholder);
}

.shop_form_input::-ms-input-placeholder, .shop_form_textarea::-ms-input-placeholder {
  color: var(--color-text-placeholder);
}

.shop_form_input::placeholder,
.shop_form_textarea::placeholder {
  color: var(--color-text-placeholder);
}

.shop_form_input:focus,
.shop_form_textarea:focus {
  outline: none;
  border-color: var(--color-border-active);
  -webkit-box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.12);
          box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.12);
}

.shop_form_textarea {
  min-height: 100px;
  resize: vertical;
}

.shop_form_hint {
  margin: var(--spacing-xxs) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.shop_form_error {
  margin: var(--spacing-xxs) 0 0;
  font-size: var(--font-size-sm);
  color: var(--color-danger);
}

.shop_form_input:-webkit-autofill,
.shop_form_input:-webkit-autofill:hover,
.shop_form_input:-webkit-autofill:focus,
.shop_form_input:-webkit-autofill:active,
.shop_form_textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--color-bg-white) inset !important;
  -webkit-text-fill-color: var(--color-text-primary) !important;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}

.shop_menu {
  position: absolute;
  min-width: 200px;
  margin: 0;
  padding: var(--spacing-xs) 0;
  list-style: none;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  -webkit-box-shadow: var(--shadow-md);
          box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
  -webkit-transition: opacity var(--transition-fast), visibility var(--transition-fast), -webkit-transform var(--transition-fast);
  transition: opacity var(--transition-fast), visibility var(--transition-fast), -webkit-transform var(--transition-fast);
  transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
  transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast), -webkit-transform var(--transition-fast);
  z-index: var(--z-dropdown);
}

.shop_menu.is-open {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.shop_menu_item {
  display: block;
  width: 100%;
  padding: var(--spacing-xs) var(--spacing-md);
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  color: var(--color-text-primary);
  text-align: left;
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-transition: background var(--transition-fast), color var(--transition-fast);
  transition: background var(--transition-fast), color var(--transition-fast);
}

@media (hover: hover) {
  .shop_menu_item:hover {
    background: rgba(var(--color-primary-rgb), 0.08);
    color: var(--color-primary);
  }
}

.shop_menu_divider {
  height: 1px;
  margin: var(--spacing-xs) 0;
  background: var(--color-border);
}

/* 工具類別 */
.is-hidden {
  display: none;
}

/* 區塊標準樣式 */
section {
  padding: var(--spacing-xxl) 0;
  position: relative;
}

/* 手機版區塊間距統一設定 */
@media (max-width: 768px) {
  section {
    padding: var(--spacing-xl) 0;
  }
}

/* 排版輔助類 */
.text-center {
  text-align: center;
}

.text-primary {
  color: var(--color-primary);
}

.text-white {
  color: var(--color-text-white);
}

/* 標準標題樣式 (以首頁服務項目為準) */
.section_header {
  margin-bottom: var(--spacing-xl);
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.section_title-en {
  display: block;
  font-family: var(--font-family-en);
  font-size: var(--font-size-h5);
  /* Updated to 20px (h5) */
  letter-spacing: 0.2em;
  color: var(--color-secondary);
  /* 靜月色 #c2c2b0 */
  text-transform: uppercase;
  margin-bottom: var(--spacing-xs);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.section_title-zh {
  font-size: var(--font-size-h2);
  color: var(--color-text-primary);
  /* 碳黑色 #2a2a2a */
  font-weight: 700;
  margin-bottom: var(--spacing-md);
  letter-spacing: 0.05em;
  /* white-space: nowrap; */
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 768px) {
  .section_title-zh {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
}

.section_desc {
  max-width: 100%;
  margin: 0 auto;
  color: var(--color-text-secondary);
  /* 深海藻色 #3a4534 */
  font-size: var(--font-size-h5);
  /* Updated to 20px */
  line-height: var(--line-height-loose);
  text-align: center;
  /* Desktop: 2 lines */
  /* display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden; */
}

@media (max-width: 768px) {
  .section_desc {
    /* Mobile: 3 lines */
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }
}

/* 卡片標題樣式 */
.card_title {
  font-size: var(--font-size-h2);
  color: var(--color-text-primary);
  font-weight: 700;
  margin-bottom: 2rem;
  letter-spacing: 0.05em;
  line-height: var(--line-height-tight);
}

/* 全局圖片和元素直角設定 */
img {
  border-radius: 0;
}

.card,
.service_card,
.news_card,
.partner_card,
.value_card,
.stat_card {
  border-radius: 0;
}

/* 回到頂部按鈕 */
.btn_top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background-color: transparent;
  color: var(--color-secondary);
  border: 2px solid var(--color-secondary);
  border-radius: 0;
  cursor: pointer;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all var(--transition-normal);
  transition: all var(--transition-normal);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 1.2rem;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.btn_top.show {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.btn_top:hover {
  background-color: #87916d;
  color: #ffffff;
  border-color: #87916d;
  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
}

/* 手機版選單打開時隱藏 top 按鈕 */
body.menu-open .btn_top {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* ==============================================
   Floating Chat Widget
   ============================================== */
.chat_widget {
  position: fixed;
  bottom: 90px;
  /* Above btn_top */
  right: 30px;
  z-index: 1100;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 15px;
}

.chat_toggle {
  width: 50px;
  height: 50px;
  background-color: transparent;
  color: var(--color-secondary);
  border: 2px solid var(--color-secondary);
  border-radius: 0;
  font-size: 1.3rem;
  cursor: pointer;
  -webkit-box-shadow: none;
          box-shadow: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  z-index: 2;
}

.chat_toggle:hover {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  background-color: var(--color-accent);
  color: var(--color-text-white);
  border-color: var(--color-accent);
}

/* Expanded State */
.chat_widget.active .chat_toggle {
  background-color: var(--color-accent);
  color: var(--color-text-white);
  border-color: var(--color-accent);
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

.chat_toggle .fa-times {
  display: none;
}

.chat_widget.active .chat_toggle .fa-comment-dots {
  display: none;
}

.chat_widget.active .chat_toggle .fa-times {
  display: block;
}

/* Options */
.chat_options {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
  gap: 15px;
  padding-bottom: 10px;
}

.chat_option {
  width: 50px;
  height: 50px;
  background-color: var(--color-bg-white);
  border: 2px solid var(--color-secondary);
  border-radius: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: var(--color-secondary);
  -webkit-box-shadow: none;
          box-shadow: none;
  text-decoration: none;
  font-size: 1.2rem;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(20px) scale(0.8);
          transform: translateY(20px) scale(0.8);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.chat_option:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-white);
}

.chat_widget.active .chat_option {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0) scale(1);
          transform: translateY(0) scale(1);
}

/* Staggered Animation Delay */
.chat_widget.active .chat_option:nth-child(1) {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}

.chat_widget.active .chat_option:nth-child(2) {
  -webkit-transition-delay: 0.05s;
          transition-delay: 0.05s;
}

.chat_widget.active .chat_option:nth-child(3) {
  -webkit-transition-delay: 0s;
          transition-delay: 0s;
}

@media (max-width: 768px) {
  .btn_top {
    bottom: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
  }
  .chat_widget {
    bottom: 80px;
    /* 20 (btn_top bottom) + 45 (btn_top height) + 15 (gap) */
    right: 20px;
  }
  .chat_toggle,
  .chat_option {
    width: 45px;
    height: 45px;
    font-size: 1.1rem;
  }
}

/* Hide chat widget when mobile menu is open */
body.menu-open .chat_widget {
  display: none !important;
}

/* 內頁 Hero 通用樣式 (Inner Page Hero) */
.hero_section.inner_page {
  height: 70vh;
  min-height: 600px;
  position: relative;
  overflow: hidden;
  padding: 0;
}

.hero_section.inner_page .hero_full_wrap {
  width: 100%;
  height: 100%;
  position: relative;
}

.hero_section.inner_page .hero_full_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero_section.inner_page .hero_main_img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.hero_section.inner_page .hero_overlay_dim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.3)), to(rgba(0, 0, 0, 0.6)));
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.6));
  z-index: 2;
}

.hero_section.inner_page .hero_floating_content {
  position: relative;
  z-index: 10;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  /* 左對齊 */
  width: calc(100% - 40px);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0 0 30px;
}

.hero_section.inner_page .hero_text_box {
  max-width: 800px;
  text-align: left;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-left: 0;
  /* 修正對齊：移除額外的 margin */
}

.hero_section.inner_page .hero_h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: #ffffff;
  margin-bottom: var(--spacing-md);
  line-height: 1.35;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  /* Fixed to 2 lines on desktop */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero_section.inner_page .hero_para {
  font-size: 1.125rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--spacing-xl);
  max-width: 600px;
  margin-left: 0;
  /* Fixed to 2 lines on desktop */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 內頁大標題樣式 - 底部左側 */
.hero_section.inner_page .hero_bottom_label {
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: 1200px;
  z-index: 5;
  text-align: left;
  pointer-events: none;
  overflow: visible;
  /* 修正裁切：改為 visible */
  line-height: 0.75;
  padding-left: 30px;
}

.hero_section.inner_page .hero_big_brand {
  display: block;
  font-family: var(--font-family-en);
  font-size: clamp(36px, 9vw, 96px);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  white-space: nowrap;
  -webkit-transform: translateY(12%);
          transform: translateY(12%);
  opacity: 1;
}

@media (max-width: 768px) {
  .hero_section.inner_page .hero_text_box {
    margin-left: 0;
    padding: 0 var(--spacing-md);
  }
  .hero_section.inner_page .hero_bottom_label {
    padding-left: var(--spacing-md);
  }
  .hero_section.inner_page .hero_h1 {
    font-size: 2.5rem;
  }
}

/* 卡片標題樣式 */
/* 卡片標題一 - 用於產品介紹等大標題 */
.card_title_1,
.card_title_1 h1,
.card_title_1 h2,
.card_title_1 h3 {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-md);
  color: var(--color-text-primary);
  font-weight: 700;
  line-height: 1.3;
}

.card_title_1 p {
  font-size: var(--font-size-body);
  /* 16px */
  font-weight: 400;
  color: var(--color-text-secondary);
}

/* 卡片標題二 - 用於服務項目等中型標題 */
.card_title_2,
.card_title_2 h1,
.card_title_2 h2,
.card_title_2 h3 {
  font-size: var(--font-size-h5);
  /* 20px */
  font-weight: 700;
  margin-bottom: var(--spacing-md);
  color: var(--color-text-primary);
  line-height: 1.4;
}

.card_title_2 p {
  font-size: var(--font-size-body);
  /* 16px */
  font-weight: 400;
  color: var(--color-text-secondary);
}

/* 卡片標題三 - 用於服務項目等中型標題 */
.card_title_3,
.card_title_3 h1,
.card_title_3 h2,
.card_title_3 h3 {
  font-size: var(--font-size-h4);
  /* 28px */
  color: #2a2a2a;
  margin-bottom: var(--spacing-md);
  font-weight: 700;
  line-height: 1.4;
  /* Fixed 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card_title_3 p {
  font-size: var(--font-size-body);
  /* 16px */
  font-weight: 400;
  color: var(--color-text-secondary);
  /* Fixed 3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 卡片標題四 - 用於小型夥伴卡片等 */
.card_title_4 h1,
.card_title_4 h2,
.card_title_4 h3,
.card_title_4 h4,
.card_title_4 h5,
.card_title_4 h6,
h1.card_title_4,
h2.card_title_4,
h3.card_title_4,
h4.card_title_4,
h5.card_title_4,
h6.card_title_4 {
  font-size: 1.125rem;
  /* 18px */
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: var(--spacing-xs);
  height: calc(1.4em * 2);
  /* 固定兩行 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card_title_4 p {
  font-size: var(--font-size-body);
  /* 16px */
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text-secondary);
  height: calc(1.6em * 2);
  /* 固定兩行 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* 專業團隊成員卡片樣式 */
.team_member_card {
  text-align: left;
  /* 全部靠左對齊 */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  /* 卡片內容上下置中 */
  gap: 10px !important;
  /* 強制覆蓋 flex gap */
}

.team_member_card .team_name {
  margin-bottom: 0;
  /* 改由 gap 或是統一 margin 處理 */
}

.team_member_card .team_position {
  color: var(--color-primary);
  /* 職稱使用品牌綠色 */
  font-size: var(--font-size-h5);
  /* H5 (20px) */
  font-weight: 600;
  margin-bottom: 0;
  /* 移除額外間距 */
  white-space: nowrap;
  /* 固定一行 */
  overflow: hidden;
  text-overflow: ellipsis;
}

.team_member_card .team_bio {
  font-size: var(--font-size-body);
  /* 16px */
  font-weight: 400;
  /* 移除粗體 */
  color: var(--color-text-secondary);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  /* 等長細線 */
  padding-top: 10px;
  /* 線與文字的間距 */
  margin: 0;
  /* 移除外間距，依靠容器 gap */
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  max-width: 100%;
  text-align: left;
  /* 固定五行 */
  line-height: 1.6;
  height: calc(1.6em * 5);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.partners_slider .slick-track {
  padding: 15px 0;
}

/* 手機版 Hero 通用樣式 */
@media (max-width: 768px) {
  .hero_section,
  .hero_section.inner_page {
    height: 668px;
    min-height: auto;
    padding: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    content-visibility: auto;
  }
  /* 調整內容垂直位置 */
  .hero_floating_content,
  .hero_section.inner_page .hero_floating_content {
    padding: 0;
    /* 恢復垂直置中，並移除 desktop 的 padding-left */
  }
  .hero_text_box {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .hero_h1,
  .hero_section.inner_page .hero_h1 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .hero_para,
  .hero_section.inner_page .hero_para {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  /* 手機版底部大字置中 */
  .hero_section.inner_page .hero_bottom_label {
    text-align: center;
    padding-left: 0;
    width: 100%;
    left: 0;
    -webkit-transform: none;
            transform: none;
    /* Reset transform */
  }
  /* Center the button on mobile inner pages */
  .hero_section.inner_page .hero_text_box .btn {
    -ms-flex-item-align: center;
        align-self: center;
  }
}

/* ------------------------------------------------------------
   專案合作夥伴輪播 (共通樣式)
------------------------------------------------------------ */
.partners_section {
  background-color: var(--color-bg-white);
  padding: var(--spacing-xxl) 0;
}

@media (max-width: 768px) {
  .partners_section {
    padding: var(--spacing-xl) 0;
  }
}

.partners_slider {
  padding: 10px 0;
}

/* .partners_slider .slick-track {
  display: flex;
  gap: 20px;
} */
.partners_slider .slick-slide {
  margin: 0 10px;
}

.partners_slider .slick-dots {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 12px;
  margin-top: 40px;
  padding: 0;
  list-style: none;
}

.partners_slider .slick-dots li {
  margin: 0;
  padding: 0;
  width: auto;
  height: auto;
}

.partners_slider .slick-dots li button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #d9d9d9;
  border: none;
  padding: 0;
  font-size: 0;
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.partners_slider .slick-dots li.slick-active button {
  background-color: var(--color-primary);
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}

.partners_slider .slick-dots li:only-child {
  display: none;
}

.partner_card_link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* .partner_card {
  width: 230px;
  height: 280px;
} */
.partner_card_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  height: 100%;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

@media (hover: hover) {
  .partner_card_link:hover .partner_card_inner {
    -webkit-transform: translateY(-5px);
            transform: translateY(-5px);
    -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border-color: var(--color-primary);
  }
}

.partner_logo_wrap {
  background-color: transparent;
  width: 100%;
  height: 130px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 20px;
}

.partner_logo_wrap img {
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}

.partner_content {
  padding: 10px 20px 20px;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.partner_content::before {
  content: "";
  display: block;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.1);
  margin: 0 0 15px;
  width: auto;
}

/* 編輯器標題樣式 (Editor Article Header) */
.editor_article_header {
  max-width: 900px;
  margin: 0 auto 40px;
}

.editor_article_header h1 {
  font-size: 48px;
  letter-spacing: 2px;
  margin-bottom: 10px;
  color: #000000;
  font-weight: 700;
  line-height: 1.2;
}

.editor_article_header .article_info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 5px 20px;
}

.editor_article_header .article_info > div {
  font-size: 14px;
  color: #666666;
  letter-spacing: 1px;
}

/* 單獨的 article_date（product_detail 使用） */
.editor_article_header > .article_date {
  font-size: 14px;
  color: #666666;
  letter-spacing: 1px;
}

/* 產品主圖 (16:9 比例) */
.article_featured_image {
  width: 100%;
  max-width: 900px;
  margin: 20px auto 0;
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid #d0d0d0;
}

.article_featured_image img {
  width: 100%;
  aspect-ratio: 16 / 9;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  margin: 0 auto;
}

/* 響應式調整 */
@media (max-width: 768px) {
  .article_featured_image {
    padding-bottom: var(--spacing-md);
  }
}

/* ==============================================
   編輯器內頁通用樣式 (Detail Page Common Styles)
   ============================================== */
/* 文章內頁相關報導 */
.related_reports {
  background-color: #ebebeb;
  padding: 40px 15px 30px;
  margin-top: 40px;
}

.related_reports:first-child {
  margin-top: 0;
}

.related_reports h2 {
  text-align: center;
  margin-bottom: 40px;
  color: #000;
  font-family: "Albert Sans", "Noto Sans TC", sans-serif;
}

.related_reports .related_reports_content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  width: 100%;
  padding: 0 15px;
  gap: 20px;
}

.related_reports .related_reports_content::-webkit-scrollbar {
  width: 8px;
}

.related_reports .related_reports_content::-webkit-scrollbar-thumb {
  background-color: #aaaaaa;
  border-radius: 30px;
}

@media (hover: hover) {
  .related_reports .related_reports_content a:hover .img_wrap .img_inner {
    -webkit-transform: scale(1.1);
            transform: scale(1.1);
  }
  .related_reports .related_reports_content a:hover .txt::after {
    -webkit-transform: translateX(15px);
            transform: translateX(15px);
  }
}

.related_reports .related_reports_content .item {
  margin-bottom: 3%;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
}

.related_reports .related_reports_content .item .img_wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.related_reports .related_reports_content .item .img_wrap .img_inner {
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  width: 100%;
  padding-top: calc(200 / 301 * 100%);
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.related_reports .related_reports_content .item .txt {
  background-color: #fff;
  width: 100%;
  padding: 15px 20px;
}

.related_reports .related_reports_content .item .txt h6 {
  width: 100%;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  border: none;
  margin: 0 0 10px;
  padding: 0;
  border-radius: 0;
  color: #333;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: 0.03em;
  min-height: calc(20px * 1.3 * 2);
}

.related_reports .related_reports_content .item .txt .related_reports_date {
  display: inline-block;
  font-size: 14px;
  color: var(--color-text-light);
  font-weight: 500;
  font-weight: 500;
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.related_reports .related_reports_content .item .txt .related_reports_word {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: #333;
  margin: 0;
  padding: 10px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  border-top: solid 1px #333;
  min-height: calc(16px * 1.6 * 2 + 10px);
}

.related_reports .related_reports_content .item .txt .btn-secondary {
  color: #333;
  background-color: transparent;
  margin: 20px auto 0;
  width: 100%;
  text-align: center;
  -webkit-box-shadow: none;
          box-shadow: none;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  display: block;
  border: solid 1px #333;
  padding: 5px;
}

@media (hover: hover) {
  .related_reports .related_reports_content .item .txt .btn-secondary:hover {
    color: #fff;
    border-color: var(--color-primary);
    background-color: var(--color-primary);
  }
}

@media (max-width: 768px) {
  .related_reports .related_reports_content {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    max-width: 500px;
    margin: 0 auto;
  }
  .related_reports .related_reports_content .item .txt h6 {
    min-height: auto;
  }
  .related_reports .related_reports_content .item .txt .related_reports_word {
    min-height: auto;
  }
}

/* 編輯器內頁導航按鈕 */
/* 編輯器內頁導航按鈕 */
.editor_nav_btns {
  width: 100%;
  margin: 60px auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  border-top: 1px solid #d0d0d0;
  padding-top: var(--spacing-lg);
}

.editor_nav_btns .btn {
  width: 100%;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .editor_nav_btns {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}

@media (max-width: 600px) {
  .editor_nav_btns {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 40px;
  }
  .editor_nav_btns .btn {
    width: 100%;
  }
}

.detail .content {
  background-color: #ffffff;
  padding-bottom: 0;
}

.detail .content #editor {
  max-width: 900px;
  margin: 0 auto;
}

/* 加入購物車：商品飛入動畫（拋物線由 JS WAAPI 控制） */
.fly_to_cart {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
  -webkit-box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
          box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  will-change: transform, opacity;
}

/* ==============================================
   會員中心版型（共用於 account / account_orders / account_settings）
   ============================================== */
/* 2 欄版型：左側 sticky 卡片 + 右側主內容 */
.ac_layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
}

.ac_layout > * {
  min-width: 0;
}

.ac_sidebar {
  position: sticky;
  top: 96px;
  min-width: 0;
  max-width: 100%;
}

.ac_sidebar_card {
  background: #fff;
  border: 1px solid rgba(58, 69, 52, 0.15);
  border-radius: 12px;
  padding: 24px 20px;
  min-width: 0;
  max-width: 100%;
}

.ac_main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 20px;
  min-width: 0;
  max-width: 100%;
}

/* 會員資訊卡 */
.ac_profile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(58, 69, 52, 0.12);
  text-align: center;
}

.ac_profile_top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}

.ac_avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-secondary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.ac_avatar i {
  font-size: 1.5rem;
  color: #fff;
}

.ac_name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 2px;
}

.ac_member_id {
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 2px;
}

.ac_member_id_label {
  font-size: 0.7rem;
  color: #999;
  letter-spacing: 0.05em;
}

.ac_member_id_value {
  font-size: 0.82rem;
  color: var(--color-text-primary);
  font-family: var(--font-family-en), var(--font-family-base);
  word-break: break-all;
}

/* 側邊卡片內的快速連結改為垂直排列 */
.ac_sidebar_card .ac_quick_links {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2px;
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
  overflow-x: visible;
}

.ac_sidebar_card .ac_quick_link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 10px 12px;
  width: 100%;
  border: 1px solid transparent;
  border-radius: 999px;
  -webkit-transition: color 0.2s, border-color 0.2s;
  transition: color 0.2s, border-color 0.2s;
}

.ac_sidebar_card .ac_quick_link.is_current {
  background: rgba(58, 69, 52, 0.06);
  border-radius: 12px;
}

.ac_sidebar_card .ac_quick_link.is_current::after {
  display: none;
}

@media (max-width: 1024px) {
  .ac_layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .ac_sidebar {
    position: static;
    top: auto;
  }
}

@media (max-width: 768px) {
  .ac_sidebar_card .ac_quick_links {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .ac_sidebar_card .ac_quick_link {
    width: auto;
  }
}

/* ==============================================
   會員中心快速連結（共用於 account / account_orders / order_detail）
   ============================================== */
.ac_quick_links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(58, 69, 52, 0.25);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.ac_quick_links::-webkit-scrollbar {
  display: none;
}

.ac_quick_link {
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  padding: 6px 48px 6px 0;
  background: transparent;
  border: none;
  text-decoration: none;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
  white-space: nowrap;
}

.ac_quick_link i {
  font-size: 0.95rem;
  color: #666;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}

.ac_quick_link span {
  font-size: 0.95rem;
  font-weight: 600;
  color: #666;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}

.ac_quick_link.is_current i {
  color: var(--color-primary);
}

.ac_quick_link.is_current span {
  color: var(--color-primary);
  font-weight: 700;
}

.ac_quick_link.is_current::after {
  content: '';
  position: absolute;
  left: 0;
  right: 48px;
  bottom: -17px;
  height: 2px;
  background: var(--color-primary);
}

@media (hover: hover) {
  .ac_sidebar_card .ac_quick_link:hover {
    border-color: var(--color-primary);
  }
  .ac_sidebar_card .ac_quick_link:hover span,
  .ac_sidebar_card .ac_quick_link:hover i,
  .ac_quick_link:hover span,
  .ac_quick_link:hover i {
    color: var(--color-primary);
  }
}

/* ==============================================
   產品介紹卡片樣式
   ============================================== */
.product_card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow: hidden;
}

a.product_card {
  text-decoration-line: none;
  color: inherit;
}

.product_card:hover {
  -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  -webkit-transform: translateY(-5px);
          transform: translateY(-5px);
}

.product_card_image {
  width: 100%;
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  background: #f7f3ef;
}

.product_card:hover .product_card_image img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

/* Hover 加入購物車按鈕 */
.btn_card_cart {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 0;
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--font-family-base);
  letter-spacing: 0.05em;
  border: none;
  cursor: pointer;
  text-align: center;
  opacity: 0;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 2;
}

.product_card:hover .btn_card_cart {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.btn_card_cart:hover {
  background-color: var(--color-primary);
}

.product_card_content {
  padding: var(--spacing-md);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

/* Responsive adjustment for card content padding */
@media (max-width: 576px) {
  .product_card_content {
    padding: var(--spacing-md);
  }
}

.product_card_title {
  font-family: var(--font-family-zh);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-md);
  line-height: 1.4;
  /* 固定 2 行 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product_card_desc {
  font-size: 0.95rem;
  color: #444;
  line-height: 1.7;
  margin-bottom: var(--spacing-sm);
  -ms-flex-negative: 0;
      flex-shrink: 0;
  /* 固定 2 行 + 省略號 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(0.95rem * 1.7 * 2);
}

/* 價格 wrapper：排成一行 */
.product_card_price_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 10px;
  margin-top: auto;
  padding-top: var(--spacing-xs);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.product_card_price {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.product_card_price_old {
  font-size: 0.85rem;
  font-weight: 400;
  color: #999;
  text-decoration: line-through;
}

.product_card .btn {
  -ms-flex-item-align: center;
      align-self: center;
  /* Center the button */
}

/* 產品卡片按鈕樣式 */
.btn.product_btn {
  border-color: #c2c2b0;
  color: #c2c2b0;
}

@media (hover: hover) {
  .btn.product_btn:hover {
    background-color: #c2c2b0;
    color: var(--color-text-primary);
    border-color: #c2c2b0;
  }
}

/* Related Reports Full Width Section */
body.product_detail_page,
body.news_detail_page,
body.privacy_page {
  background-color: #ffffff;
}

.related_reports_section {
  background-color: #ebebeb;
  padding: 80px 0;
  margin-top: 60px;
  width: 100%;
}

.product_detail_page .content,
.news_detail_page .content {
  background-color: transparent;
}

.related_reports h2 {
  text-align: left;
  margin-bottom: 40px;
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

/* Center alignment for product_detail_page and news_detail_page related reports heading */
.product_detail_page .related_reports h2,
.news_detail_page .related_reports h2 {
  text-align: center;
}

/* news_detail_page: 1 column vertical news items (left text, right image) */
.news_detail_page .related_reports_news_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 30px;
}

.news_detail_page .related_reports_news_list .news_item {
  background-color: #f1ebdf;
  border: 1px solid rgba(0, 0, 0, 0.05);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-transition: all var(--transition-normal);
  transition: all var(--transition-normal);
  height: 350px;
  /* Fixed height for identical appearance */
}

@media (hover: hover) {
  .news_detail_page .related_reports_news_list .news_item:hover {
    -webkit-box-shadow: 0 8px 24px rgba(58, 69, 52, 0.08);
            box-shadow: 0 8px 24px rgba(58, 69, 52, 0.08);
    border-color: var(--color-primary-light);
  }
}

.news_detail_page .related_reports_news_list .news_item_content {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 60%;
          flex: 0 0 60%;
  padding: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  position: relative;
}

.news_detail_page .related_reports_news_list .news_item_content::after {
  content: "";
  position: absolute;
  top: 40px;
  bottom: 40px;
  right: 0;
  width: 1px;
  background-color: rgba(0, 0, 0, 0.1);
}

.news_detail_page .related_reports_news_list .news_item_title {
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.4;
  font-size: var(--font-size-h4);
  /* Match card_title_3 (28px / 1.75rem) */
  color: var(--color-text-primary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Also ensure card_title_3 h3 doesn't add extra margin */
.news_detail_page .related_reports_news_list .news_item_title.card_title_3 {
  margin-bottom: 12px !important;
}

.news_detail_page .related_reports_news_list .news_item_desc {
  font-size: var(--font-size-body);
  color: var(--color-text-secondary);
  line-height: var(--line-height-loose);
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* Match news.css */
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  /* Allow to take space */
}

.news_detail_page .related_reports_news_list .news_item_footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.news_detail_page .related_reports_news_list .news_item_date {
  font-family: var(--font-family-en);
  font-size: var(--font-size-small);
  color: var(--color-text-light);
  letter-spacing: 0.05em;
}

.news_detail_page .related_reports_news_list .news_item_btn {
  border-color: #c2c2b0 !important;
  color: #c2c2b0 !important;
}

@media (hover: hover) {
  .news_detail_page .related_reports_news_list .news_item_btn:hover {
    background-color: #c2c2b0 !important;
    color: var(--color-text-primary) !important;
    border-color: #c2c2b0 !important;
  }
}

.news_detail_page .related_reports_news_list .news_item_image {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 350px;
  overflow: hidden;
}

.news_detail_page .related_reports_news_list .news_item_image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: -webkit-transform 0.6s ease;
  transition: -webkit-transform 0.6s ease;
  transition: transform 0.6s ease;
  transition: transform 0.6s ease, -webkit-transform 0.6s ease;
}

/* Button hover image scaling effect */
@media (hover: hover) {
  .news_detail_page .related_reports_news_list .news_item:has(.news_item_btn:hover) .news_item_image img {
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
  }
}

@media (max-width: 900px) {
  .news_detail_page .related_reports_news_list .news_item {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: auto;
    min-height: auto;
  }
  .news_detail_page .related_reports_news_list .news_item_content {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    padding: var(--spacing-md);
  }
  /* 手機版將垂直線轉為水平線 */
  .news_detail_page .related_reports_news_list .news_item_content::after {
    top: auto;
    bottom: 0;
    left: var(--spacing-md);
    right: var(--spacing-md);
    width: auto;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.1);
  }
  .news_detail_page .related_reports_news_list .news_item_image {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    padding: var(--spacing-md);
  }
}

@media (max-width: 768px) {
  /* 手機版日期與按鈕改為垂直堆疊 */
  .news_detail_page .related_reports_news_list .news_item_footer {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: var(--spacing-sm);
  }
  .news_detail_page .related_reports_news_list .news_item_btn {
    -ms-flex-item-align: center;
        align-self: center;
    width: 100%;
    /* 手機版按鈕通常建議稍微加寬或置中 */
    max-width: 280px;
    margin: 0 auto;
  }
  .news_detail_page .related_reports_news_list .news_item_date {
    margin-bottom: 4px;
  }
}

/* ==========================================================================
   Shop Flow Hero（購物流程頁面共用 hero）
   用法：
     <section class="shop_hero">
       <div class="container">
         <h1>頁面標題</h1>
         <p class="sub">副標</p>
         <nav class="breadcrumbs">
           <a href="index.html">首頁</a>
           <span class="sep">/</span>
           <span class="cur">當前頁</span>
         </nav>
       </div>
     </section>
   適用頁：checkout / product / account / order_* / refund_* / atm_payment 等
   ========================================================================== */
.shop_hero {
  background: var(--color-seaweed);
  color: #fff;
  padding: calc(var(--header-height) + 56px) 0 48px;
}

.shop_hero .container {
  max-width: 1200px;
}

.shop_hero_en {
  margin: 0 0 10px;
  font-family: var(--font-family-en), var(--font-family-base);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.shop_hero h1 {
  font-size: 36px;
  margin: 0 0 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
}

.shop_hero .sub {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin: 0;
}

.shop_hero .breadcrumbs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 14px;
  letter-spacing: 0.04em;
}

.shop_hero .breadcrumbs a {
  color: inherit;
  -webkit-transition: color var(--transition-fast);
  transition: color var(--transition-fast);
}

@media (hover: hover) {
  .shop_hero .breadcrumbs a:hover {
    color: #fff;
  }
}

.shop_hero .breadcrumbs .sep {
  opacity: 0.4;
}

.shop_hero .breadcrumbs .cur {
  color: #fff;
}

@media (max-width: 640px) {
  .shop_hero {
    padding: calc(var(--header-height) + 32px) 0 32px;
  }
  .shop_hero_en {
    font-size: 0.74rem;
    margin-bottom: 8px;
    letter-spacing: 0.14em;
  }
  .shop_hero h1 {
    font-size: 28px;
  }
}

/* ==========================================================================
   Shop Flow 結果頁共用元件（訂單完成 / 失敗）
   用法：wrapper.order_success.checkout 或 wrapper.order_failed.checkout
   ========================================================================== */
/* === 結果卡片（勾勾 / 叉叉 + 標題 + 按鈕） === */
.confirm_hero {
  background: #fff;
  border: 1px solid rgba(58, 69, 52, 0.18);
  border-radius: 12px;
  padding: 48px 32px 40px;
  text-align: center;
}

.confirm_tick {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-ivory);
  border: 1.5px solid var(--color-cider-pear);
  color: var(--color-seaweed);
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  font-size: 1.6rem;
}

.confirm_title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 8px;
}

.confirm_desc {
  font-size: 0.9rem;
  color: #666;
  margin: 0 auto 18px;
  max-width: 640px;
  line-height: 1.7;
}

.confirm_order_no {
  font-family: var(--font-family-en);
  font-size: 0.8rem;
  color: #666;
  letter-spacing: 0.12em;
  margin-bottom: 28px;
}

.confirm_order_no strong {
  color: var(--color-text-primary);
  font-weight: 600;
  margin-left: 4px;
}

.confirm_actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 420px;
  margin: 0 auto;
}

.confirm_actions .shop_btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 0.9rem;
}

/* === 右欄 aside：summary 卡 + email banner 堆疊（間距同左側 checkout_form） === */
.confirm_aside {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 20px;
}

/* 配送/付款之間的分段線（hr 元素，左右撐滿 inner 24px padding）
   用 hr 而非 title border-top，避開 .checkout scope 的 specificity 覆蓋 */
.confirm_section_divider {
  border: 0;
  border-top: 1px solid #e0e0e0;
  margin: 40px -24px 28px;
}

/* === 右欄資訊列：英文 label 上 + 中文 value 下 === */
.confirm_info_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 14px;
}

.confirm_info_row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4px;
  font-size: 0.9rem;
  color: var(--color-text-primary);
  line-height: 1.5;
}

.confirm_info_label {
  font-family: var(--font-family-en);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: #828878;
  text-transform: uppercase;
}

.confirm_status_ok {
  display: inline-block;
  padding: 3px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.5;
  border-radius: 9999px;
  background: #ece5db;
  color: var(--color-primary);
}

.confirm_status_pending {
  display: inline-block;
  padding: 3px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.5;
  border-radius: 9999px;
  background: #fbf1dc;
  color: #b55a2a;
}

/* === Email 提示 banner === */
.confirm_email_banner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid rgba(58, 69, 52, 0.18);
  border-radius: 12px;
  font-size: 0.8rem;
  color: #666;
  line-height: 1.7;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.confirm_email_banner i {
  margin-top: 2px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  color: var(--color-seaweed);
}

.confirm_email_banner strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

@media (max-width: 640px) {
  .confirm_hero {
    padding: 36px 20px 28px;
  }
  .confirm_title {
    font-size: 1.35rem;
  }
  /* 手機版：主按鈕（solid，markup 順序在最後）翻到最上方，次按鈕（ghost）堆在下面。詳見 SKILL.md「Mobile button stacking」。 */
  .confirm_actions {
    grid-template-columns: 1fr;
    max-width: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}

/* ==========================================================================
   Shop Flow Layout & Components（購物流程頁共用）
   適用頁：checkout / payment / order_success / order_failed
   這些頁 wrapper 都帶 .checkout class（雙 class 共用），其他頁不受影響
   ========================================================================== */
body.checkout_page,
body.payment_page,
body.order_success_page,
body.order_failed_page {
  overflow-x: clip;
}

.wrapper.checkout {
  overflow: visible;
}

/* === Steps（購物車 / 結帳 / 付款 / 完成 步驟條） === */
.shop_steps {
  background: #fff;
  border-bottom: 1px solid #e3e4de;
  padding: 0;
}

.shop_steps .container {
  max-width: 1200px;
}

.steps-inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 24px;
  padding: 22px 0;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.step {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 14px;
  color: #828878;
}

.step .num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid #b2b6a9;
  display: grid;
  place-items: center;
  font-family: var(--font-family-en);
  font-weight: 600;
  font-size: 14px;
  background: #fff;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.step_label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}

.step_en {
  font-family: var(--font-family-en);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.step_zh {
  font-size: 12px;
  letter-spacing: 0.05em;
}

.step.active {
  color: var(--color-seaweed);
}

.step.active .num {
  background: var(--color-seaweed);
  color: #fff;
  border-color: var(--color-seaweed);
}

.step.done {
  color: var(--color-carbon);
}

.step.done .num {
  background: var(--color-ivory);
  color: var(--color-seaweed);
  border-color: var(--color-cider-pear);
}

.step-line {
  width: 80px;
  height: 1px;
  background: #b2b6a9;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.step-line.done {
  background: var(--color-cider-pear);
}

@media (max-width: 960px) {
  .step-line {
    width: 48px;
  }
}

@media (max-width: 640px) {
  .steps-inner {
    gap: 10px;
    padding: 14px 0;
  }
  .step {
    gap: 10px;
  }
  .step .num {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  .step_en {
    font-size: 12px;
  }
  .step_zh {
    font-size: 11px;
  }
  .step-line {
    width: 20px;
  }
}

/* === 主區塊 + 雙欄 layout === */
.checkout_section {
  padding: 40px 0 80px;
}

.checkout_section .container {
  max-width: 1200px;
}

.checkout_layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 40px;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.checkout_form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 20px;
}

/* === Block 容器 + 淡粉 header 標題 === */
.checkout_block {
  border: 1px solid rgba(58, 69, 52, 0.25);
  border-radius: 12px;
  padding: 24px;
  background: #fff;
  overflow: visible;
}

.checkout_block_title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: -24px -24px 20px;
  padding: 14px 24px;
  border-radius: 12px 12px 0 0;
  border-bottom: none;
  background: #f3ebe2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
}

.checkout_block_title i {
  color: var(--color-primary);
  font-size: 0.95rem;
}

.checkout_block_note {
  font-size: 0.8rem;
  color: #666;
  margin: -10px 0 16px;
}

/* === Invoice / Payment radio 卡片（多頁共用） === */
.invoice_options {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
}

.invoice_option {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid rgba(58, 69, 52, 0.18);
  border-radius: 10px;
  cursor: pointer;
  position: relative;
  -webkit-transition: background 0.15s, border-color 0.15s;
  transition: background 0.15s, border-color 0.15s;
}

.invoice_option > input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.invoice_option_radio {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1.5px solid rgba(58, 69, 52, 0.4);
  border-radius: 50%;
  position: relative;
  background: #fff;
  -webkit-transition: border-color 0.15s;
  transition: border-color 0.15s;
}

.invoice_option_radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--color-seaweed);
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: -webkit-transform 0.15s;
  transition: -webkit-transform 0.15s;
  transition: transform 0.15s;
  transition: transform 0.15s, -webkit-transform 0.15s;
}

.invoice_option.is-active .invoice_option_radio {
  border-color: var(--color-seaweed);
}

.invoice_option.is-active .invoice_option_radio::after {
  -webkit-transform: scale(1);
          transform: scale(1);
}

.invoice_option.is-active {
  background: rgba(196, 154, 128, 0.1);
  border-color: var(--color-seaweed);
}

.invoice_option_body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px;
}

.invoice_option_title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.invoice_option_hint_inline {
  font-size: 0.82rem;
  color: #666;
  line-height: 1.4;
}

.invoice_option_extra {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 260px;
          flex: 0 1 260px;
  max-width: 260px;
  display: none;
}

.invoice_option.is-active .invoice_option_extra {
  display: block;
}

@media (max-width: 640px) {
  .invoice_option {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .invoice_option_extra {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    max-width: 100%;
    /* 移除 margin-left：避免 flex 100% + margin 造成溢出 */
    margin-left: 0;
    margin-top: 8px;
  }
}

/* === 右欄訂單摘要 sticky === */
.checkout_summary {
  position: sticky;
  top: calc(var(--header-height) + 40px);
  grid-column: 2;
  grid-row: 1 / span 2;
}

.checkout_summary_inner {
  border: 1px solid rgba(58, 69, 52, 0.25);
  border-radius: 12px;
  padding: 24px;
  background-color: #fff;
}

.checkout_summary_title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e0e0e0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
}

.checkout_summary_title i {
  color: var(--color-primary);
  font-size: 0.95rem;
}

/* 商品列表 */
.checkout_items {
  margin-bottom: 20px;
}

.checkout_item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.checkout_item:last-child {
  border-bottom: none;
}

.checkout_item_img {
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 56px;
  height: 56px;
  background: #f5f5f5;
  border: 1px solid #eee;
  border-radius: 8px;
}

.checkout_item_img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.checkout_item_info {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.checkout_item_name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.checkout_item_spec {
  font-size: 0.78rem;
  color: #666;
}

.checkout_item_detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 2px;
}

.checkout_item_qty {
  font-size: 0.8rem;
  color: #666;
}

.checkout_item_price {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.checkout_item_price del {
  font-size: 0.75rem;
  font-weight: 400;
  color: #999;
  margin-right: 4px;
}

/* 金額明細 */
.checkout_amounts {
  border-top: 1px solid #e0e0e0;
  padding-top: 16px;
  margin-bottom: 20px;
}

.checkout_amount_row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 6px 0;
  font-size: 0.9rem;
  color: #666;
}

.checkout_total {
  padding-top: 12px;
  margin-top: 8px;
  border-top: 1px solid #e0e0e0;
  font-weight: 700;
  color: var(--color-text-primary);
}

.checkout_total_price {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--color-primary);
}

.checkout_secure_note {
  font-size: 0.75rem;
  color: #666;
  text-align: center;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 5px;
}

.checkout_secure_note i {
  font-size: 0.7rem;
}

/* === 底部動作列（左次右主按鈕，寬度 200px） === */
.checkout_submit_btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-size: 1rem;
}

/* .checkout_actions 已移至 .checkout_layout 直接子元素：
   桌機版固定在左欄（grid-column: 1），手機版 order:3 排在摘要之後 */
.checkout_actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
  /* 桌機：grid 子元素，固定在第一欄，grid gap 已提供間距，不需 margin-top */
  grid-column: 1;
  align-self: start;
}

.checkout_actions > .shop_btn {
  width: 200px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 0.9rem;
}

@media (max-width: 640px) {
  .checkout_actions {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    width: 100%;
    gap: 12px;
  }
  .checkout_actions > .shop_btn {
    width: 100%;
  }
}

/* === 響應式：900px 雙欄摺單欄 + sticky 失效 === */
@media (max-width: 900px) {
  .checkout_layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .checkout_summary {
    position: static;
    grid-column: auto;
    grid-row: auto;
  }
}

@media (max-width: 768px) {
  .checkout_block {
    padding: 18px;
  }
  .checkout_block_title {
    margin: -18px -18px 16px;
    padding: 12px 18px;
  }
}

/* Shop flow mobile corrections from SKILL.md */
@media (max-width: 768px) {
  .ac_sidebar_card .ac_quick_links {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    overflow-x: visible;
    -webkit-overflow-scrolling: auto;
    overscroll-behavior-x: auto;
  }
  .ac_sidebar_card .ac_quick_link {
    width: 100%;
  }
  .shop_order_card_footer {
    gap: 16px;
  }
  .shop_order_actions {
    gap: 14px;
  }
}

.steps-inner {
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

@media (max-width: 960px) {
  .steps-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
    -webkit-column-gap: 6px;
       -moz-column-gap: 6px;
            column-gap: 6px;
    padding: 16px 12px;
  }
  .step {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px;
    text-align: center;
    width: 100%;
  }
  .step .num {
    width: 32px;
    height: 32px;
    font-size: 12px;
  }
  .step_label {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    text-align: center;
  }
  .step_en {
    font-size: 10px;
    letter-spacing: 0.04em;
  }
  .step_zh {
    font-size: 11px;
  }
  .step-line {
    display: block;
    width: 24px;
    height: 1px;
    margin-top: 15px;
    -ms-flex-item-align: start;
        align-self: start;
  }
  .checkout_layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .checkout_summary {
    position: static;
    grid-column: auto;
    grid-row: auto;
  }
  /* 手機版排序：表單欄位 → 訂單摘要 → 動作按鈕 */
  .checkout_page .checkout_form,
  .payment_page .checkout_form {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .checkout_page .checkout_summary,
  .payment_page .checkout_summary {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .checkout_page .checkout_actions,
  .payment_page .checkout_actions {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
}

@media (max-width: 640px) {
  .checkout_item {
    display: grid;
    grid-template-columns: auto 1fr;
    -webkit-column-gap: 12px;
       -moz-column-gap: 12px;
            column-gap: 12px;
    row-gap: 6px;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;
  }
  .checkout_item_img {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
  }
  .checkout_item_info {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
  }
  .checkout_item_detail {
    grid-column: 2;
    grid-row: 2;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 4px;
  }
  .checkout_item_name,
  .checkout_item_spec {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ── 按鈕 spinner（通用） ───────────────────────── */
.shop_btn_spinner {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: shop_btn_spin 0.6s linear infinite;
          animation: shop_btn_spin 0.6s linear infinite;
  vertical-align: middle;
}

@-webkit-keyframes shop_btn_spin {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes shop_btn_spin {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

/* ==============================================
   購物車側邊欄
   ============================================== */
/* 遮罩 */
.cart_sidebar_overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.cart_sidebar_overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* 側邊欄 */
.cart_sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  max-width: 100%;
  height: 100vh;
  background-color: var(--color-bg-white);
  z-index: 1101;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: -webkit-transform 0.35s ease;
  transition: -webkit-transform 0.35s ease;
  transition: transform 0.35s ease;
  transition: transform 0.35s ease, -webkit-transform 0.35s ease;
  -webkit-box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
          box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
}

.cart_sidebar.is-open {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

/* Header */
.cart_sidebar_header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--color-border);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.cart_sidebar_header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

.cart_sidebar_close {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-light);
  font-size: 1.1rem;
  border-radius: 50%;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.cart_sidebar_close:hover {
  background-color: var(--color-bg-light);
  color: var(--color-text-primary);
}

/* Body - 商品列表 */
.cart_sidebar_body {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow-y: auto;
  padding: 16px 24px;
}

/* 商品項目 */
.cart_item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--color-bg-light);
  position: relative;
}

.cart_item:last-child {
  border-bottom: none;
}

.cart_item_img {
  width: 80px;
  height: 80px;
  border-radius: 4px;
  overflow: hidden;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  background: var(--color-bg-secondary);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: var(--color-text-disabled);
  font-size: 1.5rem;
}

.cart_item_img:empty::before {
  content: "\f03e";
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
}

.cart_item_img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.cart_item_info {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cart_item_name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-primary);
  text-decoration: none;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

.cart_item_name:hover {
  color: var(--color-primary);
}

.cart_item_spec {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
}

.cart_item_price {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-primary);
  margin-top: 2px;
}

.cart_item_price del {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--color-text-light);
  margin-right: 4px;
}

/* 數量 */
.cart_item_qty {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: 1px solid var(--color-border-strong);
  border-radius: 3px;
  overflow: hidden;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 4px;
}

.cart_qty_btn {
  width: 28px;
  height: 28px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--color-bg-light);
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  -webkit-transition: background 0.2s ease;
  transition: background 0.2s ease;
}

.cart_qty_btn:hover {
  background: var(--color-border);
}

.cart_qty_input {
  width: 36px;
  height: 28px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--color-border-strong);
  border-right: 1px solid var(--color-border-strong);
  font-size: 0.8rem;
  font-weight: 500;
  font-family: var(--font-family-base);
  -webkit-appearance: textfield;
          appearance: textfield;
  -moz-appearance: textfield;
  color: var(--color-text-primary);
}

.cart_qty_input::-webkit-outer-spin-button,
.cart_qty_input::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

/* 空購物車 */
.cart_empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 100%;
  min-height: 200px;
}

.cart_empty p {
  font-size: 0.9rem;
  color: var(--color-text-light);
  margin: 0;
}

/* 刪除按鈕 */
.cart_item_remove {
  position: absolute;
  top: 16px;
  right: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-light);
  font-size: 0.85rem;
  padding: 4px;
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

.cart_item_remove:hover {
  color: var(--color-danger);
}

/* Footer */
.cart_sidebar_footer {
  padding: 20px 24px;
  border-top: 1px solid var(--color-border);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.cart_sidebar_total {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 16px;
}

.cart_sidebar_total span:first-child {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

.cart_total_price {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.cart_checkout_btn {
  display: block;
  width: 100%;
  height: auto;
  text-align: center;
  padding: 14px 0;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: none;
  background-color: var(--color-accent);
  color: var(--color-white);
  border: 1px solid var(--color-accent);
  border-radius: 50px;
  -webkit-transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

@media (hover: hover) {
  .cart_checkout_btn:hover {
    background-color: var(--color-text-disabled);
    border-color: var(--color-text-disabled);
    color: var(--color-white);
  }
}

/* 無效商品（已下架 / 規格停售） */
.cart_item_invalid {
  opacity: 0.55;
}

.cart_item_invalid .cart_item_img {
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
}

.cart_item_invalid .cart_item_name {
  text-decoration: line-through;
  text-decoration-color: var(--color-text-light);
}

.cart_item_invalid_msg {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-danger);
  margin-top: 2px;
}

.cart_item_invalid_msg i {
  font-size: 0.7rem;
}

/* 價格已更新提示 */
.cart_item_price_changed {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--color-warning);
  margin-top: 2px;
}

.cart_item_price_changed i {
  font-size: 0.65rem;
}

/* 結帳按鈕禁用 */
.cart_checkout_btn.is-disabled {
  background-color: var(--color-text-disabled);
  border-color: var(--color-text-disabled);
  color: var(--color-white);
  pointer-events: none;
  cursor: default;
}

/* ==============================================
   響應式
   ============================================== */
@media (max-width: 480px) {
  .cart_sidebar {
    width: 100%;
  }
}

/* ==============================================
   登入彈窗（共用組件，可覆蓋於任何頁面）
   ============================================== */
/* 半透明背景遮罩（預設隱藏，.is-open 顯示） */
.login_modal_overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  /* backdrop-filter: blur(4px); */
  /* -webkit-backdrop-filter: blur(4px); */
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.login_modal_overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* 置中容器（fixed，覆蓋整個視窗） */
.login_modal_container {
  position: fixed;
  inset: 0;
  z-index: 1101;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  -webkit-transition: opacity 0.3s ease, visibility 0.3s ease;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.login_modal_container.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* 鎖定頁面捲動 */
body.is-login-open {
  overflow: hidden;
}

/* 彈窗主體 */
.login_modal {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--color-bg-white);
  border-radius: 0;
  -webkit-box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
          box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  padding: 28px 28px 24px;
}

.login_modal_container.is-open .login_modal {
  -webkit-animation: login_modal_in 0.3s ease;
          animation: login_modal_in 0.3s ease;
}

@-webkit-keyframes login_modal_in {
  from {
    opacity: 0;
    -webkit-transform: translateY(20px) scale(0.97);
            transform: translateY(20px) scale(0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1);
  }
}

@keyframes login_modal_in {
  from {
    opacity: 0;
    -webkit-transform: translateY(20px) scale(0.97);
            transform: translateY(20px) scale(0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1);
  }
}

/* 標題列 */
.login_modal .login_modal_header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 12px;
  margin-bottom: 22px;
}

.login_modal .login_title {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

/* 關閉按鈕：細企業色描邊 + 企業色 X */
.login_modal .login_modal_close {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 0;
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 0;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: background 0.2s, color 0.2s, border-color 0.2s;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

@media (hover: hover) {
  .login_modal .login_modal_close:hover {
    background: var(--color-accent);
    color: var(--color-bg-white);
  }
}

/* 社群登入群組：圖示按鈕均分欄位（flex 自動適應 2 / 3 個按鈕） */
.login_modal .login_social_group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}

.login_modal .login_social_btn {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 56px;
  min-width: 0;
  background: var(--color-bg-white);
  border: 1.5px solid var(--color-bg-soft);
  border-radius: 0;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  padding: 0;
}

.login_modal .login_social_btn i {
  font-size: 1.5rem;
}

.login_modal .login_google i {
  background: conic-gradient(from -45deg, #4285f4 0deg 90deg, #ea4335 90deg 180deg, #fbbc05 180deg 270deg, #34a853 270deg 360deg);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Fallback: 沒有漸層也能顯示 Google 標準藍 */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .login_modal .login_google i {
    color: #4285f4;
  }
}

.login_modal .login_facebook i {
  color: #1877f2;
}

.login_modal .login_line i {
  color: #06c755;
}

@media (hover: hover) {
  .login_modal .login_social_btn:hover {
    background: var(--color-bg-soft);
    border-color: var(--color-text-light);
  }
}

/* 分隔線 */
.login_modal .login_divider {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
  margin: 18px 0;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}

.login_modal .login_divider::before,
.login_modal .login_divider::after {
  content: '';
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 1px;
  background: var(--color-bg-soft);
}

/* 電子郵件輸入列 */
.login_modal .login_email_form {
  margin: 0;
}

.login_modal .login_email_wrap {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: var(--color-bg-white);
  border: 1.5px solid var(--color-bg-soft);
  border-radius: 0;
  -webkit-transition: border-color 0.2s;
  transition: border-color 0.2s;
}

.login_modal .login_email_wrap:focus-within {
  border-color: var(--color-primary);
}

.login_modal .login_email_input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  height: 56px;
  padding: 0 16px;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--color-text-primary);
  background: transparent;
  border: none;
  outline: none;
}

.login_modal .login_email_input::-webkit-input-placeholder {
  color: var(--color-text-placeholder);
}

.login_modal .login_email_input::-moz-placeholder {
  color: var(--color-text-placeholder);
}

.login_modal .login_email_input:-ms-input-placeholder {
  color: var(--color-text-placeholder);
}

.login_modal .login_email_input::-ms-input-placeholder {
  color: var(--color-text-placeholder);
}

.login_modal .login_email_input::placeholder {
  color: var(--color-text-placeholder);
}

/* 覆蓋瀏覽器 autofill 的淺藍背景 */
.login_modal .login_email_input:-webkit-autofill,
.login_modal .login_email_input:-webkit-autofill:hover,
.login_modal .login_email_input:-webkit-autofill:focus,
.login_modal .login_email_input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--color-bg-light) inset !important;
  -webkit-text-fill-color: var(--color-text-primary) !important;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}

.login_modal .login_email_submit {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin-right: 6px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: 1rem;
  -webkit-transition: background 0.2s, color 0.2s;
  transition: background 0.2s, color 0.2s;
}

@media (hover: hover) {
  .login_modal .login_email_submit:hover {
    color: var(--color-primary);
  }
}

/* 輸入有值時：欄位淺綠底、送出鈕變綠底白箭頭 */
.login_modal .login_email_wrap:has(.login_email_input:not(:-moz-placeholder)) {
  background: var(--color-bg-light);
  border-color: var(--color-primary);
}
.login_modal .login_email_wrap:has(.login_email_input:not(:-ms-input-placeholder)) {
  background: var(--color-bg-light);
  border-color: var(--color-primary);
}
.login_modal .login_email_wrap:has(.login_email_input:not(:placeholder-shown)) {
  background: var(--color-bg-light);
  border-color: var(--color-primary);
}

.login_modal .login_email_wrap:has(.login_email_input:not(:-moz-placeholder)) .login_email_submit {
  background: var(--color-primary);
  color: var(--color-bg-white);
}

.login_modal .login_email_wrap:has(.login_email_input:not(:-ms-input-placeholder)) .login_email_submit {
  background: var(--color-primary);
  color: var(--color-bg-white);
}

.login_modal .login_email_wrap:has(.login_email_input:not(:placeholder-shown)) .login_email_submit {
  background: var(--color-primary);
  color: var(--color-bg-white);
}

@media (hover: hover) {
  .login_modal .login_email_wrap:has(.login_email_input:not(:-moz-placeholder)) .login_email_submit:hover {
    background: var(--color-primary-dark);
    color: var(--color-bg-white);
  }
  .login_modal .login_email_wrap:has(.login_email_input:not(:-ms-input-placeholder)) .login_email_submit:hover {
    background: var(--color-primary-dark);
    color: var(--color-bg-white);
  }
  .login_modal .login_email_wrap:has(.login_email_input:not(:placeholder-shown)) .login_email_submit:hover {
    background: var(--color-primary-dark);
    color: var(--color-bg-white);
  }
}

/* 底部按鈕組：兩欄外框主按鈕 */
.login_modal .login_modal_actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 20px;
}

.login_modal .login_modal_actions .shop_btn {
  height: 56px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-size: 0.95rem;
}

/* ============ 步驟 2：輸入驗證碼 ============ */
.login_modal .login_step_code {
  -webkit-animation: login_step_fade 0.25s ease;
          animation: login_step_fade 0.25s ease;
}

@-webkit-keyframes login_step_fade {
  from {
    opacity: 0;
    -webkit-transform: translateY(6px);
            transform: translateY(6px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes login_step_fade {
  from {
    opacity: 0;
    -webkit-transform: translateY(6px);
            transform: translateY(6px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

.login_modal .login_step_title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 8px;
}

.login_modal .login_step_desc {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  margin: 0 0 18px;
}

.login_modal .login_sent_email {
  color: var(--color-text-primary);
  font-weight: 500;
}

.login_modal .login_code_form {
  margin: 0 0 14px;
}

.login_modal .login_code_input {
  width: 100%;
  height: 56px;
  padding: 0 16px;
  font-size: 1rem;
  font-family: inherit;
  letter-spacing: 0.3em;
  color: var(--color-text-primary);
  background: var(--color-bg-white);
  border: 1.5px solid var(--color-bg-soft);
  border-radius: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: border-color 0.2s, background 0.2s;
  transition: border-color 0.2s, background 0.2s;
}

.login_modal .login_code_input::-webkit-input-placeholder {
  color: var(--color-text-placeholder);
  letter-spacing: normal;
}

.login_modal .login_code_input::-moz-placeholder {
  color: var(--color-text-placeholder);
  letter-spacing: normal;
}

.login_modal .login_code_input:-ms-input-placeholder {
  color: var(--color-text-placeholder);
  letter-spacing: normal;
}

.login_modal .login_code_input::-ms-input-placeholder {
  color: var(--color-text-placeholder);
  letter-spacing: normal;
}

.login_modal .login_code_input::placeholder {
  color: var(--color-text-placeholder);
  letter-spacing: normal;
}

.login_modal .login_code_input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.login_modal .login_code_input:not(:-moz-placeholder) {
  background: var(--color-bg-light);
  border-color: var(--color-primary);
}

.login_modal .login_code_input:not(:-ms-input-placeholder) {
  background: var(--color-bg-light);
  border-color: var(--color-primary);
}

.login_modal .login_code_input:not(:placeholder-shown) {
  background: var(--color-bg-light);
  border-color: var(--color-primary);
}

/* 提交按鈕：主按鈕樣式（企業色底 + 白字 → hover 灰底白字），
   直接定義於本檔讓 login 彈窗自足，不依賴 shop_btn_solid 串聯 */
.login_modal .login_code_submit {
  display: block;
  width: 100%;
  height: 56px;
  margin-top: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.05em;
  background: var(--color-primary);
  color: var(--color-bg-white);
  border: 1.5px solid var(--color-primary);
  border-radius: 0;
  cursor: pointer;
  -webkit-transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

@media (hover: hover) {
  .login_modal .login_code_submit:hover {
    background: var(--color-text-disabled);
    border-color: var(--color-text-disabled);
    color: var(--color-bg-white);
  }
}

/* 切換 email 連結 */
.login_modal .login_back_to_email {
  display: block;
  width: 100%;
  padding: 8px 0;
  background: none;
  border: none;
  color: var(--color-primary);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}

@media (hover: hover) {
  .login_modal .login_back_to_email:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
  }
}

/* 使用條款提示 */
.login_modal .login_terms_text {
  text-align: center;
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

.login_modal .login_terms_link {
  color: var(--color-text-secondary);
  text-decoration: underline;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}

@media (hover: hover) {
  .login_modal .login_terms_link:hover {
    color: var(--color-primary);
  }
}

/* 按鈕 loading spinner */
.login_modal .login_spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: login_spin 0.6s linear infinite;
          animation: login_spin 0.6s linear infinite;
}

@-webkit-keyframes login_spin {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes login_spin {
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

/* 錯誤訊息 */
.login_modal .login_error_msg {
  margin: 10px 0 0;
  padding: 8px 12px;
  font-size: 0.85rem;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0;
}

/* 重新發送驗證碼 */
.login_modal .login_resend_row {
  text-align: center;
  margin: 12px 0 0;
}

.login_modal .login_resend_btn {
  background: none;
  border: none;
  color: var(--color-primary);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 0;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}

.login_modal .login_resend_btn:disabled {
  color: var(--color-text-disabled, #c2bdb8);
  cursor: default;
}

@media (hover: hover) {
  .login_modal .login_resend_btn:not(:disabled):hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
  }
}

/* RWD 480px */
@media (max-width: 480px) {
  .login_modal .login_title {
    font-size: 1.15rem;
  }
  .login_modal {
    padding: 22px 18px 18px;
  }
  .login_modal_container {
    padding: 12px;
  }
  .login_modal .login_social_btn,
  .login_modal .login_email_input,
  .login_modal .login_modal_actions .shop_btn {
    height: 50px;
  }
}

/* ==============================================
   個人中心首頁
   所有規則皆限定在 .account 範圍內
   ============================================== */
.account .ac_section {
  padding-top: var(--spacing-xl);
  padding-bottom: 80px;
  min-height: 60vh;
}

.account .ac_container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* 版型共用樣式（.ac_layout / .ac_sidebar / .ac_sidebar_card / .ac_main / .ac_profile / .ac_avatar / .ac_name / .ac_member_id*）
   已移至 common.css，供 account / account_orders / account_settings 共用 */
/* 概覽統計（依張數均分寬度） */
.account .ac_stats {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 14px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.account .ac_stat_card {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0px;
          flex: 1 1 0;
  min-width: 0;
  background: var(--color-bg-white);
  border: 1px solid rgba(var(--color-primary-rgb), 0.15);
  border-radius: 12px;
  padding: 20px 22px;
}

.account .ac_stat_label {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-family-en), var(--font-family-base);
}

.account .ac_stat_value {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 6px;
  margin-top: 10px;
}

.account .ac_stat_num {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--color-text-primary);
  font-family: var(--font-family-en), var(--font-family-base);
}

.account .ac_stat_unit {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

/* 最近訂單區塊 */
.account .ac_section_header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: var(--spacing-sm);
}

.account .ac_section_title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.account .ac_view_all {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  text-decoration: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4px;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}

@media (hover: hover) {
  .account .ac_view_all:hover {
    color: var(--color-primary);
  }
}

/* 卡片按鈕尺寸 */
.account .shop_order_actions .shop_btn,
.account .shop_order_card_footer .shop_btn {
  padding: 6px 16px;
  font-size: 0.8rem;
}

/* RWD */
@media (max-width: 1024px) {
  .account .ac_stat_card {
    -ms-flex-preferred-size: calc(50% - 7px);
        flex-basis: calc(50% - 7px);
  }
}

@media (max-width: 768px) {
  .account .ac_section {
    padding-top: var(--spacing-lg);
  }
  /* 卡片按鈕：固定 1/3 寬、靠右（1~3 顔均靠右） */
  .account .shop_order_actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    width: 100%;
    -ms-flex-item-align: end;
        align-self: flex-end;
    gap: 8px;
  }
  .account .shop_order_actions .shop_btn,
  .account .shop_order_card_footer .shop_btn {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 16px) / 3);
            flex: 0 0 calc((100% - 16px) / 3);
    max-width: calc((100% - 16px) / 3);
    padding: 7px 4px;
    font-size: 0.78rem;
    text-align: center;
  }
}

@media (max-width: 480px) {
  .account .ac_stat_card {
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
  .account .ac_stat_num {
    font-size: 1.5rem;
  }
}

/* ==============================================
   我的訂單頁
   ============================================== */
/* 麵包屑 */
.account_orders .orders_breadcrumb {
  padding-top: calc(var(--header-height) + 40px);
  padding-bottom: 10px;
}

.account_orders .orders_breadcrumb .container {
  max-width: 1200px;
}

.account_orders .breadcrumb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}

.account_orders .breadcrumb li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.account_orders .breadcrumb li:not(:last-child)::after {
  content: '>';
  margin: 0 8px;
  color: var(--color-text-secondary);
}

.account_orders .breadcrumb li a {
  color: var(--color-text-secondary);
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

@media (hover: hover) {
  .account_orders .breadcrumb li a:hover {
    color: var(--color-primary);
  }
}

.account_orders .breadcrumb li.active {
  color: var(--color-primary);
  font-weight: 500;
}

/* 訂單主區塊 */
.account_orders .orders_section {
  padding: var(--spacing-xl) 0 80px;
}

/* 載入更多 */
.account_orders .orders_more_wrap {
  margin-top: 24px;
  text-align: center;
}

.account_orders .orders_more_btn {
  min-width: 180px;
  padding: 10px 32px;
  font-size: 0.9rem;
}

.account_orders .orders_section .container {
  max-width: var(--container-max-width);
}

.account_orders .orders_title {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 24px;
  color: var(--color-text-dark, var(--color-text-primary));
}

/* 篩選標籤（沿用 shop_flow.html 訂單管理樣式） */
.account_orders .orders_tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.12);
  margin-bottom: 16px;
  max-width: 100%;
}

.account_orders .orders_tab {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 16px 18px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 0.9rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--color-text-light);
  cursor: pointer;
  font-family: var(--font-family-base);
  -webkit-transition: color 0.2s ease, border-color 0.2s ease;
  transition: color 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
  margin-bottom: -1px;
}

.account_orders .orders_tab.active {
  color: var(--color-text-primary);
  font-weight: 700;
  border-bottom-color: var(--color-primary);
}

.account_orders .orders_tab_count {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--color-text-light);
  font-family: var(--font-family-en), var(--font-family-base);
}

.account_orders .orders_tab.active .orders_tab_count {
  color: var(--color-primary);
}

@media (hover: hover) {
  .account_orders .orders_tab:hover {
    color: var(--color-text-primary);
  }
}

/* 卡片按鈕尺寸 */
.account_orders .shop_order_actions .shop_btn {
  padding: 8px 20px;
  font-size: 0.82rem;
}

/* 空狀態 */
.account_orders .orders_empty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 80px 20px;
  text-align: center;
}

.account_orders .orders_empty i {
  font-size: 3rem;
  color: var(--color-text-secondary);
  margin-bottom: 16px;
}

.account_orders .orders_empty p {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
}

.account_orders .orders_empty span {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  margin-bottom: 24px;
}

.account_orders .orders_empty_btn {
  padding: 10px 28px;
  font-size: 0.9rem;
}

/* ==============================================
   RWD
   ============================================== */
@media (max-width: 768px) {
  /* 麵包屑 */
  .account_orders .orders_breadcrumb {
    padding-top: calc(var(--header-height) + 20px);
  }
  /* 標題 */
  .account_orders .orders_title {
    font-size: 1.25rem;
  }
  /* 標籤 */
  .account_orders .orders_tabs {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .account_orders .orders_tabs::-webkit-scrollbar {
    display: none;
  }
  .account_orders .orders_tab {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
    padding: 12px 14px;
    font-size: 0.82rem;
  }
  /* 區塊 */
  .account_orders .orders_section {
    padding: 16px 0 60px;
  }
  /* 卡片按鈕：固定 1/3 寬、靠右（1~3 顔均靠右） */
  .account_orders .shop_order_actions {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    width: 100%;
    -ms-flex-item-align: end;
        align-self: flex-end;
    gap: 8px;
  }
  .account_orders .shop_order_actions .shop_btn {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 calc((100% - 16px) / 3);
            flex: 0 0 calc((100% - 16px) / 3);
    max-width: calc((100% - 16px) / 3);
    padding: 7px 4px;
    font-size: 0.78rem;
    text-align: center;
  }
}

/* 分頁 */
.orders_pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  margin-top: 32px;
  padding: 16px 0;
}

.orders_page_btn,
.orders_page_num {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  color: #666;
  text-decoration: none;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.orders_page_btn:hover,
.orders_page_num:hover {
  border-color: #8B7355;
  color: #8B7355;
}

.orders_page_num.is-active {
  background-color: #8B7355;
  border-color: #8B7355;
  color: #fff;
}

/* ==============================================
   帳號設定頁
   所有規則皆限定在 .account_settings 範圍內
   ============================================== */
.account_settings .as_section {
  padding-top: var(--spacing-xl);
  padding-bottom: 80px;
  min-height: 60vh;
}

.account_settings .as_container {
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* 麵包屑、標題：使用 common.css 的 .shop_breadcrumb / .shop_page_title */
/* 區塊 */
.account_settings .as_block {
  border: 1px solid rgba(var(--color-primary-rgb), 0.25);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  background: var(--color-bg-white);
}

.account_settings .as_block:last-of-type {
  margin-bottom: 0;
}

.account_settings .as_block_title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: -24px -24px 20px;
  padding: 14px 24px;
  border-radius: 12px 12px 0 0;
  border-bottom: none;
  background: #f3ebe2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
}

.account_settings .as_block_title i {
  color: var(--color-primary);
  font-size: 1rem;
}

/* 表單 */
.account_settings .as_field {
  margin-bottom: var(--spacing-sm);
}

.account_settings .as_label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}

.account_settings .as_input {
  width: 100%;
  padding: 10px 12px;
  font-size: 0.93rem;
  font-family: inherit;
  color: var(--color-text-primary);
  border: 1.5px solid var(--color-border-strong);
  border-radius: 8px;
  background: var(--color-bg-white);
  -webkit-transition: border-color 0.2s;
  transition: border-color 0.2s;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.account_settings .as_input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* 地址列表 */
.account_settings .addr_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.account_settings .addr_card {
  padding: 20px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
}

.account_settings .addr_card:first-child {
  padding-top: 0;
}

.account_settings .addr_card:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.account_settings .addr_card_default {
  /* 以 badge 標示，不再使用外框 */
}

.account_settings .addr_card_header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.account_settings .addr_card_name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.account_settings .addr_default_badge {
  display: inline-block;
  padding: 2px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(var(--color-success-rgb), 0.1);
  border-radius: 999px;
}

.account_settings .addr_card_phone {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}

.account_settings .addr_card_address {
  font-size: 0.9rem;
  color: var(--color-text-primary);
  line-height: 1.6;
  margin-bottom: 14px;
}

.account_settings .addr_card_actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

.account_settings .addr_action_btn {
  padding: 6px 16px;
  font-size: 0.8rem;
}

.account_settings .addr_card.is-editing .addr_card_name,
.account_settings .addr_card.is-editing .addr_card_phone,
.account_settings .addr_card.is-editing .addr_card_address {
  margin-bottom: 8px;
}

/* 既有卡片 edit 模式：shop.js 會把 .addr_card_header + .addr_card_phone 包進
   .addr_new_identity grid（與「新增地址」表單一致），讓姓名 + 電話同一列。
   - .addr_default_badge 在 edit 模式隱藏，否則會擠壓 col-1 的 name input 寬度
   - .addr_card_name font-weight 還原 400（與 phone input 視覺一致） */
.account_settings .addr_card.is-editing .addr_default_badge {
  display: none;
}

.account_settings .addr_card.is-editing .addr_card_header .addr_card_name {
  font-weight: 400;
}

.account_settings .addr_card.is-editing .addr_card_header .addr_card_name .addr_edit_input {
  width: 100%;
}

/* trap-3 fix: display:block + line-height: 1.4 對齊 input baseline 與 dropdown */
/* 與 .shop_dropdown_toggle 共用 padding 11px 14px / font-size 0.93rem 才會等高 */
.account_settings .addr_edit_input {
  display: block;
  width: 100%;
  padding: 11px 14px;
  font-size: 0.93rem;
  line-height: 1.4;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 8px;
  font-family: inherit;
  color: var(--color-text-primary);
  background: var(--color-bg-white);
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.account_settings .addr_edit_input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* trap-1 fix: 新增地址 grid 內的下拉必須 scoped override 到 11px 14px
   全站共用的 .shop_dropdown_toggle 預設 10px 12px，不在這 override 會比 input 矮 */
.account_settings .addr_card_address_fields .shop_dropdown_toggle {
  padding: 11px 14px;
  font-size: 0.93rem;
}

/* 新增地址：姓名 + 電話 並排 */
.account_settings .addr_new_identity {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

/* trap-2 fix: reset selector 加 .addr_card.is-editing 拉到 specificity (0,5,0)
   且 .addr_card_name 必須一起 reset，否則 8px margin 撐高 col-1 grid 拉動整 row */
.account_settings .addr_card.is-editing .addr_new_identity .addr_card_header,
.account_settings .addr_card.is-editing .addr_new_identity .addr_card_phone,
.account_settings .addr_card.is-editing .addr_new_identity .addr_card_name {
  margin: 0;
  display: block;
}

.account_settings .addr_card.is-editing .addr_new_identity .addr_card_name {
  width: 100%;
}

/* 新增地址：縣市 / 鄉鎮區 下拉 + 詳細地址欄位 */
.account_settings .addr_card_address_fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

.account_settings .addr_card_address_fields .shop_dropdown {
  width: 100%;
}

.account_settings .addr_card_address_fields .addr_detail_input {
  grid-column: 1 / -1;
}

@media (max-width: 480px) {
  .account_settings .addr_card_address_fields,
  .account_settings .addr_new_identity {
    grid-template-columns: 1fr;
  }
}

/* 新增地址按鈕 */
.account_settings .as_addr_add_btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 0.9rem;
  border: none;
  background: transparent;
}

.account_settings .addr_list {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 20px;
}

.account_settings .as_addr_add_btn[hidden] {
  display: none;
}

/* 雙欄表單並排（姓名+手機、Email+生日、新增地址姓名+電話） */
.account_settings .as_form_row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 16px;
}

.account_settings .as_form_row .as_field {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

/* 自訂月曆（生日） */
.account_settings .as_datepicker {
  position: relative;
}

.account_settings .as_datepicker_toggle {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 10px 12px;
  font-size: 0.93rem;
  font-family: inherit;
  color: var(--color-text-primary);
  border: 1.5px solid var(--color-border-strong);
  border-radius: 8px;
  background: var(--color-bg-white);
  cursor: pointer;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-transition: border-color 0.2s;
  transition: border-color 0.2s;
}

.account_settings .as_datepicker_toggle:hover,
.account_settings .as_datepicker.is-open .as_datepicker_toggle {
  border-color: var(--color-primary);
}

.account_settings .as_datepicker_toggle i {
  color: var(--color-text-light);
  font-size: 0.95rem;
}

.account_settings .as_datepicker_popup {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--color-bg-white);
  border: 1px solid rgba(var(--color-primary-rgb), 0.2);
  border-radius: 12px;
  padding: 14px;
  -webkit-box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.account_settings .as_datepicker_popup[hidden] {
  display: none;
}

.account_settings .as_datepicker_header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 10px;
}

.account_settings .as_datepicker_title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-primary);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 999px;
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
}

.account_settings .as_datepicker_title:hover {
  background: rgba(var(--color-primary-rgb), 0.06);
}

.account_settings .as_datepicker_nav {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: 0.85rem;
  border-radius: 999px;
  -webkit-transition: color 0.2s, background 0.2s;
  transition: color 0.2s, background 0.2s;
}

.account_settings .as_datepicker_nav:hover {
  color: var(--color-primary);
  background: rgba(var(--color-primary-rgb), 0.06);
}

.account_settings .as_datepicker_weekdays,
.account_settings .as_datepicker_days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.account_settings .as_datepicker_weekdays {
  margin-bottom: 4px;
}

.account_settings .as_datepicker_weekdays span {
  padding: 6px 0;
  text-align: center;
  font-size: 0.72rem;
  color: var(--color-text-light);
}

.account_settings .as_datepicker_day {
  padding: 6px 0;
  border: none;
  background: transparent;
  font-size: 0.85rem;
  color: var(--color-text-primary);
  cursor: pointer;
  font-family: var(--font-family-en), var(--font-family-base);
  border-radius: 6px;
  -webkit-transition: background 0.15s, color 0.15s;
  transition: background 0.15s, color 0.15s;
}

.account_settings .as_datepicker_day:hover {
  background: rgba(var(--color-primary-rgb), 0.08);
}

.account_settings .as_datepicker_day.is_other {
  color: var(--color-border-strong);
}

.account_settings .as_datepicker_day.is_selected {
  background: var(--color-primary);
  color: var(--color-bg-white);
  font-weight: 600;
}

.account_settings .as_datepicker_day.is_today:not(.is_selected) {
  color: var(--color-primary);
  font-weight: 600;
}

/* 年/月選擇面板 */
.account_settings .as_datepicker_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.account_settings .as_datepicker_grid_item {
  padding: 10px 0;
  border: none;
  background: transparent;
  font-size: 0.85rem;
  color: var(--color-text-primary);
  cursor: pointer;
  -webkit-transition: background 0.15s;
  transition: background 0.15s;
}

.account_settings .as_datepicker_grid_item:hover {
  background: rgba(var(--color-primary-rgb), 0.08);
}

.account_settings .as_datepicker_grid_item.is_selected {
  background: var(--color-primary);
  color: var(--color-bg-white);
  font-weight: 600;
}

/* 新增地址：按鈕列 */
.account_settings .as_addr_actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 12px;
  margin-top: var(--spacing-lg);
}

.account_settings .as_addr_save,
.account_settings .as_addr_cancel {
  width: 200px;
  padding: 12px 24px;
  font-size: 0.9rem;
}

/* 儲存按鈕（與購物流程主要動作按鈕同寬 200px，水平置中） */
.account_settings .as_submit {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 200px;
  margin: var(--spacing-lg) auto 0;
  padding: 12px 24px;
  font-size: 0.9rem;
}

/* 帳號綁定 */
.account_settings .as_bind_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.account_settings .as_bind_status {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 16px 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
}

.account_settings .as_bind_status:first-child {
  padding-top: 0;
}

.account_settings .as_bind_status:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.account_settings .as_bind_info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 14px;
}

.account_settings .as_bind_icon {
  font-size: 2.5rem;
  width: 48px;
  height: 48px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

/* 各 provider 圖示色 */
.account_settings .as_bind_status[data-provider="google"] .as_bind_icon {
  background: conic-gradient(from -45deg, #4285f4 0deg 90deg, #ea4335 90deg 180deg, #fbbc05 180deg 270deg, #34a853 270deg 360deg);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .account_settings .as_bind_status[data-provider="google"] .as_bind_icon {
    color: #4285f4;
  }
}

.account_settings .as_bind_status[data-provider="facebook"] .as_bind_icon {
  color: #1877f2;
}

.account_settings .as_bind_status[data-provider="line"] .as_bind_icon {
  color: #06c755;
}

.account_settings .as_bind_name {
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  line-height: 1.2;
  margin: 0;
}

.account_settings .as_bind_status.is_bound .as_bind_name {
  font-weight: 600;
  color: var(--color-primary);
}

.account_settings .as_bind_hint {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  margin: 6px 0 0;
  line-height: 1.2;
}

.account_settings .as_bind_btn {
  padding: 8px 20px;
  font-size: 0.82rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

/* 解除綁定：弱化灰字灰邊，提示破壞性動作 */
.account_settings .as_bind_status.is_bound .as_bind_btn {
  background: transparent;
  color: var(--color-text-light);
  border: 1.5px solid var(--color-border-strong);
}

@media (hover: hover) {
  .account_settings .as_bind_status.is_bound .as_bind_btn:hover {
    color: var(--color-text-secondary);
    border-color: var(--color-text-light);
    background: transparent;
  }
}

/* 返回按鈕（與購物流程主要動作按鈕同寬 200px，水平置中） */
.account_settings .as_back_btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 200px;
  padding: 12px 24px;
  font-size: 0.9rem;
  margin: var(--spacing-md) auto 0;
}

/* RWD */
@media (max-width: 768px) {
  .account_settings .as_section {
    padding-top: var(--spacing-lg);
  }
  .account_settings .as_block {
    padding: 16px;
  }
  .account_settings .as_block_title {
    margin: -16px -16px 16px;
    padding: 12px 16px;
  }
  /* 標題 RWD：由 common.css .shop_page_title 處理 */
  .account_settings .as_form_row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 0;
  }
  .account_settings .as_addr_actions {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  /* 地址按鈕：手機版靠左橫排，縮小間距 */
  .account_settings .addr_card_actions {
    gap: 8px;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .account_settings .as_addr_save,
  .account_settings .as_addr_cancel,
  .account_settings .as_submit,
  .account_settings .as_back_btn {
    width: 100%;
  }
  .account_settings .as_bind_status {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 14px;
  }
  .account_settings .as_bind_btn {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 480px) {
  /* 地址按鈕超窄螢幕：允許換行，但保持靠左不直排 */
  .account_settings .addr_card_actions {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 8px;
  }
}

/* 讓 category_tabs_wrap 的 sticky 生效（.wrapper 預設 overflow:hidden 會破壞 sticky） */
.wrapper.product {
  overflow: visible;
}

/* Main Section */
.product .product_section {
  padding: var(--spacing-xxl) 0;
  background-color: var(--color-bg-white);
}

/* Category Tabs Wrap — sticky（hero 之後才釘在 header 下方） */
.product .category_tabs_wrap {
  position: sticky;
  top: var(--header-height);
  z-index: 990;
  background-color: rgba(var(--color-bg-soft-rgb, 246, 243, 237), 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Category Tabs */
.product .category_tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: var(--spacing-md);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  padding: var(--spacing-md) 0;
}

.product .tab_link {
  font-family: var(--font-family-zh);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: var(--spacing-sm) var(--spacing-md);
  position: relative;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.product .tab_link span {
  position: relative;
  display: inline-block;
}

.product .tab_link span::after {
  content: '';
  position: absolute;
  bottom: -5px;
  /* Adjust distance relative to text */
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-primary);
  -webkit-transition: width 0.3s ease;
  transition: width 0.3s ease;
}

.product .tab_link.active {
  color: var(--color-primary);
  font-weight: 700;
}

.product .tab_link.active span::after {
  width: 100%;
  /* Full width of the span (text) */
}

@media (hover: hover) {
  .product .tab_link:hover {
    color: var(--color-primary);
  }
}

/* Products Grid */
.product .products_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xxl);
}

/* 卡片直角樣式 */
.product .product_card {
  border-radius: 0;
}

/* 空狀態 */
.products_empty {
  grid-column: 1 / -1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 80px 20px;
  text-align: center;
  color: var(--color-text-light);
}

.products_empty i {
  font-size: 3rem;
  margin-bottom: 20px;
  color: var(--color-border-strong);
}

.products_empty p {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin: 0 0 8px;
}

.products_empty span {
  font-size: 0.85rem;
  color: var(--color-text-light);
}

/* Pagination Styles */
.product .pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 15px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  margin-top: var(--spacing-xl);
}

.product .pagination .page-item {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.product .pagination .page-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-width: 45px;
  height: 45px;
  padding: 0 15px;
  font-family: var(--font-family-en);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-primary);
  text-decoration: none;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: var(--color-bg-white);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.product .pagination .page-item.active .page-link {
  background-color: var(--color-primary);
  color: var(--color-bg-white);
  border-color: var(--color-primary);
}

@media (hover: hover) {
  .product .pagination .page-link:hover {
    background-color: var(--color-primary);
    color: var(--color-bg-white);
    border-color: var(--color-primary);
  }
  .product .pagination .page-item.disabled .page-link:hover {
    background-color: var(--color-bg-white);
    color: var(--color-text-primary);
    border-color: rgba(0, 0, 0, 0.1);
    cursor: default;
  }
}

/* Ellipsis 省略號樣式 */
.product .pagination .page-ellipsis .page-link {
  border: none;
  background: transparent;
  cursor: default;
  color: var(--color-text-secondary);
}

/* Prev & Next - Hide text, show arrow */
.product .pagination .page-prev,
.product .pagination .page-next {
  text-indent: -9999px;
  position: relative;
}

.product .pagination .page-prev::after,
.product .pagination .page-next::after {
  content: "";
  display: block;
  width: 8px;
  height: 15px;
  background: currentColor;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.product .pagination .page-prev::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='15' viewBox='0 0 8 15' fill='none'%3E%3Cpolyline points='7 1 1 7.5 7 14' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='15' viewBox='0 0 8 15' fill='none'%3E%3Cpolyline points='7 1 1 7.5 7 14' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}

.product .pagination .page-next::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='15' viewBox='0 0 8 15' fill='none'%3E%3Cpolyline points='1 1 7 7.5 1 14' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='15' viewBox='0 0 8 15' fill='none'%3E%3Cpolyline points='1 1 7 7.5 1 14' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* Hide for_pc class on mobile */
.product .pagination .for_pc {
  display: none;
}

@media (min-width: 768px) {
  .product .pagination .for_pc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}

/* Responsive */
@media (max-width: 1200px) {
  .product .products_grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  .product .products_grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
  }
  .product .category_tabs {
    gap: var(--spacing-sm);
  }
  .product .tab_link {
    font-size: 0.9rem;
    padding: var(--spacing-sm);
  }
}

@media (max-width: 576px) {
  .product .product_section {
    padding-top: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
  }
  .product .products_grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  .product .category_tabs {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    scrollbar-width: none;
  }
  .product .category_tabs::-webkit-scrollbar {
    display: none;
  }
  .product .tab_link {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.85rem;
  }
  /* 手機版：單列、總寬等於卡片寬、每個按鈕等寬 */
  .product .pagination {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
  }
  .product .pagination .page-item {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
            flex: 1 1 0;
    min-width: 0;
  }
  .product .pagination .page-link {
    width: 100%;
    min-width: 0;
    padding: 0;
    height: 40px;
    font-size: 0.875rem;
  }
  .product .pagination .page-ellipsis .page-link {
    border: none;
    background: transparent;
  }
}

.product_detail .related_reports .img_inner1 {
  background-image: url("../images/05_news_detail/news_01.png");
}

.product_detail .related_reports .img_inner2 {
  background-image: url("../images/05_news_detail/news_02.png");
}

.product_detail .related_reports .img_inner3 {
  background-image: url("../images/05_news_detail/news_03.png");
}

/* 防止水平溢出 */
.wrapper.product_detail {
  overflow-x: hidden;
}

/* ==============================================
   麵包屑導航
   ============================================== */
.breadcrumb_nav {
  padding-top: calc(var(--header-height) + 40px);
  padding-bottom: 10px;
}

.breadcrumb_nav .container {
  max-width: 1200px;
}

.breadcrumb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-light);
}

.breadcrumb li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.breadcrumb li:not(:last-child)::after {
  content: '/';
  margin: 0 8px;
  color: var(--color-border-strong);
}

.breadcrumb li a {
  color: var(--color-text-secondary);
  -webkit-transition: color 0.2s ease;
  transition: color 0.2s ease;
}

.breadcrumb li a:hover {
  color: var(--color-primary);
}

.breadcrumb li.active {
  color: var(--color-primary);
  font-weight: 500;
}

/* ==============================================
   商品資訊區
   ============================================== */
.product_shop_section {
  padding: 30px 0 50px;
}

.product_shop_section .container {
  max-width: 1200px;
}

.product_shop_layout {
  display: grid;
  grid-template-columns: minmax(0, 600px) 1fr;
  gap: 50px;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.product_shop_layout.no-gallery {
  grid-template-columns: 1fr;
}

/* 左：產品圖片 */
.product_gallery {
  position: sticky;
  top: calc(var(--header-height) + 40px);
  max-width: 600px;
  width: 100%;
}

.product_gallery_main {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 12px;
  background: var(--color-bg-light);
}

/* 大圖已加入提示 */
.cart_added_overlay {
  position: absolute;
  inset: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: rgba(0, 0, 0, 0.55);
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

.cart_added_overlay.is-show {
  opacity: 1;
}

.cart_added_overlay span {
  color: var(--color-bg-white);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
}

.gallery_main_img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}

/* 大圖左右切換鍵（純白箭頭 hint） */
.gallery_main_arrow {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 1.5rem;
  cursor: pointer;
  -webkit-filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
          filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

.gallery_main_prev {
  left: 10px;
}

.gallery_main_next {
  right: 10px;
}

@media (hover: hover) {
  .gallery_main_arrow:hover {
    -webkit-transform: translateY(-50%) scale(1.15);
            transform: translateY(-50%) scale(1.15);
  }
}

/* 縮圖列 */
.product_gallery_thumbs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 8px;
  width: 100%;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.product_gallery_thumbs::-webkit-scrollbar {
  display: none;
}

.gallery_thumb {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  width: 72px;
  height: 72px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  background: var(--color-bg-light);
  -webkit-transition: border-color 0.2s ease, opacity 0.2s ease;
  transition: border-color 0.2s ease, opacity 0.2s ease;
  opacity: 0.5;
}

.gallery_thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.gallery_thumb.active {
  border-color: var(--color-primary);
  opacity: 1;
}

.gallery_thumb:hover {
  opacity: 0.85;
}

/* 右：商品資訊 */
.product_info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 24px;
}

.product_info_bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 24px;
  margin-top: auto;
}

.product_info_title {
  font-size: var(--font-size-h2);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.3;
  margin: 0;
}

.product_info_summary {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text-primary);
  margin: 0;
}

.product_info_hr {
  border: none;
  border-top: 1px solid var(--color-border-strong);
  margin: 0;
}

.product_info_promo {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin: 0;
  padding-left: 14px;
  border-left: none;
  position: relative;
}

.product_info_promo::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: var(--color-primary);
}

.product_info_promo + .product_info_promo {
  margin-top: -14px;
}

/* 價格 */
.product_info_price {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}

.price_original {
  font-size: 1rem;
  color: var(--color-text-light);
  text-decoration: line-through;
  margin-right: 10px;
}

.price_current {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

/* 規格選擇 */
.product_info_spec {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
}

.spec_label,
.qty_label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.spec_dropdown {
  position: relative;
  width: 100%;
}

.spec_dropdown_toggle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 100%;
  padding: 12px 16px;
  font-size: 0.9rem;
  font-weight: 500;
  font-family: var(--font-family-base);
  color: var(--color-text-primary);
  background-color: var(--color-bg-light);
  border: 1.5px solid var(--color-border-strong);
  border-radius: 4px;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.spec_dropdown_toggle:hover {
  border-color: var(--color-border-strong);
  background-color: var(--color-bg-light);
}

.spec_dropdown.is-open .spec_dropdown_toggle {
  border-color: var(--color-primary);
  background-color: var(--color-bg-white);
}

.spec_dropdown_arrow {
  font-size: 0.7rem;
  color: var(--color-text-light);
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}

.spec_dropdown.is-open .spec_dropdown_arrow {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.spec_dropdown_menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background-color: var(--color-bg-white);
  border: 1.5px solid var(--color-border-strong);
  border-radius: 4px;
  -webkit-box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  list-style: none;
  margin: 0;
  padding: 4px 0;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(-4px);
          transform: translateY(-4px);
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.spec_dropdown.is-open .spec_dropdown_menu {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.spec_option {
  display: block;
  padding: 10px 16px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-text-primary);
  -webkit-transition: all 0.15s ease;
  transition: all 0.15s ease;
}

.spec_option:hover {
  background-color: var(--color-bg-light);
}

.spec_option.active {
  color: var(--color-primary);
  font-weight: 600;
  background-color: rgba(var(--color-success-rgb), 0.06);
}

/* 數量選擇 */
.product_info_qty {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
}

.qty_selector {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 4px;
  overflow: hidden;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}

.qty_btn {
  width: 40px;
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: var(--color-bg-light);
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  -webkit-transition: background 0.2s ease;
  transition: background 0.2s ease;
}

.qty_btn:hover {
  background: var(--color-border-strong);
}

.qty_input {
  width: 56px;
  height: 40px;
  text-align: center;
  border: none;
  border-left: 1.5px solid var(--color-border-strong);
  border-right: 1.5px solid var(--color-border-strong);
  font-size: 0.95rem;
  font-weight: 500;
  font-family: var(--font-family-base);
  -webkit-appearance: textfield;
          appearance: textfield;
  -moz-appearance: textfield;
  color: var(--color-text-primary);
}

.qty_input::-webkit-outer-spin-button,
.qty_input::-webkit-inner-spin-button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

/* 操作按鈕 */
.product_info_actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 12px;
  padding-top: 8px;
}

.product_info_actions .shop_btn {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  text-align: center;
  padding: 14px 24px;
  font-size: 0.95rem;
}

.product_info_actions .btn_add_cart {
  background-color: transparent;
  color: var(--color-text-primary);
  border: 1.5px solid var(--color-border-strong);
}

@media (hover: hover) {
  .product_info_actions .btn_add_cart:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background-color: transparent;
  }
}

.product_info_stock {
  font-size: 0.82rem;
  color: var(--color-primary);
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 6px;
}

.product_info_stock i {
  font-size: 0.85rem;
  line-height: 1.7;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.product_info_stock + .product_info_stock {
  margin-top: -14px;
}

.product_info_stock.stock_out {
  color: var(--color-text-light);
}

.btn_sold_out {
  width: 100%;
  padding: 14px 24px;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--font-family-base);
  color: var(--color-text-light);
  background-color: var(--color-bg-light);
  border: 1.5px solid var(--color-border-strong);
  border-radius: 4px;
  cursor: not-allowed;
  text-align: center;
  letter-spacing: 0.1em;
}

/* ==============================================
   商品描述分隔
   ============================================== */
.product_desc_divider {
  padding: 60px 0 0;
}

.product_desc_divider .container {
  max-width: 1200px;
  text-align: center;
}

.product_desc_title {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: 0.1em;
  margin: 0 0 16px;
}

.product_desc_line {
  position: relative;
  width: 100%;
  height: 1px;
  background-color: var(--color-border-strong);
}

.product_desc_line_accent {
  position: absolute;
  left: 50%;
  top: -1px;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background-color: var(--color-text-light);
  border-radius: 2px;
}

/* ==============================================
   響應式
   ============================================== */
@media (max-width: 992px) {
  .product_shop_layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .product_gallery {
    position: static;
  }
}

@media (max-width: 768px) {
  .breadcrumb_nav {
    padding-top: calc(var(--header-height) + 15px);
    padding-bottom: 5px;
  }
  .breadcrumb {
    font-size: 0.78rem;
  }
  /* 讓 section 本身作為溢出擋板 */
  .product_shop_section {
    padding: 20px 0 30px;
    overflow: hidden;
  }
  /* 明確設定 width + box-sizing，防止 content-box 模式下 padding 撐爆 */
  .product_shop_section .container,
  .product_desc_divider .container {
    width: 100%;
    max-width: 100%;
    padding: 0 20px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  /* Grid 單欄：同時設 min-width: 0 防止子項撐爆 1fr */
  .product_shop_layout {
    grid-template-columns: 1fr;
    gap: 24px;
    min-width: 0;
  }
  /* Grid 子項必須設 min-width: 0，否則會超出 1fr */
  .product_gallery {
    position: static;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
  }
  .product_gallery_main {
    border-radius: 0;
    width: 100%;
    aspect-ratio: 1 / 1;
  }
  .product_gallery_thumbs {
    width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .gallery_thumb {
    width: 56px;
    height: 56px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
  /* Grid 子項 product_info 同樣需要 min-width: 0 */
  .product_info {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    gap: 16px;
    overflow: hidden;
    word-break: break-word;
  }
  .product_info_title {
    font-size: var(--font-size-h3);
  }
  .product_info_summary,
  .product_info_promo {
    font-size: 0.85rem;
  }
  .product_info_bottom {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin-top: 0;
    gap: 18px;
  }
  .price_current {
    font-size: 1.4rem;
  }
  /* 規格下拉：強制不超出容器 */
  .product_info_spec,
  .spec_dropdown {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  .spec_dropdown_toggle {
    width: 100%;
    min-width: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
  /* 按鈕組：垂直排列，每個按鈕佔滿寬度 */
  .product_info_actions {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width: 100%;
    min-width: 0;
  }
  .product_info_actions .shop_btn {
    width: 100%;
    min-width: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    padding: 12px 16px;
  }
  .product_desc_divider {
    padding: 40px 0 0;
  }
  .product_desc_title {
    font-size: 1.1rem;
  }
}

.product_detail_page .related_reports_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

.product_detail_page .related_reports_grid .product_card {
  width: 100%;
  min-width: 0;
  height: 100%;
}

.product_detail_page .article_navigation {
  margin-bottom: 56px;
}

.product_detail_page .other_articles {
  padding-top: 96px;
}

.product_detail_page .products_other_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 40px;
}

.product_detail_page .products_other_grid .product_card {
  width: 100%;
  min-width: 0;
  height: 100%;
}

.product_detail_page .content #editor {
  max-width: none;
}

@media (max-width: 992px) {
  .product_detail_page .related_reports_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .product_detail_page .products_other_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .product_detail_page .related_reports_grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .product_detail_page .article_navigation {
    margin-bottom: 40px;
  }
  .product_detail_page .other_articles {
    padding-top: 72px;
  }
  .product_detail_page .products_other_grid {
    grid-template-columns: 1fr;
  }
}

/* ==============================================
   結帳頁 / 付款頁 獨有樣式
   （共用 layout / block / summary / items / amounts / actions / steps
    已移至 common.css 的「Shop Flow Layout & Components」區塊）
   ============================================== */
/* ==============================================
   已儲存地址卡片（checkout 頁）
   ============================================== */
.checkout .saved_address_block.checkout_block {
  padding: 24px;
  border: 1px solid rgba(var(--color-primary-rgb), 0.35);
}

.checkout .saved_address_list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.checkout .saved_address_list::after {
  content: '';
  display: block;
  height: 1px;
}

.checkout .saved_address_card {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 14px 16px;
  background: var(--color-bg-white);
  border: 1px solid rgba(var(--color-primary-rgb), 0.25);
  cursor: pointer;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.checkout .saved_address_card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.checkout .saved_address_card:has(input:checked) {
  border-color: var(--color-seaweed);
  background: rgba(196, 154, 128, 0.1);
}

@media (hover: hover) {
  .checkout .saved_address_card:hover {
    border-color: var(--color-seaweed);
  }
  .checkout .saved_address_card_new:hover {
    outline-color: var(--color-seaweed);
  }
}

.checkout .saved_address_info {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.checkout .saved_address_head {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.checkout .saved_address_name {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.checkout .saved_address_badge {
  padding: 2px 10px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-primary);
  background: rgba(var(--color-success-rgb), 0.1);
}

.checkout .saved_address_phone {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.checkout .saved_address_text {
  font-size: 0.9rem;
  color: var(--color-text-primary);
  line-height: 1.6;
}

.checkout .saved_address_card_new .saved_address_info {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 8px;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
}

.checkout .saved_address_card_new i {
  font-size: 0.85rem;
}

.checkout .saved_address_card_new {
  outline: 1px solid rgba(var(--color-primary-rgb), 0.25);
  outline-offset: -1px;
}

/* 新的收件地址 group：卡片 + 展開表單視覺連為一體 */
.checkout .saved_address_new_group {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow: visible;
  min-height: 0;
}

.checkout .saved_address_new_group:has(input:checked) .saved_address_card_new {
  border-bottom: none;
}

/* 新地址表單：綠邊米底 */
.checkout .new_address_wrapper {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 16px;
  padding: 20px;
  border: 1px solid var(--color-primary);
  border-top: none;
  background: var(--color-bg-light);
}

.checkout .new_address_wrapper::before {
  display: none;
}

.checkout .new_address_wrapper .checkout_block {
  border: none;
  background: transparent;
  padding: 0;
}

.checkout .new_address_wrapper[hidden] {
  display: none;
}

/* 無已儲存地址或未登入：去除綠框與底色 */
.checkout .new_address_wrapper.is_standalone_green {
  padding: 0;
  border: none;
  background: transparent;
  gap: 20px;
}

.checkout .new_address_wrapper.is_standalone_green::before {
  display: none;
}

.checkout .new_address_wrapper.is_standalone_green .checkout_block {
  border: 1px solid rgba(var(--color-primary-rgb), 0.25);
  background: var(--color-bg-white);
  padding: 24px;
}

/* 巢狀 checkout_block（padding:0）內的標題：維持原樣、不拉滿版 */
.checkout .new_address_wrapper:not(.is_standalone_green) .checkout_block_title {
  margin: 0 0 20px;
  padding: 0 0 12px;
  background: transparent;
}

/* 儲存地址 radio 選項 */
.checkout .save_address_toggle[hidden] {
  display: none;
}

.checkout .save_address_toggle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 4px 0;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--color-text-primary);
}

.checkout .save_address_toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.checkout .save_address_section {
  margin-top: 16px;
}

.checkout .save_address_options {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
}

.checkout .save_address_option {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--color-text-primary);
  padding: 10px 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.checkout .save_address_option:hover {
  border-color: var(--color-primary);
  background: rgba(var(--color-primary-rgb), 0.03);
}

.checkout .save_address_option input[type="radio"] {
  display: none;
}

.checkout .save_address_radio {
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-border-strong);
  border-radius: 50%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  position: relative;
  -webkit-transition: border-color 0.2s;
  transition: border-color 0.2s;
}

.checkout .save_address_option input[type="radio"]:checked ~ .save_address_radio {
  border-color: var(--color-primary);
}

.checkout .save_address_option input[type="radio"]:checked ~ .save_address_radio::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  background: var(--color-primary);
  border-radius: 50%;
}

/* ==============================================
   表單元素（form_group / form_input / form_row ...）
   目前保留 .checkout scope，避免跟 contact.html、login.html 等
   也使用 .form_group / .form_input 的頁面衝突
   ============================================== */
.checkout .form_group {
  margin-bottom: 16px;
}

.checkout .form_group:last-child {
  margin-bottom: 0;
}

.checkout .form_label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}

.checkout .required {
  color: var(--color-danger);
}

.checkout .form_input {
  width: 100%;
  padding: 12px 14px;
  font-size: 0.9rem;
  font-family: var(--font-family-base);
  color: var(--color-text-primary);
  background-color: var(--color-bg-white);
  border: 1.5px solid var(--color-border-strong);
  -webkit-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.checkout .form_input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.checkout .form_hint {
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: var(--color-text-secondary);
}

.checkout .form_row {
  display: grid;
  gap: 16px;
  margin-bottom: 16px;
}

.checkout .form_row.form_row_2col {
  grid-template-columns: 1fr 1fr;
}

.checkout .form_row > .form_group {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .checkout .form_row.form_row_2col {
    grid-template-columns: 1fr;
  }
}

.checkout .form_input:-webkit-autofill,
.checkout .form_input:-webkit-autofill:hover,
.checkout .form_input:-webkit-autofill:focus,
.checkout .form_input:-webkit-autofill:active,
.checkout .form_textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--color-bg-white) inset !important;
  -webkit-text-fill-color: var(--color-text-primary) !important;
  -webkit-transition: background-color 5000s ease-in-out 0s;
  transition: background-color 5000s ease-in-out 0s;
}

.checkout .form_input::-webkit-input-placeholder {
  color: var(--color-text-placeholder);
}

.checkout .form_input::-moz-placeholder {
  color: var(--color-text-placeholder);
}

.checkout .form_input:-ms-input-placeholder {
  color: var(--color-text-placeholder);
}

.checkout .form_input::-ms-input-placeholder {
  color: var(--color-text-placeholder);
}

.checkout .form_input::placeholder {
  color: var(--color-text-placeholder);
}

.checkout .form_textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 0.9rem;
  font-family: var(--font-family-base);
  color: var(--color-text-primary);
  background-color: var(--color-bg-white);
  border: 1.5px solid var(--color-border-strong);
  resize: vertical;
  min-height: 100px;
  -webkit-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.checkout .form_textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.checkout .form_textarea::-webkit-input-placeholder {
  color: var(--color-text-placeholder);
}

.checkout .form_textarea::-moz-placeholder {
  color: var(--color-text-placeholder);
}

.checkout .form_textarea:-ms-input-placeholder {
  color: var(--color-text-placeholder);
}

.checkout .form_textarea::-ms-input-placeholder {
  color: var(--color-text-placeholder);
}

.checkout .form_textarea::placeholder {
  color: var(--color-text-placeholder);
}

/* 運送方式下拉已改用 .shop_dropdown 共用組件（shop_common.css），此區塊已移除 */
/* ==============================================
   付款頁專用樣式（.payment）
   ============================================== */
/* 付款方式 radio 卡片右側 logo 區 */
.payment .pay_logo {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 22px;
  min-width: 38px;
  padding: 0 6px;
  color: var(--color-bg-white);
  font-family: var(--font-family-en);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
}

.payment .payment_logos {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 6px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  max-width: none;
}

.payment .pay_logo_visa {
  background: #1a1f71;
}

.payment .pay_logo_mc {
  background: #eb001b;
}

.payment .pay_logo_jcb {
  background: #0e4c96;
}

/* 等寬字體（卡號、期限、CVC、電話） */
.payment .pay_mono {
  font-family: var(--font-family-en), ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.05em;
}

/* ATM 說明 */
.payment .payment_atm_text {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--color-text-primary);
  margin: 0;
}

.payment .payment_atm_list {
  margin: 10px 0 0;
  padding-left: 20px;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  line-height: 1.8;
}

.payment .payment_atm_amount {
  color: var(--color-primary);
  font-weight: 600;
}

/* 驗證碼 */
.payment .captcha_wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
}

.payment .captcha_wrap input {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.payment .captcha_display_box {
  padding: 0 20px;
  background: var(--color-bg-light);
  font-family: var(--font-family-en), monospace;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--color-text-primary);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  height: 45px;
  text-decoration: line-through;
}

.payment .captcha_refresh_btn {
  width: 45px;
  height: 45px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-bg-white);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  color: var(--color-text-primary);
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
  font-size: 1rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.payment .captcha_refresh_btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-bg-light);
}

.payment .captcha_refresh_btn:hover i {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

/* 安心購物保證 banner（淺綠底） */
.payment .payment_secure_banner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  background: var(--color-ivory);
  border: 1px solid var(--color-cider-pear);
  color: var(--color-seaweed);
  font-size: 0.82rem;
  line-height: 1.7;
}

.payment .payment_secure_icon {
  font-size: 1.05rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  margin-top: 2px;
}

/* 右欄備註（配送至 / 發票） */
.payment .payment_summary_meta {
  padding: 12px 0 4px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin-top: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

.payment .payment_summary_meta_row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 10px;
}

.payment .payment_summary_meta_row span:last-child {
  color: var(--color-text-primary);
  text-align: right;
}

.payment .payment_submit_btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-size: 1rem;
}

@media (max-width: 480px) {
  .payment .payment_submit_btn {
    width: 100%;
  }
}

/* ==============================================
   響應式：saved_address_list 在窄螢幕摺單欄
   （其他共用 responsive 已在 common.css）
   ============================================== */
@media (max-width: 900px) {
  .checkout .saved_address_list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .payment .captcha_wrap {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .payment .captcha_wrap input {
    grid-column: 1 / -1;
  }
  .payment .captcha_display_box {
    grid-column: 1;
    min-width: 0;
  }
  .payment .captcha_refresh_btn {
    grid-column: 2;
  }
}

/* ── Combobox（搜尋式下拉 + 自由輸入）───────────────── */
.shop_combobox {
  position: relative;
}

.shop_combobox_input_wrap {
  position: relative;
}

.shop_combobox_input {
  padding-right: 2.5rem;
  cursor: text;
}

.shop_combobox_arrow {
  position: absolute;
  right: 1rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--color-text-light, #999);
  pointer-events: auto;
  cursor: pointer;
  -webkit-transition: -webkit-transform 0.2s ease;
  transition: -webkit-transform 0.2s ease;
  transition: transform 0.2s ease;
  transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}

.shop_combobox.is-open .shop_combobox_arrow {
  -webkit-transform: translateY(-50%) rotate(180deg);
          transform: translateY(-50%) rotate(180deg);
}

.shop_combobox .shop_dropdown_menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  max-height: 200px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--color-border, #d5c9b8);
  border-top: none;
  border-radius: 0 0 6px 6px;
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.shop_combobox.is-open .shop_dropdown_menu {
  display: block;
}

.shop_combobox .shop_dropdown_menu li {
  padding: 0.6rem 1rem;
  cursor: pointer;
  font-size: 0.9rem;
  -webkit-transition: background 0.15s ease;
  transition: background 0.15s ease;
}

.shop_combobox .shop_dropdown_menu li:hover {
  background: var(--color-bg-warm, #f8f5f0);
}

.shop_combobox .shop_dropdown_menu li.is-active {
  background: var(--color-accent, #8b7355);
  color: #fff;
}

.shop_combobox .shop_combobox_empty {
  padding: 0.8rem 1rem;
  color: var(--color-text-light, #999);
  font-size: 0.85rem;
  cursor: default;
}

.shop_combobox .shop_combobox_empty:hover {
  background: transparent;
}

/* ==============================================
   訂單完成 / 失敗頁 共通頁面設定
   共用 .confirm_* 元件已搬至 common.css
   這邊只保留頁面層級的 overflow / section padding
   ============================================== */
body.order_success_page,
body.order_failed_page {
  overflow-x: clip;
}

.order_success.checkout,
.order_failed.checkout {
  overflow: visible;
}

.order_success .checkout_section,
.order_failed .checkout_section {
  padding: 40px 0 80px;
}

/* ==============================================
   訂單失敗頁專用樣式
   共用 common.css 的 .shop_hero、checkout.css 的 layout/summary
   及 order_success.css 的 .confirm_* 基礎樣式
   ============================================== */
/* === 紅色叉叉（覆蓋 .confirm_tick 綠色版） === */
.fail_cross {
  background: rgba(var(--color-danger-rgb), 0.08);
  border-color: rgba(var(--color-danger-rgb), 0.4);
  color: var(--color-danger, var(--color-danger));
}

/* === 錯誤代碼小字 === */
.fail_error_code {
  font-family: var(--font-family-en);
  font-size: 0.75rem;
  color: var(--color-text-light);
  letter-spacing: 0.12em;
  margin: -16px 0 24px;
}

.fail_error_code strong {
  color: var(--color-danger, var(--color-danger));
  font-weight: 600;
  margin-left: 6px;
  letter-spacing: 0.08em;
}

/* === 付款狀態：失敗紅色底色色塊（對齊 confirm_status_ok） === */
.confirm_status_fail {
  display: inline-block;
  padding: 3px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.5;
  border-radius: 9999px;
  background: #f5e5e1;
  color: var(--color-danger);
}

/* === 可能原因 3 欄：無框，中間以垂直線分隔 === */
.fail_reasons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 8px 0;
}

.fail_reason_card {
  padding: 12px 22px;
}

.fail_reason_card + .fail_reason_card {
  border-left: 1px solid var(--color-border-strong);
}

.fail_reason_icon {
  width: 36px;
  height: 36px;
  background: var(--color-ivory);
  color: var(--color-seaweed);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  font-size: 1rem;
}

.fail_reason_title {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}

.fail_reason_desc {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

@media (max-width: 640px) {
  .fail_reasons {
    grid-template-columns: 1fr;
    padding: 0;
  }
  .fail_reason_card {
    padding: 16px 0;
  }
  .fail_reason_card + .fail_reason_card {
    border-left: 0;
    border-top: 1px solid var(--color-border-strong);
  }
}

/* === 需要協助 block 內容 === */
.fail_help_lead {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 6px;
}

.fail_help_hours {
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  margin: 0 0 16px;
}

.fail_help_actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 480px;
}

.fail_help_actions .shop_btn {
  padding: 10px 20px;
  font-size: 0.88rem;
  text-align: center;
}

@media (max-width: 480px) {
  /* 手機版：主按鈕（solid，markup 順序在最後）翻到最上方，次按鈕（ghost）堆在下面。詳見 SKILL.md「Mobile button stacking」。 */
  .fail_help_actions {
    grid-template-columns: 1fr;
    max-width: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}

/* ==============================================
   ATM 虛擬帳號付款頁（沿用 checkout_layout）
   所有規則皆限定在 .atm_payment 範圍內
   ============================================== */
/* === 匯款資訊 list === */
.atm_payment .atm_info_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.atm_payment .atm_info_row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 14px 0;
  gap: 16px;
}

.atm_payment .atm_info_row:not(:last-child) {
  border-bottom: 1px solid var(--color-bg-light);
}

.atm_payment .atm_info_label {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.atm_payment .atm_info_value {
  font-size: 0.95rem;
  color: var(--color-text-primary);
  font-weight: 500;
  text-align: right;
}

.atm_payment .atm_info_value_account {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 1px;
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
  font-family: var(--font-family-en), var(--font-family-base);
}

.atm_payment .atm_info_value_amount {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-primary);
}

.atm_payment .atm_info_value_deadline {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  color: var(--color-danger);
  font-weight: 600;
}

.atm_payment .atm_info_value_deadline i {
  font-size: 0.9rem;
}

/* === 注意事項 list === */
.atm_payment .atm_notes_list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.atm_payment .atm_notes_list li {
  position: relative;
  padding: 6px 0 6px 18px;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
}

.atm_payment .atm_notes_list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-secondary, var(--color-text-light));
}

/* === RWD === */
@media (max-width: 768px) {
  .atm_payment .atm_info_row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 4px;
  }
  .atm_payment .atm_info_value {
    text-align: left;
  }
  .atm_payment .atm_info_value_account {
    font-size: 1.05rem;
  }
  .atm_payment .atm_info_value_amount {
    font-size: 1.1rem;
  }
}

/* ===================================
   訂單詳情頁面樣式
   所有規則皆限定在 .order_detail 範圍內
   =================================== */
/* 讓右欄 checkout_summary 的 sticky 生效（.wrapper 預設 overflow:hidden 會破壞 sticky） */
.wrapper.order_detail {
  overflow: visible;
}

/* 主要內容區 */
.order_detail .od_main {
  padding-top: var(--spacing-xl);
  padding-bottom: 60px;
  min-height: 60vh;
}

.order_detail .od_container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 麵包屑：使用 common.css 的 .shop_breadcrumb */
.order_detail .shop_breadcrumb {
  padding-top: 32px;
  margin-bottom: 24px;
}

/* 訂單資訊：狀態 badge 推到標題右側 */
.order_detail .od_title_badge {
  margin-left: auto;
}

/* 訂單資訊 meta rows */
.order_detail .od_status_meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
}

.order_detail .od_status_meta_row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 12px;
  font-size: 0.9rem;
}

.order_detail .od_status_meta_label {
  color: var(--color-text-light);
  min-width: 72px;
}

.order_detail .od_status_meta_value {
  color: var(--color-text-primary);
  font-weight: 600;
  font-family: var(--font-family-en), var(--font-family-base);
}

/* 內容區塊共用樣式（間距由 .checkout_form 的 gap 控制） */
.order_detail .od_block {
  border: 1px solid rgba(var(--color-primary-rgb), 0.25);
  border-radius: 12px;
  padding: 24px;
  background: var(--color-bg-white);
}

.order_detail .od_block_title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: -24px -24px 20px;
  padding: 14px 24px;
  border-radius: 12px 12px 0 0;
  border-bottom: none;
  background: #f3ebe2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
}

.order_detail .od_block_title i {
  color: var(--color-primary);
  font-size: 0.95rem;
}

/* 商品明細表格 */
.order_detail .od_product_table {
  margin-bottom: 16px;
}

.order_detail .od_product_header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: transparent;
  padding: 0 16px 14px;
  border-radius: 0;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--color-text-primary);
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(var(--color-primary-rgb), 0.16);
}

.order_detail .od_product_row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 14px 16px;
  font-size: 0.9rem;
  color: var(--color-text-primary, var(--color-text-primary));
  border-bottom: 1px solid var(--color-bg-light);
}

.order_detail .od_product_row:last-child {
  border-bottom: none;
}

.order_detail .od_col_name {
  -webkit-box-flex: 2.5;
      -ms-flex: 2.5;
          flex: 2.5;
  min-width: 0;
}

.order_detail .od_product_row .od_col_name {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}

.order_detail .od_col_thumb {
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-light);
  overflow: hidden;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.order_detail .od_col_thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

.order_detail .od_col_spec {
  -webkit-box-flex: 1.5;
      -ms-flex: 1.5;
          flex: 1.5;
  min-width: 0;
}

.order_detail .od_col_price {
  -webkit-box-flex: 1.2;
      -ms-flex: 1.2;
          flex: 1.2;
  text-align: right;
  min-width: 0;
}

.order_detail .od_col_qty {
  -webkit-box-flex: 0.8;
      -ms-flex: 0.8;
          flex: 0.8;
  text-align: center;
  min-width: 0;
}

.order_detail .od_col_subtotal {
  -webkit-box-flex: 1.2;
      -ms-flex: 1.2;
          flex: 1.2;
  text-align: right;
  font-weight: 500;
  min-width: 0;
}

/* 商品合計 */
.order_detail .od_product_summary {
  border-top: 1px solid var(--color-border);
  padding-top: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

.order_detail .od_summary_row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 24px;
  padding: 4px 0;
  font-size: 0.9rem;
  color: var(--color-text-secondary);
}

.order_detail .od_summary_label {
  min-width: 80px;
  text-align: right;
}

.order_detail .od_summary_value {
  min-width: 100px;
  text-align: right;
}

.order_detail .od_summary_total {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}

.order_detail .od_summary_total .od_summary_label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary, var(--color-text-primary));
}

.order_detail .od_summary_total .od_summary_value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--color-primary);
}

/* 資訊列表（付款、收件、物流） */
.order_detail .od_info_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 12px;
}

.order_detail .od_info_row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 16px;
  font-size: 0.9rem;
}

.order_detail .od_info_label {
  width: 100px;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  color: var(--color-text-secondary);
  font-size: 0.85rem;
}

.order_detail .od_info_value {
  color: var(--color-text-primary, var(--color-text-primary));
}

/* 狀態標籤 */
.order_detail .od_badge {
  display: inline-block;
  padding: 3px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.5;
  border-radius: 9999px;
}

.order_detail .od_badge-success {
  background: #e7f1e8;
  color: #3ea55a;
}

/* 操作按鈕 */
.order_detail .od_actions {
  padding: 0;
  margin-bottom: 24px;
}

.order_detail .od_actions_row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 16px;
}

.order_detail .od_btn_outline {
  width: 200px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  font-size: 0.9rem;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

/* 第一顆按鈕靠左、其餘靠右 */
.order_detail .od_btn_group_start {
  margin-left: auto;
}

/* 物流追蹤：追蹤包裹 按鈕（compact） */
.order_detail .od_track_btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 0.82rem;
}

/* === 需要協助 block 內容（沿用 order_failed.html 樣式） === */
.order_detail .fail_help_lead {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 6px;
}

.order_detail .fail_help_hours {
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  margin: 0 0 16px;
}

.order_detail .fail_help_actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 480px;
}

.order_detail .fail_help_actions .shop_btn {
  padding: 10px 20px;
  font-size: 0.88rem;
  text-align: center;
}

/* ===================================
   RWD 768px
   =================================== */
@media (max-width: 768px) {
  /* 商品表格改為卡片堆疊 */
  .order_detail .od_product_header {
    display: none;
  }
  .order_detail .od_product_row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 6px;
    padding: 14px 12px;
    border-bottom: 1px solid var(--color-bg-light);
  }
  .order_detail .od_product_row > span {
    text-align: left;
    width: 100%;
  }
  /* 手機版：縮圖留在 .od_col_name 內，改成左圖右文字 */
  .order_detail .od_product_row .od_col_name {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 12px;
  }
  .order_detail .od_col_thumb {
    display: block;
    width: 56px;
    height: 56px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
  .order_detail .od_product_row .od_col_name::before {
    display: none;
  }
  .order_detail .od_product_row > span::before {
    content: attr(data-label) "：";
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    font-weight: 500;
  }
  .order_detail .od_col_price,
  .order_detail .od_col_qty,
  .order_detail .od_col_subtotal {
    text-align: left;
  }
  .order_detail .od_product_summary {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .order_detail .od_summary_label,
  .order_detail .od_summary_value {
    text-align: left;
  }
  /* 資訊列表堆疊 */
  .order_detail .od_info_row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 4px;
  }
  .order_detail .od_info_label {
    width: auto;
  }
}

/* ===================================
   RWD 640px：按鈕全寬堆疊（沿用購物流程慣例）
   =================================== */
@media (max-width: 640px) {
  /* 手機版：主按鈕（再次購買 solid，markup 在最後）翻到最上方，次按鈕（取消訂單 / 返回訂單列表 ghost）堆在下面。詳見 SKILL.md「Mobile button stacking」。 */
  .order_detail .od_actions_row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
    gap: 12px;
  }
  .order_detail .od_btn_outline {
    width: 100%;
  }
  .order_detail .od_btn_group_start {
    margin-left: 0;
  }
}

/* ===================================
   RWD 960px：手機版卡片順序調整（desktop 不動）
   操作按鈕從頂端搬到最末（status 頁不該以 destructive / commerce CTA 開場）；
   「需要協助」block 從中段搬到 aside 後（fallback 區塊放最末才不會打斷正常檢視節奏）。
   詳見 SKILL.md「order_detail mobile card reorder」規則。
   =================================== */
@media (max-width: 960px) {
  /* desktop .od_main 用 spacing-xl 撐開頁首與第一張卡片，手機上會空一大段。收緊到 spacing-md 才不會空一大段。 */
  .order_detail .od_main {
    padding-top: var(--spacing-md);
  }
  /* .od_container 預設不是 flex；要先翻成 flex 才能對 .od_actions 設 order */
  .order_detail .od_main .od_container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  /* 操作按鈕推到最末 */
  .order_detail .od_actions {
    -webkit-box-ordinal-group: 100;
        -ms-flex-order: 99;
            order: 99;
    margin-top: 24px;
    margin-bottom: 0;
  }
  /* 需要協助卡片：出現在操作按鈕正上方 */
  .order_detail .od_help_block {
    -webkit-box-ordinal-group: 99;
        -ms-flex-order: 98;
            order: 98;
    margin-top: 24px;
  }
}

/* ===================================
   RWD 480px
   =================================== */
@media (max-width: 480px) {
  .order_detail .od_block {
    padding: 16px;
  }
  .order_detail .od_block_title {
    margin: -16px -16px 16px;
    padding: 12px 16px;
  }
  /* 手機版：主按鈕（solid，markup 順序在最後）翻到最上方，次按鈕（ghost）堆在下面。詳見 SKILL.md「Mobile button stacking」。 */
  .order_detail .fail_help_actions {
    grid-template-columns: 1fr;
    max-width: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}

/* 付款提醒 */
.od_payment_notice {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 8px;
  background-color: #fff8f0;
  border: 1px solid #f0d9b5;
  color: #8B6914;
  font-size: 14px;
  line-height: 1.5;
}

.od_payment_notice i {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-size: 16px;
}

body.en {
  --font-family-tc: "Times New Roman", Times, serif;
  --font-family-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.en h1, .en h2, .en h3, .en h4 {
  letter-spacing: 0.02em;
}

.en .title-style-1 .title-main {
  letter-spacing: 0.02em;
}

.en .header_link {
  padding-left: 0;
  padding-right: 0;
}

.en .footer_quote {
  letter-spacing: 0.03em;
}

.en .index .hero_subtitle {
  letter-spacing: 0.3em;
}

.en .index .value_title {
  letter-spacing: 0.02em;
}

.en .about .trust_card .value_title {
  letter-spacing: 0.02em;
}

body.jp {
  --font-family-tc: "Noto Serif JP", "Yu Mincho", "YuMincho", serif;
  --font-family-sans: "Noto Sans JP", sans-serif;
}

.jp .header_link {
  padding-left: 0;
  padding-right: 0;
}