/* CriOne_QrImage - product page QR code.

   Opens compact and enlarges on tap/click. The mechanism is pure CSS: the
   .crione-qr-toggle checkbox is visually hidden and the .crione-qr <label>
   wraps the SVG, so activating the label flips the checkbox and the
   :checked sibling selector below grows it. No JavaScript. */

.crione-qr-wrap {
    display: block;
    margin: 0 auto 24px;
}

/* Visually hidden, still focusable and still operable with Space. */
.crione-qr-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

/* Compact state - the default. */
.crione-qr {
    display: block;
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
    padding: 12px;
    background: #fff;
    border: 1px solid #e7e5ee;
    box-sizing: border-box;
    cursor: zoom-in;
    transition: max-width .18s ease, padding .18s ease, border-color .18s ease;
}

.crione-qr:hover { border-color: #cfcbdd; }

.crione-qr svg {
    width: 100%;
    height: auto;
    display: block;
}

/* The affordance. Text lives in CSS so the two states stay in sync. */
.crione-qr__hint {
    display: block;
    margin-top: 10px;
    color: #6d6d6d;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: center;
}
.crione-qr__hint::after { content: "Tap to enlarge"; }

/* Enlarged state - the size the QR used to open at. */
.crione-qr-toggle:checked + .crione-qr {
    max-width: 480px;
    padding: 16px;
    cursor: zoom-out;
}
.crione-qr-toggle:checked + .crione-qr .crione-qr__hint::after { content: "Tap to shrink"; }

/* Keyboard focus has to be visible - the checkbox itself never is. */
.crione-qr-toggle:focus + .crione-qr {
    outline: 2px solid #0a1e40;
    outline-offset: 3px;
}
.crione-qr-toggle:focus:not(:focus-visible) + .crione-qr { outline: none; }

/* When the QR replaces the gallery it carries a little more visual weight. */
.crione-qr--replace { max-width: 220px; padding: 14px; }
.crione-qr-toggle:checked + .crione-qr--replace { max-width: 520px; padding: 24px; }

@media (max-width: 767px) {
    .crione-qr,
    .crione-qr--replace { max-width: 170px; }
    .crione-qr-toggle:checked + .crione-qr,
    .crione-qr-toggle:checked + .crione-qr--replace { max-width: 100%; }
    .crione-qr__hint { font-size: 12px; }
}

/* ── Grouped with the image fingerprint ──────────────────────────────────
   Layout moves Custom_ImageFingerprint's .cgb-imgsha into this container, so
   the SHA-256 becomes the card header and the QR its body. One frame around
   the pair - the children give up their own borders. */

.crione-qr-group {
    margin: 16px 0 24px;
    border: 1px solid #e7e5ee;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
}

.crione-qr-group .cgb-imgsha {
    margin: 0;
    border: 0;
    border-bottom: 1px solid #ececf2;
    border-radius: 0;
    background: #fafafa;
}

.crione-qr-group .crione-qr-wrap {
    margin: 0;
    padding: 16px 12px;
}

/* Both states, so the checked rules above cannot put the inner frame back. */
.crione-qr-group .crione-qr,
.crione-qr-group .crione-qr-toggle:checked + .crione-qr,
.crione-qr-group .crione-qr-toggle:checked + .crione-qr--replace {
    border: 0;
    padding: 0;
    background: transparent;
}
.crione-qr-group .crione-qr:hover { border-color: transparent; }