/* Application controls use links for navigation; no JavaScript router is needed. */
.links a,.mobile-menu a{padding:8px 0;font-weight:650;color:#1b2e39;white-space:nowrap;font-size:14px}
.links a:hover,.mobile-menu a:hover{color:var(--teal)}
.links a[aria-current=page]{color:var(--teal);text-decoration:underline;text-underline-offset:7px}
.mobile-menu a{display:block;padding:12px 0}
a.btn:hover{text-decoration:none;color:#fff}a.btn.outline:hover{color:var(--deep)}
.hero .actions a.btn{display:inline-flex}.hero h1 em{font-weight:inherit}
.skip-link{position:absolute;left:12px;top:-100px;z-index:100;background:#fff;padding:14px;border:2px solid var(--teal)}
.skip-link:focus{top:12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.card-description{font-size:13px;line-height:1.5;color:var(--muted);flex:1}.card-description p{margin:0}
.card .price{flex:0;color:var(--deep);font-size:15px;font-weight:800}
.detail-link{color:var(--teal);font-weight:750}.detail-link:hover{text-decoration:underline}
.category-intro{max-width:860px;margin:22px auto;line-height:1.7;color:var(--muted)}
.breadcrumbs{font-size:14px;margin-bottom:24px;color:var(--muted)}.breadcrumbs a{color:var(--teal)}
.product-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}.product-tabs a{border:1px solid var(--line);padding:12px 18px;border-radius:10px;font-weight:650}
.product-tabs [aria-current=page]{background:var(--teal);color:#fff}
.product-tabs a:hover{border-color:var(--teal);color:var(--teal)}
.product-section{scroll-margin-top:110px}
.product-section+.product-section{border-top:1px solid var(--line);padding-top:40px;margin-top:40px}
.product-section h2{margin-top:0}
.category-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:40px}
.product-hero{align-items:start}.product-hero>img{height:auto;max-height:440px;object-fit:contain}
.table-scroll{overflow-x:auto}.price-table{width:100%;border-collapse:collapse;font-size:14px;margin:20px 0}
.price-table caption{text-align:left;font-weight:700;font-size:18px;padding-bottom:14px}
.price-table th,.price-table td{text-align:left;padding:12px;border-bottom:1px solid var(--line)}
.price-table thead{background:var(--wash)}.price-table tbody th{font-weight:500}
.faq-answer{padding:0 18px 18px;color:var(--muted);line-height:1.7}.faq-answer p{padding:0;margin:0 0 12px}
.gallery-card img{width:100%;height:220px;object-fit:cover}.gallery-sample{height:auto;object-fit:contain}
.legal h1{font-size:32px}.legal h2{font-size:23px}.legal h4{font-size:19px}
.footer a:hover{text-decoration:underline}
h1[tabindex="-1"]:focus{outline:none}
@media(min-width:701px) and (max-width:1000px){.hero-inner{grid-template-columns:minmax(0,1fr);min-height:0}.hero-copy{padding:36px 30px}.hero h1{font-size:46px}.hero-picture{aspect-ratio:1.93}.hero-picture img{object-fit:contain}.hero-picture:after{display:none}.hero .actions{gap:18px}.hero .actions .btn{flex:none;font-size:17px;padding:14px 22px}.hero .benefits{font-size:13px}}
@media(max-width:700px){.product-hero>img{height:auto}.price-table th,.price-table td{padding:10px 7px}.gallery-card img{height:150px}.hero .actions .btn{flex:none}}
.account-page{max-width:520px;margin:0 auto;padding:50px 22px 75px}
.account-page.wide{max-width:960px}
.account-page h1{font-size:clamp(30px,4vw,44px);color:var(--deep);letter-spacing:-1.2px;margin:8px 0 12px}
.account-page .lead{color:var(--muted);line-height:1.6}
.account-form{display:flex;flex-direction:column;gap:6px;margin-top:22px}
.account-form label{display:flex;flex-direction:column;gap:6px;font-weight:700;color:var(--deep);margin-top:10px}
.account-form input[type=email],.account-form input[type=password],.account-form input[type=text],.account-form input:not([type]){font:inherit;font-weight:400;padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:white;color:var(--ink)}
.account-form input:focus{outline:3px solid var(--gold);outline-offset:1px}
.account-form label.check{flex-direction:row;align-items:center;gap:10px;font-weight:500;color:var(--ink)}
.account-form .btn{margin-top:18px;align-self:flex-start}
.account-form .validation-message{color:#a3261c;font-size:13px}
.account-error{padding:14px;border:1px solid #efc4bd;border-radius:11px;background:#fff3f1;color:#8a2117}
.account-message{padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--wash);line-height:1.6}
.account-message h2{margin:0 0 8px;color:var(--deep);font-size:20px}
.account-error a,.account-message a:not(.btn),.account-links a{color:var(--teal);text-decoration:underline}
.account-links{margin-top:22px;color:var(--muted)}
.account-orders{width:100%}
.protected-contact[href]{color:var(--teal);text-decoration:underline}
.account-orders a,.order-list a{color:var(--teal);text-decoration:underline}
.order-steps{line-height:1.7;padding-left:22px;margin:18px 0 28px}
.order-list{line-height:1.9;padding-left:20px}
.order-step-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:24px}
.order-card{border:1px solid var(--line);border-radius:var(--rad);padding:20px;display:flex;flex-direction:column;gap:10px;background:white}
.order-card h2{margin:0;font-size:19px;color:var(--deep)}
.order-card p{margin:0;line-height:1.5}
.order-card img{height:170px;border-radius:10px}
.order-card .btn{align-self:flex-start;margin-top:auto}
.admin-banner{padding:12px 16px;border-radius:11px;background:#fff1d6;border:1px solid #f0cf86;color:#5c4200}
.upload-box{margin:24px 0;padding:24px;border:2px dashed var(--line);border-radius:var(--rad);background:var(--wash)}
.upload-box label.btn{cursor:pointer}
.upload-box input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.upload-box:focus-within label.btn{outline:3px solid var(--gold);outline-offset:3px}
.upload-box.busy label.btn{opacity:.6;pointer-events:none}
.upload-status{margin-top:14px}
.upload-status progress{display:block;width:100%;max-width:480px;height:14px;appearance:none;border:0;border-radius:7px;background:var(--line);overflow:hidden}
.upload-status progress::-webkit-progress-bar{background:var(--line);border-radius:7px}
.upload-status progress::-webkit-progress-value{background:var(--teal);border-radius:7px;transition:width .2s}
.upload-status progress::-moz-progress-bar{background:var(--teal);border-radius:7px}
.upload-count{margin:8px 0 0;font-size:15px;font-weight:700}
.upload-failures{padding-left:18px;margin:8px 0 0;font-size:14px;color:#a3261c;max-height:200px;overflow:auto}
.upload-failures:empty{display:none}
.primary-photo{margin:20px 0}
.primary-photo img{max-height:360px;width:auto;max-width:100%;border-radius:12px}
.primary-photo figcaption{color:var(--muted);font-size:14px;margin-top:8px}
.cell-grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px}
.cell-grid li{display:flex;flex-direction:column;gap:6px}
.cell-grid img{aspect-ratio:1;height:auto;border-radius:8px;background:var(--wash)}
.cell-grid button{border:1px solid var(--line);background:white;border-radius:8px;padding:6px;color:#8a2117;font-size:13px}
@media(max-width:760px){.order-step-cards{grid-template-columns:1fr}}
.btn.small{padding:8px 14px;font-size:14px}
.size-choices td:last-child{text-align:right;white-space:nowrap}
.size-choices tr.chosen{background:var(--wash)}
.print-options{display:flex;flex-direction:column;gap:20px;margin-top:22px}
.print-options .btn{align-self:flex-start}
.option-group{border:1px solid var(--line);border-radius:var(--rad);padding:18px 20px;background:white;margin:0}
.option-group legend{font-weight:700;color:var(--deep);padding:0 6px}
.option-group img{display:block;max-width:100%;height:auto;border-radius:10px;margin:6px 0 12px}
.option-choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;margin-top:10px}
.option-choices label{display:flex;gap:8px;align-items:center}
.option-select{display:flex;flex-direction:column;gap:6px;font-weight:600}
.option-select select{font:inherit;font-weight:400;padding:10px 12px;border:1px solid var(--line);border-radius:11px;background:white;max-width:420px}
.muted-link{color:var(--muted);text-decoration:underline;font-size:14px}
.wizard-steps{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--muted)}
.wizard-steps a{color:var(--teal)}
.wizard-steps li.current{color:var(--deep);font-weight:600}
.wizard-nav{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:20px 0}
.wizard-nav .btn{margin-top:0}
.order-summary{display:grid;grid-template-columns:max-content 1fr;gap:10px 24px;margin:24px 0;padding:20px 24px;border:1px solid var(--line);border-radius:var(--rad);background:white}
.order-summary dt{font-weight:700}
.order-summary dd{margin:0;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.order-summary dd img{border-radius:8px;height:auto}
.order-summary .price{font-weight:800;color:var(--deep)}
.order-submit{margin-top:28px}
@media(max-width:560px){.order-summary{grid-template-columns:1fr;gap:4px}.order-summary dd{margin-bottom:10px}}
.order-thumb{display:block;width:80px;height:80px;object-fit:cover;border-radius:8px;background:var(--wash)}
.order-summary dd img.order-thumb{height:80px}
.account-orders td.thumb-cell{width:80px;padding-top:8px;padding-bottom:8px}
.order-thumb.removed{display:flex;align-items:center;justify-content:center;text-align:center;font-size:11px;line-height:1.2;color:var(--muted);padding:6px}
.preview-layout{display:grid;grid-template-columns:minmax(0,3fr) minmax(280px,2fr);gap:28px;align-items:start;margin-top:20px}
.preview-sample>a img{display:block;width:100%;height:auto;border-radius:var(--rad);background:#111}
.sample-details{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;font-size:14px;margin:16px 0}
.sample-details dt{color:var(--muted)}.sample-details dd{margin:0}
.small-heading{font-size:17px;margin:22px 0 10px}
.earlier-samples{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.earlier-samples li{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.preview-actions{display:flex;flex-direction:column;gap:18px}
.preview-actions .order-card .btn{margin-top:8px}
.change-links{padding-left:18px;margin:8px 0 4px}.change-links li{margin:6px 0}.change-links a{color:var(--teal);text-decoration:underline}
.change-card textarea{width:100%;font:inherit;padding:10px;border:1px solid var(--line);border-radius:8px}
@media(max-width:820px){.preview-layout{grid-template-columns:1fr}}
.pay-sample{display:block;width:100%;max-width:520px;height:auto;border-radius:var(--rad);margin-bottom:14px}
.pay-card{gap:14px}
.pay-card select{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;margin-left:8px}
.pay-totals{display:grid;grid-template-columns:1fr auto;gap:6px 12px;margin:0}
.pay-totals dd{margin:0;text-align:right}
.pay-message:empty{display:none}
#paypal-buttons{min-height:120px}
.pay-code{display:flex;flex-direction:column;gap:6px;font-size:14px}
.pay-code label{font-weight:700;color:var(--deep)}
.pay-code-row{display:flex;gap:8px}
.pay-code-row input{flex:1;min-width:0;font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;text-transform:uppercase}
.pay-code-row .btn{padding:8px 14px}
.pay-code.applied{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;color:var(--teal);font-weight:700}
.pay-phone{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;font-size:14px;font-weight:700;color:var(--deep)}
.pay-phone input{font:inherit;font-weight:400;padding:8px 10px;border:1px solid var(--line);border-radius:8px}
.link-button{background:none;border:0;padding:0;font:inherit;font-weight:400;color:var(--teal);text-decoration:underline;cursor:pointer}
.pay-free{margin-top:0}
.pay-free[hidden],#pay-paypal[hidden]{display:none}
.pay-free select{margin-left:0;font-weight:400}
.pay-address-row{display:flex;gap:12px}.pay-address-row label{flex:1}
.gift-layout{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,1fr);gap:28px;align-items:start}
.gift-amounts{display:flex;flex-wrap:wrap;gap:8px;border:0;padding:0;margin:10px 0 0}
.gift-amounts legend{font-weight:700;color:var(--deep);margin-bottom:6px}
.gift-amounts label{flex-direction:row;margin:0;font-weight:700}
.gift-amounts input{position:absolute;opacity:0}
.gift-amounts span{display:block;padding:9px 16px;border:1px solid var(--line);border-radius:999px;background:white;cursor:pointer}
.gift-amounts input:checked+span{background:var(--deep);border-color:var(--deep);color:white}
.gift-amounts input:focus-visible+span{outline:3px solid var(--gold);outline-offset:1px}
.account-form textarea,.account-form select{font:inherit;font-weight:400;padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:white;color:var(--ink)}
.gift-code{font-size:28px;letter-spacing:3px;font-weight:800;color:var(--deep)}
@media(max-width:820px){.gift-layout{grid-template-columns:1fr}}
.admin-table{width:100%;border-collapse:collapse;font-size:14px}
.admin-table th,.admin-table td{text-align:left;padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
.admin-table .ended td{color:#888}
.admin-form .checks{display:flex;flex-wrap:wrap;gap:6px 16px;border:0;padding:0;margin:10px 0 0}
.admin-form .checks legend{font-weight:700;color:var(--deep);margin-bottom:6px}
.admin-form input[type=number],.admin-form input[type=date]{font:inherit;font-weight:400;padding:12px 14px;border:1px solid var(--line);border-radius:11px;background:white}
.cancel-link{margin-top:28px;font-size:14px}
.cancel-confirm form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px}
.cancel-confirm .btn{margin-top:0}
/* Admin pages */
.account-page.admin{max-width:1180px}
.admin-nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 18px;font-size:14px}
.admin-nav a[aria-current=page]{font-weight:700;color:var(--deep);text-decoration:none}
.admin-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:18px 0}
.admin-cards a{display:block;padding:18px;border:1px solid var(--line);border-radius:14px;text-decoration:none;color:var(--ink);background:white}
.admin-cards a strong{display:block;color:var(--deep);font-size:18px;margin-bottom:4px}
.admin-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:10px 0 16px}
.admin-filters label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:700;color:var(--deep)}
.admin-filters input,.admin-filters select,.admin-inline input,.admin-inline select,.admin-inline textarea{font:inherit;font-weight:400;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:white;color:var(--ink)}
.admin-filters .btn,.admin-inline .btn{padding:8px 14px}
.admin-table tr.link-row{cursor:pointer}
.admin-table tr.link-row:hover td{background:#f6f8fb}
.admin-table td.num,.admin-table th.num{text-align:right;white-space:nowrap}
.admin-table tfoot td{font-weight:700;border-top:2px solid var(--line)}
.status-pill{display:inline-block;padding:2px 10px;border-radius:99px;font-size:12px;font-weight:700;white-space:nowrap;background:#eef1f5;color:#465260}
.status-pill.action{background:#fff1d6;color:#7a5200}.status-pill.busy{background:#e3efff;color:#1d4f91}.status-pill.done{background:#e1f4ea;color:#1b6b40}
.status-pill.bad{background:#fde4e1;color:#a3261c}.status-pill.void{background:#ececec;color:#777;text-decoration:line-through}
.admin-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
@media (max-width:860px){.admin-grid{grid-template-columns:1fr}}
.admin-box{border:1px solid var(--line);border-radius:14px;padding:16px 18px;background:white;margin-bottom:18px}
.admin-box h2{font-size:18px;margin:0 0 10px;color:var(--deep)}
.admin-box dl{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;margin:0;font-size:14px}
.admin-box dt{font-weight:700;color:var(--deep)}.admin-box dd{margin:0}
.admin-inline{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin:8px 0}
.admin-inline label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:700;color:var(--deep)}
.admin-inline textarea{width:100%;min-height:110px}
.admin-inline.stack{flex-direction:column;align-items:stretch}
.admin-thumbs{display:flex;flex-wrap:wrap;gap:10px}.admin-thumbs img{width:150px;border-radius:8px;border:1px solid var(--line)}
.email-preview{width:100%;height:560px;border:1px solid var(--line);border-radius:10px;background:white}
.admin-form input[type=file]{font:inherit}
.admin-picture{width:auto;max-width:220px;border-radius:8px;border:1px solid var(--line)}
.admin-table .hidden-row td{color:#888}

.how-it-works {
    padding-block: clamp(28px, 5vw, 64px);
}

.how-it-works-hero {
    display: grid;
    grid-template-columns: 2fr 3fr;
    align-items: center;
    gap: clamp(20px, 4vw, 48px);
    padding: clamp(20px, 4vw, 48px);
    background: #f0f7f7;
    border-radius: 22px;
}

.how-it-works-hero h1 {
    margin: 0;
    font-size: clamp(2.25rem, 5vw, 4rem);
    line-height: 1.05;
}

.how-it-works-hero .lead {
    margin: 16px 0 24px;
    color: var(--muted);
    line-height: 1.6;
}

.how-it-works-hero img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
}

.how-it-works-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
}

.how-it-works-steps li {
    padding: clamp(18px, 2.5vw, 30px);
    border: 1px solid #dae7e7;
    border-radius: 16px;
    background: #fff;
}

.how-it-works-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 18px;
    border-radius: 14px;
    background: #e5f3f3;
    color: #176364;
}

.how-it-works-icon .icon {
    width: 28px;
    height: 28px;
}

.how-it-works-steps h2 {
    margin: 0 0 8px;
    font-size: 1.2rem;
    line-height: 1.3;
}

.how-it-works-steps p {
    margin: 0;
    color: var(--muted);
    line-height: 1.6;
}

@media (max-width: 760px) {
    .how-it-works-hero,
    .how-it-works-steps {
        grid-template-columns: minmax(0, 1fr);
    }
}

.home-experience {
    background: #f0f7f7;
    text-align: center;
}

.home-experience-since {
    margin: 0 0 12px;
    color: #176364;
    font-style: italic;
    font-weight: 700;
}

.home-experience-intro {
    max-width: 68ch;
    margin-inline: auto;
}

.home-experience-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 28px 0 0;
}

.home-experience-stats > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 8px;
    background: #fff;
    border: 1px solid #dae7e7;
    border-radius: 14px;
}

.home-experience-stats dt {
    color: var(--muted);
    font-size: .9rem;
}

.home-experience-stats dd {
    order: -1;
    margin: 0;
    color: #176364;
    font-size: clamp(1rem, 2.7vw, 2rem);
    font-weight: 800;
    line-height: 1.15;
}

@media (max-width: 700px) {
    .home-experience-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* Mobile menu: a panel floating over the page under the header, with a shaded backdrop that closes it when tapped. */
.mobile-menu{position:absolute;top:100%;left:0;right:0;z-index:2;max-height:calc(100vh - 80px);overflow-y:auto;box-shadow:0 16px 32px #102a3824}
.menu-backdrop{position:fixed;inset:0;z-index:-1;background:#072f3c66}
@media(min-width:851px){.menu-backdrop{display:none}}
@media(max-width:850px){.header .nav{position:relative;z-index:1;background:white}}
/* Home page steps on phones: icons and numbers line up along the top; a label that wraps only grows downwards. */
@media(max-width:700px){.step{justify-content:flex-start}}
/* Home page "Made from your favourite moments": beside the callout on wide screens, centred like the other sections once it stacks. */
.moments .section-title{text-align:left}
@media(max-width:700px){.moments,.moments .section-title{text-align:center}}
/* Preview page: the full-size mosaic, once MosManWeb has uploaded it and the order is paid. */
.full-size-card{flex-direction:row;align-items:center;gap:22px;margin-top:20px;background:linear-gradient(135deg,#e0f1f1,#fff)}
.full-size-card .full-size-thumb{flex:0 0 150px;display:block}
.full-size-card .full-size-thumb img{width:150px;height:150px;object-fit:cover;border-radius:12px;background:#111}
.full-size-body{display:flex;flex-direction:column;gap:10px;min-width:0}
.full-size-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.full-size-card .full-size-actions .btn{margin-top:0}
@media(max-width:700px){.full-size-card{flex-direction:column;align-items:stretch}.full-size-card .full-size-thumb{flex-basis:auto}.full-size-card .full-size-thumb img{width:100%;height:180px}.full-size-actions{flex-direction:column}.full-size-actions .btn{width:100%}}
/* The zoomable full-screen image viewer (js/zoom.js). */
html.zoom-open{overflow:hidden}
.zoom-viewer{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#0b1b22;color:white;display:none;flex-direction:column}
.zoom-viewer[open]{display:flex}
.zoom-viewer::backdrop{background:#0b1b22}
.zoom-bar{display:flex;align-items:center;gap:8px;padding:10px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left));background:#073847;flex-wrap:wrap}
.zoom-tool{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border:1.5px solid #ffffff55;border-radius:11px;background:transparent;color:white;font-size:20px;font-weight:800;line-height:1}
.zoom-tool:hover{background:#ffffff1f;text-decoration:none;color:white}
.zoom-tool:disabled{opacity:.4;cursor:default;background:transparent}
.zoom-fit{font-size:15px}
.zoom-download{font-size:15px;margin-left:auto;background:var(--teal);border-color:var(--teal)}
.zoom-download:hover{background:#056977}
.zoom-close{font-size:26px}
.zoom-download[hidden]+.zoom-close{margin-left:auto}
.zoom-stage{position:relative;flex:1;overflow:hidden;touch-action:none;cursor:zoom-in;user-select:none;-webkit-user-select:none}
.zoom-stage.zoomed{cursor:grab}
.zoom-stage.zoomed.dragging{cursor:grabbing}
.zoom-stage img{position:absolute;left:0;top:0;width:auto;max-width:none;height:auto;transform-origin:0 0;object-fit:fill;visibility:hidden;will-change:transform}
.zoom-stage.ready img{visibility:visible}
.zoom-status{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:20px;text-align:center;font-weight:650}
.zoom-status[hidden]{display:none}
.zoom-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);margin:0;padding:7px 14px;border-radius:30px;background:#073847cc;font-size:13px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .3s}
.zoom-stage.ready:not(.zoomed) .zoom-hint{opacity:1}
@media(max-width:420px){.zoom-bar{gap:6px}.zoom-tool{padding:0 10px}.zoom-hint{font-size:11px}}
.zoom-tool[hidden]{display:none}