:root {
      --bg: #f7f3ff;
      --bg-2: #fff9f2;
      --primary: #6f3fd6;/*主要色*/
      --primary-dark: #4a228f;/*主要色(暗)*/
      --accent: #ff9d2f;/*重點色*/
      --accent-2: #ff6b6b;/*重點色2*/
      --text: #333;/*文字顏色*/
      --muted: #666;/*文字顏色(淺)*/
      --card: rgba(255,255,255,.88);
      --line: rgba(111,63,214,.12);
      --shadow: 0 18px 50px rgba(68, 36, 124, 0.12);
      --max-width: 1200px;
      --radius: 24px;
      --h1: clamp(2rem, 4vw , 2.75rem);
      --h2: clamp(1.6rem, 4vw, 2.1rem);
      --h3: clamp(1.5rem, 3vw, 1.75rem);
      --h4: clamp(1.3rem, 2.5vw, 1.5rem);
      --text-primary: clamp(1.125rem, 2.5vw, 1.25rem);/*主要內文（最常用）*/
      --text-secondary: clamp(1rem, 2.5vw, 1.125rem);/*次要內文（如補充說明、標籤）。*/
      --text-caption: clamp(0.875rem, 2vw, 1rem);/*圖片說明、小註解。*/
    }

    * { box-sizing: border-box;}
    html { scroll-behavior: smooth; }
    body {  margin:0; padding:0; 
    }

    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }


    #CM826{
      width: 100%;
      height: auto;
      overflow: hidden;
      margin:0; padding:0; 
      font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at top left, rgba(174,132,255,.18), transparent 28%),
        radial-gradient(circle at top right, rgba(255,157,47,.18), transparent 24%),
        linear-gradient(180deg, #fbf8ff 0%, #fffdf9 42%, #f8f6ff 100%);
      
    }


    #CM826 .page{
      width: min(calc(100% - 32px), var(--max-width));
      margin: 0 auto;
      padding: 24px 0 24px 0;
    }

    #CM826 .hero {
      position: relative;
      overflow: hidden;
      border-radius: 28px;
      background: linear-gradient(135deg, rgba(209, 180, 255, 0.96) , rgba(192, 154, 254, 0.94) 46%, rgba(255, 198, 157, 0.92));
      box-shadow: var(--shadow);
      min-height: 150px;
      padding: 22px 30px;
      isolation: isolate;
    }

    #CM826 .hero::before,
    #CM826 .hero::after {
      content: "";
      position: absolute;
      border-radius: 999px;
      filter: blur(8px);
      opacity: .28;
      z-index: -1;
    }

    #CM826 .hero::before {
      width: 220px;
      height: 220px;
      background: rgba(255,255,255,.22);
      top: -100px;
      left: -40px;
    }

    #CM826 .hero::after {
      width: 220px;
      height: 220px;
      background: rgba(255,205,120,.30);
      right: -60px;
      bottom: -120px;
    }

    #CM826 .hero-copy {
      color: #fff;
      text-align: center;
    }

    #CM826 .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 6px 12px;
      border-radius: 999px;
      background: rgb(177, 129, 255);
      border: 1px solid rgb(172, 120, 255);
      font-size: var(--text-caption);
      letter-spacing: .08em;
      margin-bottom: 10px;
      backdrop-filter: blur(8px);
    }

    #CM826 .hero h1 {
      margin: 0;
      font-size: var(--h1);
      line-height: 1.15;
      letter-spacing: -.02em;
      font-weight: 900;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
	    text-shadow: 0 0px 8px rgba(0,0,0,.4);
    }

    #CM826 .hero h1 .discount {
      display: inline-block;
      color: #ffdf74;
    }

    #CM826 .hero p {
      margin: 10px 0 0;
      color: rgba(255,255,255,1);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
	    text-shadow: 0 0px 8px rgba(0,0,0,.4);
      font-size: var(--text-primary);
      line-height: 1.7;
	}

    #CM826 .section-head {
      margin: 38px 0 18px;
      display: flex;
      align-items: end;
      justify-content: space-between;
      gap: 16px;
    }

    #CM826 .section-head h2 {
      margin: 0;
      font-size: var(--h2);
      line-height: 1.2;
    }

    #CM826 .section-head p {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: var(--text-primary);
      line-height: 1.7;
    }

    #CM826 .legend {
      color: var(--muted);
      font-size: 14px;
      white-space: nowrap;
    }

    #CM826 .products {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 22px;
    }

    #CM826 .product {
      background: var(--card);
      border: 1px solid var(--line);
      box-shadow: 0 12px 30px rgba(76, 42, 135, 0.08);
      backdrop-filter: blur(10px);
      border-radius: 26px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    #CM826 .banner-link,
    #CM826 .title-link {
      display: block;
    }

    #CM826 .banner {
      position: relative;
      aspect-ratio: 1200 / 628;
      overflow: hidden;
      isolation: isolate;
      min-height: 220px;
    }

    #CM826 .banner::before,
    #CM826 .banner::after {
      content: "";
      position: absolute;
      inset: auto;
      border-radius: 50%;
      opacity: .28;
      filter: blur(4px);
      z-index: -1;
    }

    #CM826 .banner::before {
      width: 200px; height: 200px;
      top: -40px; right: -30px;
      background: rgba(255,255,255,.34);
    }

    #CM826 .banner::after {
      width: 240px; height: 240px;
      left: -60px; bottom: -90px;
      background: rgba(255,206,146,.38);
    }

    #CM826 .theme-purple { background: linear-gradient(135deg, #6d3bda, #8f55ff 52%, #ff9d2f); }
    #CM826 .theme-indigo { background: linear-gradient(135deg, #233b88, #4f59d7 52%, #8bd1ff); }
    #CM826 .theme-rose { background: linear-gradient(135deg, #8d2f74, #d04ba2 48%, #ffb997); }
    #CM826 .theme-night { background: linear-gradient(135deg, #16214d, #2841a6 48%, #3dc0ff); }

    #CM826 .product-body {
      padding: 22px 22px 24px;
      display: grid;
      gap: 14px;
      flex: 1;
    }

    #CM826 .product-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }

    #CM826 .tag {
      display: inline-flex;
      align-items: center;
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(111,63,214,.08);
      color: var(--primary-dark);
      font-size: var(--text-caption);
      font-weight: 700;
    }

    #CM826 .product h4{
      margin: 0;
      font-size: var(--h4);
      line-height: 1.25;
      text-indent: -10px;
    }

    #CM826 .title-link {
      transition: opacity .2s ease;
    }

    #CM826 .title-link:hover {
      opacity: .78;
    }

    #CM826 .product-desc {
      color: var(--muted);
      font-size: var(--text-secondary);
      line-height: 1.7;
      margin: 0 auto;
    }

    #CM826 .price-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 0px 14px;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      padding: 10px 0;
    }

    #CM826 .price-label {
      font-size: var(--text-caption);
      color: var(--muted);
    }

    #CM826 .price-old {
      font-size: clamp(1.2rem, 3vw, 1.5rem);
      color: #8f86a4;
      text-decoration: line-through;
      font-weight: 700;
    }

    #CM826 .price-new {
      font-size: clamp(1.8rem, 4vw, 2.25rem);
      font-weight: 900;
      line-height: 32px;
      color: var(--accent-2);
    }

    #CM826 .price-save {
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      gap: 6px; 

    }
	#CM826 .price-save a.copy-code {
      padding: 10px 14px;
      border-radius: 16px;
      background: linear-gradient(135deg, rgba(255,157,47,.14), rgba(255,107,107,.12));
      color: #b2472f;
      font-size: .9rem;
      font-weight: 800;
    }
	#CM826 .price-save .ri-file-copy-line{
    	color: #b2472f;
      font-size: 1.1rem;
	  margin-left: 4px;
    }	

    #CM826 .actions {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
	  margin: 0 auto;
	  width: 200px;
    }

    #CM826 .product-link {
	  width: 100%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--primary), #8c58ff);
      color: #fff;
      font-weight: 800;
      font-size: var(--text-secondary);
      box-shadow: 0 12px 24px rgba(111,63,214,.18);
      transition: transform .2s ease, box-shadow .2s ease;
    }

    #CM826 .product-link:hover { transform: translateY(-2px); box-shadow: 0 16px 28px rgba(111,63,214,.24); }

    #CM826 .notice {
      margin-top: 28px;
      padding: 18px 20px;
      border-radius: 20px;
      background: rgba(255,255,255,.7);
      border: 1px solid var(--line);
      color: var(--muted);
      font-size: 14px;
    }

    #CM826 .notice strong { color: var(--text); }

    @media (min-width: 980px) {
      .MOBILE_LOGIN, .FOOT_MOBILE{ display:none;}	
      .PC_LOGIN, .FOOT_PC{ width:100%; display:block;}
     }

    @media (max-width: 980px) {
    	#CM826 .products { grid-template-columns: 1fr; }
      #CM826 .hero { padding: 20px 22px; }
      #CM826 .hero h1,
      #CM826 .hero p {
        white-space: normal;
        text-overflow: initial;
      }
      .MOBILE_LOGIN, .FOOT_MOBILE{ display:none;}	
      .PC_LOGIN, .FOOT_PC{ width:100%; display:block;}
    }

    @media (max-width: 640px) {
      #CM826 .page{ width: min(calc(100% - 20px), var(--max-width)); padding-top: 20px; }
      #CM826 .hero { border-radius: 24px; min-height: auto; padding: 18px 16px; }
      #CM826 .banner { min-height: 180px; }
      #CM826 .price-new{ line-height: 28px;}
      #CM826 .product-body { padding: 18px; }
      #CM826 .price-save { margin-left: 0; margin-top: 10px;}
      #CM826 .actions { width: 100%; align-items: stretch; }
      #CM826 .product-link { width: 100%;}
      .MOBILE_LOGIN, .FOOT_MOBILE{ display:block;}
      .PC_LOGIN, .FOOT_PC{ width:100%; display:none;}
    }