.commerce-page{background:#fbfaf6}.page-shell{max-width:1280px;margin:auto;padding:30px 45px 75px}.breadcrumbs{display:flex;gap:12px;font-size:15px;color:#7a8171;margin-bottom:35px;flex-wrap:wrap}.breadcrumbs a:hover{text-decoration:underline}.page-intro{display:flex;justify-content:space-between;align-items:center;gap:30px;margin-bottom:36px}.page-intro h1{font:400 45px/1.25 var(--serif);margin:8px 0 14px;letter-spacing:-1px}.page-intro .eyebrow{margin-bottom:10px}.page-intro p:not(.eyebrow){font-size:15px;color:var(--muted);margin:0}.stepper{display:flex;gap:24px;list-style:none;padding:0;font-size:15px}.stepper li{display:flex;align-items:center;gap:8px;color:#8d9186}.stepper b{border:1px solid #d9ddcf;border-radius:50%;width:28px;height:28px;text-align:center;line-height:26px;font-weight:400}.stepper .current{color:var(--green)}.stepper .current b{background:var(--green);color:#fff;border-color:var(--green)}.commerce-grid{display:grid;grid-template-columns:minmax(0,1fr) 355px;gap:30px;align-items:start}.panel{padding:30px;background:#fff;border:1px solid var(--line);margin-bottom:22px}.panel h2{font:400 25px/1.4 var(--serif);margin-bottom:22px}.panel h2 .section-no{font:12px var(--sans);color:#929b7b;margin-right:12px}.summary-panel{position:sticky;top:130px;background:#f1f2e9}.summary-panel h2{font-size:25px}.summary-panel .button{width:100%;margin-top:18px}.cost-line{display:flex;justify-content:space-between;gap:18px;font-size:15px;margin:14px 0}.cost-total{border-top:1px solid #d6dccb;padding-top:18px;margin-top:22px;align-items:center}.cost-total strong{font-size:23px;font-weight:500}.fine-print{font-size:13px;color:#7d8574;line-height:1.9}.demo-notice{background:#f6f0df;border-left:3px solid #baa36c;padding:13px 17px;font-size:15px;color:#82724f;margin-bottom:24px}.cart-table-head{display:grid;grid-template-columns:1fr 110px 110px;gap:20px;border-bottom:1px solid var(--line);padding-bottom:15px;font-size:12px;letter-spacing:1px;color:#7d8773}.cart-table-head span:last-child{text-align:right}.basket-item{display:grid;grid-template-columns:1fr 110px 110px;gap:20px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line)}.basket-product{display:flex;gap:18px;align-items:center}.basket-product img{width:90px;height:100px;flex-shrink:0}.basket-product h3{font:500 16px/1.5 var(--sans);margin-bottom:7px}.basket-product p{font-size:13px;color:var(--muted);margin-bottom:4px}.basket-product .remove-button{padding:0;text-decoration:underline;font-size:13px}.basket-item>strong{font-size:16px;text-align:right}.step-input{display:flex;align-items:center;border:1px solid var(--line);background:white}.step-input button{width:29px;height:36px;padding:0;flex-shrink:0}.step-input input{border:0;padding:0;appearance:textfield;text-align:center;width:42px;font-size:15px;height:36px}.step-input input::-webkit-inner-spin-button{appearance:none}.cart-foot{display:flex;justify-content:space-between;gap:15px;padding-top:22px;font-size:13px}.inline-help{background:#e9ede1;padding:20px 25px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:15px}.inline-help p{margin:0}.inline-help strong{display:block;font-weight:500}.recommendations{margin-top:45px}.recommendations h2{font-size:27px}.mini-products{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.mini-product{display:flex;gap:15px;align-items:center;background:white;border:1px solid var(--line);padding:15px}.mini-product img{width:66px;height:75px}.mini-product h3{font:500 15px/1.6 var(--sans);margin-bottom:8px}.mini-product p{font-size:15px;margin:0}.mini-product button{margin-left:auto;flex-shrink:0}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.field{display:block;font-size:15px;margin-bottom:19px}.field-grid .field{margin-bottom:0}.field input,.field select,.field textarea{display:block;width:100%;margin-top:8px;font-size:15px;padding:12px;border:1px solid #d9dece;background:#fff;min-height:45px}.field small{display:block;font-size:12px;color:#8b9082;margin-top:5px}.field-full{grid-column:1/-1}.field-grid+.field{margin-top:20px}.required{color:#9d7348}.choice{display:flex;gap:13px;align-items:flex-start;border:1px solid var(--line);padding:16px;margin-bottom:12px;cursor:pointer;font-size:15px}.choice:has(input:checked){border-color:#7a8d66;background:#f8faf4}.choice input{width:15px;height:15px;min-width:15px;margin:4px 0 0;accent-color:var(--green)}.choice strong,.choice small{display:block}.choice strong{font-weight:500}.choice small{font-size:13px;color:var(--muted);margin-top:4px}.choice>span{flex:1}.choice>b{font-size:15px;font-weight:500}.choice.unavailable{opacity:.55;cursor:not-allowed;background:#f7f7f4}.checkbox-line{display:flex;align-items:flex-start;gap:10px;font-size:15px;cursor:pointer;margin:20px 0}.checkbox-line input{width:16px;height:16px;flex-shrink:0;margin:3px 0 0;accent-color:var(--green)}.order-item{display:flex;align-items:center;gap:12px;border-bottom:1px solid #dce0d2;padding:14px 0;font-size:15px}.order-item img{width:48px;height:55px}.order-item>div{flex:1}.order-item h3{font:500 15px/1.5 var(--sans);margin:0 0 4px}.order-item p{font-size:12px;color:var(--muted);margin:0}.order-item>strong{font-size:15px;white-space:nowrap}.order-edit{display:flex;justify-content:space-between;align-items:center}.order-edit h2{margin-bottom:10px}.order-edit a{font-size:13px;text-decoration:underline}.consult-grid{grid-template-columns:390px minmax(0,1fr);gap:50px}.consult-photo{height:260px;width:100%;margin-bottom:28px}.consult-info h2{font-size:29px}.consult-info>p{font-size:15px;color:var(--muted)}.service-points{list-style:none;padding:0;margin:28px 0}.service-points li{border-top:1px solid var(--line);padding:15px 0;display:flex;gap:16px;font-size:15px}.service-points b{font:19px var(--serif);color:#8b9674}.service-points strong{display:block;font-weight:500}.service-points small{color:var(--muted);font-size:13px}.consult-info details{font-size:15px;border-top:1px solid var(--line);padding:14px 0}.consult-info summary{cursor:pointer;font-weight:500}.consult-info details p{font-size:13px;color:var(--muted);margin:12px 0 0}.form-actions{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:25px}.form-actions>span{font-size:13px;color:var(--muted)}.field-error{color:#a33e2b;font-size:15px}.field-error:empty{display:none}.success-panel{max-width:760px;margin:20px auto;text-align:center;padding:45px;background:white;border:1px solid var(--line)}.success-icon{width:65px;height:65px;border-radius:50%;background:#ecf0e5;color:#60764e;font-size:30px;line-height:65px;margin:0 auto 25px}.success-panel h1{font:35px var(--serif)}.success-panel p{font-size:15px;color:var(--muted)}.success-panel .receipt{white-space:pre-wrap;text-align:left;background:#f7f7f0;padding:25px;font:12px/1.9 var(--sans);overflow-wrap:anywhere;margin:25px 0;max-height:440px;overflow:auto}.success-actions{display:flex;justify-content:center;gap:15px;flex-wrap:wrap}.button-outline{background:transparent;border:1px solid #b7c0aa;color:var(--green)}.button-outline:hover{background:#e9eddf}.empty-cart{padding:65px 20px}.empty-cart .empty-icon{font-size:55px;color:#92a07b}.empty-cart h2{font-size:30px;margin:15px 0}.simple-footer{padding:25px 6vw;display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}.simple-footer a{text-decoration:underline}.commerce-page [hidden]{display:none!important}.commerce-page button:disabled{opacity:.45;cursor:not-allowed;transform:none}.commerce-page .header nav a.active:after{bottom:3px}.storage-warning{margin:0;padding:12px 6vw;background:#fff0da;color:#855b20;font-size:15px}.summary-placeholder{text-align:center;padding:30px;font-size:15px;color:var(--muted)}
@media(max-width:1100px){.page-shell{padding-left:30px;padding-right:30px}.commerce-grid{grid-template-columns:minmax(0,1fr) 310px;gap:22px}.panel{padding:23px}.basket-item,.cart-table-head{grid-template-columns:1fr 92px 90px;gap:12px}.basket-product{gap:12px}.basket-product img{width:65px;height:80px}.consult-grid{grid-template-columns:300px minmax(0,1fr);gap:30px}.stepper{gap:12px}.mini-products{gap:10px}.mini-product{padding:12px;gap:10px}.mini-product img{width:45px;height:60px}}
@media(max-width:800px){.page-intro{align-items:flex-start;flex-direction:column}.commerce-grid{grid-template-columns:1fr}.summary-panel{position:static}.consult-grid{grid-template-columns:1fr}.consult-info{display:grid;grid-template-columns:1fr 1fr;gap:20px}.consult-info .consult-photo{height:100%;grid-row:span 3;margin:0}.consult-info h2,.consult-info>p,.service-points{margin:0}.consult-info details{grid-column:1/-1}.mini-products{grid-template-columns:1fr}.mini-product img{width:65px;height:70px}.page-intro h1{font-size:38px}.page-shell{padding-bottom:50px}.basket-product img{width:85px;height:90px}}
@media(max-width:540px){.page-shell{padding:24px 18px 45px}.page-intro h1{font-size:34px}.panel{padding:20px}.cart-table-head{display:none}.basket-item{grid-template-columns:1fr 100px}.basket-product{grid-column:1/-1}.basket-item>strong{text-align:right}.step-input{width:102px}.basket-product img{width:80px;height:90px}.field-grid{grid-template-columns:1fr;gap:17px}.consult-info{display:block}.consult-info .consult-photo{height:240px;margin-bottom:22px}.consult-info h2{margin-bottom:20px}.service-points{margin-top:20px}.simple-footer{flex-direction:column;gap:8px}.form-actions{align-items:flex-start;flex-direction:column}.success-panel{padding:25px 18px}.success-panel h1{font-size:29px}.success-panel .receipt{padding:16px;font-size:15px}.stepper{font-size:13px;gap:15px}.stepper b{width:23px;height:23px;line-height:21px}.inline-help{align-items:flex-start;flex-direction:column}.cart-foot{flex-direction:column}}

/* Order Success Notice & Invoice Receipt */
.order-success-section {
  max-width: 860px;
  margin: 10px auto 40px;
}

.success-badge-card {
  text-align: center;
  padding: 36px 24px 28px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-bottom: none;
  border-radius: 12px 12px 0 0;
}

.success-icon-wrapper {
  width: 68px;
  height: 68px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.success-checkmark {
  width: 68px;
  height: 68px;
  display: block;
}

.checkmark-circle {
  fill: #eaf5eb;
  stroke: #2e7d32;
  stroke-width: 2.5;
}

.checkmark-check {
  fill: none;
  stroke: #2e7d32;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.success-eyebrow {
  color: #2e7d32 !important;
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.success-title {
  font: 400 36px/1.3 var(--serif);
  color: #1a2e22;
  margin: 0 0 12px;
}

.success-desc {
  font-size: 15px;
  color: #555f52;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Invoice Card */
.invoice-card {
  background: #ffffff;
  border: 1px solid #d8decb;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
  margin-bottom: 28px;
  overflow: hidden;
}

.invoice-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 28px 32px;
  background: #f7f9f3;
  border-bottom: 1px solid #e1e7d8;
  flex-wrap: wrap;
}

.invoice-brand .invoice-logo {
  display: block;
  margin-bottom: 8px;
  height: auto;
  max-width: 190px;
}

.invoice-company {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  color: #243f30;
  margin: 0 0 4px;
}

.invoice-contact-line {
  font-size: 13px;
  color: #66725e;
  margin: 0;
}

.invoice-title-block {
  text-align: right;
}

.invoice-heading {
  font: 700 20px/1.4 var(--sans);
  color: #243f30;
  letter-spacing: 1px;
  margin: 0 0 8px;
}

.invoice-status-tag {
  display: inline-block;
  padding: 5px 12px;
  background: #e8f5e9;
  color: #2e7d32;
  border: 1px solid #c8e6c9;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.invoice-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 24px;
  padding: 24px 32px;
  border-bottom: 1px solid #e9eee0;
  background: #ffffff;
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.meta-item-full {
  grid-column: 1 / -1;
}

.meta-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #8c9780;
  text-transform: uppercase;
}

.meta-value {
  font-size: 15px;
  color: #222c1f;
  line-height: 1.5;
}

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

.order-code {
  font-family: monospace;
  font-size: 15px;
  color: #243f30;
  background: #f0f4ea;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid #d4dfcc;
}

.btn-copy-code {
  font-size: 11px;
  padding: 3px 8px;
  background: transparent;
  border: 1px solid #c4ceba;
  border-radius: 4px;
  color: #4a633e;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-copy-code:hover {
  background: #e9eee2;
}

/* Invoice Table */
.invoice-table-wrapper {
  overflow-x: auto;
  border-bottom: 1px solid #e1e7d8;
}

.invoice-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 14px;
}

.invoice-table th {
  background: #f7f9f3;
  color: #5d6751;
  font-weight: 600;
  padding: 12px 24px;
  border-bottom: 1px solid #e1e7d8;
  font-size: 13px;
}

.invoice-table td {
  padding: 14px 24px;
  border-bottom: 1px solid #f0f2eb;
  vertical-align: middle;
}

.th-stt, .td-stt { width: 50px; text-align: center; color: #8c9780; }
.th-quantity, .td-quantity { width: 90px; text-align: center; }
.th-unit-price, .td-unit-price { width: 120px; text-align: right; }
.th-total, .td-total { width: 140px; text-align: right; font-weight: 600; color: #243f30; }

.invoice-item-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.invoice-item-img {
  width: 44px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #e2e6dc;
  background: #fbfbf8;
}

.invoice-item-name {
  font-weight: 600;
  color: #1f2a1c;
  margin: 0 0 2px;
}

.invoice-item-spec {
  font-size: 12px;
  color: #7b8571;
  margin: 0;
}

/* Summary Block */
.invoice-summary-block {
  padding: 20px 32px;
  background: #fafbf8;
  display: flex;
  justify-content: flex-end;
}

.summary-rows {
  width: 100%;
  max-width: 420px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: 14px;
  color: #4f5847;
}

.summary-row strong {
  font-weight: 600;
  color: #222c1f;
}

.summary-grand-total {
  border-top: 2px solid #243f30;
  margin-top: 8px;
  padding-top: 14px;
  font-size: 15px;
  color: #243f30;
}

.grand-total-amount {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1f4229 !important;
}

.summary-payment-method {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  margin-top: 6px;
  font-size: 13px;
  border-top: 1px dashed #dce2d5;
  color: #555;
}

.summary-payment-method strong {
  color: #2e7d32;
}

.invoice-footer-note {
  padding: 14px 32px;
  background: #fbfbf6;
  border-top: 1px dashed #e1e7d8;
  font-size: 13px;
  color: #736c5c;
  line-height: 1.5;
}

.invoice-footer-note p {
  margin: 0;
}

/* Buttons */
.button-print {
  background: #243f30;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.button-print:hover {
  background: #1b3125;
}

.button-subtle {
  background: #eaece4;
  color: #3b4635;
  border: 1px solid #d4dbc9;
}

.button-subtle:hover {
  background: #dde1d4;
}

/* Print CSS */
@media print {
  body {
    background: #ffffff !important;
    color: #000000 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .header, .breadcrumbs, .page-intro, .demo-notice, .owner-contact-dock,
  .simple-footer, .stepper, .success-actions, .success-badge-card,
  #checkout-form, #checkout-empty, .storage-warning, #toast,
  #consult-layout, #contact-layout, .contact-sidebar, .contact-faq,
  .content-heading, .content-crumbs, .content-footer, .confirm-modal-overlay {
    display: none !important;
  }
  .page-shell, .content-wrap {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
  }
  .order-success-section {
    display: block !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .invoice-card {
    box-shadow: none !important;
    border: 1px solid #888 !important;
    border-radius: 0 !important;
  }
  .btn-copy-code {
    display: none !important;
  }
}

@media (max-width: 600px) {
  .invoice-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 18px 20px;
  }
  .invoice-title-block {
    text-align: left;
  }
  .invoice-meta-grid {
    grid-template-columns: 1fr;
    padding: 18px 20px;
  }
  .invoice-summary-block {
    padding: 16px 20px;
    justify-content: stretch;
  }
  .summary-rows {
    max-width: 100%;
  }
  .invoice-footer-note {
    padding: 14px 20px;
  }
}

/* Confirm Order Modal */
.confirm-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 30, 22, 0.68);
  backdrop-filter: blur(5px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
  animation: modalFadeIn 0.25s ease-out;
}

.confirm-modal-overlay.is-open,
.confirm-modal-overlay:not([hidden]) {
  display: flex !important;
}

.confirm-modal-overlay[hidden] {
  display: none !important;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.confirm-modal-card {
  background: #ffffff;
  border-radius: 14px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  border: 1px solid #d9e2d3;
  animation: modalSlideUp 0.25s ease-out;
}

@keyframes modalSlideUp {
  from { transform: translateY(20px) scale(0.97); }
  to { transform: translateY(0) scale(1); }
}

.confirm-modal-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  background: #f7f9f3;
  border-bottom: 1px solid #e2e8dc;
  position: relative;
}

.confirm-modal-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #e4ebe0;
  color: #243f30;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.confirm-modal-title {
  font: 600 18px/1.3 var(--sans);
  color: #1f3325;
  margin: 0 0 3px;
}

.confirm-modal-subtitle {
  font-size: 13px;
  color: #687563;
  margin: 0;
}

.confirm-modal-close {
  margin-left: auto;
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  color: #8c9785;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s;
}

.confirm-modal-close:hover {
  background: #e6ece0;
  color: #1f3325;
}

.confirm-modal-body {
  padding: 20px 24px;
}

.confirm-summary-box {
  background: #fafbf8;
  border: 1px solid #e5ebe0;
  border-radius: 10px;
  padding: 16px 18px;
}

.confirm-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  padding: 6px 0;
  color: #4a5445;
}

.confirm-label {
  color: #7b8774;
  min-width: 130px;
  font-size: 13px;
}

.confirm-val {
  text-align: right;
  color: #243021;
}

.confirm-divider {
  height: 1px;
  background: #e5ebe0;
  margin: 10px 0;
}

.confirm-total-row {
  padding-top: 8px;
  font-size: 15px;
  align-items: center;
}

.confirm-total-row .confirm-label {
  font-weight: 600;
  color: #243f30;
}

.confirm-total-amount {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1f4229 !important;
}

.confirm-tip {
  font-size: 12.5px;
  color: #786f5e;
  margin: 14px 0 0;
  line-height: 1.5;
  background: #fdfcf7;
  padding: 10px 14px;
  border-radius: 6px;
  border-left: 3px solid #b5a06d;
}

.confirm-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  background: #f7f9f3;
  border-top: 1px solid #e2e8dc;
}

.button-confirm {
  background: #243f30;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.button-confirm:hover {
  background: #1b3125;
}

/* Message display block inside invoice-card for consult & contact */
.invoice-message-box {
  padding: 24px 32px;
  background: #ffffff;
  border-bottom: 1px solid #e9eee0;
}

.invoice-message-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #53624e;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.invoice-message-content {
  font-size: 15px;
  line-height: 1.7;
  color: #1f3024;
  background: #fbfcf9;
  border: 1px solid #dfe5d8;
  border-radius: 8px;
  padding: 16px 20px;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

/* Hide floating contact dock when viewing success bill */
body:has(#order-success:not([hidden])) .owner-contact-dock,
body:has(#consult-success:not([hidden])) .owner-contact-dock,
body:has(#contact-success:not([hidden])) .owner-contact-dock,
#order-success:not([hidden]) ~ .owner-contact-dock,
#consult-success:not([hidden]) ~ .owner-contact-dock,
#contact-success:not([hidden]) ~ .owner-contact-dock {
  display: none !important;
}