/* [17-10-2026] Serhat/Claude: the looks of a list of graphics, chosen under Order by (GalleryIndexWidget, Look) and drawn by
   GalleryMatrixWidget::get_look_body in one markup:

       <div class="grid look-<look> <look>-<style>">
           <div class=entry style="--tilt; --turn"><div class=cell><div class=fig><a class=graphic-link><img></a><a class=gg-make></a></div></div>
           <span class=label>♥ votes</span></div>

   Original is the list as it was and has nothing here. The mockup with every look and style: ttt www/gg/gallery/. Only
   transform, shadow and colour change when pointed at, so it stays smooth. */

/* --- the choice of look: a button for each, and under it the style of the chosen one ------------------------------------ */

.look-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 8px 0 10px; font: 13px Arial, sans-serif; }
.look-bar:has(+ .style-bar) { margin-bottom: 4px; }
.look-label { color: #555; margin-right: 2px; }
.look-buttons { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.look-buttons a { padding: 5px 12px; border-radius: 999px; border: 1px solid #e4bcd6; background: #ffffff; color: #8e1a5c; font: bold 13px Arial, sans-serif; text-decoration: none; }
.look-buttons a:hover { border-color: #e23d97; }
.look-buttons a.on { background: linear-gradient(#ff8fc7 0, #f562ad 48%, #e23d97 52%, #ef5aa6 100%); border-color: #c62f84; color: #ffffff; text-shadow: 0 1px 1px rgba(120, 10, 70, .4); }
.look-buttons a:focus-visible, .look-style:focus-visible { outline: 2px solid #7a52d1; outline-offset: 2px; }
.style-bar { margin: 0 0 8px; font: 13px Arial, sans-serif; color: #555; line-height: 1; }
.look-style { padding: 4px 8px; border-radius: 999px; border: 1px solid #e4bcd6; background: #fff8fc; color: #8e1a5c; font: 13px Arial, sans-serif; }

/* --- what every look shares ---------------------------------------------------------------------------------------- */

.gallery-widget .grid[class*="look-"] { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 680px; margin: 0 auto; justify-items: center; align-items: center; }
.gallery-widget .grid[class*="look-"] .entry { position: relative; width: auto; padding: 0; border: none; border-radius: 0; background: none; box-shadow: none; }
.gallery-widget .grid[class*="look-"] > .entry:hover { background: none; }
.gallery-widget .grid[class*="look-"] .fig { position: relative; display: inline-block; line-height: 0; }
.gallery-widget .grid[class*="look-"] .fig a.graphic-link { display: block; margin: 0; }
.gallery-widget .grid[class*="look-"] .fig img { display: block; width: auto; height: auto; }
.gallery-widget .grid[class*="look-"] .fig a.gg-make { top: -10px; right: -10px; width: 26px; height: 26px; font-size: 13px; background: #ffffff; border: 1px solid #f3b6d7; box-shadow: none; }
.gallery-widget .grid[class*="look-"] .label { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); display: inline-flex; align-items: center; white-space: nowrap;
                                              padding: 2px 9px; border-radius: 6px; background: #ffffff; border: 1px solid #ecc6dd; font: bold 11px/1.4 Arial, sans-serif; color: #b81f74; }

/* --- Groove: each graphic a small well, sunk in as the frame of the Glitter Editor, with its grid ------------------- */

.gallery-widget .grid.look-groove { gap: 24px 14px; padding: 4px 4px 22px; justify-items: stretch; }
.gallery-widget .grid.look-groove .entry { border-radius: 14px;
    --grid: rgba(255, 255, 255, .45); --ground: linear-gradient(#f6edf3, #efe3eb); --ground-hover: linear-gradient(#f9f2f7, #f3e8ef); --sink: rgba(70, 20, 60, .22);
    background: repeating-linear-gradient(45deg, var(--grid) 0 1px, transparent 1px 12px), repeating-linear-gradient(135deg, var(--grid) 0 1px, transparent 1px 12px), var(--ground);
    box-shadow: inset 0 4px 10px var(--sink), inset 0 1px 3px var(--sink), inset 0 -2px 6px rgba(255, 255, 255, .5), 0 1px 0 rgba(255, 255, 255, .8); }
.gallery-widget .grid.look-groove > .entry:hover { background: repeating-linear-gradient(45deg, var(--grid) 0 1px, transparent 1px 12px), repeating-linear-gradient(135deg, var(--grid) 0 1px, transparent 1px 12px), var(--ground-hover); }
.gallery-widget .grid.look-groove.groove-gray .entry { --grid: rgba(255, 255, 255, .7); --ground: linear-gradient(#f0f0f2, #e7e7ea); --ground-hover: linear-gradient(#f5f5f7, #ececef); --sink: rgba(40, 40, 60, .2); }
.gallery-widget .grid.look-groove.groove-gradient .entry { --grid: rgba(225, 180, 210, .16); --ground: linear-gradient(#ffffff, #fbeaf3); --ground-hover: linear-gradient(#ffffff, #fdf1f7); --sink: rgba(110, 40, 90, .16); }
.gallery-widget .grid.look-groove.groove-graygradient .entry { --grid: transparent; --ground: linear-gradient(#ffffff, #ececef); --ground-hover: linear-gradient(#ffffff, #f2f2f5); --sink: rgba(40, 40, 60, .17); }
.gallery-widget .grid.look-groove .cell { display: flex; align-items: center; justify-content: center; height: 146px; padding: 8px 0 14px; box-sizing: border-box; }
.gallery-widget .grid.look-groove .fig img { max-width: 120px; max-height: 118px; transition: transform .2s ease; }
.gallery-widget .grid.look-groove .entry:hover .fig img { transform: scale(1.05); }

/* --- Photos: each graphic a little photo, askew by --tilt (Tilted), straight, a polaroid, or pinned to the wall ---- */

.gallery-widget .grid.look-photos { gap: 30px 14px; padding: 10px 4px 24px; }
.gallery-widget .grid.look-photos .entry { padding: 7px; border-radius: 6px; background: #ffffff;
    box-shadow: 0 1px 2px rgba(60, 20, 50, .18), 0 8px 16px -6px rgba(90, 30, 70, .42);
    transform: rotate(var(--tilt, 0deg)); transition: transform .25s ease, box-shadow .25s ease; }
.gallery-widget .grid.look-photos > .entry:hover { z-index: 2; background: #ffffff; transform: rotate(0deg) scale(1.07); box-shadow: 0 2px 4px rgba(60, 20, 50, .2), 0 14px 26px -8px rgba(90, 30, 70, .5); }
.gallery-widget .grid.look-photos .fig { display: block; }
.gallery-widget .grid.look-photos .fig img { max-width: 124px; max-height: 124px; }
.gallery-widget .grid.look-photos .fig a.gg-make { top: -16px; right: -16px; }
.gallery-widget .grid.look-photos .label { transform: translate(-50%, 55%); }
.gallery-widget .grid.look-photos.photos-straight .entry { transform: none; }
.gallery-widget .grid.look-photos.photos-polaroid .entry { padding: 7px 7px 26px; border-radius: 3px; }
.gallery-widget .grid.look-photos.photos-polaroid .fig { padding: 3px; border: 1px solid #e6d8e1; background: #fbf9fa; }
.gallery-widget .grid.look-photos.photos-polaroid .fig a.gg-make { top: -19px; right: -19px; }
.gallery-widget .grid.look-photos.photos-polaroid .label { bottom: 4px; transform: translate(-50%, 0); border: none; background: none; padding: 0; font: italic bold 12px/1.4 Georgia, "Times New Roman", serif; color: #9b2a6c; }
.gallery-widget .grid.look-photos.photos-pinned .entry { padding-top: 12px; }
.gallery-widget .grid.look-photos.photos-pinned .entry::before { content: ""; position: absolute; z-index: 3; left: 50%; top: -6px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%;
    background: radial-gradient(circle at 35% 32%, #ffffff 0 12%, var(--pin, #ec4b9a) 34%, color-mix(in srgb, var(--pin, #ec4b9a) 60%, #000000) 100%); box-shadow: 2px 3px 3px rgba(40, 10, 30, .35); }
.gallery-widget .grid.look-photos.photos-pinned .entry:nth-child(5n+2) { --pin: #e23b3b; }
.gallery-widget .grid.look-photos.photos-pinned .entry:nth-child(5n+3) { --pin: #3f7fe0; }
.gallery-widget .grid.look-photos.photos-pinned .entry:nth-child(5n+4) { --pin: #f2c230; }
.gallery-widget .grid.look-photos.photos-pinned .entry:nth-child(5n) { --pin: #3fb56b; }
.gallery-widget .grid.look-photos.photos-pinned > .entry:hover { transform: rotate(0deg) scale(1.05); }

/* --- Shelf: a bookcase - the back wall leaning back a little (a trapezium per compartment), boards with a rounded dark
       foot, the compartments touching; the graphics lean back on it as flyers in a rack. The list draws wall and boards
       in two layers over all of it, cut by masks, so there are no seams; fixed row heights, so they line up ------------- */

.gallery-widget .grid.look-shelf { position: relative; grid-auto-rows: 120px; gap: 24px 0; padding: 24px 0 26px; align-items: stretch;
    --row: 120px; --gap: 24px; --period: calc(var(--row) + var(--gap));
    --top-light: #f4e3c8; --top-dark: #e6cba3; --front-light: #e2bf8c; --front-dark: #c4955c; --edge: rgba(255, 255, 255, .55); --cast: rgba(70, 40, 20, .32);
    --back-top: #e3cfb2; --back-bottom: #f7ecdc; --under: #8f6234; }
.gallery-widget .grid.look-shelf.shelf-pink { --top-light: #fde9f3; --top-dark: #f6d0e3; --front-light: #f4b9d6; --front-dark: #df86b3; --edge: rgba(255, 255, 255, .7); --cast: rgba(120, 30, 80, .28);
    --back-top: #f1d3e2; --back-bottom: #fdf2f8; --under: #b85a8d; }
.gallery-widget .grid.look-shelf.shelf-white { --top-light: #ffffff; --top-dark: #eeeeef; --front-light: #f2f2f4; --front-dark: #d6d6da; --edge: rgba(255, 255, 255, .9); --cast: rgba(40, 40, 60, .25);
    --back-top: #e4e4e8; --back-bottom: #fafafb; --under: #a9a9b2; }
.gallery-widget .grid.look-shelf::before, .gallery-widget .grid.look-shelf::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 26px; z-index: 0; pointer-events: none; }
.gallery-widget .grid.look-shelf::before
{
    background: repeating-linear-gradient(to bottom, var(--cast) 0, rgba(0, 0, 0, .07) 5px, transparent 14px, transparent var(--period)),
                repeating-linear-gradient(to bottom, var(--back-top) 0, var(--back-bottom) calc(var(--period) - 18px), transparent calc(var(--period) - 18px) var(--period));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 144' preserveAspectRatio='none'%3E%3Cpolygon points='12,0 988,0 1000,126 0,126'/%3E%3C/svg%3E") 0 0 / 100% var(--period) repeat-y;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 144' preserveAspectRatio='none'%3E%3Cpolygon points='12,0 988,0 1000,126 0,126'/%3E%3C/svg%3E") 0 0 / 100% var(--period) repeat-y;
}
.gallery-widget .grid.look-shelf::after
{
    background: repeating-linear-gradient(to bottom,
                    transparent 0 calc(var(--period) - 18px),
                    var(--top-dark) calc(var(--period) - 18px), var(--top-light) calc(var(--period) - 13px),
                    var(--edge) calc(var(--period) - 13px), var(--edge) calc(var(--period) - 12px),
                    var(--front-light) calc(var(--period) - 12px), var(--front-light) calc(var(--period) - 9px),
                    var(--front-dark) calc(var(--period) - 4px), var(--under) calc(var(--period) - 1px),
                    color-mix(in srgb, var(--under) 80%, #000000) var(--period));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 144' preserveAspectRatio='none'%3E%3Cpath d='M0,126 H1000 V137 Q1000,144 989,144 H11 Q0,144 0,137 Z'/%3E%3C/svg%3E") 0 0 / 100% var(--period) repeat-y;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 144' preserveAspectRatio='none'%3E%3Cpath d='M0,126 H1000 V137 Q1000,144 989,144 H11 Q0,144 0,137 Z'/%3E%3C/svg%3E") 0 0 / 100% var(--period) repeat-y;
}
.gallery-widget .grid.look-shelf .entry { z-index: 1; width: 100%; }
.gallery-widget .grid.look-shelf .cell { display: flex; align-items: flex-end; justify-content: center; height: 100%; padding: 6px 0 15px; box-sizing: border-box; }
.gallery-widget .grid.look-shelf .fig { transform: perspective(520px) rotateX(8deg); transform-origin: 50% 100%; transition: transform .25s ease; }
.gallery-widget .grid.look-shelf .fig::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -4px; height: 8px; border-radius: 50%; z-index: -1; background: radial-gradient(closest-side, rgba(60, 30, 20, .3), transparent); }
.gallery-widget .grid.look-shelf .fig img { max-width: 104px; max-height: 84px; filter: drop-shadow(0 7px 5px rgba(60, 30, 20, .26)); }
.gallery-widget .grid.look-shelf .entry:hover .fig { transform: perspective(520px) rotateX(2deg) translateY(-4px); }
.gallery-widget .grid.look-shelf .label { bottom: 6px; border-color: var(--front-dark); }

/* --- Stickers: each graphic a sticker of its own - a round white edge, a small inset inside it, a soft shadow; the votes
       on the white edge at the bottom, a little askew (--turn) ---------------------------------------------------------- */

.gallery-widget .grid.look-stickers { gap: 22px 16px; padding: 8px 4px 22px; }
.gallery-widget .grid.look-stickers .cell { position: relative; display: flex; align-items: center; justify-content: center; width: 142px; height: 142px; box-sizing: border-box; padding: 10px;
    border-radius: 44px; background: #ffffff; box-shadow: 0 1px 2px rgba(60, 20, 50, .12), 0 5px 10px -6px rgba(90, 30, 70, .26); transition: transform .2s ease, box-shadow .2s ease; }
.gallery-widget .grid.look-stickers .cell::before { content: ""; position: absolute; inset: 9px; border-radius: 36px; background: #fbf8fa; box-shadow: inset 0 1px 4px rgba(70, 20, 60, .2), inset 0 0 0 1px rgba(70, 20, 60, .05); }
.gallery-widget .grid.look-stickers .entry:hover .cell { transform: translateY(-3px); box-shadow: 0 2px 3px rgba(60, 20, 50, .14), 0 9px 16px -8px rgba(90, 30, 70, .34); }
.gallery-widget .grid.look-stickers .fig { z-index: 1; }
.gallery-widget .grid.look-stickers .fig img { max-width: 116px; max-height: 116px; border-radius: 16px; }
.gallery-widget .grid.look-stickers .fig a.gg-make { top: -11px; right: -11px; }
.gallery-widget .grid.look-stickers .label { bottom: -2px; z-index: 2; gap: 3px; height: 21px; padding: 0 9px; border-radius: 999px; transform: translateX(-50%) rotate(var(--turn, -5deg));
    background: #ffe1f1; border: 1.5px solid #ffffff; box-shadow: 0 1px 3px rgba(120, 30, 80, .3); font: bold 11px/1 Arial, sans-serif; }

/* --- Frames: as the Glitter Art Gallery of Glitter Town - a gilt frame with a white mat, the votes on a brass plate ----- */

.gallery-widget .grid.look-frames { gap: 34px 14px; padding: 8px 4px 26px; --m1: #f7e3a1; --m2: #d4a73c; --m3: #a77a1d; --m4: #fff4c8; --plate-text: #5a3d0a; }
.gallery-widget .grid.look-frames.frames-silver { --m1: #f4f5f8; --m2: #c3c6cf; --m3: #8e929e; --m4: #ffffff; --plate-text: #3c3f48; }
.gallery-widget .grid.look-frames.frames-rose { --m1: #fbe0d6; --m2: #e0a491; --m3: #b06e5c; --m4: #fff1ea; --plate-text: #6a3226; }
.gallery-widget .grid.look-frames .entry { padding: 6px; border-radius: 3px; background: linear-gradient(135deg, var(--m1), var(--m2) 30%, var(--m4) 50%, var(--m2) 70%, var(--m3));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), inset 0 0 0 2px rgba(0, 0, 0, .12), 0 2px 3px rgba(40, 20, 0, .2), 0 8px 14px -8px rgba(40, 20, 0, .35); transition: transform .2s ease; }
.gallery-widget .grid.look-frames > .entry:hover { background: linear-gradient(135deg, var(--m1), var(--m2) 30%, var(--m4) 50%, var(--m2) 70%, var(--m3)); transform: translateY(-2px); }
.gallery-widget .grid.look-frames .cell { display: flex; align-items: center; justify-content: center; width: 112px; height: 112px; padding: 8px; box-sizing: content-box; background: #ffffff;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .28), inset 0 0 0 1px rgba(0, 0, 0, .06); }
.gallery-widget .grid.look-frames .fig img { max-width: 112px; max-height: 112px; }
.gallery-widget .grid.look-frames .fig a.gg-make { top: -26px; right: -26px; }
.gallery-widget .grid.look-frames .label { bottom: -21px; transform: translateX(-50%); padding: 1px 9px; border: none; border-radius: 2px;
    background: linear-gradient(var(--m4), var(--m2) 55%, var(--m3)); box-shadow: 0 1px 2px rgba(40, 20, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .6);
    font: bold 10px/1.5 Georgia, "Times New Roman", serif; letter-spacing: .04em; color: var(--plate-text); text-shadow: 0 1px 0 rgba(255, 255, 255, .45); }

/* --- on a phone: three columns, smaller pictures, the buttons may take two lines ------------------------------------ */

@media (max-width: 600px)
{
    .look-label { display: none; }
    .look-buttons { gap: 3px; }
    .look-buttons a { padding: 4px 5px; font-size: 11.5px; }
    .gallery-widget .grid[class*="look-"] { grid-template-columns: repeat(3, 1fr); }
    .gallery-widget .grid.look-groove { gap: 22px 10px; padding: 4px 2px 20px; }
    .gallery-widget .grid.look-groove .cell { height: 116px; padding: 6px 0 12px; }
    .gallery-widget .grid.look-groove .fig img { max-width: 92px; max-height: 90px; }
    .gallery-widget .grid.look-photos { gap: 26px 10px; }
    .gallery-widget .grid.look-photos .fig img { max-width: 88px; max-height: 88px; }
    .gallery-widget .grid.look-shelf { grid-auto-rows: 96px; gap: 20px 0; padding-top: 20px; --row: 96px; --gap: 20px; }
    .gallery-widget .grid.look-shelf::before
    {
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 116' preserveAspectRatio='none'%3E%3Cpolygon points='12,0 988,0 1000,98 0,98'/%3E%3C/svg%3E") 0 0 / 100% var(--period) repeat-y;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 116' preserveAspectRatio='none'%3E%3Cpolygon points='12,0 988,0 1000,98 0,98'/%3E%3C/svg%3E") 0 0 / 100% var(--period) repeat-y;
    }
    .gallery-widget .grid.look-shelf::after
    {
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 116' preserveAspectRatio='none'%3E%3Cpath d='M0,98 H1000 V109 Q1000,116 989,116 H11 Q0,116 0,109 Z'/%3E%3C/svg%3E") 0 0 / 100% var(--period) repeat-y;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 116' preserveAspectRatio='none'%3E%3Cpath d='M0,98 H1000 V109 Q1000,116 989,116 H11 Q0,116 0,109 Z'/%3E%3C/svg%3E") 0 0 / 100% var(--period) repeat-y;
    }
    .gallery-widget .grid.look-shelf .cell { padding: 8px 0 16px; }
    .gallery-widget .grid.look-shelf .fig img { max-width: 84px; max-height: 64px; }
    .gallery-widget .grid.look-stickers { gap: 18px 8px; padding: 6px 2px 14px; }
    .gallery-widget .grid.look-stickers .cell { width: 108px; height: 108px; padding: 8px; border-radius: 34px; }
    .gallery-widget .grid.look-stickers .cell::before { inset: 7px; border-radius: 28px; }
    .gallery-widget .grid.look-stickers .fig img { max-width: 88px; max-height: 88px; }
    .gallery-widget .grid.look-frames { gap: 32px 10px; }
    .gallery-widget .grid.look-frames .cell { width: 84px; height: 84px; padding: 6px; }
    .gallery-widget .grid.look-frames .fig img { max-width: 84px; max-height: 84px; }
    .gallery-widget .grid.look-frames .fig a.gg-make { top: -22px; right: -20px; }
}

@media (prefers-reduced-motion: reduce)
{
    .gallery-widget .grid[class*="look-"] .entry, .gallery-widget .grid[class*="look-"] .cell,
    .gallery-widget .grid[class*="look-"] .fig, .gallery-widget .grid[class*="look-"] .fig img { transition: none; }
}