html,
body.pouch-labels-page {
    background: #f1e8d7 url("../images/texture.png") repeat;
}

body.pouch-labels-page {
    height: 100vh;
    overflow: hidden;
}

.pouch-labels-page .date-labels-shell {
    position: relative;
    overflow: hidden;
    height: 100vh;
    min-height: 0;
    padding: 0;
    background: rgba(255, 250, 239, 0.68) url("../images/texture.png") repeat;
    box-shadow: 0 0 30px rgba(91, 61, 34, 0.1);
}

.pouch-labels-page .pouch-decoration {
    position: absolute;
    z-index: 2;
    display: block;
    width: clamp(135px, 18vw, 230px);
    height: auto;
    pointer-events: none;
}

.pouch-labels-page .pouch-decoration--top-left { top: 0; left: 0; }
.pouch-labels-page .pouch-decoration--top-right { top: 0; right: 10px; }
.pouch-labels-page .pouch-decoration--bottom-left { bottom: 0; left: 0; }
.pouch-labels-page .pouch-decoration--bottom-right { right: 10px; bottom: 0; }

.pouch-labels-page .date-labels-hero,
.pouch-labels-page .date-labels-back,
.pouch-labels-page .date-labels-gallery,
.pouch-labels-page .date-labels-footer {
    position: relative;
}

.pouch-labels-page .date-labels-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    min-height: 0;
    height: clamp(145px, 14vw, 175px);
    z-index: 3;
    background: transparent;
}

.pouch-labels-page .date-labels-hero img,
.pouch-labels-page .date-labels-footer img {
    display: none;
}

.pouch-labels-page .date-labels-hero h1 {
    position: relative;
    z-index: 3;
    top: auto;
    left: auto;
    width: auto;
    margin: 0 150px;
    transform: none;
    color: #714327;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(28px, 4vw, 52px);
    line-height: 1.02;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 3px rgba(255, 252, 244, 0.9);
}

.pouch-labels-page .date-labels-hero h1 span:empty {
    display: none;
}

.pouch-labels-page .date-labels-back a {
    color: #714327;
}

.pouch-labels-page .date-labels-back {
    position: absolute;
    top: clamp(118px, 11vw, 140px);
    right: auto;
    left: max(18px, calc(50% - 490px));
    width: auto;
    z-index: 4;
    margin: 0;
    padding: 0;
}

.pouch-labels-page .date-labels-gallery {
    position: absolute;
    top: clamp(165px, 16vw, 195px);
    right: 0;
    bottom: clamp(82px, 9vw, 105px);
    left: 0;
    z-index: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    gap: 18px 38px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.pouch-labels-page .date-labels-gallery::-webkit-scrollbar { display: none; }
.pouch-gallery-scrollbar[hidden] { display: none; }
.pouch-gallery-scrollbar {
    position: absolute;
    top: clamp(165px, 16vw, 195px);
    right: 7px;
    bottom: clamp(82px, 9vw, 105px);
    z-index: 4;
    width: 10px;
    border-radius: 8px;
    background: rgba(245, 236, 220, 0.72);
    cursor: pointer;
    touch-action: none;
}
.pouch-gallery-scrollbar span {
    display: block;
    width: 100%;
    min-height: 34px;
    border-radius: 8px;
    background: #8a6043;
}


.pouch-labels-page .date-labels-item {
    min-height: 165px;
}

.pouch-labels-page .date-labels-item img {
    max-height: 165px;
    filter: drop-shadow(0 12px 14px rgba(84, 50, 26, 0.2));
}

.pouch-labels-page .pouch-labels-zoom {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 0;
    cursor: zoom-in;
    border: 0;
    background: transparent;
}

.pouch-labels-page .date-labels-item:hover img,
.pouch-labels-page .date-labels-item:focus-within img {
    filter: drop-shadow(0 12px 14px rgba(84, 50, 26, 0.2));
    transform: none;
}

.pouch-image-modal[hidden] { display: none; }
.pouch-image-modal {
    position: fixed;
    z-index: 20;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px;
    box-sizing: border-box;
}
.pouch-image-modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(38, 25, 15, 0.72);
}
.pouch-image-modal__panel {
    position: relative;
    z-index: 1;
    display: flex;
    max-width: min(90vw, 980px);
    max-height: 88vh;
    padding: 16px;
    background: #f5ecdc url("../images/texture.png") repeat;
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.45);
}
.pouch-image-modal__panel img { display: block; max-width: 100%; max-height: calc(88vh - 32px); width: auto; height: auto; }
.pouch-image-modal__close {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 34px;
    height: 34px;
    cursor: pointer;
    border: 2px solid #f5ecdc;
    border-radius: 50%;
    color: #fff;
    background: #714327;
    font-size: 25px;
    line-height: 26px;
}

.pouch-labels-page .date-labels-footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    pointer-events: none;
    min-height: clamp(82px, 9vw, 105px);
    margin: 0;
}

@media (max-width: 720px) {
    .pouch-labels-page .pouch-decoration { width: 135px; }
    .pouch-labels-page .date-labels-hero h1 { margin: 0 80px; }
    .pouch-labels-page .date-labels-hero { height: 145px; }
    .pouch-labels-page .date-labels-back { top: 112px; }
    .pouch-labels-page .date-labels-gallery { top: 165px; bottom: 82px; }
    .pouch-labels-page .date-labels-footer { min-height: 82px; }
    .pouch-gallery-scrollbar { top: 165px; bottom: 82px; }
}

@media (max-width: 430px) {
    .pouch-labels-page .pouch-decoration { width: 145px; }
    .pouch-labels-page .date-labels-hero h1 { margin: 0 46px; font-size: 29px; }
}