:root{
  --primary-color: #B800FF;
  --secondary-color: #FF9900;
  --seconary-word: #D6D6D6;
  --Neutral-color: #F4F4F4;
  --Neutral-opacity-color: linear-gradient(to bottom, #f4f4f420, #f4f4f410);;
  --Neutral-hover-bg: #f4f4f440;
  --hero-background: #1C1C1C;
  --nav-bg-color: #f4f4f420;
  --hero-bg-color: #2D013C;
  --glass-effect: saturate(180%) blur(10px);
  --nav-shadow: inset -2px 1px 1px #f4f4f460;
  --transition-medium: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --noto-sans-tc: "Noto Sans TC", sans-serif;
  --roboto-sans: "Roboto", sans-serif;    
  --border-radius: 10px;
  --letter-space: 2px;
  --txt-center: center;
  /* === Font Sizes === */
  --fs-xs: 13px;  /* Extra Small - 註解、標籤 */
  --fs-sm: 14px;  /* Small - 說明文字 */
  --fs-md: 16px;  /* Medium - 一般內文 */
  --fs-lg: 24px;  /* Large - 小標題 */
  --fs-xl: 32px;  /* Extra Large - 主標題 */
  --fs-xxl: 48px; /* 2XL - Hero Banner / 超大標題 */

  /* === Font Weights === */
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medinm: 600;
  /* === btn === */
  --btn-bg: linear-gradient(to right, #B800FF, #FF9900);
  --btn-padding: 8px 38px;
  --btn-sm-padding: 0 8px;
  --btn-border-radius: 10px 0 0 10px;

  /* === btn hover === */
  --btn-bg-hover: linear-gradient(to right, rgba(184, 0, 255, 0.9), rgba(255, 153, 0, 0.8));
  --btn-shadow-hover: 0 2px 4px rgba(0, 0, 0, .25);
}

.store-info .cards{
  margin: 16px 0;
}
.store-info .img-body{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.store-info .pic{
  width: 416px;
  border-radius: var(--border-radius);
  position: relative;
}
.store-info .pic:before{
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid transparent;
  border-radius: var(--border-radius);
  background: linear-gradient(to bottom, #B800FF, #FF9900);
  mask-image: linear-gradient(white, white), linear-gradient(white, white);
  mask-clip: padding-box, border-box;
  mask-composite: exclude, add;
}
.store-info .pic a{
  display: inline-block;
  width: 200px;
  height: 56px;
  padding: 16px;
  border: 1px solid var(--Neutral-color);
  border-radius: 10px 0 10px 0;
  position: absolute;
  bottom: 0;
  right: 0;  
  background: linear-gradient(to right, #B800FF 20%, #FF9900 );
  line-height: 1;
  color: var(--Neutral-color);
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
}
.store-info .text{
  width: 100%;
  margin: 32px 0;
  text-align: center;
  color: var(--Neutral-color);
}
.store-info .text .info-inner{
  margin-bottom: 24px;
  color: var(--Neutral-color);
  text-align: center;
}
@media screen and (min-width: 767px){
  .store-info .cards{
    display: flex;
    align-items: center;
    margin: 24px 0;
  }
}
@media screen and (min-width: 1023px){
  .store-info .text{
    width: 50%;
  }
  .store-info .img-body{
    width: 50%;
  }
}