/* site.css -- GoodBusinessSoftware.com only: the storefront, the aisles, the shelves and the boxes. */

:root { --shelf-back: #e7eaf0; --peg: #cfd5df; --board: #b8bfcb; --board-lip: #9aa3b2; --tag: #ffd84d; }
html.theme-dark { --shelf-back: #161b26; --peg: #222a38; --board: #3a4252; --board-lip: #4a5366; --tag: #ffd84d; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* storefront with a striped awning */
.storefront { position: relative; padding-block: 0 clamp(40px, 7vw, 76px);
              background: radial-gradient(900px 380px at 80% 0%, color-mix(in srgb, var(--ac) 16%, transparent), transparent 60%), var(--bg); }
.awning { height: 34px; background: repeating-linear-gradient(90deg, var(--ac) 0 46px, #fff 46px 92px);
          box-shadow: 0 6px 12px rgba(0, 0, 0, .12); position: relative; }
.awning::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px;
                 background: radial-gradient(circle at 23px 0, var(--ac) 12px, transparent 13px) 0 0 / 92px 12px repeat-x; }
html.theme-dark .awning { background: repeating-linear-gradient(90deg, var(--ac) 0 46px, #e9ecf3 46px 92px); }
.front-row { padding-top: clamp(40px, 7vw, 74px); }
.open-sign { display: inline-block; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; font-size: .8rem;
             color: #16884a; background: color-mix(in srgb, #16884a 12%, transparent); padding: 5px 12px; border-radius: 999px;
             margin-bottom: 14px; }
.storefront h1 .hl { color: var(--ac); }
.finder { margin-top: 26px; max-width: 620px; }
.finder input { width: 100%; font: inherit; font-size: 1.05rem; padding: 15px 20px 15px 50px; border-radius: 14px;
                border: 2px solid var(--border); background: var(--surface) no-repeat 18px center / 20px
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23889' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E");
                color: var(--text); box-shadow: var(--shadow); }
.finder input:focus { outline: none; border-color: var(--ac); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.chip { padding: 8px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border);
        color: var(--text); font-weight: 600; font-size: .92rem; }
.chip:hover { text-decoration: none; border-color: var(--ac); }

/* aisles */
.store { padding-top: 30px; }
.aisle { margin-bottom: 54px; scroll-margin-top: 90px; }
#aisles { scroll-margin-top: 66px; }          /* clear the sticky menu bar */
.shelf-note { margin-bottom: 34px; padding: 18px 22px; border-radius: 14px; border: 1px solid var(--border);
              border-left: 5px solid var(--accent); background: var(--surface); }
.shelf-note h2 { margin: 0 0 6px; font-size: 1.35rem; }
.shelf-note p { margin: 0; color: var(--muted); }
.aisle-sign { position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px; border-radius: 12px;
              background: #14213d; color: #fff; font-weight: 800; font-size: 1.12rem; box-shadow: var(--shadow);
              margin: 0 0 22px 20px; }
.aisle-sign::before, .aisle-sign::after { content: ""; position: absolute; top: -22px; width: 2px; height: 22px; background: var(--board-lip); }
.aisle-sign::before { left: 22px; }
.aisle-sign::after { right: 22px; }
.aisle-no { background: var(--ac); color: #fff; padding: 2px 10px; border-radius: 6px; font-size: .78rem;
            letter-spacing: .1em; text-transform: uppercase; }
html.theme-dark .aisle-sign { background: #e9ecf3; color: #14213d; }

/* the shelf unit: pegboard back, metal boards under every row */
.shelf-unit { border-radius: 14px; padding: 6px 14px 0; border: 1px solid var(--border);
              background: radial-gradient(circle, var(--peg) 1.6px, transparent 2px) 0 0 / 22px 22px, var(--shelf-back);
              box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--board) 55%, transparent); }
.shelf { --row: 262px; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center;
         background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--row) - 22px),
                     var(--board-lip) calc(var(--row) - 22px) calc(var(--row) - 18px),
                     var(--board) calc(var(--row) - 18px) var(--row)); }
.slot { position: relative; height: var(--row); width: 172px; display: flex; flex-direction: column; align-items: center;
        justify-content: flex-end; padding-bottom: 22px; }
.slot[hidden] { display: none !important; }

/* a software box: front, side and top faces */
.sw-box { position: relative; width: 128px; height: 174px; margin: 0 14px 0 0; padding: 0; border: 0; background: none;
          cursor: pointer; transition: transform .22s ease; font: inherit; color: #fff; }
.sw-box:hover, .sw-box:focus-visible { transform: translateY(-10px) rotate(-1.5deg); }
.bx-front { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
            padding: 12px 8px 12px; border-radius: 3px; text-align: center;
            background: linear-gradient(155deg, color-mix(in srgb, var(--box) 62%, #fff) 0%, var(--box) 42%,
                        color-mix(in srgb, var(--box) 72%, #000) 100%);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 12px 18px rgba(0, 0, 0, .28); }
.bx-front::after { content: ""; position: absolute; left: 0; right: 0; top: 36%; height: 28%;
                   background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent); pointer-events: none; }
.bx-side { position: absolute; top: 0; right: -14px; width: 14px; height: 100%; transform: skewY(-45deg); transform-origin: left top;
           background: color-mix(in srgb, var(--box) 55%, #000); }
.bx-top { position: absolute; top: -14px; left: 0; width: 100%; height: 14px; transform: skewX(-45deg); transform-origin: left bottom;
          background: color-mix(in srgb, var(--box) 70%, #fff); }
.bx-maker { font-size: .62rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.bx-icon { font-size: 40px; line-height: 1; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .3)); }
.bx-name { font-weight: 800; font-size: .88rem; line-height: 1.15; overflow-wrap: normal; hyphens: none; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.bx-kind { font-size: .66rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(0, 0, 0, .25); }

/* price tag on the shelf edge */
.tag { position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%) rotate(-2deg); z-index: 2;
       background: var(--tag); color: #1c1c1c; font-weight: 800; font-size: .82rem; padding: 2px 10px; border-radius: 3px;
       box-shadow: 0 2px 4px rgba(0, 0, 0, .25); white-space: nowrap; }
.tag-free { background: #2fbf71; color: #fff; }
.none-found { text-align: center; font-size: 1.1rem; color: var(--muted); }

@media (max-width: 560px) {
    .shelf { --row: 222px; }
    .slot { width: 50%; }
    .sw-box { width: 108px; height: 148px; }
    .bx-icon { font-size: 32px; }
    .bx-name { font-size: .82rem; }
    .aisle-sign { margin-left: 0; font-size: 1rem; }
}

/* box details */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px;
         background: rgba(10, 14, 22, .62); }
.modal-card { position: relative; width: min(100%, 560px); max-height: 90vh; overflow: auto; background: var(--surface);
              border-radius: 20px; padding: 28px; box-shadow: var(--shadow-lg); border-top: 6px solid var(--m-colour, var(--ac)); }
.m-close { position: absolute; top: 12px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border);
           background: var(--bg); color: var(--text); font-size: 24px; line-height: 1; cursor: pointer; }
.m-head { display: flex; gap: 16px; align-items: center; margin-bottom: 14px; padding-right: 36px; }
.m-icon { flex: none; width: 70px; height: 70px; border-radius: 18px; display: grid; place-items: center; font-size: 38px;
          background: var(--m-colour, var(--ac)); }
.m-kind { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.m-head h2 { margin: 2px 0; font-size: 1.5rem; }
.m-maker { color: var(--muted); font-weight: 600; }
.m-line { font-weight: 700; font-size: 1.08rem; }
.m-about { color: var(--muted); }
.m-foot { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-top: 18px; }
.m-price { font-size: 1.4rem; font-weight: 800; }
.modal[hidden] { display: none; }