.shop-service { --service-line: #d8e1dc; --service-text: #26342c; --service-muted: #5d6c63; --service-surface: #fff; color: var(--service-text); padding: 16px 0 40px; }
html[data-theme="dark"] .shop-service { --service-line: #4c5a51; --service-text: #eff5f1; --service-muted: #b8c7be; --service-surface: #222c26; }
.shop-service nav { font-size: 12px; color: var(--service-muted); }
.shop-service header { padding: 22px 0; border-bottom: 1px solid var(--service-line); }
.shop-service h1 { margin: 0 0 8px; font-size: 28px; color: var(--service-text); letter-spacing: 0; }
.shop-service header p { margin: 0; font-size: 14px; color: var(--service-muted); }
.service-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; padding-top: 28px; }
.service-form { min-width: 0; }
.shop-service { margin-inline: auto; width: calc(100% - 32px); max-width: 1360px; }
.service-form fieldset { border: 0; padding: 0; margin: 0 0 24px; }
.service-form legend { margin-bottom: 12px; font-size: 14px; font-weight: 600; }
.service-types { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.service-types label { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.service-types input { accent-color: #17654e; width: 18px; min-height: 18px; height: 18px; }
.service-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.service-fields label { display: grid; gap: 8px; font-size: 13px; }
.service-fields :is(input, textarea) { width: 100%; min-width: 0; border: 1px solid var(--service-line); border-radius: 4px; background: var(--service-surface); color: var(--service-text); padding: 10px 12px; font-size: 16px; }
.service-fields textarea { resize: vertical; }
.service-full { grid-column: 1 / -1; }
.service-note { color: var(--service-muted); font-size: 13px; margin: 18px 0; }
.service-submit { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; background: #17654e; color: #fff; border: 0; border-radius: 4px; padding: 10px 20px; cursor: pointer; font-size: 14px; font-weight: 600; }
.service-submit:hover { background: #104c3a; }
.shop-service :is(input, textarea, button, a):focus-visible { outline: 2px solid #378a67; outline-offset: 3px; }
.service-contact { border-left: 1px solid var(--service-line); padding-left: 24px; }
.service-contact h2 { font-size: 18px; margin: 0 0 20px; color: var(--service-text); }
.service-contact a { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--service-text); font-size: 14px; overflow-wrap: anywhere; }
@media (max-width: 800px) { .service-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; } .service-contact { border-left: 0; border-top: 1px solid var(--service-line); padding: 24px 0 0; } }
@media (max-width: 520px) { .service-fields { grid-template-columns: minmax(0, 1fr); } .shop-service h1 { font-size: 24px; } .service-submit { width: 100%; } }