.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:var(--space-6);height:var(--modal-viewport-height,100dvh);overflow:hidden}.modal[hidden]{display:none}.modal__backdrop{position:absolute;inset:0;background:#073b526b;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:modal-fade .18s ease-out}.modal__panel{position:relative;width:min(720px,100%);max-height:calc(var(--modal-viewport-height, 100dvh) - var(--space-12));min-height:0;display:flex;flex-direction:column;background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-high);overflow:hidden;animation:modal-pop .22s cubic-bezier(.2,.9,.3,1.1)}.modal__panel:focus,.modal__panel:focus-visible{outline:none}@keyframes modal-fade{0%{opacity:0}to{opacity:1}}@keyframes modal-pop{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.modal__head{display:flex;flex:0 0 auto;align-items:flex-start;justify-content:space-between;gap:var(--space-4);padding:var(--space-6) var(--space-7);border-bottom:1px solid var(--color-border)}.modal__eyebrow{margin-bottom:var(--space-2);font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--color-sea-green);text-transform:uppercase}.modal__title{margin:0;font-size:22px;font-weight:800;line-height:1.3;color:var(--color-text-primary)}.modal__subtitle{margin-top:var(--space-2);font-size:13px;color:var(--color-text-muted)}.modal__close{position:absolute;top:var(--space-5);right:var(--space-5);z-index:1;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:36px;height:36px;padding:0;background:transparent;border:1px solid var(--color-line);border-radius:var(--radius-md);color:var(--color-text-muted);cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease}.modal__close:hover{background:var(--color-bg-mist);color:var(--color-text-primary);border-color:var(--color-line-strong)}.modal__close:focus-visible{outline:2px solid var(--color-ocean-blue);outline-offset:2px}.modal__close [data-icon]{width:18px;height:18px}.modal__body{padding:var(--space-6) var(--space-7);overflow-y:auto;flex:1 1 auto;min-height:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}.modal__hero{position:relative;height:clamp(140px,26vh,220px);margin:calc(var(--space-6)*-1) calc(var(--space-7)*-1) var(--space-6);background:linear-gradient(135deg,var(--color-bg-cool),var(--color-mist));display:grid;place-items:center;color:var(--color-text-muted);border-bottom:1px solid var(--color-border)}.modal__hero [data-icon]{width:56px;height:56px;opacity:.55}.modal__hero-medal{position:absolute;top:var(--space-5);right:var(--space-5);transform:scale(.75);transform-origin:top right;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}.modal__fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5) var(--space-7)}@media(max-width:560px){.modal__fields{grid-template-columns:1fr}}.modal__field dt{margin-bottom:4px;font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--color-text-muted);text-transform:uppercase}.modal__field dd{font-size:14px;line-height:1.7;color:var(--color-text-primary);word-break:break-word}.modal__field dd.t-mono{color:var(--color-navy);font-weight:700}.modal__field--full{grid-column:1/-1}.modal__field-tags{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:2px}.modal__foot{display:flex;flex:0 0 auto;justify-content:flex-end;align-items:center;gap:var(--space-3);padding:var(--space-5) var(--space-7);border-top:1px solid var(--color-border);background:var(--color-bg-mist)}@media(max-width:560px){.modal{padding:0}.modal,.modal__panel{height:var(--modal-viewport-height,100dvh)}.modal__panel{max-height:var(--modal-viewport-height,100dvh);border-radius:0;width:100%}.modal__body,.modal__head{padding:var(--space-5)}.modal__hero{margin:calc(var(--space-5)*-1);margin-bottom:var(--space-5)}.modal__foot{padding:var(--space-4) var(--space-5) max(var(--space-4),env(safe-area-inset-bottom))}}.product-detail-modal-section{padding:var(--space-8) 0 var(--space-12);background:var(--color-bg-mist)}.product-detail-modal-panel{width:min(720px,100%);height:auto;max-height:none;overflow:visible;margin:0 auto;animation:none}.product-detail-modal-panel .modal__body{overflow:visible}@media(max-width:560px){.product-detail-modal-section,.product-detail-modal-section .site-container{padding:0}.product-detail-modal-panel{border-radius:0;box-shadow:none}}
