#picture-app{--plum: #5b2e5a; --ink: #281d2b; --muted: #635963; --paper: #f7f4f0; --line: #d9d1d9; --teal: #15616d; --card-mm: 60mm;}
#picture-app *,#print-output *{box-sizing: border-box;}
#picture-app{margin: 0px; background: var(--paper); color: var(--ink); font: 17px / 1.55 system-ui, sans-serif; padding-bottom: 88px;}
#picture-app h1,#picture-app h2,#picture-app h3{font-family: Georgia, serif; color: var(--plum); line-height: 1.2;}
#picture-app h1{font-size: clamp(2rem, 5vw, 3.25rem); max-width: 800px; margin: 12px 0px 20px;}
#picture-app h2{font-size: 1.65rem;}
#picture-app a{color: var(--teal);}
#picture-app button,#picture-app .button{display: inline-flex; align-items: center; justify-content: center; min-height: 46px; border: 2px solid var(--plum); border-radius: 9px; padding: 10px 16px; background: var(--plum); color: white; font: 600 1rem / 1.3 system-ui; cursor: pointer; text-decoration: none;}
#picture-app button:disabled{opacity: 0.5; cursor: default;}
#picture-app .quiet{background: white; color: var(--plum);}
#picture-app button:hover:not(:disabled),#picture-app .button:hover{filter: brightness(0.93);}
#picture-app :focus-visible{outline: 3px solid var(--teal); outline-offset: 3px;}
#picture-app input,#picture-app select{font: inherit; width: 100%; min-height: 48px; border: 1px solid rgb(151, 139, 152); border-radius: 8px; background: white; padding: 8px 12px; color: var(--ink);}
#picture-app label{display: grid; gap: 6px; font-weight: 600;}
#picture-app img{max-width: 100%; object-fit: contain;}
#picture-app .wrap{width: min(1120px, 100% - 40px); margin: auto;}
#picture-app header{background: white; border-bottom: 1px solid var(--line);}
#picture-app .brand{display: flex; align-items: center; justify-content: space-between; padding: 18px 0px; gap: 15px;}
#picture-app .brand img{object-position: left center;}
#picture-app .brand span{font-size: 0.9rem; color: var(--muted);}
#picture-app nav{display: flex; gap: 5px; overflow: auto;}
#picture-app nav a{flex: 1 1 0%; white-space: nowrap; text-align: center; text-decoration: none; color: var(--plum); padding: 12px 8px; min-height: 48px; border-bottom: 4px solid transparent; font-weight: 650;}
#picture-app nav a[aria-current="page"]{border-color: var(--plum); background: rgb(243, 236, 244);}
#picture-app main{padding: 30px 0px;}
#picture-app .eyebrow{text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.78rem; font-weight: 700; color: var(--teal); margin-bottom: 0px;}
#picture-app .lead{font-size: 1.15rem; max-width: 760px; color: var(--muted);}
#picture-app .filters{display: grid; grid-template-columns: 2fr 1fr auto; gap: 14px; align-items: end; margin: 28px 0px 20px;}
#picture-app .grid{display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 18px;}
#picture-app .picture{display: flex; flex-direction: column; text-align: left; align-items: stretch; justify-content: start; background: white; color: var(--ink); border: 1px solid var(--line); padding: 14px; font-weight: 400;}
#picture-app .picture img{width: 100%; height: 160px; background: white; border-radius: 6px;}
#picture-app .picture strong{font: 700 1.2rem / 1.4 Georgia, serif; color: var(--plum); margin-top: 12px; text-transform: capitalize;}
#picture-app .picture span{font-size: 0.83rem; color: var(--muted); margin-top: 4px;}
#picture-app .steps{max-width: 700px; padding-left: 30px;}
#picture-app .steps li{padding: 10px 0px 10px 10px;}
#picture-app .note{background: white; border: 1px solid var(--line); border-radius: 12px; max-width: 800px; padding: 16px 24px; margin: 25px 0px;}
#picture-app .actions{display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 20px 0px;}
#picture-app .set-name{max-width: 600px;}
#picture-app .file-label{max-width: 600px; margin: 25px 0px;}
#picture-app .saved-item{display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 18px 0px; border-bottom: 1px solid var(--line);}
#picture-app .saved-item .actions{margin: 0px;}
#picture-app .print-controls{display: flex; gap: 20px; flex-wrap: wrap; margin: 25px 0px;}
#picture-app .print-controls > label{min-width: 170px;}
#picture-app .check{display: flex; align-items: center; gap: 10px;}
#picture-app .check input{width: 20px; min-height: 20px;}
#picture-app .selection-row{display: grid; grid-template-columns: 64px 1fr 85px auto; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); padding: 14px 0px;}
#picture-app .selection-row img{width: 64px; height: 64px;}
#picture-app .selection-row .row-actions{display: flex; gap: 5px;}
#picture-app .selection-row button{padding: 8px 10px;}
#picture-app .selection-row small{display: block; color: var(--muted);}
#picture-app #preview{margin: 30px auto; max-width: 800px;}
#picture-app .print-page,#print-output .print-page{display: grid; grid-template-columns: repeat(var(--cols),minmax(0,1fr)); background: white; gap: 0px; margin: 18px 0px; padding: 12px; border: 1px solid var(--line);}
#picture-app .print-card,#print-output .print-card{aspect-ratio: 1 / 1; border: 1px dashed rgb(153, 153, 153); display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 8px; overflow: hidden;}
#picture-app .print-card img,#print-output .print-card img{height: calc(100% - 28px); width: 100%; min-height: 0px;}
#picture-app .print-card p,#print-output .print-card p{margin: 5px 0px 0px; font-size: clamp(10px, 2vw, 18px); text-transform: capitalize;}
#picture-app .print-card.no-label img,#print-output .print-card.no-label img{height: 100%;}
#picture-app .basket{position: fixed; bottom: 0px; left: 0px; right: 0px; display: flex; align-items: center; justify-content: center; gap: 24px; background: white; border-top: 1px solid var(--line); padding: 12px; z-index: 5; font-size: 0.9rem;}
#picture-app .notice{color: var(--teal); font-weight: 600; min-height: 1.5em;}
#picture-app .error{padding: 15px; border: 2px solid rgb(153, 47, 49); color: rgb(124, 35, 37); background: white;}
#picture-app .skip{position: fixed; top: -100px; left: 12px; background: white; padding: 12px; z-index: 20;}
#picture-app .skip:focus{top: 8px;}
#picture-app dialog{width: min(900px, 100% - 24px); max-height: 90vh; border: 1px solid var(--line); border-radius: 14px; padding: 24px;}
#picture-app dialog::backdrop{background: rgba(32, 19, 39, 0.733);}
#picture-app .dialog-head{display: flex; justify-content: space-between; align-items: start; gap: 20px;}
#picture-app .dialog-head h2{margin: 5px 0px; text-transform: capitalize;}
#picture-app .variants{display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 12px;}
#picture-app .variant{background: white; color: var(--ink); display: flex; flex-direction: column; gap: 10px; border: 2px solid var(--line); padding: 12px;}
#picture-app .variant[aria-pressed="true"]{border-color: var(--plum); box-shadow: 0 0 0 2px var(--plum);}
#picture-app .variant img{height: 145px; width: 100%; background: white;}
#picture-app .variant span{font-size: 0.83rem;}
#picture-app .dialog-head button{flex-shrink: 0;}
#picture-app footer{margin-top: 45px; padding: 30px 0px; border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--muted);}
#picture-app #more{margin-top: 25px;}
#print-output{display: none;}
#picture-app [hidden]{display: none !important;}
@media (max-width: 760px){#picture-app .grid{grid-template-columns: repeat(3, minmax(0px, 1fr));}
#picture-app .filters{grid-template-columns: 1fr 1fr;}
#picture-app .filters > label:first-child{grid-column: 1 / -1;}
#picture-app .brand span{display: none;}
#picture-app .variants{grid-template-columns: repeat(2, minmax(0px, 1fr));}
#picture-app .selection-row{grid-template-columns: 50px 1fr 75px;}
#picture-app .selection-row .row-actions{grid-column: 2 / -1;}
#picture-app .picture img{height: 120px;}}
@media (max-width: 480px){#picture-app .wrap{width: calc(100% - 28px);}
#picture-app .grid{grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 12px;}
#picture-app .picture{padding: 10px;}
#picture-app .picture img{height: 120px;}
#picture-app .picture strong{font-size: 1.05rem;}
#picture-app .picture span{font-size: 0.75rem;}
#picture-app nav a{font-size: 0.85rem; padding: 12px 5px;}
#picture-app .filters{gap: 10px;}
#picture-app .filters select{font-size: 0.92rem;}
#picture-app .basket{gap: 10px;}
#picture-app .basket .button{font-size: 0.9rem;}
#picture-app .variant img{height: 115px;}
#picture-app .dialog-head{gap: 8px;}
#picture-app dialog{padding: 16px;}
#picture-app .print-controls > label{min-width: 140px;}
#picture-app h1{font-size: 2.2rem;}}
@media print{body { padding: 0px; background: white; }
body > :not(#print-output) { display: none !important; }
#print-output { display: block !important; }
#print-output .print-page { width: 100%; padding: 0px; border: 0px; margin: 0px; grid-template-columns: repeat(var(--cols),var(--card-mm)); break-after: page; }
#print-output .print-page:last-child { break-after: auto; }
.print-card { width: var(--card-mm); height: var(--card-mm); aspect-ratio: auto; padding: 3mm; break-inside: avoid; }
.print-card img { height: calc(100% - 26.4567px); }
.print-card p { font: 12pt / 1.2 system-ui; margin: 2mm 0px 0px; }
.print-card.no-label img { height: 100%; }}
#picture-app #access-dialog .cap-email-consent input[type="checkbox"]{width: 20px; min-width: 20px; height: 20px; min-height: 20px; padding: 0px;}
#picture-app #access-dialog .cap-email-consent span{flex: 1 1 0%; min-width: 0px;}
#picture-app #access-dialog form.sl-cap button.cap-go.cap-go[type]{background: var(--plum) !important; color: rgb(255, 255, 255) !important;}