:root {
      --glow-color: rgba(173, 102, 255, 0.7);
      --gradient-start: #8A56FF;
      --gradient-end: #E364A8;
    }

    @keyframes card-glow {
      0% { border-color: rgba(138, 86, 255, 0.3); box-shadow: 0 0 5px rgba(138, 86, 255, 0.1); }
      50% { border-color: rgba(138, 86, 255, 0.7); box-shadow: 0 0 20px rgba(138, 86, 255, 0.4); }
      100% { border-color: rgba(138, 86, 255, 0.3); box-shadow: 0 0 5px rgba(138, 86, 255, 0.1); }
    }
    
    @keyframes pulse-glow {
        0% { box-shadow: 0 0 15px rgba(138, 86, 255, 0.4); }
        50% { box-shadow: 0 0 25px rgba(227, 100, 168, 0.6); }
        100% { box-shadow: 0 0 15px rgba(138, 86, 255, 0.4); }
    }

    .faq-card {
      background-color: rgba(10, 10, 25, 0.6);
      border: 1px solid rgba(138, 86, 255, 0.3);
      border-radius: 1rem;
      backdrop-filter: blur(12px) saturate(150%);
      -webkit-backdrop-filter: blur(12px) saturate(150%);
      animation: card-glow 5s infinite linear;
    }

    .accordion-item {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }

    .accordion-item.is-visible {
      opacity: 1;
      transform: translateY(0);
    }
    
    .cc-btn-collapse {
      text-align: left;
      transition: all 0.3s ease;
      border: 1px solid transparent;
      border-left: 4px solid transparent;
      background-color: rgba(255, 255, 255, 0.05);
    }

    .cc-btn-collapse:hover {
       background-color: rgba(255, 255, 255, 0.1);
       border-left-color: var(--glow-color);
    }

    .cc-btn-collapse:not(.collapsed) {
      background-color: rgba(138, 86, 255, 0.2);
      border-color: rgba(138, 86, 255, 0.5);
      border-left: 4px solid var(--gradient-end);
    }
    
    .cc-btn-collapse .bi-caret-down-fill {
      transition: transform 0.3s ease;
    }
    .cc-btn-collapse:not(.collapsed) .bi-caret-down-fill {
      transform: rotate(180deg);
    }
    .cc-btn-collapse:not(.collapsed) > div > h2 > i {
      transform: scale(1.1);
      color: #fff;
    }
    
    .cc-nav-underline .nav-link i {
        margin-right: 0.5rem;
        font-size: 1.1em;
        vertical-align: text-bottom;
        transition: color 0.3s ease;
    }

    .cc-nav-underline .nav-link.active, .cc-nav-underline .show > .nav-link {
        color: #fff;
        border-bottom-color: var(--gradient-end);
    }

    .cc-nav-underline .nav-link.active i, .cc-nav-underline .show > .nav-link i {
      color: var(--gradient-end);
    }
    
    .btn-cta {
      background-image: linear-gradient(90deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
      border: none;
      color: white;
      font-weight: bold;
      padding: 0.8rem 2rem;
      border-radius: 50px;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      background-size: 200% 100%;
      animation: pulse-glow 3s infinite linear;
    }
    .btn-cta:hover {
      background-position: right center;
      transform: translateY(-3px);
      animation-play-state: paused;
      box-shadow: 0 8px 25px rgba(138, 86, 255, 0.5);
      color: white;
    }
    
    .btn-cta-alt {
      border: none;
      color: white;
      font-weight: bold;
      padding: 0.8rem 1.5rem;
      border-radius: 50px;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      background-size: 200% 100%;
      width: 100%;

      background-image: linear-gradient(90deg, #00A6C0 0%, #00ffff 100%);
      animation: pulse-glow-alt 3s infinite linear;
    }

    .btn-cta-alt:hover {
      background-position: right center;
      transform: translateY(-3px);
      color: white;
      
      animation-play-state: paused;
      box-shadow: 0 8px 25px rgba(0, 255, 255, 0.4);
    }

    @keyframes pulse-glow-alt {
        0%, 100% { box-shadow: 0 0 5px #00A6C0, 0 0 10px #00ffff; }
        50% { box-shadow: 0 0 15px #00A6C0, 0 0 25px #00ffff; }
    }

    .btn-inner-content {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
    }
    
    .btn-inner-content .btn-text {
        text-align: left;
        line-height: 1.2;
    }

    .main-title {
        font-weight: 900;
        color: #fff;
        text-shadow: 0 0 2px rgba(255,255,255,0.7), 1px 1px 3px rgba(0,0,0,0.5);
    }

    .main-title .gradient-text {
        background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
    }
    
    .btn-subtle-cta {
        background-color: rgba(138, 86, 255, 0.15);
        border: 1px solid rgba(138, 86, 255, 0.4);
        color: #fff;
    }

    .btn-subtle-cta:hover {
        background-color: rgba(138, 86, 255, 0.3);
        border-color: rgba(138, 86, 255, 0.7);
        color: #fff;
    }
    
    body.cc-bg::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('https://www.transparenttextures.com/patterns/stardust.png');
        background-size: 300px 300px;
        opacity: 0.1;
        z-index: -1;
        animation: move-stardust 60s linear infinite;
    }

    @keyframes move-stardust {
        from { background-position: 0 0; }
        to { background-position: 300px 300px; }
    }

  /* 只作用在鞋子規定區塊 */
  .shoe-rail{ position: relative; margin-top: 10px; }

  /* 橫向滑動容器 */
  #shoeCarousel.cc-scroll{
    --gap: 14px;
    display: flex;
    gap: var(--gap);
    overflow-x: auto;
    padding: 6px 2px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #shoeCarousel.cc-scroll::-webkit-scrollbar{ display:none; }

  /* 單張卡片 */
  #shoeCarousel .cc-mini-card{
    flex: 0 0 auto;
    width: clamp(180px, 34vw, 240px);
    border-radius: 12px;
    overflow: hidden;
    scroll-snap-align: start;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
  }
  #shoeCarousel .cc-mini-card img{
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    display: block;
  }
  #shoeCarousel .cc-mini-card__body{
    display:flex; justify-content:space-between; align-items:center;
    gap:8px; padding:10px 12px; line-height:1.2;
  }
  #shoeCarousel .cc-mini-card.no   strong{ color:#ef4444; }  /* 紅 */
  #shoeCarousel .cc-mini-card__body span{ opacity:.85; font-size:13px; }

  /* 隱藏導覽按鈕（hover 出現；手機常駐） */
  .shoe-nav{
    position:absolute; inset-block:0; margin:auto 0;
    width:44px; height:44px; border-radius:9999px; border:0;
    display:grid; place-items:center; cursor:pointer; z-index:2;
    background: rgba(255,255,255,.92); box-shadow:0 8px 24px rgba(0,0,0,.25);
    opacity:0; transition:opacity .2s;
  }
  .shoe-rail:hover .shoe-nav{ opacity:1; }
  .shoe-nav.left{ left:6px; } .shoe-nav.right{ right:6px; }
  .shoe-nav svg{ display:block; }

  /* 手機/平板：按鈕常駐，尺寸小一點 */
  @media (hover:none){
    .shoe-nav{ opacity:1; width:40px; height:40px; }
  }

  /* 拖曳時手勢提示，避免 iframe 吃到事件 */
  #shoeCarousel{ cursor: grab; }
  #shoeCarousel.dragging{ cursor: grabbing; }
  #shoeCarousel.dragging iframe{ pointer-events: none; }

#q-dresscode .cc-collapse-body { position: relative; overflow: hidden; }