.ec-crafter {
   <!-- width: min(100%, 1240px); -->
    margin: 28px auto;
    border: 1px solid #e3dedb;
    border-radius: 22px;
    background: #fff;
    color: #252321;
    box-shadow: 0 10px 34px #30231c12;
    overflow: hidden;
    scroll-margin-top: 90px;
    container-type: inline-size;
}
.ec-crafter, .ec-crafter * { box-sizing: border-box; }
.ec-crafter > summary {
    display: grid;
    grid-template-columns: minmax(120px, 30%) 1fr auto;
    align-items: center;
    gap: clamp(16px, 3vw, 42px);
    padding-right: clamp(16px, 3vw, 42px);
    background: #211e1c;
    color: white;
    cursor: pointer;
    list-style: none;
}
.ec-crafter summary::-webkit-details-marker { display: none; }
.ec-crafter .ec-crafter-photo { display: block; width: 100%; height: 180px; object-fit: cover; }
.ec-crafter-title small { display: block; color: #eaded5; font: 700 11px/1.5 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .12em; }
.ec-crafter-title strong { display: block; margin-top: 6px; color: #fff; font-family: inherit; font-size: clamp(28px, 4vw, 52px); font-weight: 850; line-height: 1.03; letter-spacing: -.045em; }
.ec-crafter-toggle, .ec-crafter form button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; background: #c91922; color: white; border: 0; border-radius: 30px; padding: 12px 20px; font-size: 15px; line-height: 1.4; font-family: inherit; font-weight: 700; }
.ec-crafter-toggle b { width: 9px; height: 9px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.ec-crafter[open] .ec-crafter-toggle b { transform: translateY(2px) rotate(225deg); }
.ec-crafter-panel { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 72px); padding: clamp(22px, 4vw, 48px); }
.ec-crafter-panel h2 { margin: 0 0 12px; color: #211e1c; font-size: clamp(23px, 3vw, 34px); line-height: 1.15; }
.ec-crafter-panel p { color: #524c47; font-size: 16px; line-height: 1.6; margin: 0 0 12px; }
.ec-crafter form { display: grid; gap: 14px; margin: 0; }
.ec-crafter form label { display: grid; gap: 5px; color: #272320; font-weight: 650; }
.ec-crafter form input:not([type=hidden]) { width: 100%; padding: 12px 14px; border: 1px solid #948b84; border-radius: 9px; font: inherit; font-size: 16px; background: #fff; color: #211e1c; }
.ec-crafter form button { cursor: pointer; font-size: 16px; min-height: 46px; }
.ec-crafter form button:hover, .ec-crafter summary:hover .ec-crafter-toggle { background: #ae121a; }
.ec-crafter :focus-visible { outline: 3px solid #207ac1; outline-offset: 2px; }
.ec-crafter summary:focus-visible { outline-offset: -4px; }
.ec-crafter form a { color: #534d47; font-size: 14px; text-decoration: underline; }
.ec-crafter .ec-crafter-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ec-crafter .ec-crafter-notice { border-left: 3px solid #c91922; padding: 12px 16px; background: #faf5f2; color: #30251d; }
@container (max-width: 760px) {
    .ec-crafter > summary { grid-template-columns: 1fr; gap: 14px; padding: 0 0 22px; }
    .ec-crafter .ec-crafter-photo { height: clamp(140px, 38cqw, 240px); }
    .ec-crafter-title, .ec-crafter-toggle { margin-inline: 22px; }
    .ec-crafter-toggle { justify-self: start; }
    .ec-crafter-panel { grid-template-columns: 1fr; gap: 16px; }
}