/* 線上訂購表單樣式（只在訂購頁載入） */
.of{
      --bg-cream: #FAF5E4;       
      --card-bg: #FFFDF7;        
      --primary-red: #364E32;    
      --primary-hover: #263923;  
      --accent-gold: #C23A49;    
      --leaf-green: #5F7E58;     
      --text-dark: #332B27;      
      --text-sub: #594F49;       
      --border-color: #DCE5D1;   
      --light-bg: #F2F6EC;       
      --shadow-sm: 0 4px 15px rgba(54, 78, 50, 0.05);
      --shadow-md: 0 8px 25px rgba(54, 78, 50, 0.1);
      --radius-lg: 16px;
      --radius-md: 12px;
      --radius-pill: 999px;
      --font-heading: 'Noto Serif TC', serif;
      --font-body: 'Noto Sans TC', sans-serif;
    }
.of *,.of *::before,.of *::after{
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
.of{
      font-family: var(--font-body);
      background-color: var(--bg-cream);
      color: var(--text-dark);
      line-height: 1.8;
      letter-spacing: 0.3px;
      background-image: repeating-linear-gradient(
        to bottom,
        rgba(54, 78, 50, 0.015) 0px,
        rgba(54, 78, 50, 0.015) 1px,
        transparent 1px,
        transparent 10px
      );
      padding-bottom: 60px;
    }
.of .of-container{
      max-width: 680px;
      margin: 0 auto;
      padding: 20px 16px;
    }
.of .header-banner{
      background: #FFFDF7;
      border: 1.5px solid var(--border-color);
      border-radius: var(--radius-lg);
      padding: 12px 24px;
      text-align: center;
      margin-bottom: 20px;
      box-shadow: var(--shadow-sm);
    }
.of .header-logo-img{
      max-width: 100%;
      height: auto;
      max-height: 100px;
      object-fit: contain;
      margin-bottom: 0;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }
.of .header-banner .subtitle{
      font-family: var(--font-heading);
      font-size: 1.05rem;
      color: var(--primary-red);
      font-weight: 700;
      letter-spacing: 1.5px;
    }
.of .stepper-wrapper{
      display: flex;
      justify-content: space-between;
      margin-bottom: 24px;
      background: var(--card-bg);
      padding: 14px 18px;
      border-radius: var(--radius-md);
      border: 1.5px solid var(--border-color);
      box-shadow: var(--shadow-sm);
    }
.of .step-item{
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      position: relative;
      font-size: 0.8rem;
      color: var(--text-sub);
      font-weight: 500;
    }
.of .step-item:not(:last-child)::after{
      content: "";
      position: absolute;
      top: 14px;
      right: -50%;
      width: 100%;
      height: 1.5px;
      background-color: var(--border-color);
      z-index: 1;
    }
.of .step-number{
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background-color: var(--light-bg);
      color: var(--text-sub);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      margin-bottom: 4px;
      z-index: 2;
      transition: all 0.3s ease;
      border: 1px solid var(--border-color);
    }
.of .step-item.active .step-number{
      background-color: var(--primary-red);
      color: #FFF;
      border-color: var(--primary-red);
    }
.of .step-item.active{
      color: var(--primary-red);
      font-weight: 700;
    }
.of .step-item.completed .step-number{
      background-color: var(--accent-gold);
      color: #FFF;
      border-color: var(--accent-gold);
    }
.of .page-card{
      background: var(--card-bg);
      border-radius: var(--radius-lg);
      border: 1.5px solid var(--border-color);
      padding: 28px 24px;
      box-shadow: var(--shadow-sm);
      margin-bottom: 24px;
    }
.of .section-title{
      font-family: var(--font-heading);
      font-size: 1.35rem;
      color: var(--primary-red);
      border-bottom: 1.5px solid var(--light-bg);
      padding-bottom: 10px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
.of .welcome-block{
      text-align: center;
      padding: 8px 0 26px;
    }
.of .welcome-title{
      font-family: var(--font-heading);
      font-size: 2.4rem;
      font-weight: 600;
      letter-spacing: 8px;
      color: var(--primary-red);
      line-height: 1.3;
    }
.of .welcome-sub{
      margin-top: 14px;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 2.5px;
      color: #9A7E5D;
      white-space: nowrap;
    }
.of .welcome-tag{
      margin-top: 12px;
      font-size: 0.95rem;
      font-weight: 700;
      letter-spacing: 2px;
      color: #9A7E5D;
    }
.of .welcome-divider{
      position: relative;
      height: 1px;
      background: #C9B48F;
      max-width: 260px;
      margin: 20px auto 0;
    }
.of .welcome-divider::before,.of .welcome-divider::after{
      content: "";
      position: absolute;
      top: -4px;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #9A7E5D;
    }
.of .welcome-divider::before{ left: -4px; }
.of .welcome-divider::after{ right: -4px; }
.of .guide-poster-wrapper{
      margin-bottom: 20px;
      border-radius: var(--radius-md);
      overflow: hidden;
      border: 1.5px solid var(--border-color);
      text-align: center;
      background: var(--light-bg);
    }
.of .guide-poster-img{
      width: 100%;
      height: auto;
      display: block;
    }
.of .notice-box{
      background-color: var(--light-bg);
      border-left: 4px solid var(--primary-red);
      padding: 16px 18px;
      border-radius: 8px;
      margin-bottom: 20px;
      font-size: 0.92rem;
    }
.of .notice-box h4{
      color: var(--primary-red);
      margin-bottom: 8px;
      font-size: 1.05rem;
      font-family: var(--font-heading);
    }
.of .notice-box ul{
      padding-left: 20px;
      color: var(--text-sub);
    }
.of .notice-box li{
      margin-bottom: 6px;
    }
.of .policy-agreement{
      background: #F5FAF0;
      border: 1px solid var(--border-color);
      padding: 14px 18px;
      border-radius: var(--radius-md);
      font-size: 0.85rem;
      color: var(--text-sub);
      line-height: 1.6;
      margin-bottom: 24px;
    }
.of .grade-card{
      border: 1.5px solid var(--border-color);
      border-radius: var(--radius-md);
      padding: 20px;
      margin-bottom: 20px;
      background: #FFFDF7;
      box-shadow: var(--shadow-sm);
    }
.of .grade-header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 12px;
      border-bottom: 1.5px dashed var(--border-color);
      margin-bottom: 14px;
    }
.of .grade-title{
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--primary-red);
      font-family: var(--font-heading);
      display: flex;
      align-items: center;
      gap: 6px;
    }
.of .grade-price-tag{
      background: var(--light-bg);
      color: var(--primary-red);
      font-weight: 700;
      font-size: 0.9rem;
      padding: 3px 12px;
      border-radius: var(--radius-pill);
      border: 1px solid var(--border-color);
    }
.of .spec-item{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 0;
    }
.of .spec-item:not(:last-child){
      border-bottom: 1px dotted var(--border-color);
    }
.of .spec-info{
      display: flex;
      flex-direction: column;
    }
.of .spec-name{
      font-weight: 700;
      font-size: 0.95rem;
    }
.of .spec-sub{
      font-size: 0.8rem;
      color: var(--text-sub);
    }
.of .spec-price{
      font-weight: 700;
      color: var(--accent-gold);
      font-size: 1.05rem;
    }
.of .qty-counter{
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--light-bg);
      padding: 4px 8px;
      border-radius: var(--radius-pill);
      border: 1px solid var(--border-color);
    }
.of .qty-btn{
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 1px solid var(--border-color);
      background: #FFF;
      color: var(--primary-red);
      font-weight: bold;
      font-size: 1rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
    }
.of .qty-btn:hover{
      background: var(--primary-red);
      color: #FFF;
      border-color: var(--primary-red);
    }
.of .qty-val{
      width: 26px;
      text-align: center;
      font-weight: 700;
      font-size: 0.95rem;
    }
.of .summary-card{
      background: linear-gradient(135deg, #F4F8EC 0%, #FAF5E4 100%);
      border: 1.5px solid var(--primary-red);
      border-radius: var(--radius-md);
      padding: 18px 22px;
      margin-top: 20px;
    }
.of .summary-row{
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
      font-size: 0.95rem;
    }
.of .summary-row.total{
      border-top: 1px dashed var(--border-color);
      padding-top: 10px;
      margin-top: 10px;
      font-size: 1.2rem;
      font-weight: 900;
      color: var(--primary-red);
    }
.of .form-group{
      margin-bottom: 18px;
    }
.of .form-group label{
      display: block;
      font-weight: 700;
      margin-bottom: 6px;
      font-size: 0.92rem;
      color: var(--text-dark);
    }
.of .form-group label .required{
      color: var(--accent-gold);
      margin-left: 2px;
    }
.of .form-control,.of .form-select{
      width: 100%;
      padding: 12px 14px;
      border: 1px solid var(--border-color);
      border-radius: var(--radius-md);
      font-size: 0.95rem;
      font-family: inherit;
      background-color: #FFF;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
.of .form-control:focus,.of .form-select:focus{
      outline: none;
      border-color: var(--primary-red);
      box-shadow: 0 0 0 3px rgba(54, 78, 50, 0.15);
    }
.of .form-row{
      display: flex;
      gap: 12px;
    }
.of .form-row .form-group{
      flex: 1;
    }
.of .radio-card-group{
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
.of .radio-card{
      border: 1px dashed var(--border-color);
      border-radius: var(--radius-md);
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      transition: all 0.2s;
      background: #FFFDF7;
    }
.of .radio-card:hover{
      border-color: var(--primary-red);
    }
.of .radio-card input[type="radio"]{
      accent-color: var(--primary-red);
      width: 18px;
      height: 18px;
    }
.of .radio-card-info{
      flex: 1;
    }
.of .radio-card-title{
      font-weight: 700;
      font-size: 0.95rem;
    }
.of .radio-card-sub{
      font-size: 0.82rem;
      color: var(--text-sub);
    }
.of .radio-card-price{
      font-weight: 700;
      color: var(--accent-gold);
    }
.of .bank-card{
      background: #F2F6EC;
      border: 1.5px dashed var(--primary-red);
      border-radius: var(--radius-md);
      padding: 18px;
      margin-bottom: 20px;
    }
.of .bank-row{
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      font-size: 0.95rem;
    }
.of .btn-copy{
      background: #FFF;
      border: 1px solid var(--border-color);
      color: var(--primary-red);
      font-size: 0.78rem;
      padding: 4px 12px;
      border-radius: var(--radius-pill);
      cursor: pointer;
      font-weight: 700;
      transition: background-color 0.2s;
    }
.of .btn-copy:hover{
      background: var(--primary-red);
      color: #FFF;
    }
.of .btn-group{
      display: flex;
      gap: 12px;
      margin-top: 24px;
    }
.of .of-btn{
      flex: 1;
      padding: 14px 20px;
      border-radius: var(--radius-pill);
      border: none;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      text-align: center;
      text-decoration: none;
      transition: all 0.25s ease;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
.of .btn-primary{
      background: linear-gradient(135deg, #476641 0%, #364E32 100%);
      color: #FFF;
      box-shadow: 0 4px 14px rgba(54, 78, 50, 0.25);
    }
.of .btn-primary:hover{
      background: var(--primary-hover);
      transform: translateY(-1px);
      box-shadow: 0 6px 18px rgba(54, 78, 50, 0.35);
    }
.of .btn-secondary{
      background: #FFF;
      color: var(--text-dark);
      border: 1px solid var(--border-color);
    }
.of .btn-secondary:hover{
      background: var(--light-bg);
    }
.of .btn-line{
      background: #06C755;
      color: #FFF;
    }
.of .btn-line:hover{
      background: #05B34C;
    }
.of .success-icon{
      font-size: 60px;
      text-align: center;
      margin-bottom: 12px;
    }
.of .success-title{
      font-family: var(--font-heading);
      font-size: 1.6rem;
      color: var(--primary-red);
      text-align: center;
      margin-bottom: 8px;
    }
.of .hidden{
      display: none !important;
    }
.of .spec-sub{ white-space: nowrap; }
@media (max-width: 480px){.of .page-card{ padding: 24px 16px; }
.of .grade-card{ padding: 16px 12px; }
.of .spec-sub{ font-size: 0.72rem; }
.of .spec-price{ font-size: 0.95rem; margin: 0 6px; }
.of .qty-counter{ gap: 4px; padding: 3px 6px; }
.of .qty-btn{ width: 26px; height: 26px; }
.of .qty-val{ width: 22px; }}
.of .spec-info{ flex: 1; min-width: 0; }
.of .spec-price{ flex: none; width: 84px; text-align: left; margin: 0 8px 0 8px; }
.of .qty-counter{ flex: none; }
@media (max-width: 480px){.of .spec-price{ width: 62px; text-align: left; margin: 0 6px 0 4px; }}
@media (min-width: 601px){.of .spec-item{ display: grid; grid-template-columns: 1fr 100px 1fr; align-items: center; }
.of .spec-price{ width: auto; margin: 0; text-align: center; }
.of .qty-counter{ justify-self: end; }}
.of .spec-item.sold-out{ opacity: 0.55; }
.of .spec-item.sold-out .qty-counter{ display: none; }
.of .sold-out-badge{
      justify-self: end;
      background: #EFE8DA;
      color: #8A7657;
      border: 1px solid #C9B48F;
      border-radius: var(--radius-pill);
      padding: 4px 14px;
      font-size: 0.85rem;
      font-weight: 700;
      white-space: nowrap;
    }
.of .of-btn:disabled{ opacity: 0.6; cursor: not-allowed; transform: none; }
.of{ padding-bottom: 0; }
.of .site-footer{
      position: relative;
      margin-top: 40px;
      padding: 90px 16px 34px;
      text-align: center;
      color: #8A7657;
      font-size: 0.85rem;
      background: linear-gradient(to bottom, rgba(228,234,215,0) 0%, #E6ECD3 45%, #DDE6C6 100%);
    }
.of .site-footer .wave{
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 80px;
    }
.of .social-row{
      display: flex;
      justify-content: center;
      gap: 34px;
      margin-bottom: 20px;
      position: relative;
    }
.of .social-item{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      color: #8A7657;
      text-decoration: none;
      font-size: 0.85rem;
      letter-spacing: 1px;
    }
.of .social-icon{
      width: 46px;
      height: 46px;
      border-radius: 50%;
      border: 1px solid #A98F6B;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(255, 253, 247, 0.35);
      transition: all 0.25s;
    }
.of a.social-item:hover .social-icon{ background: #FFFDF7; transform: translateY(-2px); }
.of .social-icon svg{ width: 22px; height: 22px; stroke: #8A7657; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.of .social-icon svg .solid{ fill: #8A7657; stroke: none; }
.of .footer-links{ margin-bottom: 12px; letter-spacing: 1px; }
.of .footer-links a{ color: #8A7657; cursor: pointer; text-decoration: none; }
.of .footer-links a:hover{ text-decoration: underline; }
.of .footer-links .dot{ margin: 0 14px; }
.of .footer-copy{ font-size: 0.8rem; letter-spacing: 0.8px; }
.of .policy-modal{
      position: fixed; inset: 0; z-index: 100;
      background: rgba(54, 78, 50, 0.45);
      display: none; align-items: center; justify-content: center; padding: 20px;
    }
.of .policy-modal.show{ display: flex; }
.of .policy-modal-box{
      background: var(--card-bg);
      border-radius: var(--radius-lg);
      border: 1.5px solid var(--border-color);
      max-width: 520px; width: 100%; max-height: 80vh; overflow: auto;
      padding: 24px 22px;
      box-shadow: var(--shadow-md);
    }
.of .policy-modal-box h3{ font-family: var(--font-heading); color: var(--primary-red); text-align: center; margin-bottom: 14px; }
.of .policy-modal-box p{ font-size: 0.92rem; color: var(--text-sub); margin-bottom: 10px; }
.of #hidden_iframe{
      display: none;
    }
.of{--bg-cream:transparent;--card-bg:#fff;--primary-red:#1e3a5a;--primary-hover:#16304c;--accent-gold:#b83a45;
--leaf-green:#5f9a3a;--text-dark:#34495e;--text-sub:#6b7b8c;--border-color:#dfe6cf;--light-bg:#f6f8ec;
--shadow-sm:0 8px 26px rgba(95,154,58,.08);--shadow-md:0 14px 40px rgba(95,154,58,.12);
--radius-lg:24px;--radius-md:16px;--font-heading:"Noto Sans TC","Microsoft JhengHei",sans-serif;
background:none!important;padding-bottom:0!important;letter-spacing:.06em}
.of ul{list-style:disc;padding-left:1.3em}
.of .of-container{padding-top:0}
.of .of-policy{text-align:center;font-size:13px;color:var(--text-sub);margin-top:26px}
.of .of-policy a{cursor:pointer;color:var(--leaf-green);text-decoration:underline;margin:0 6px}
.of #socialRow{display:none}
@media (max-width:480px){.of .spec-sub{white-space:normal;line-height:1.6}.of .spec-info{padding-right:4px}}

/* ---- 臨時訂購連結：庫存看板 ---- */
.quick-banner{background:#fff;border:2px dashed #8cc152;border-radius:20px;padding:22px 24px;margin:0 0 22px;text-align:center;box-shadow:0 6px 20px rgba(30,58,90,.06)}
.quick-title{margin:0 0 8px;font-size:24px;color:#1e3a5a;letter-spacing:.06em}
.quick-date{display:inline-block;background:#1e3a5a;color:#fff;border-radius:999px;padding:4px 16px;font-size:14px;letter-spacing:.06em;margin:0 0 10px}
.quick-intro{color:#5b6b7c;font-size:15px;line-height:1.9}
.quick-stock{list-style:none;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:16px 0 0;padding:0}
.quick-stock li{background:#eef2dc;border-radius:999px;padding:8px 18px;font-size:15px;color:#1e3a5a}
.quick-stock li b{margin-right:8px}
.quick-stock li.out{background:#f1f1f1;color:#9aa4ae;text-decoration:line-through}
@media (max-width:600px){.quick-title{font-size:20px}.quick-stock li{font-size:14px;padding:7px 14px}}

/* ---- 臨時訂購連結：簡單版表單 ---- */
.qf{max-width:640px;margin:0 auto}
.qf .hidden,#qfSuccess.hidden{display:none}
.qf-card{background:#fff;border-radius:20px;padding:24px;margin:0 0 18px;box-shadow:0 6px 20px rgba(30,58,90,.07)}
.qf-h{margin:0 0 16px;font-size:19px;color:#1e3a5a;letter-spacing:.04em;border-left:5px solid #8cc152;padding-left:12px}
.qf-grade{margin-bottom:18px}
.qf-grade-head{display:flex;justify-content:space-between;align-items:baseline;background:#eef2dc;border-radius:10px;padding:8px 14px;margin-bottom:8px}
.qf-grade-head b{color:#1e3a5a;font-size:17px}
.qf-grade-head span{color:#5f9a3a;font-size:14px}
.qf-item{display:flex;align-items:center;gap:10px;padding:10px 6px;border-bottom:1px dashed #e6ebd6}
.qf-item:last-child{border-bottom:0}
.qf-item-name{flex:1;color:#34495e}
.qf-item-name em{font-style:normal;color:#b83a45;font-size:13px}
.qf-item-price{width:76px;text-align:right;color:#1e3a5a;font-weight:700}
.qf-item.out{opacity:.45}
.qf-qty{display:flex;align-items:center;gap:6px}
.qf-qty button{width:34px;height:34px;border-radius:10px;border:1px solid #cfd8c4;background:#f7faf0;color:#1e3a5a;font-size:18px;line-height:1;cursor:pointer}
.qf-qty button:disabled{opacity:.4;cursor:not-allowed}
.qf-qty span{min-width:26px;text-align:center;font-weight:700;color:#1e3a5a}
.qf-empty{text-align:center;color:#b83a45;margin:10px 0 0}
.qf-row{margin-bottom:12px}
.qf-row label{display:block;margin-bottom:6px;color:#1e3a5a;font-size:15px}
.qf-row label i{color:#b83a45;font-style:normal}
.qf-row input,.qf-row select,.qf-row textarea{width:100%;padding:11px 12px;border:1px solid #d7ded0;border-radius:12px;font-size:16px;font-family:inherit;color:#34495e;background:#fcfdf9}
.qf-row input:focus,.qf-row select:focus,.qf-row textarea:focus{outline:2px solid #8cc152;border-color:#8cc152}
.qf-same{display:block;margin:4px 0 14px;color:#34495e;font-size:15px}
.qf-pay{display:block;padding:12px 14px;border:1px solid #d7ded0;border-radius:12px;margin-bottom:10px;color:#34495e;cursor:pointer}
.qf-bank{background:#f6f8ec;border-radius:12px;padding:14px 16px;margin:4px 0 16px;color:#34495e;font-size:15px;line-height:1.9}
.qf-bank.hidden{display:none}
.qf-total{border-top:2px dashed #e0e6d2;padding-top:14px;margin-top:6px}
.qf-total>div{display:flex;justify-content:space-between;padding:5px 0;color:#5b6b7c}
.qf-total>div.hidden{display:none}
.qf-grand{border-top:1px solid #e6ebd6;margin-top:6px;padding-top:10px!important;font-size:19px;color:#1e3a5a!important}
.qf-grand b{color:#b83a45}
.qf-submit{width:100%;margin-top:16px;padding:15px;border:0;border-radius:999px;background:#5f9a3a;color:#fff;font-size:18px;font-family:inherit;letter-spacing:.08em;cursor:pointer}
.qf-submit:disabled{opacity:.6}
.qf-tip{text-align:center;color:#8a97a4;font-size:13px;margin:10px 0 0}
.qf-success{max-width:640px;margin:0 auto;text-align:center}
.qf-success h2{color:#1e3a5a;margin:0 0 10px}
.qf-line{display:inline-block;margin-top:12px;padding:12px 26px;border-radius:999px;background:#06c755;color:#fff;text-decoration:none}
@media (max-width:600px){.qf-card{padding:18px 16px}.qf-h{font-size:17px}}

.quick-note{margin:16px auto 0;max-width:520px;background:#fff6f5;border:1px dashed #e7b3b6;border-radius:14px;padding:12px 16px;color:#b83a45;font-size:15px;line-height:1.8}
.quick-note-btn{display:inline-block;margin-top:8px;background:#b83a45;color:#fff;text-decoration:none;border-radius:999px;padding:8px 20px;font-size:15px}
.qf-empty .quick-note-btn{margin-top:12px}
.qf-ok-icon{font-size:42px;line-height:1}
.qf-success h2{font-size:20px;margin:8px 0 6px}
.qf-ok-sub{color:#5b6b7c;font-size:15px;margin:0 0 18px}
.qf-ok-bank{background:#f2f6ec;border:1.5px dashed #b83a45;border-radius:14px;padding:14px 16px;margin-bottom:18px;font-size:15px;color:#34495e;line-height:1.8}
.qf-ok-bank strong{color:#b83a45}
.qf-ok-bank.hidden{display:none}
.qf-ok-card{background:#f6f8ec;border-radius:16px;padding:16px 18px;margin-bottom:18px;text-align:left}
.qf-ok-card h4{margin:0 0 10px;color:#b83a45;font-size:16px}
.qf-ok-row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed #e0e6d2;font-size:15px;color:#34495e}
.qf-ok-row:last-child{border-bottom:0}
.qf-ok-row span:first-child{white-space:nowrap;color:#5b6b7c}
.qf-ok-row span:last-child{text-align:right}
.qf-ok-row strong{color:#b83a45;font-size:19px}
.qf-ok-note{background:#fff;border:1px solid #e6ebd6;border-radius:14px;padding:14px 16px;text-align:left;margin-bottom:18px}
.qf-ok-note h4{margin:0 0 6px;color:#1e3a5a;font-size:15px}
.qf-ok-note p{margin:0;color:#5b6b7c;font-size:14px;line-height:1.8}
.qf-ok-btns{display:flex;flex-direction:column;gap:10px}
.qf-again{padding:12px 26px;border-radius:999px;border:1px solid #cfd8c4;background:#fff;color:#1e3a5a;font-size:16px;font-family:inherit;cursor:pointer}
.qf-success .qf-line{margin-top:0}

.qf-ok-row.hidden{display:none}

.qf-shot{padding:12px 26px;border-radius:999px;border:1px solid #1e3a5a;background:#1e3a5a;color:#fff;font-size:16px;font-family:inherit;cursor:pointer}
.of .btn-shot{background:#1e3a5a;color:#fff;border:0}
.cb-receipt-box{margin:16px auto 0;max-width:420px;text-align:center}
.cb-receipt-tip{color:#b83a45;font-size:14px;margin:0 0 8px}
.cb-receipt-box img{width:100%;border-radius:14px;box-shadow:0 6px 20px rgba(30,58,90,.15)}

.quick-allout{background:#b83a45;color:#fff;border-radius:14px;padding:14px 18px;margin:4px auto 14px;max-width:520px;font-size:17px;font-weight:700;letter-spacing:.04em;line-height:1.7}
@media (max-width:600px){.quick-allout{font-size:16px;padding:12px 14px}}

.qf-filled{color:#5f9a3a;font-size:14px;margin:6px 0 0}
.qf-filled.hidden{display:none}

.qf-hint{color:#b83a45;font-size:14px;margin:-2px 0 8px}
.qf-addr{display:flex;gap:10px;margin-bottom:10px}
.qf-addr select{flex:1;min-width:0;padding:11px 12px;border:1px solid #d7ded0;border-radius:12px;font-size:16px;font-family:inherit;color:#34495e;background:#fcfdf9}
@media (max-width:480px){.qf-addr{flex-direction:column}}

.qf-hint a{color:inherit;text-decoration:underline}

/* ---- 當日現場現貨：獨立單頁 ---- */
body.cb-quick-page{background:#f6f8ec}
.quick-page{max-width:700px;margin:0 auto;padding:26px 16px 50px}
.quick-logo{text-align:center;margin:0 0 18px}
.quick-logo img{width:118px;height:auto;display:block;margin:0 auto}
.quick-copy{text-align:center;color:#8a97a4;font-size:13px;margin:26px 0 0}
.cb-quick-page .quick-banner{background:#fff}
@media (max-width:600px){.quick-page{padding:18px 12px 40px}.quick-logo img{width:100px}}

.qf-err{background:#fff6f5;border:1.5px dashed #e7b3b6;border-radius:14px;padding:14px 16px;margin:0 0 14px;color:#b83a45;font-size:15px;line-height:1.85}
.qf-err a{color:#b83a45;text-decoration:underline}

/* ---- App 內建瀏覽器提示 ---- */
.cb-inapp{background:#fff8e6;border:1px solid #f0dca8;border-radius:14px;padding:13px 16px;margin:0 0 16px;color:#7a5a12;font-size:14px;line-height:1.8;text-align:center}
.cb-inapp-t{display:block}
.cb-inapp-btn{display:inline-block;margin:8px 0 4px;background:#1e3a5a;color:#fff;text-decoration:none;border-radius:999px;padding:9px 22px;font-size:15px}
.cb-inapp-s{display:block;font-size:12.5px;color:#9a7b31}
.quick-page .cb-inapp{max-width:640px;margin:0 auto 16px}


/* ============ 優惠價與 NG 果（寫在這裡才不會被上面的 .of * reset 蓋掉） ============ */
.of .spec-price s,.of .qf-item-price s{color:#a9b4bd;font-size:.8em;margin-right:5px;font-weight:400;display:inline-block}
.of .spec-sale{display:inline-block;background:var(--accent-gold,#b83a45);color:#fff;font-size:10.5px;font-weight:700;border-radius:999px;padding:2px 9px;margin-left:6px;letter-spacing:.04em;line-height:1.6}
.of .qf-item-note,.of .spec-note{display:block;font-size:11px;color:#a9b4bd;font-weight:400;letter-spacing:.02em;line-height:1.7;margin-top:2px}
.of .qf-item-price{line-height:1.5;text-align:right}

.ng-crack{background:#fff8e6;border:1.5px solid #e6cc8a;border-radius:14px;padding:16px 20px;margin:0 0 18px;line-height:1.95;font-size:14.5px;color:#6b5320}
.of .ng-crack{padding:16px 20px;margin:0 0 18px}
.ng-crack-t,.of .ng-crack-t{display:block;width:-moz-fit-content;width:fit-content;background:#d8a13a;color:#fff;font-size:12.5px;font-weight:700;border-radius:999px;padding:3px 14px;margin:0 0 9px;letter-spacing:.06em}
@media (max-width:600px){
  .of .ng-crack{padding:14px 16px;font-size:14px}
  .of .qf-item-price .spec-sale{display:block;width:-moz-fit-content;width:fit-content;margin:3px 0 0 auto}
}
.of .qf-bank-note{margin-top:9px;padding-top:8px;border-top:1px dashed var(--border-color);font-size:12.5px;line-height:1.85;color:var(--text-sub)}

/* 「已自動帶入上次填寫的資料」＋獨立的清除小框（三張訂購單共用） */
.of .qf-filled{display:flex;align-items:center;gap:10px;flex-wrap:wrap;color:#5f9a3a;font-size:14px;margin:8px 0 0}
.of .qf-filled.hidden{display:none}
.of .qf-filled-txt{line-height:1.5}
.of .qf-clear{flex:none;appearance:none;background:#fff;color:#5f9a3a;border:1px solid #9cbf7d;border-radius:8px;padding:4px 14px;font-size:13px;line-height:1.6;font-family:inherit;cursor:pointer;transition:background .15s,border-color .15s}
.of .qf-clear:hover{background:#f2f7ea;border-color:#5f9a3a}
.of .qf-clear:active{background:#e6f0da}

/* 寄件人（自行填寫時展開） */
.of #qfSender{margin-bottom:4px}
.of #qfSender.hidden{display:none}

/* 一鍵複製帳號（現貨單／NG 果單） */
.of .qf-bank-no{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.of .qf-copy{flex:none;appearance:none;background:#fff;color:#1e3a5a;border:1px solid #c3cfda;border-radius:8px;padding:5px 12px;font-size:13px;line-height:1.6;font-family:inherit;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.of .qf-copy:hover{background:#eef3f8;border-color:#7f99b4}
.of .qf-copy.copied{background:#eaf4e2;border-color:#7fa85c;color:#3d6b1f}
.of .btn-copy.copied{background:#eaf4e2;border-color:#7fa85c;color:#3d6b1f}

/* 訂購完成畫面：加 LINE 開通出貨通知的提示 */
.of .qf-ok-line{margin:16px 0 0;padding:14px 16px;border-radius:12px;background:#eef4e6;border:1px solid #cbdfb6;color:#3d6b1f;font-size:15px;line-height:1.85;text-align:center}
.of .qf-ok-line-again{background:#f4f7ef;border-color:#dde7d0;color:#5b6b58}
.of .qf-ok-line.hidden{display:none}
.of .qf-line-redo{display:inline-block;margin-top:6px;font-size:13px;color:#7c8a78;text-decoration:underline}

/* 送禮模式 */
.of .qf-gift-toggle{font-weight:700}
.of .qf-gift-hint{margin-top:2px}
.of #qfGiftBox.hidden{display:none}

/* 加購果類：名稱下方的小字說明 */
.of .grade-note{font-size:0.82rem;color:var(--text-sub);font-weight:400;margin-top:4px;line-height:1.7}

/* 加購果類上方的分隔標題（例：期間限定） */
.of .grade-divider{display:flex;align-items:center;gap:14px;margin:30px 0 18px;color:var(--primary-red);font-weight:700;font-size:1rem;letter-spacing:.06em}
.of .grade-divider::before,.of .grade-divider::after{content:"";flex:1;height:0;border-top:1.5px dashed var(--border-color)}
.of .grade-divider span{flex:none}
@media (max-width:600px){.of .grade-divider{margin:24px 0 14px;font-size:.95rem;gap:10px}}