/* Compact controls leave the page introduction visible while keeping all choices at the top. */
.site-header { padding-block: 23px 18px; }
.site-header nav { display:flex; flex-wrap:wrap; gap:12px 25px; }
.utility-bar { max-width:1300px; margin:auto; padding:0 48px 14px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.appearance-bar { position:relative; margin:0; padding:0; border:0; display:block; flex:0 1 auto; }
.appearance-title { list-style:none; min-height:44px; display:flex; align-items:center; gap:8px; padding:8px 13px; border:1px solid var(--line); border-radius:24px; font-size:13px; font-weight:600; color:var(--ink); white-space:normal; }
.appearance-title::-webkit-details-marker { display:none; }
.appearance-title > svg { width:21px; height:21px; flex-shrink:0; fill:none; stroke:var(--green); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.appearance-title:hover { background:var(--surface); border-color:var(--green); }
.appearance-controls { position:absolute; inset-inline-start:0; top:calc(100% + 8px); z-index:20; width:320px; max-width:calc(100vw - 36px); padding:20px; background:var(--paper); border:1px solid var(--line); box-shadow:0 14px 40px #0002; border-radius:14px; justify-content:flex-start; }
.appearance-bar:not([open]) .appearance-controls { display:none; }
.share-bar { margin:0; padding:0; flex:0 1 auto; }
.locale-bar { padding-block:12px; gap:8px 24px; margin-bottom:0; }
.locale-control { gap:4px; font-size:12px; }
.locale-control select { min-height:44px; padding:8px 10px; border-radius:8px; }
.locale-hint { font-size:12px; }
.hero { padding-top:30px; min-height:520px; }
.hero-visual { min-height:470px; }
.byline { display:grid; grid-template-columns:60px minmax(0,1fr) 48px; width:fit-content; max-width:100%; padding:5px 0; border-radius:10px; }
.byline > div { min-width:0; overflow-wrap:anywhere; }
.avatar { width:60px; height:60px; border-radius:50%; object-fit:cover; border:2px solid var(--line); }
.byline span.byline-profile { display:grid; place-items:center; width:48px; height:48px; border:1px solid var(--line); border-radius:50%; background:var(--surface); color:var(--green); }
.byline span.byline-profile-core { display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:var(--green); color:var(--on-accent); }
.byline-profile svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.byline:hover .byline-profile { border-color:var(--green); }
.product { padding:0 0 24px; overflow:hidden; border-radius:14px; min-height:0; }
.product-media { width:100%; height:230px; display:grid; place-items:center; background:#fff; border-bottom:1px solid var(--line); position:relative; }
.product-media img { width:90%; height:210px; object-fit:contain; display:block; }
.product-code { position:absolute; top:14px; inset-inline-start:14px; font-size:11px; letter-spacing:.07em; color:#53645b; background:#f1f5f2; padding:3px 8px; border-radius:20px; }
.product-category { margin:22px 24px 0; }
.product h3 { margin:10px 24px; }
.product > p { margin:0 24px 24px; }
.product > .text-link { margin: auto 24px 0; }
.product-actions { display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin:auto 24px 0; }
.product-actions .text-link { line-height:1.5; }
.product-detail { font-size:13px; color:var(--muted); }
.about { grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:center; gap:64px; }
.portrait-wrap { max-width:470px; width:100%; }
.portrait { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:22px; }
.owner-signature { margin-top:22px; padding-top:18px; border-top:1px solid var(--line); text-align:center; }
.signature-name { display:block; color:var(--green); font-size:clamp(25px,3vw,33px); font-weight:650; font-style:italic; line-height:1.25; }
.about .signature-role { margin:9px 0 4px; font-size:13px; line-height:1.5; }
.signature-project { color:var(--green); font-size:11px; font-weight:800; letter-spacing:.22em; }
footer .copyright { font-weight:750; color:var(--ink); }
footer .copyright a:hover { text-decoration:underline; text-underline-offset:4px; }
.about h2 { font-size:clamp(30px,3.4vw,44px); }
.contact-actions { display:flex; flex-direction:column; align-items:flex-start; gap:13px; margin:26px 0; }
.contact-button-row { display:flex; flex-wrap:wrap; align-items:stretch; gap:12px; max-width:100%; }
.contact-button-row .button { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px; padding-inline:18px; text-align:center; }
.email-dialog { width:min(560px,calc(100% - 24px)); max-height:calc(100dvh - 24px); overflow:auto; padding:24px; border-radius:18px; background:var(--paper); color:var(--ink); }
.email-dialog h2 { font-size:28px; margin:0 0 12px; }
.email-dialog > p { font-size:14px; margin:12px 0; }
.email-address-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; padding:12px 0; }
.email-address-row[hidden] { display:none; }
.email-address-row input { width:100%; min-width:0; border:0; background:transparent; color:var(--ink); font:inherit; font-size:16px; }
.email-services { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:14px 0; }
.email-service { display:flex; align-items:center; gap:10px; padding:12px; min-height:52px; border:1px solid var(--line); border-radius:10px; background:var(--surface); font-size:15px; font-weight:600; overflow-wrap:anywhere; }
.email-service:hover { border-color:var(--green); }
.email-service-mark { width:30px; height:30px; border-radius:8px; display:grid; place-items:center; flex-shrink:0; background:var(--green); color:var(--on-accent); font-size:12px; }
.email-default { display:block; padding:10px 0; min-height:44px; text-decoration:underline; text-underline-offset:4px; font-size:14px; }
.email-preview { display:block; box-sizing:border-box; width:100%; margin:8px 0 0; padding:12px; resize:vertical; min-height:74px; max-height:180px; font:inherit; font-size:14px; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:8px; }
.email-dialog .dialog-actions { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px; }
.email-dialog button.text-link { min-height:44px; }
@media(max-width:400px) { .email-dialog { padding:18px; }.email-service { padding:10px 8px; gap:7px; font-size:13px; }.email-service-mark { width:24px; height:28px; } }
.contact-email { font-size:15px; text-decoration:underline; text-underline-offset:4px; overflow-wrap:anywhere; }
.business-card { margin-block:28px; padding:22px; border:1px solid var(--line); border-radius:14px; background:var(--surface); min-width:0; }
.business-card h3 { margin:0 0 16px; font-size:20px; }
.business-card-preview { display:block; width:100%; max-width:400px; height:auto; border-radius:6px; background:#fff; }
.about .business-card p { margin:16px 0; font-size:14px; line-height:1.6; }
.business-card-actions { display:flex; flex-wrap:wrap; align-items:center; gap:16px 20px; }
.business-card-actions a { min-height:44px; display:inline-flex; align-items:center; justify-content:center; text-align:center; overflow-wrap:anywhere; }
@media(max-width:620px) { .business-card { padding:16px; }.business-card-actions { align-items:stretch; flex-direction:column; gap:8px; }.business-card-actions .button { width:100%; padding-inline:12px; } }
.faq { max-width:1080px; }
.faq-comparison { margin:8px 0 0; }
.faq-comparison div { grid-template-columns:1fr 2fr; padding:14px 0; }
.faq-comparison dt { color:var(--ink); font-weight:700; }
.faq-comparison dd { color:var(--muted); }
.faq-links { display:flex; flex-wrap:wrap; gap:14px 24px; margin:18px 0 6px; }
@media(max-width:900px) {
 .utility-bar { padding-inline:24px; }.site-header { padding:20px 24px 12px; }
 .locale-hint { display:none; }.locale-bar { padding-block:10px; }
 .hero { min-height:470px; }.hero-visual { min-height:420px; }
 .about { gap:30px; }.product-media { height:210px; }.product-media img { height:190px; }
}
@media(max-width:620px) {
 .site-header { padding:18px 18px 8px; gap:15px; }
 .site-header nav { width:100%; gap:8px 18px; font-size:13px; }
 .utility-bar { padding:0 18px 10px; gap:12px; align-items:center; }
 .appearance-bar { min-width:0; flex:0 1 45%; }
 .appearance-title { font-size:12px; padding-inline:10px; }
 .share-bar { gap:8px; }
 .share-heading { max-width:10ch; font-size:11px; }
 .locale-bar { padding:10px 18px; gap:8px 12px; }
 .locale-control { font-size:11px; }.locale-control select { font-size:13px; }
 .hero { padding-top:16px; }.hero-copy { padding:8px 0; }.hero-visual { min-height:370px; }
 .byline { margin-top:22px; grid-template-columns:52px minmax(0,1fr) 48px; gap:10px; }.actions { gap:18px; }.avatar { width:52px; height:52px; }
 .about { grid-template-columns:1fr; gap:28px; }.portrait-wrap { max-width:400px; margin:auto; }
 .product-media { height:240px; }.product-media img { height:220px; }
 .faq-comparison div { grid-template-columns:1fr; gap:5px; }.contact-email { font-size:14px; }
}
.catalog-cta { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:24px 0; padding:24px; background:var(--surface,#eef4f1); border:1px solid var(--line); border-radius:14px; }
.catalog-cta > div { display:flex; flex-direction:column; gap:3px; }
.catalog-cta span { font-size:13px; color:var(--muted); }
.catalog-cta strong { font-size:24px; color:var(--ink); }
.catalog-cta .catalog-owner { font-size:12px; }
.catalog-cta .button { text-align:center; flex-shrink:0; }
.product-name-link:hover { text-decoration:underline; text-underline-offset:4px; }
.country-policy { padding:20px; margin:0 0 24px; border:1px solid var(--line); border-radius:14px; background:var(--surface); line-height:1.7; }
.path-grid:has(> :nth-child(2):last-child) { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:620px) { .path-grid:has(> :nth-child(2):last-child) { grid-template-columns:1fr; } }
.product-media:focus-visible { outline-offset:-5px; }
.hero-visual:focus-visible { outline-offset:5px; }
@media(max-width:620px) { .catalog-cta { align-items:stretch; flex-direction:column; gap:18px; padding:20px; }.catalog-cta .button { width:100%; } }