/* =========================================================
   EYES — STYLES
   Early-web catalogue look: raised and sunken cream panels,
   thin plum lines, web-safe fonts (Times, Verdana).

   1. Colours & basics       6. Product cards
   2. Background collage     7. Cart & footer
   3. Landing screen         8. Product page
   4. Header & navigation    9. Phones
   5. Categories & pages
========================================================= */


/* ---------- 1. COLOURS & BASICS ---------- */

:root{
    --background:#8B788D;      /* dusty mauve */
    --panel:#E7DCCB;           /* cream panels */
    --panel-dark:#D9CCB8;      /* sunken areas, table headings */
    --highlight:#F7F1E8;       /* light edge of raised panels */
    --ink:#3B2B3D;             /* dark plum text and borders */
    --ink-deep:#160E17;        /* small text sitting on the mauve */
    --line:1px solid var(--ink);
    --sans:Verdana,Geneva,sans-serif;
    --serif:"Times New Roman",Times,serif;
}

*,*::before,*::after{ box-sizing:border-box; }

[hidden]{ display:none !important; }

html{
    overflow-y:scroll;
    -webkit-text-size-adjust:100%;
}

body{
    margin:0;
    min-height:100vh;
    background:var(--background);
    color:var(--ink);
    font-family:var(--sans);
    font-size:13px;
}

img{ max-width:100%; }
button{ font:inherit; }
a{ color:var(--ink); }
a:hover{ color:#000; }

:focus-visible{
    outline:2px solid var(--ink);
    outline-offset:3px;
}

.visually-hidden{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
}

/* Raised and sunken edges, like old operating-system buttons */
.bevel{
    border:2px solid;
    border-color:var(--highlight) var(--ink) var(--ink) var(--highlight);
}

.bevel-in{
    border:2px solid;
    border-color:var(--ink) var(--highlight) var(--highlight) var(--ink);
}

/* The raised button used everywhere outside the product page */
.btn98{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:32px;
    padding:0 16px;
    border:2px solid;
    border-color:var(--highlight) var(--ink) var(--ink) var(--highlight);
    background:var(--panel);
    color:var(--ink);
    font-family:var(--sans);
    font-size:13px;
    letter-spacing:0.04em;
    line-height:1;
    text-decoration:none;
    white-space:nowrap;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}

.btn98:hover{ background:var(--panel-dark); color:var(--ink); }

.btn98:active,
.btn98.active{
    border-color:var(--ink) var(--highlight) var(--highlight) var(--ink);
    background:var(--panel-dark);
}

/* The selected category / page: pressed in and dark */
.btn98.is-current{
    border-color:var(--ink) var(--highlight) var(--highlight) var(--ink);
    background:var(--ink);
    color:var(--panel);
}

.btn98:disabled,
.btn98[aria-disabled="true"]{
    opacity:0.5;
    cursor:not-allowed;
    pointer-events:none;
}

.btn98-small{
    min-height:32px;
    padding:0 12px;
    font-size:10px;
    letter-spacing:0.1em;
}

.btn98-page{
    min-width:26px;
    min-height:26px;
    padding:0 6px;
    font-size:11px;
}


/* ---------- 2. BACKGROUND COLLAGE ---------- */

.bg-collage{
    position:fixed;
    inset:0;
    z-index:0;
    overflow:hidden;
    pointer-events:none;
    opacity:0.5;
}

.bg-entry{
    position:absolute;
    transform-origin:top left;
    font-size:12px;
    text-align:center;
    opacity:0;
    transition:opacity 400ms ease;
}

.bg-entry.is-loaded{ opacity:1; }

.bg-entry img{
    display:block;
    max-width:none;
    height:auto;
    border:1px solid var(--background);
    filter:grayscale(100%) contrast(130%) brightness(115%);
}

.bg-entry-small img{
    width:70px;
    border:var(--line);
    filter:contrast(130%) brightness(115%);
}

.bg-num{ margin-bottom:3px; }
.bg-caption{ margin-top:3px; }


/* ---------- 3. LANDING SCREEN ---------- */

.landing{
    display:none;
    position:fixed;
    inset:0;
    z-index:100;
    place-items:center;
    padding:20px;
    background:rgba(139,120,141,0.9);
}

html.show-landing .landing{ display:grid; }
html.show-landing body{ overflow:hidden; }

.landing-window{
    width:min(520px,100%);
    background:var(--panel);
    box-shadow:6px 6px 0 rgba(59,43,61,0.35);
}

.landing-titlebar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:5px 10px;
    background:var(--ink);
    color:var(--panel);
    font-size:11px;
    letter-spacing:0.08em;
}

.landing-x{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:16px;
    height:14px;
    border:1px solid var(--panel);
    font-size:10px;
}

.landing-body{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:clamp(28px,6vw,40px) clamp(20px,6vw,48px) 36px;
    text-align:center;
}

.landing-body .lockup{ margin-bottom:38px; }

.landing-tagline{
    margin:0 0 24px;
    font-family:var(--serif);
    font-size:17px;
}

.landing-enter{
    min-width:200px;
    min-height:44px;
    outline:1px dotted var(--ink);
    outline-offset:-6px;
}


/* ---------- 4. HEADER & NAVIGATION ---------- */

.site{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    min-height:100vh;
}

main{ flex:1; }

.header{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:18px 10px 0;
    text-align:center;
}

/* The butterfly and "Eyes" are one mark: the same plum, exactly the same width,
   with the butterfly perched over the top of the letters. */
.lockup{
    --lockup-width:220px;
    display:flex;
    flex-direction:column-reverse;   /* butterfly drawn above the title */
    align-items:center;
    width:var(--lockup-width);
}

.lockup-logo{
    position:relative;
    z-index:2;
    display:block;
    width:100%;
    height:auto;
}

.lockup-title{
    position:relative;
    z-index:1;
    margin:calc(var(--lockup-width) * -0.21) 0 0;
    font-family:var(--serif);
    font-size:calc(var(--lockup-width) * 0.514);   /* makes "Eyes" as wide as the butterfly */
    font-weight:normal;
    line-height:0.8;
    letter-spacing:0;
    white-space:nowrap;
}

.lockup-link{
    display:block;
    margin-bottom:34px;
    color:var(--ink);
    text-decoration:none;
}

.lockup-link:hover{ color:var(--ink); }

.sample-notice{
    margin:0 auto 12px;
    color:var(--ink-deep);
    font-size:10px;
    letter-spacing:1.5px;
    text-align:center;
}


/* ---------- 5. SIDEBAR, CATEGORIES & PAGES ----------
   One 1060px-wide area: a 200px sidebar (cart, categories, page numbers)
   beside the products. */

/* On the shop page the logo lives in the left column (layout "L2"), so the
   centred header is only used on the cart page. */
.site:has(#shopView:not([hidden])) > .header{ display:none; }

.shop-layout{
    display:grid;
    grid-template-columns:200px minmax(0,1fr);
    gap:36px;
    align-items:start;
    width:min(1060px, calc(100% - 32px));
    margin:28px auto 0;
}

.shop-side{
    display:flex;
    flex-direction:column;
    gap:30px;
}

/* Logo + sidebar stay in view while scrolling, when the window is tall enough. */
@media (min-width:641px) and (min-height:820px){
    .shop-side{ position:sticky; top:16px; }
}

.side-lockup{ margin:0; }
.side-lockup .lockup{ --lockup-width:200px; }

.sidebar{
    display:flex;
    flex-direction:column;
    gap:14px;
    padding:12px;
    background:var(--panel);
}

.side-cart{
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:38px;
    padding:0 6px 0 12px;
    border:2px solid;
    border-color:var(--highlight) var(--ink) var(--ink) var(--highlight);
    background:var(--panel);
    color:var(--ink);
    font-size:11px;
    letter-spacing:0.12em;
    text-decoration:none;
}

.side-cart:hover{ background:var(--panel-dark); color:var(--ink); }
.side-cart:active{ border-color:var(--ink) var(--highlight) var(--highlight) var(--ink); }

.side-cart .cart-count-value{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:22px;
    height:22px;
    padding:0 5px;
    background:var(--ink);
    color:var(--panel);
    font-size:11px;
    letter-spacing:0;
}

.side-rule{
    width:100%;
    height:0;
    margin:0;
    border:0;
    border-top:1px solid var(--ink);
    border-bottom:1px solid var(--highlight);
}

.side-label{
    font-size:10px;
    letter-spacing:0.16em;
}

.cat-list{
    display:flex;
    flex-direction:column;
    font-family:var(--serif);
    font-size:16px;
}

.cat-link{
    display:block;
    margin:0 -8px;
    padding:4px 8px;
    color:var(--ink);
    text-decoration:none;
}

.cat-link:hover{ text-decoration:underline; }

.cat-link.is-current{
    background:var(--ink);
    color:var(--panel);
}

.cat-link.is-current:hover{ color:var(--panel); text-decoration:none; }

.side-pages{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.side-pages:has(.pagination:empty){ display:none; }

.side-pages-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-family:var(--serif);
    font-size:14px;
}

.record-count{
    margin:0 0 16px;
    color:var(--ink-deep);
    font-family:var(--serif);
    font-size:16px;
}

.record-count:empty{ display:none; }

.pagination{
    display:flex;
    gap:4px;
}

.pagination:empty,
.page-steps:empty{ display:none; }

.page-steps{
    display:flex;
    justify-content:center;
    gap:28px;
    margin:28px 0 10px;
    color:var(--ink-deep);
    font-family:var(--serif);
    font-size:16px;
}

.page-steps a{ color:var(--ink-deep); }
.page-steps .is-disabled{ visibility:hidden; }


/* ---------- 6. PRODUCT CARDS ---------- */

.shop-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:28px;
}

.card{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:8px;
    background:var(--panel);
}

.card-link{
    display:block;
    color:var(--ink);
    text-decoration:none;
}

.card-link:hover .card-title{ text-decoration:underline; }

.card-image{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    aspect-ratio:3 / 4;   /* the product photos are 3:4 */
    overflow:hidden;
    background:var(--panel-dark);
}

.card-image img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.card-image.is-missing::after{
    content:"IMAGE PENDING";
    font-size:10px;
    letter-spacing:0.12em;
}

.card-meta{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:10px;
    padding:8px 2px 0;
    font-family:var(--serif);
}

.card-title{
    min-width:0;
    overflow:hidden;
    font-size:16px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.card-price{
    font-size:16px;
    white-space:nowrap;
}

.card-cart{
    width:100%;
    min-height:32px;
    font-size:10px;
    letter-spacing:0.08em;
    text-transform:uppercase;
}

.sold{ opacity:0.55; }

.sold .card-image::after{
    content:"SOLD";
    position:absolute;
    top:50%;
    left:50%;
    padding:6px 16px;
    border:2px solid;
    border-color:var(--highlight) var(--ink) var(--ink) var(--highlight);
    background:var(--panel);
    font-size:12px;
    letter-spacing:0.14em;
    transform:translate(-50%,-50%);
}


/* ---------- 7. CART & FOOTER ---------- */

.cart-window{
    display:flex;
    flex-direction:column;
    gap:18px;
    width:900px;
    max-width:calc(100% - 24px);
    margin:6px auto 40px;
    padding:24px 28px;
    background:var(--panel);
}

.cart-title{
    margin:0;
    font-family:var(--serif);
    font-size:40px;
    font-weight:normal;
    line-height:1;
}

.cart-empty{
    margin:10px 0;
    font-family:var(--serif);
    font-size:18px;
}

.cart-table{
    width:100%;
    border-collapse:collapse;
    font-size:12px;
}

.cart-table th,
.cart-table td{
    padding:8px 12px;
    border:var(--line);
    vertical-align:middle;
}

.cart-table th{
    background:var(--panel-dark);
    font-size:10px;
    font-weight:normal;
    letter-spacing:0.12em;
    text-align:left;
}

.cart-table .col-image{ width:96px; padding:8px; }
.cart-table .col-price{
    width:130px;
    font-family:var(--serif);
    font-size:18px;
    text-align:right;
}
.cart-table th.col-price{ font-family:var(--sans); font-size:10px; }
.cart-table .col-remove{ width:120px; text-align:center; }

.cart-thumb{
    display:block;
    width:76px;
    height:95px;
    overflow:hidden;
    background:var(--panel-dark);
}

.cart-thumb img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.cart-name{
    font-family:var(--serif);
    font-size:19px;
}

.cart-size{
    margin-top:4px;
    font-size:11px;
}

.cart-total-row th{ text-align:right; }
.cart-total{ font-size:24px !important; }

.cart-note{
    margin:0;
    font-size:11px;
    line-height:1.6;
}

.cart-actions{
    display:flex;
    align-items:center;
    gap:18px;
}

.cart-continue{
    font-family:var(--serif);
    font-size:15px;
}

.cart-clear{
    margin-left:auto;
    min-height:32px;
    padding:0 6px;
    border:0;
    background:none;
    color:var(--ink);
    font-size:11px;
    text-decoration:underline;
    cursor:pointer;
}

.cart-checkout{
    min-width:280px;
    padding:0 20px;
    min-height:46px;
    background:var(--ink);
    color:var(--panel);
    letter-spacing:0.1em;
}

.cart-checkout:hover{ background:#000; color:var(--panel); }

.cart-actions:has(.cart-clear[hidden]) .cart-continue{ margin-right:auto; }

.site-footer{
    display:flex;
    flex-wrap:wrap;
    gap:6px 18px;
    padding:14px 28px 16px;
    color:var(--ink-deep);
    font-size:11px;
}

.site-footer a{ color:var(--ink-deep); }
.footer-end{ margin-left:auto; }


/* ---------- 8. PRODUCT PAGE ----------
   One early-web window, like the landing screen: a plum title bar with the
   logo, the shop links and a close button, then the photo and the details.
   The details read as catalogue lines (Size .......... 10), not a table.
   On computers the page fills the browser window and never scrolls;
   a long description scrolls inside the details column instead. */

html.product-open,
html.product-open body{ overflow:hidden; }

html.product-open .site,
html.route-product .site,
html.product-open .landing,
html.route-product .landing{ display:none; }

/* Product photos are 3:4 portrait. On computers the window is centred and
   sized around a 3:4 photo box that fills the height of the browser, so the
   photo has no empty bands; the collage shows either side.
   --pv-chrome = everything above and below the photo (bars, padding, thumbnails). */
.product-view{
    --pv-chrome:248px;
    --pv-photo-h:calc(100vh - var(--pv-chrome));
    --pv-photo-w:calc(var(--pv-photo-h) * 0.75);
    --pv-info-w:480px;
    --pv-width:min(calc(var(--pv-photo-w) + 37px + var(--pv-info-w) + 4px), calc(100vw - 56px));
    position:fixed;
    inset:0;
    z-index:10;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    height:100vh;
    height:100dvh;
    padding:18px 28px 16px;
    font-family:Verdana,Geneva,sans-serif;
    text-shadow:none;
}

/* Only one photo: no thumbnail row, so the photo can be taller. */
.product-view:has(.pv-thumb-list:empty){ --pv-chrome:174px; }

@supports (height:100dvh){
    .product-view{ --pv-photo-h:calc(100dvh - var(--pv-chrome)); }
}

.product-view a{ color:var(--ink); }
.product-view a:hover{ color:#000; }

.product-view > *{ width:var(--pv-width); }

.pv-window{
    display:flex;
    flex:1;
    flex-direction:column;
    min-height:0;
    background:var(--panel);
    box-shadow:6px 6px 0 rgba(59,43,61,0.35);
}

/* Title bar */
.pv-titlebar{
    display:flex;
    flex:none;
    align-items:center;
    gap:10px;
    height:38px;
    padding:0 5px 0 10px;
    background:var(--ink);
    color:var(--panel);
}

.product-view .pv-brand{
    display:flex;
    flex:none;
    align-items:center;
    gap:8px;
    color:var(--panel);
    text-decoration:none;
}

.product-view .pv-brand:hover{ color:#fff; }

.pv-brand img{
    display:block;
    width:40px;
    height:auto;
}

.pv-brand span{
    font-family:var(--serif);
    font-size:22px;
    line-height:1;
}

.pv-bar-title{
    min-width:0;
    overflow:hidden;
    font-size:11px;
    letter-spacing:0.06em;
    opacity:0.85;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.pv-nav{
    display:flex;
    flex:none;
    gap:4px;
    margin-left:auto;
}

/* Small raised buttons in the title bar */
.product-view .pv-key{
    display:inline-flex;
    align-items:center;
    gap:6px;
    height:26px;
    padding:0 10px;
    border:2px solid;
    border-color:var(--highlight) var(--ink) var(--ink) var(--highlight);
    background:var(--panel);
    color:var(--ink);
    font-size:10px;
    letter-spacing:0.1em;
    text-decoration:none;
}

.product-view .pv-key:hover{ background:var(--panel-dark); color:var(--ink); }
.product-view .pv-key:active{ border-color:var(--ink) var(--highlight) var(--highlight) var(--ink); }

.pv-key-count{
    padding:1px 5px;
    background:var(--ink);
    color:var(--panel);
    font-weight:normal;
}

.product-view a.pv-key:has(.pv-key-count){ padding-right:6px; }

.product-view .pv-close{
    justify-content:center;
    width:26px;
    padding:0;
    font-size:14px;
    letter-spacing:0;
}

/* Breadcrumb strip under the title bar */
.pv-breadcrumb{
    flex:none;
    overflow:hidden;
    padding:7px 14px;
    border-bottom:var(--line);
    background:var(--panel-dark);
    font-family:var(--serif);
    font-size:14px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.pv-panel{
    display:grid;
    flex:1;
    grid-template-columns:calc(var(--pv-photo-w) + 36px) minmax(0,1fr);
    min-height:0;
}

.pv-photos{
    display:flex;
    flex-direction:column;
    gap:10px;
    min-height:0;
    padding:16px;
    border-right:var(--line);
}

.pv-photo{
    position:relative;
    display:flex;
    flex:none;
    width:calc(var(--pv-photo-w) + 4px);
    height:calc(var(--pv-photo-h) + 4px);
    max-width:100%;
    min-height:0;
    padding:0;
    background-color:var(--panel-dark);
    background-position:center;
    background-repeat:no-repeat;
    background-size:contain;
    cursor:pointer;
}

.pv-photo:disabled{ cursor:default; }

.photo-image{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    opacity:0;
    transition:opacity 150ms linear;
}

.photo-image.is-loaded{ opacity:1; }

.photo-empty{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--ink);
    font-size:10px;
    letter-spacing:0.14em;
}

.pv-thumbs{
    display:flex;
    flex:none;
    align-items:center;
    gap:8px;
}

.pv-thumbs:has(.pv-thumb-list:empty){ display:none; }

.pv-thumb-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.pv-thumb{
    width:64px;
    height:64px;
    padding:0;
    border:2px solid;
    border-color:var(--highlight) var(--ink) var(--ink) var(--highlight);
    background:var(--panel-dark);
    cursor:pointer;
    opacity:0.7;
}

.pv-thumb:hover{ opacity:1; }

.pv-thumb.active{
    border-color:var(--ink) var(--highlight) var(--highlight) var(--ink);
    outline:2px solid var(--ink);
    outline-offset:1px;
    opacity:1;
}

.pv-thumb img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.pv-count{
    margin-left:auto;
    font-family:var(--serif);
    font-size:14px;
}

/* Details column */
.pv-info{
    display:flex;
    flex-direction:column;
    gap:20px;
    min-height:0;
    padding:30px 32px 24px;
}

.pv-info-scroll{
    min-height:0;
    overflow-y:auto;
    font-family:var(--serif);
    font-size:16px;
}

.pv-title{
    margin:0;
    font-family:var(--serif);
    font-size:24px;
    font-weight:normal;
    line-height:1.2;
    overflow-wrap:anywhere;
}

/* A long description scrolls inside its own box, so size and price stay in view. */
.pv-desc{
    max-width:46ch;
    max-height:min(34vh,300px);
    margin:12px 0 0;
    overflow-y:auto;
    line-height:1.5;
    white-space:pre-line;
}

.pv-lines{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin:22px 0 0;
}

.pv-line{
    display:flex;
    align-items:baseline;
    gap:8px;
}

.pv-line dt{ flex:none; }

.pv-line dd{
    margin:0;
    text-align:right;
}

/* The dotted line between a label and its value */
.pv-leader{
    flex:1;
    min-width:24px;
    border-bottom:1px dotted var(--ink);
    transform:translateY(-3px);
}

.pv-actions{
    display:flex;
    flex:none;
    flex-direction:column;
    gap:10px;
    margin-top:auto;
}

.pv-cart{
    height:44px;
    background:var(--panel);
    color:var(--ink);
    font-family:Verdana,Geneva,sans-serif;
    font-size:13px;
    letter-spacing:0.08em;
    text-transform:uppercase;
    cursor:pointer;
}

.pv-cart:hover{ background:var(--panel-dark); }

.pv-cart:active{ border-color:var(--ink) var(--highlight) var(--highlight) var(--ink); }

.pv-cart:disabled{
    opacity:0.5;
    cursor:not-allowed;
}

.pv-steps{
    display:flex;
    justify-content:space-between;
    gap:12px;
    font-family:var(--serif);
    font-size:15px;
}

.pv-footer{
    display:flex;
    flex:none;
    gap:18px;
    font-size:11px;
    color:var(--ink-deep);
}

.product-view .pv-footer a{ color:var(--ink-deep); }
.pv-footer-end{ margin-left:auto; }

/* Product link that doesn't exist */
.not-found{
    position:fixed;
    inset:0;
    z-index:10;
    display:grid;
    place-content:center;
    gap:16px;
    font-family:var(--serif);
    font-size:20px;
    text-align:center;
}

.noscript{
    position:relative;
    z-index:2;
    text-align:center;
}


/* ---------- 9. PHONES & SMALL SCREENS ---------- */

@media (max-width:900px){
    .shop-layout{ grid-template-columns:180px minmax(0,1fr); gap:22px; }
    .side-lockup .lockup{ --lockup-width:180px; }
    .shop-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
}

@media (max-width:640px){
    /* The collage is drawn at half size and fainter, so it doesn't swamp the screen. */
    .bg-collage{
        inset:auto;
        top:0;
        left:0;
        width:200vw;
        height:200vh;
        zoom:0.5;
        opacity:0.35;
    }

    .lockup-link{ margin-bottom:24px; }

    /* Layout "M5": the same logo and sidebar box as on a computer, stacked
       above the products. Categories sit in two columns to keep the box short;
       page numbers move to the "<< Previous · Page 1 of 2 · Next >>" row at the bottom. */
    .shop-layout{ grid-template-columns:1fr; gap:12px; width:calc(100% - 20px); margin-top:14px; }
    .shop-side{ gap:12px; }
    .side-lockup{ align-self:center; }
    .side-lockup .lockup{ --lockup-width:140px; }
    .sidebar{ gap:10px; padding:10px; }
    .side-cart{ min-height:40px; }
    .cat-list{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        column-gap:8px;
        margin:0 -6px;
    }
    .cat-link{
        display:flex;
        align-items:center;
        min-height:34px;
        margin:0;
        padding:0 6px;
        line-height:1.1;
    }
    .side-pages{ display:none; }

    /* Two columns of cards, eight per page (set in app.js) */
    .shop-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:14px 10px;
    }
    .card{ gap:8px; padding:6px; }
    .card-meta{ flex-direction:column; align-items:stretch; gap:2px; padding:7px 1px 0; }
    .card-title,
    .card-price{ font-size:15px; }
    .card-cart{ min-height:40px; padding:0 6px; font-size:10px; }
    .sold .card-image::after{ padding:4px 10px; font-size:10px; }

    .page-steps{ justify-content:space-between; gap:8px; margin:16px 0 6px; padding:0 2px; font-size:15px; }
    .page-steps a,
    .page-steps span{ display:inline-flex; align-items:center; min-height:44px; }

    .cart-window{ padding:18px 14px; max-width:calc(100% - 20px); }
    .cart-title{ font-size:32px; }

    /* Cart rows become small blocks: photo | name + remove | price */
    .cart-table thead{ display:none; }
    .cart-table,
    .cart-table tbody{ display:block; }
    .cart-table tr{
        display:grid;
        grid-template-columns:64px minmax(0,1fr) auto;
        gap:6px 12px;
        padding:10px 0;
        border-bottom:var(--line);
    }
    .cart-table td,
    .cart-table th{ padding:0; border:0; width:auto !important; background:none; }
    .cart-table .col-image{ grid-row:span 2; }
    .cart-table .col-remove{ grid-column:2; text-align:left; }
    .cart-thumb{ width:64px; height:80px; }
    .cart-name{ font-size:17px; }
    .cart-table .col-price{ font-size:16px; }
    .cart-total-row{ grid-template-columns:1fr auto !important; border-bottom:0 !important; }
    .cart-total-row th{ align-self:center; text-align:left; }
    .cart-total-row .col-remove{ display:none; }

    .cart-actions{ flex-wrap:wrap; }
    .cart-checkout{ order:-1; width:100%; }
    .cart-clear{ min-height:44px; }

    .site-footer{ padding:12px 12px 16px; }
    .site-footer > *{ display:inline-flex; align-items:center; min-height:32px; }
}

/* On phones the product page scrolls: photo first, then the details. */
@media (max-width:760px){
    .product-view{
        display:block;
        overflow-y:auto;
        overscroll-behavior:contain;
        padding:10px 10px calc(20px + env(safe-area-inset-bottom));
    }

    .product-view > *{ width:auto; }

    .pv-window{ box-shadow:4px 4px 0 rgba(59,43,61,0.35); }

    .pv-titlebar{ height:auto; min-height:48px; padding:0 4px 0 8px; }
    .pv-brand img{ width:36px; }
    .pv-brand span{ font-size:20px; }
    .pv-bar-title{ display:none; }
    .product-view .pv-key{ height:36px; padding:0 9px; }
    .product-view .pv-close{ width:36px; padding:0; }

    .pv-breadcrumb{ padding:8px 10px; white-space:normal; }

    .pv-panel{ display:block; }

    .pv-photos{
        padding:10px;
        border-right:0;
        border-bottom:var(--line);
    }

    .pv-photo{ width:min(100%, 54svh); height:auto; aspect-ratio:3 / 4; margin:0 auto; }

    .pv-thumb{ width:56px; height:56px; }

    .pv-info{ padding:20px 14px 16px; }
    .pv-info-scroll{ overflow:visible; }
    .pv-desc{ max-height:none; overflow:visible; }
    .pv-title{ font-size:22px; }

    .pv-cart{ height:48px; }
    .pv-steps{ flex-wrap:wrap; justify-content:space-between; }
    .pv-steps a{ display:inline-flex; align-items:center; min-height:44px; }

    .pv-footer{
        flex-wrap:wrap;
        gap:6px 16px;
        margin-top:14px;
        padding:0 2px;
    }
}