.p3-photo-month-picker{position:relative;display:block;width:100%;font-size:16px}
.p3-photo-month-button,.p3-photo-month-option{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 12px;text-align:left;box-sizing:border-box;background:#fff;color:#222;font:inherit}
.p3-photo-month-button{border:1px solid #bbb;border-radius:8px;cursor:pointer}
.p3-photo-month-button:after{content:'⌄';margin-left:auto;font-size:21px}
.p3-photo-month-button:focus-visible{outline:2px solid #222;outline-offset:3px}
.p3-photo-month-options{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:40;overflow:auto;overscroll-behavior:contain;background:#fff;border:1px solid #aaa;border-radius:8px;box-shadow:0 10px 26px #0002}
.p3-photo-month-options[hidden]{display:none}
.p3-photo-month-options.opens-up{top:auto;bottom:calc(100% + 4px)}
.p3-photo-month-option{cursor:pointer;border-bottom:1px solid #eee}
.p3-photo-month-option.is-active,.p3-photo-month-option:hover{background:#f5f1eb}
.p3-photo-month-option[aria-selected=true]{box-shadow:inset 3px 0 #222}
.p3-month-photo{position:relative;display:block;width:40px;height:40px;flex:none}
.p3-month-photo-crop{position:absolute;display:block;overflow:hidden;border-radius:7px;background:#faf8f4}
.p3-month-photo-crop[data-cut=round]{border-radius:50%}
.p3-month-photo img{position:absolute;max-width:none!important;object-fit:fill!important;pointer-events:none}
.p3-photo-month-name{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.p3-photo-month-name small{font-size:12px;color:#555}
.p3-photo-month-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;clip-path:inset(50%);overflow:hidden;pointer-events:none}
.p3-photo-month-guide{width:min(680px,calc(100% - 24px));max-height:85dvh;overflow:auto;border:0;border-radius:12px;padding:24px;box-sizing:border-box;color:#222;background:#fff}
.p3-photo-month-guide::backdrop{background:#0008}
.p3-photo-guide-close{min-width:44px;min-height:44px;float:right}
.p3-photo-guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 12px}
.p3-photo-guide-grid>div{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.p3-photo-guide-grid .p3-month-photo{width:88px;height:88px}
.p3-photo-guide-grid small{font-size:12px;color:#555}
@media(max-width:420px){.p3-photo-guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

:is(#p3-completion,#p3-completion-ring,#p3-necklace) .birthstone-fields:not(:has(>.field~.field))>.field{grid-column:1/-1}