/* Shared quotation form; latest 0.5 refinements are at the end. */
#yk-quotation {
  --ink: #333; --green: #3d4246; --border: #ddd;
  font: 14px/1.65 Arial, "Microsoft JhengHei", sans-serif;
  color: var(--ink); max-width: 1200px; margin: 0 auto; padding: 20px 24px 0;
}
#yk-quotation * { box-sizing: border-box; }






#yk-quotation .test-banner { color:#786644; background:#faf7ef; border-left:3px solid #d9c79e; padding:8px 12px; font-size:12px; max-width:920px; }
#yk-quotation .intro { padding:22px 0 26px; max-width:920px; }
#yk-quotation .eyebrow { color:#777; font-size:12px; }
#yk-quotation h1 { font-size:25px; line-height:1.35; margin:8px 0 25px; font-weight:700; }
#yk-quotation p { margin:10px 0; }
#yk-quotation .intro p { color:#444; margin:12px 0 0; }
#yk-quotation .intro a { color:inherit; text-underline-offset:3px; }
#yk-quotation .quote-grid { display:block; max-width:920px; }
#yk-quotation .card { background:#fff; border:0; border-radius:0; padding:0; box-shadow:none; }
#yk-quotation .items-card { padding-bottom:29px; margin-bottom:28px; border-bottom:1px solid #ddd; }
#yk-quotation .section-heading { display:flex; align-items:center; padding-bottom:10px; border-bottom:1px solid #e6e6e6; }
#yk-quotation h2 { font-size:18px; margin:0; font-weight:700; }
#yk-quotation .muted { font-size:13px; color:#666; }
#yk-quotation #cart-message { font-size:12px; color:#666; margin:14px 0 0; }
#yk-quotation .item { display:grid; grid-template-columns:20px 60px 1fr 95px; align-items:center; gap:17px; padding:15px 0; border-bottom:1px solid #eee; }
#yk-quotation .item input[type=checkbox] { accent-color:#454a4d; width:17px; height:17px; }
#yk-quotation .item .thumb { width:60px; height:64px; background:#f5f5f5; border:1px solid #eee; display:grid; place-items:center; color:#999; font-size:25px; }
#yk-quotation .thumb img { max-width:100%; height:100%; object-fit:contain; }
#yk-quotation .item b { display:block; font-weight:700; font-size:14px; }
#yk-quotation .item small { display:block; color:#777; font-size:12px; }
#yk-quotation .item .qty-label { font-size:12px; color:#666; }
#yk-quotation .item input[type=number] { width:85px; padding:7px 10px; margin-top:4px; }
#yk-quotation input, #yk-quotation select, #yk-quotation textarea { font:inherit; line-height:1.45; color:#333; background:#fff; border:1px solid #d6d6d6; border-radius:3px; min-width:0; padding:10px 12px; width:100%; }
#yk-quotation input::placeholder, #yk-quotation textarea::placeholder { color:#a0a0a0; opacity:1; }
#yk-quotation input:focus, #yk-quotation textarea:focus, #yk-quotation select:focus { outline:2px solid #777; outline-offset:2px; }
#yk-quotation .fields { display:grid; grid-template-columns:1fr 1fr; gap:0 28px; }
#yk-quotation .field { display:block; font-size:13px; font-weight:700; margin-top:21px; }
#yk-quotation .field input, #yk-quotation .field select, #yk-quotation .field textarea { display:block; margin-top:8px; font-weight:400; }
#yk-quotation .wide { grid-column:1/-1; }
#yk-quotation em { color:#8b5948; font-style:normal; margin-left:3px; }
#yk-quotation textarea { resize:vertical; }
#yk-quotation .price-note { font-size:12px; color:#777; margin:12px 0 0; }
#yk-quotation button, #yk-quotation .button-link { font:inherit; border:0; border-radius:3px; cursor:pointer; }
#yk-quotation button:disabled { opacity:.55; cursor:wait; }
#yk-quotation .secondary { background:#fff; border:1px solid #d4d4d4; color:#555; padding:7px 12px; margin-top:14px; font-size:12px; }
#yk-quotation .submit-area { margin-top:24px; padding-top:6px; }
#yk-quotation .submit-area p { font-size:13px; }
#yk-quotation #submit, #yk-quotation .button-link { background:#3d4246; color:#fff; padding:12px 25px; width:230px; min-height:44px; display:flex; justify-content:space-between; text-decoration:none; }
#yk-quotation #submit:hover, #yk-quotation .button-link:hover { background:#222; }
#yk-quotation .submit-area small { display:block; color:#777; font-size:12px; margin-top:10px; }
#yk-quotation #form-error { color:#a12828; }
#yk-quotation [hidden] { display:none!important; }
#yk-quotation .honeypot { display:none; }
#yk-quotation .quote-footer { max-width:920px; padding:25px 0; margin-top:32px; border-top:1px solid #eee; color:#888; font-size:12px; }
#yk-quotation .quote-footer span { margin:0 8px; }
#yk-quotation .success { max-width:920px; padding:15px 0; }
#yk-quotation .success-icon { background:#eef1ee; color:#42634b; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-size:24px; margin-bottom:15px; }
#yk-quotation details { background:#f7f7f7; padding:16px; margin:20px 0; border:1px solid #e5e5e5; }
#yk-quotation pre { white-space:pre-wrap; overflow-wrap:anywhere; font:13px/1.7 Arial,"Microsoft JhengHei",sans-serif; }
#yk-quotation h3 { font-size:15px; overflow-wrap:anywhere; }
@media(max-width:760px) {
  #yk-quotation { padding:16px 18px 0; }




  #yk-quotation h1 { font-size:23px; margin-bottom:19px; }
  #yk-quotation .intro { padding:20px 0 22px; }
  #yk-quotation .item { gap:9px; grid-template-columns:18px 43px 1fr 64px; }
  #yk-quotation .item .thumb { width:43px; height:53px; }
  #yk-quotation .item input[type=number] { width:64px; }
  #yk-quotation .fields { grid-template-columns:1fr; gap:0; }
  #yk-quotation .field { margin-top:18px; }
  #yk-quotation #submit { width:100%; }
}

/* 0.3: compact cart list, optional fields collapsed. */
#yk-quotation { max-width:1150px; padding-top:14px; }
#yk-quotation .test-banner, #yk-quotation .intro, #yk-quotation .quote-footer { max-width:none; }
#yk-quotation .intro { padding:13px 0 12px; }
#yk-quotation .intro { display:flex; align-items:center; gap:12px 28px; }
#yk-quotation .intro h1 { flex-shrink:0; }
#yk-quotation .intro .procurement-description { max-width:600px; margin:0; color:#666; font-size:13px; line-height:1.7; text-align:left; }
@media(max-width:760px) {
 #yk-quotation .intro { flex-direction:column; align-items:flex-start; gap:5px; }
}
#yk-quotation h1 { margin:0 0 6px; font-size:24px; }
#yk-quotation .intro p { margin:0; font-size:13px; color:#666; }
#yk-quotation .items-card { padding:0; margin:0; border:0; }
#yk-quotation .list-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
#yk-quotation #cart-message { margin:0; }
#yk-quotation .secondary { margin:0; padding:4px 8px; border:0; text-decoration:underline; text-underline-offset:3px; }
#yk-quotation .cart-columns { display:grid; grid-template-columns:minmax(0,1fr) 110px 85px 120px; gap:18px; padding:9px 12px; background:#f6f6f6; font-size:12px; color:#666; }
#yk-quotation .cart-columns span:not(:first-child) { text-align:right; }
#yk-quotation .item { grid-template-columns:18px 64px minmax(0,1fr) 110px 85px 120px; gap:18px; padding:13px 12px 13px 0; min-height:99px; }
#yk-quotation .item .thumb { width:64px; height:72px; background:#fff; border:0; font-size:11px; color:#999; text-align:center; }
#yk-quotation .thumb img { width:100%; height:100%; object-fit:contain; }
#yk-quotation .item-name b { font-size:13px; line-height:1.6; }
#yk-quotation .unit-price, #yk-quotation .line-total { text-align:right; font-size:13px; }
#yk-quotation .unit-price small, #yk-quotation .line-total small { display:none; }
#yk-quotation .item .qty-label { font-size:0; text-align:right; }
#yk-quotation .item input[type=number] { margin:0; width:72px; font-size:14px; height:36px; text-align:center; padding:6px; }
#yk-quotation .excluded .item-name, #yk-quotation .excluded .thumb, #yk-quotation .excluded .unit-price, #yk-quotation .excluded .line-total { opacity:.35; }
#yk-quotation .optional { background:none; border:0; border-bottom:1px solid #eee; border-radius:0; padding:10px 0; margin:0; }
#yk-quotation .optional summary { cursor:pointer; font-size:13px; color:#555; list-style:none; }
#yk-quotation .optional summary::-webkit-details-marker { display:none; }
#yk-quotation .optional[open] summary { font-weight:700; }
#yk-quotation .optional .field { margin-top:10px; }
#yk-quotation .optional small { color:#777; font-size:12px; }
#yk-quotation .quote-lower { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:48px; padding-top:22px; align-items:start; }
#yk-quotation h2 { font-size:17px; }
#yk-quotation .fields { gap:0 20px; }
#yk-quotation .field { margin-top:13px; font-size:12px; }
#yk-quotation .field input, #yk-quotation .field select, #yk-quotation .field textarea { margin-top:5px; padding:8px 10px; font-size:14px; }
#yk-quotation .optional-label { color:#888; font-weight:400; }
#yk-quotation .contact-section .optional { margin-top:10px; }
#yk-quotation .quote-summary { border-top:2px solid #444; padding-top:13px; }
#yk-quotation #summary { margin:8px 0 12px; font-size:12px; color:#777; }
#yk-quotation .total-line { display:flex; justify-content:space-between; gap:12px; align-items:baseline; border-top:1px solid #eee; padding-top:12px; }
#yk-quotation #reference-total { font-size:21px; white-space:nowrap; }
#yk-quotation #total-note { font-size:11px; line-height:1.6; margin:6px 0 12px; }
#yk-quotation .submit-area { margin-top:17px; padding:0; }
#yk-quotation #submit { width:100%; background:#ed461a; }
#yk-quotation #submit:hover { background:#d5370c; }
#yk-quotation .submit-area small { font-size:11px; }
#yk-quotation .quote-footer { margin-top:22px; padding:14px 0; }
@media(max-width:760px) {
  #yk-quotation { padding:12px 16px 0; }
  #yk-quotation .cart-columns { display:none; }
  #yk-quotation .item { grid-template-columns:18px 50px minmax(0,1fr) 73px; gap:6px 10px; padding:13px 0; }
  #yk-quotation .item input[type=checkbox] { grid-column:1; grid-row:1; }
  #yk-quotation .item .thumb { grid-column:2; grid-row:1/3; width:50px; height:64px; }
  #yk-quotation .item-name { grid-column:3/5; grid-row:1; }
  #yk-quotation .unit-price { grid-column:3; grid-row:2; text-align:left; font-size:12px; }
  #yk-quotation .unit-price small { display:block; font-size:10px; }
  #yk-quotation .item .qty-label { grid-column:4; grid-row:2; font-size:10px; }
  #yk-quotation .item input[type=number] { width:62px; height:32px; display:block; margin-left:auto; }
  #yk-quotation .line-total { grid-column:3/5; grid-row:3; font-size:12px; }
  #yk-quotation .line-total small { display:inline; margin-right:8px; font-size:10px; }
  #yk-quotation .quote-lower { grid-template-columns:1fr; gap:22px; padding-top:19px; }
  #yk-quotation .fields { grid-template-columns:1fr 1fr; gap:0 12px; }
  #yk-quotation .quote-summary { border-top:1px solid #ddd; }
  #yk-quotation .test-banner { font-size:11px; }
}

/* 0.4: all contact and delivery fields together; one bottom submit action. */
#yk-quotation .quote-lower { display:block; padding-top:22px; }
#yk-quotation .fields { grid-template-columns:repeat(6,minmax(0,1fr)); gap:0 20px; }
#yk-quotation .fields > .field { grid-column:span 2; }
#yk-quotation .fields > .field:has(input[name="phone"]),
#yk-quotation .fields > .field:has(input[name="whatsapp"]) { grid-column:span 3; }
#yk-quotation .fields > .address-input { grid-column:span 4; }
#yk-quotation .delivery-input small { display:block; color:#888; font-size:11px; font-weight:400; margin-top:6px; }
#yk-quotation .manual-field { margin-top:15px; }
#yk-quotation .contact-section .optional { border-bottom:0; }
#yk-quotation .submit-area { border-top:1px solid #ddd; padding-top:15px; margin-top:18px; }
#yk-quotation .submit-area > .muted { font-size:12px; margin:5px 0 15px; }
#yk-quotation #submit { width:240px; margin-left:auto; }
#yk-quotation .submit-area small { text-align:right; }
@media(max-width:760px) {
  #yk-quotation .fields { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px; }
  #yk-quotation .fields > .field { grid-column:span 1; }
  #yk-quotation .fields > .field:has(input[name="email"]),
  #yk-quotation .fields > .address-input,
  #yk-quotation .fields > .delivery-input { grid-column:1/-1; }
  #yk-quotation .fields > .field:has(input[name="phone"]),
  #yk-quotation .fields > .field:has(input[name="whatsapp"]) { grid-column:span 1; }
  #yk-quotation #submit { width:100%; }
#yk-quotation .submit-area small { text-align:center; }
}

/* 0.5: explicit quote removal, visible notes and delivery/payment choices. */
#yk-quotation .remove-item { width:28px; height:32px; padding:0; background:transparent; color:#777; font-size:23px; line-height:1; }
#yk-quotation .remove-item:hover { color:#b32819; background:#fceeea; }
#yk-quotation .remove-item:focus-visible { outline:2px solid #555; outline-offset:1px; }
#yk-quotation .cart-edit-note { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:11px; color:#777; padding:9px 0; }
#yk-quotation .cart-edit-note .secondary { font-size:11px; white-space:nowrap; }
#yk-quotation #cart-edit-status { font-size:12px; color:#755627; }
#yk-quotation #cart-edit-status:empty { display:none; }
#yk-quotation .manual-field textarea { min-height:120px; }
#yk-quotation .attachment-section { margin-top:16px; padding-top:12px; border-top:1px solid #eee; }
#yk-quotation .attachment-controls { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; }
#yk-quotation #choose-attachments { border:1px solid #ccc; padding:7px 12px; text-decoration:none; flex-shrink:0; }
#yk-quotation .attachment-help { flex:1 1 220px; min-width:0; font-size:11px; color:#777; line-height:1.5; margin:0; }
#yk-quotation #attachment-list { padding:0; margin:8px 0 0; list-style:none; }
#yk-quotation #attachment-list li { display:flex; align-items:center; gap:12px; padding:7px 0; border-bottom:1px solid #eee; font-size:12px; }
#yk-quotation #attachment-list span { flex:1; overflow-wrap:anywhere; min-width:0; }
#yk-quotation #attachment-list button { background:none; color:#777; padding:5px; white-space:nowrap; font-size:12px; }
#yk-quotation #attachment-error { color:#a12828; font-size:12px; }
#yk-quotation #attachment-error:empty, #yk-quotation #attachment-list:empty { display:none; }
#yk-quotation .price-disclaimer { text-align:right; font-size:11px; line-height:1.5; color:#777; margin:10px 0 0; }
#yk-quotation .service-note { margin-top:22px; padding-top:16px; border-top:1px solid #eee; font-size:12px; color:#666; }
#yk-quotation .service-note strong { color:#444; }
#yk-quotation .service-note a { color:#333; font-weight:700; text-decoration:underline; text-underline-offset:3px; }
#yk-quotation .payment-input small { display:block; font-size:11px; font-weight:400; color:#777; line-height:1.5; margin-top:6px; }
#yk-quotation .service-note p { margin:5px 0 0; }
#yk-quotation .fields > .field:has(input[name="company"]),
#yk-quotation .fields > .payment-input { grid-column:1/-1; }
#yk-quotation .fields > .field:has(input[name="name"]) { grid-column:1/-1; }
#yk-quotation .fields > .field:has(input[name="phone"]) { grid-column:span 3; }
#yk-quotation .notes-field { margin-top:10px; }
@media(max-width:760px) {
 #yk-quotation .remove-item { grid-column:1; grid-row:1; }
 #yk-quotation .fields > .field:has(input[name="phone"]) { grid-column:span 1; }
 #yk-quotation .cart-edit-note { align-items:flex-start; flex-direction:column; gap:2px; }
 #yk-quotation .manual-field textarea { min-height:140px; }
}
#yk-quotation #success{max-width:680px;margin:40px auto;padding:54px 32px;text-align:center;}
#yk-quotation #success h2{font-size:32px;line-height:1.3;margin:0 0 14px;}
#yk-quotation #success .success-icon{width:54px;height:54px;margin:0 auto 22px;font-size:30px;}
#yk-quotation #success .success-lead{font-size:20px;line-height:1.6;margin:0 0 26px;color:#34393d;}
#yk-quotation #success .success-email{font-size:18px;line-height:1.6;margin:0 0 10px;overflow-wrap:anywhere;}
#yk-quotation #success .success-help{font-size:16px;line-height:1.7;margin:0;color:#5d6266;}
#yk-quotation #success[hidden]{display:none;}
#yk-quotation .intro[hidden]{display:none!important;}
#yk-quotation #success details{text-align:left;margin:24px 0;border-top:1px solid #ddd;border-bottom:1px solid #ddd;padding:16px 0;}
#yk-quotation #success summary{cursor:pointer;font-weight:600;}
#yk-quotation .submitted-text{white-space:pre-wrap;overflow-wrap:anywhere;}
@media(max-width:520px){#yk-quotation #success{margin:20px auto;padding:38px 16px;}#yk-quotation #success h2{font-size:26px;}#yk-quotation #success .success-lead{font-size:18px;margin-bottom:22px;}#yk-quotation #success .success-email{font-size:16px;}#yk-quotation #success .success-help{font-size:15px;}}

#yk-quotation { width:100%; max-width:100%; margin:0; padding:0; }
#yk-quotation .intro { padding:0 0 14px; }
#yk-quotation h1 { font-size:22px; line-height:33px; margin:0 0 8px; }
#yk-quotation .quote-footer { display:none; }
/* Two columns share one form, so keyboard order and the submit payload stay intact. */
#quote-form { display:grid; grid-template-columns:minmax(0,1fr) 400px; gap:32px; align-items:start; }
#yk-quotation .details-panel { background:#fafafa; border:1px solid #e5e5e5; padding:16px 20px; min-width:0; }
#yk-quotation .quote-lower { padding-top:0; }
#yk-quotation .details-panel h2 { font-size:16px; margin-bottom:3px; }
#yk-quotation .details-panel .fields { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px; }
#yk-quotation .details-panel .fields > .field { grid-column:span 1; margin-top:8px; line-height:1.4; }
#yk-quotation .details-panel .fields > .field:has(input[name="email"]),
#yk-quotation .details-panel .fields > .field:has(input[name="company"]),
#yk-quotation .details-panel .fields > .field:has(input[name="name"]),
#yk-quotation .details-panel .fields > .delivery-input,
#yk-quotation .details-panel .fields > .address-input,
#yk-quotation .details-panel .fields > .payment-input { grid-column:1/-1; }
#yk-quotation .details-panel .notes-field { line-height:1.4; margin-top:8px; }
#yk-quotation .details-panel .field input,
#yk-quotation .details-panel .field select,
#yk-quotation .details-panel .field textarea { padding:7px 9px; margin-top:4px; }
#yk-quotation .details-panel .contact-section .optional { margin-top:4px; padding:8px 0 0; }
#yk-quotation .details-panel .submit-area { margin-top:12px; padding-top:10px; }
#yk-quotation .details-panel #summary { margin:0 0 4px; }
#yk-quotation .details-panel .submit-area > .muted { margin:0 0 10px; font-size:11px; line-height:1.5; }
#yk-quotation .details-panel #submit { width:100%; min-height:42px; padding:10px 16px; }
#yk-quotation .details-panel .submit-area small { text-align:center; margin-top:6px; }
#yk-quotation .details-panel #form-error:empty { display:none; }
#yk-quotation .cart-columns { grid-template-columns:minmax(0,1fr) 88px 66px 94px; gap:12px; }
#yk-quotation .item { grid-template-columns:28px 58px minmax(0,1fr) 88px 66px 94px; gap:12px; }
#yk-quotation .item .thumb { width:58px; }
#yk-quotation .item input[type=number] { width:64px; }
@media(max-width:1000px) {
 #quote-form { grid-template-columns:1fr; gap:24px; }
 #yk-quotation .details-panel { padding:20px; }
 #yk-quotation .details-panel .fields > .field:has(input[name="email"]) { grid-column:span 1; }
}
@media(max-width:760px){ #yk-quotation .details-panel { padding:16px; }
 #yk-quotation .details-panel .fields > .field:has(input[name="email"]) { grid-column:1/-1; }
 #yk-quotation .item { grid-template-columns:28px 50px minmax(0,1fr) 73px; gap:6px 10px; }
 #yk-quotation .item .thumb { width:50px; }
 #yk-quotation .item input[type=number] { width:62px; }
}
#yk-quotation #quote-form[hidden]{display:none;}
#yk-quotation .test-banner{margin-bottom:16px;}

/* Keep the approved two phone fields in the explicit two-column grid. */
#yk-quotation .fields > .field:has(input[name="phone"]),#yk-quotation .fields > .field:has(input[name="whatsapp"]){grid-column:span 1;}
#yk-quotation .test-banner{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
#yk-quotation .test-banner label{display:flex;align-items:center;gap:8px;margin:0;}
#yk-quotation .test-banner input{width:220px;max-width:100%;margin:0;height:30px;}

/* YK RFQ arrangements left card */
#yk-quotation .arrangements-note {
  margin-top: 16px;
  padding: 14px 16px;
  background: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 2px;
  color: #555;
  font-size: 11px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
#yk-quotation .arrangements-note strong {
  display: block;
  margin-bottom: 5px;
  color: #333;
  font-size: 13px;
}
#yk-quotation .arrangements-note p { margin: 3px 0 0; }
#yk-quotation .arrangements-note--mobile { display: none; }
@media (max-width: 760px) {
  #yk-quotation .arrangements-note--desktop { display: none; }
  #yk-quotation .submit-area .arrangements-note--mobile {
    display: block;
    margin: 8px 0 0;
    padding: 8px 0 0;
    background: transparent;
    border: 0;
    border-top: 1px solid #e5e5e5;
    border-radius: 0;
    color: #777;
    font-size: 11px;
    line-height: 1.55;
    text-align: left;
  }
  #yk-quotation .submit-area .arrangements-note--mobile p { margin: 3px 0 0; }
  #yk-quotation .submit-area .arrangements-note--mobile a { color: #555; text-decoration: underline; }
}