/* =========================================================
   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 */
    --panel-deeper:#CBBDA8;    /* drop-down item under the pointer */
    --line:1px solid var(--ink);
    --sans:Verdana,Geneva,sans-serif;
    --serif:"Times New Roman",Times,serif;
    /* the mouse pointer: a plum arrow with her butterfly ʚїɞ beside it (a small
       drawing kept right here, so there is no separate image file) */
    --cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30' viewBox='0 0 60 30'%3E%3Cpath d='M2 2 L2 20 L6.6 15.8 L9.8 23 L12.6 21.8 L9.5 14.8 L15.5 14.8 Z' fill='%233B2B3D'/%3E%3Ctext x='17' y='27' font-family='Times New Roman,Times,serif' font-size='15' fill='%233B2B3D'%3E%CA%9A%D1%97%C9%9E%3C/text%3E%3C/svg%3E") 2 2, auto;
    /* the same pointer in cream, for plum areas (where a plum one would vanish) */
    --cursor-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30' viewBox='0 0 60 30'%3E%3Cpath d='M2 2 L2 20 L6.6 15.8 L9.8 23 L12.6 21.8 L9.5 14.8 L15.5 14.8 Z' fill='%23E7DCCB'/%3E%3Ctext x='17' y='27' font-family='Times New Roman,Times,serif' font-size='15' fill='%23E7DCCB'%3E%CA%9A%D1%97%C9%9E%3C/text%3E%3C/svg%3E") 2 2, auto;
}

*,*::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%; }

/* The plum butterfly pointer everywhere, links and buttons included */
html,
a[href],
button,
summary,
label{ cursor:var(--cursor); }

/* Over plum areas it turns cream, so it doesn't disappear */
.x2-titlebar,
.about-titlebar,
.product-view .pv-titlebar,
.product-view .pv-brand,
.x2-throbber,
.landing-eye span,
.btn98.is-current,
.cat-link.is-current,
a.cart-checkout,
.lightbox{ cursor:var(--cursor-light); }

/* …but stays plum on the cream bits that sit on top of them */
.lightbox-window{ cursor:var(--cursor); }

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:var(--cursor);
    -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 ----------
   One ready-made picture (images/background.webp) with the collage already
   arranged and greyed, drawn behind everything. To change the background,
   replace that file with a new one of the same shape (2160 × 1350, transparent
   around the pictures). */

.bg-collage{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:url("/images/background.webp") center top / cover no-repeat;
    opacity:0.5;
}


/* ---------- 3. LANDING PAGE ----------
   Layout "X2": her four-eyed butterfly inside a pretend 1990s web browser
   window. Each eye is a link with a [ bracket ] label underneath; pointing at an
   eye lights its label up, blinks the little eye in the toolbar and shows the
   eye's address in the status bar (js/app.js, setupLanding). */

.landing{
    display:none;
    position:fixed;
    inset:0;
    z-index:100;
    align-items:center;
    justify-content:center;
    padding:28px 24px;
}

html.show-landing .landing{ display:flex; }
html.show-landing body{ overflow:hidden; }
html.show-landing .site{ visibility:hidden; }

/* The browser window: fills the screen height, never taller than ~860px */
.x2-window{
    display:flex;
    flex-direction:column;
    width:min(1140px, 100%);
    height:100%;
    max-height:860px;
    background:var(--panel);
    box-shadow:6px 6px 0 var(--ink);
    font-family:var(--sans);
    font-size:11px;
    color:var(--ink);
}

/* 1. Title bar */
.x2-titlebar{
    display:flex;
    flex:none;
    align-items:center;
    gap:7px;
    height:26px;
    padding:0 4px 0 7px;
    background:var(--ink);
    color:var(--panel);
}

.x2-icon{ display:block; width:22px; height:auto; }

.x2-title{
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    letter-spacing:0.04em;
}

/* 2. Toolbar */
.x2-toolbar{
    display:flex;
    flex:none;
    align-items:center;
    gap:4px;
    padding:5px 8px;
    border-top:1px solid var(--highlight);
    border-bottom:1px solid var(--panel-dark);
}

.x2-tool{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    width:54px;
    height:44px;
    padding:0;
    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:10px;
    text-decoration:none;
    cursor:var(--cursor);
}

.x2-tool[hidden]{ display:none; }
.x2-tool b{ font-size:15px; font-weight:normal; line-height:1; }
.x2-tool:hover{ background:var(--panel-dark); color:var(--ink); }
.x2-tool:active{ border-color:var(--ink) var(--highlight) var(--highlight) var(--ink); }

/* Sound switched off: the button stays pressed in */
.x2-tool[aria-pressed="false"]{
    border-color:var(--ink) var(--highlight) var(--highlight) var(--ink);
    background:var(--panel-dark);
}
.x2-tool:focus-visible{ outline:1px dashed var(--ink); outline-offset:-5px; }

/* Greyed out when there's nowhere to go (Back on the butterfly) */
.x2-tool:disabled,
.x2-tool:disabled:hover,
.x2-tool:disabled:active{
    border-color:var(--highlight) var(--ink) var(--ink) var(--highlight);
    background:var(--panel);
    color:rgba(59,43,61,0.35);
    cursor:var(--cursor);
}

/* Where old browsers had their spinning logo: her eye drawing in cream
   (images/eye-corner.png), blinking now and then */
.x2-throbber{
    display:block;
    flex:none;
    width:46px;
    height:46px;
    margin-left:auto;
    overflow:hidden;
    background:var(--ink);
}

.x2-blink{
    display:block;
    width:100%;
    height:100%;
    background:url("/images/eye-corner.png") center / 80% auto no-repeat;
}

/* 3. Location bar */
.x2-location{
    display:flex;
    flex:none;
    align-items:center;
    gap:8px;
    padding:4px 10px 6px;
    border-top:1px solid var(--highlight);
    border-bottom:1px solid var(--ink);
    white-space:nowrap;
}

.x2-address{
    flex:1;
    min-width:0;
    overflow:hidden;
    padding:3px 6px;
    border:2px solid;
    border-color:var(--ink) var(--highlight) var(--highlight) var(--ink);
    background:#FFFFFF;
    text-overflow:ellipsis;
}

/* 4. The page itself */
.x2-page{
    display:flex;
    flex:1;
    flex-direction:column;
    align-items:center;
    min-height:0;
    overflow-y:auto;
    padding:16px 16px 14px;
    background:var(--highlight);
    text-align:center;
}

/* Centred top-to-bottom, but if a short screen can't fit it all, it scrolls
   from the title instead of cutting the title off */
.x2-page > :first-child{ margin-top:auto; }
.x2-page > :last-child{ margin-bottom:auto; }

.landing-title{
    margin:0;
    font-family:var(--serif);
    font-size:clamp(44px,6.5vw,58px);
    font-weight:normal;
    line-height:1;
}

.landing-tagline{
    margin:6px 0 clamp(14px,3vh,28px);
    font-family:var(--serif);
    font-size:clamp(15px,1.3vw,18px);
    font-style:italic;
}

/* The butterfly is as big as the space under the title allows
   (410px = everything else above and below it) */
.landing-fly{
    position:relative;
    flex:none;
    width:min(640px, 100%, calc((min(100vh, 916px) - 410px) * 1.2));
    min-width:300px;
}

.landing-butterfly{
    display:block;
    width:100%;
    height:auto;
}

/* The click area over each eye (invisible); the label hangs underneath it */
.landing-eye{
    position:absolute;
    width:16%;
    height:16%;
    min-width:64px;
    min-height:54px;
    border-radius:50%;
    transform:translate(-50%,-50%);
    color:var(--ink);
    text-decoration:none;
}

.landing-eye span{
    position:absolute;
    top:calc(100% - 2px);
    left:50%;
    padding:0 3px;
    background:var(--highlight);
    font-family:var(--serif);
    font-size:clamp(15px,1.4vw,19px);
    white-space:nowrap;
    text-decoration:underline;
    text-underline-offset:3px;
    transform:translateX(-50%);
}

.landing-eye:hover span,
.landing-eye:focus-visible span{
    padding:0 5px;
    background:var(--ink);
    color:var(--panel);
    text-decoration:none;
}

.landing-eye:focus-visible{ outline:1px dashed var(--ink); outline-offset:2px; }

/* The videos Forward brings up: they fill the page area exactly, cropped at the
   edges rather than squashed */
.x2-player{
    position:relative;
    flex:1;
    min-height:0;
    background:var(--ink);
}

.x2-video{
    position:absolute;
    inset:0;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.x2-player[hidden],
.x2-page[hidden]{ display:none; }

/* 5. Status bar */
.x2-status{
    display:flex;
    flex:none;
    align-items:center;
    gap:4px;
    padding:3px 4px;
    border-top:1px solid var(--ink);
}

.x2-status-text{
    flex:1;
    min-width:0;
    overflow:hidden;
    padding:2px 6px;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.x2-meter{
    display:block;
    flex:none;
    width:90px;
    height:16px;
    padding:2px;
}

/* How far through the current video (js/app.js sets the width); full on the butterfly */
.x2-meter span{ display:block; width:100%; height:100%; background:var(--ink); }

.x2-lock{ flex:none; padding:0 4px; font-size:12px; line-height:1; }

/* Phones: the window fills the screen; symbols only on the toolbar */
@media (max-width:640px){
    .landing{ padding:6px; }
    .x2-window{ width:100%; max-height:none; box-shadow:4px 4px 0 var(--ink); }
    .x2-toolbar{ gap:3px; padding:4px 6px; }
    .x2-tool{ width:40px; height:36px; }
    .x2-tool span{ display:none; }
    .x2-throbber{ width:38px; height:38px; }
    .x2-location{ padding:4px 6px 5px; gap:6px; }
    .x2-page{ padding:14px 8px 12px; }
    .landing-fly{ width:100%; min-width:0; }
    .x2-meter{ width:56px; }
}


/* ---------- 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{
    position:relative;
    z-index:2;          /* so the categories drop-down opens over the products */
    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); }

/* MENU: SHOP and ABOUT US buttons (CART is below them) — the page you're on is pressed in */
.side-menu{
    display:flex;
    flex-direction:column;
    gap:8px;
}

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

/* Categories + Sort by: one under the other (side by side on phones) */
.side-filters{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.side-field{
    display:flex;
    flex-direction:column;
    gap:8px;
    min-width:0;
}

/* The categories list opens over the Sort box below it */
#catDrop{ z-index:6; }

/* Categories and page numbers only belong to the shop itself */
.shop-layout:has(#shopMain[hidden]) .side-cats{ display:none; }

.side-btn{
    display:flex;
    align-items:center;
    min-height:34px;
    padding: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-btn:hover{ background:var(--panel-dark); color:var(--ink); }

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

.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;
}

/* Categories drop-down. The closed box is sunken like an old form field,
   with a small raised ▼ button; the list opens on top of the page below it. */
.cat-drop{
    position:relative;
    z-index:5;
}

.cat-drop-box{
    display:flex;
    align-items:center;
    height:34px;
    padding-left:10px;
    border:2px solid;
    border-color:var(--ink) var(--highlight) var(--highlight) var(--ink);
    background:var(--panel-dark);
    font-family:var(--serif);
    font-size:16px;
    list-style:none;
    cursor:var(--cursor);
    user-select:none;
}

.cat-drop-box::-webkit-details-marker{ display:none; }

.cat-drop-current{
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.cat-drop-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    align-self:stretch;
    width:28px;
    border:2px solid;
    border-color:var(--highlight) var(--ink) var(--ink) var(--highlight);
    background:var(--panel);
    font-family:Verdana,Geneva,sans-serif;
    font-size:9px;
}

.cat-drop[open] .cat-drop-button{
    border-color:var(--ink) var(--highlight) var(--highlight) var(--ink);
    background:var(--panel-dark);
}

.cat-list{
    position:absolute;
    top:calc(100% - 2px);
    left:0;
    right:0;
    display:flex;
    flex-direction:column;
    max-height:min(60vh, 420px);
    overflow-y:auto;
    padding:2px 0;
    border:var(--line);
    background:var(--panel-dark);
    box-shadow:4px 4px 0 rgba(22,14,23,0.35);
    font-family:var(--serif);
    font-size:16px;
}

.cat-link{
    display:flex;
    align-items:center;
    min-height:30px;
    padding:0 10px;
    color:var(--ink);
    text-decoration:none;
}

.cat-link:hover{ background:var(--panel-deeper); color:var(--ink); }

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

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

.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; }


/* ABOUT US page (layout "A3"): a window where the products normally are. */
.shop-layout:has(#shopMain[hidden]) .side-pages{ display:none; }

.about-window{
    background:var(--panel);
    box-shadow:6px 6px 0 rgba(59,43,61,0.35);
}

.about-titlebar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    height:30px;
    padding:0 6px 0 10px;
    background:var(--ink);
    color:var(--panel);
    font-size:11px;
    letter-spacing:0.06em;
}

.about-close{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:22px;
    height:20px;
    border:1px solid var(--panel);
    color:var(--panel);
    font-size:12px;
    text-decoration:none;
}

.about-close:hover{ background:var(--panel); color:var(--ink); }

.about-body{
    display:grid;
    grid-template-columns:minmax(0,1fr) 260px;
    gap:30px;
    align-items:start;
    padding:30px 32px;
}

.about-text{
    font-family:var(--serif);
    font-size:17px;
    line-height:1.55;
}

.about-text p{
    max-width:50ch;
    margin:0 0 14px;
}

.about-title{
    margin:0 0 14px;
    font-family:var(--serif);
    font-size:24px;
    font-weight:normal;
    line-height:1.2;
}

.about-lines{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin:22px 0 0;
    font-size:16px;
    line-height:1.3;
}

.about-photo{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:3 / 4;
    object-fit:cover;
    border:2px solid;
    border-color:var(--ink) var(--highlight) var(--highlight) var(--ink);
    background:var(--panel-dark);
}

.about-photo-empty{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
    font-size:10px;
    letter-spacing:0.12em;
    line-height:1.6;
    text-align:center;
}


/* LOOKBOOK (layout "LB3"): prints pinned at angles straight onto the page */
.look-title{
    margin:0 0 6px;
    font-family:var(--serif);
    font-size:26px;
    font-weight:normal;
}

.look-status{
    margin:0 0 14px;
    font-family:var(--serif);
    font-size:16px;
}

.look-status:empty{ display:none; }

.look-prints{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:34px 30px;
    padding:18px 10px 30px;
}

.look-print{
    position:relative;
    display:block;
    width:100%;
    padding:10px 10px 34px;
    border:0;
    background:var(--highlight);
    box-shadow:4px 5px 0 rgba(22,14,23,0.3);
    color:var(--ink);
    cursor:var(--cursor);
    transition:transform 150ms ease;
}

/* Each print tilted and nudged a little differently, like a pinboard */
.look-print:nth-child(6n+1){ transform:rotate(-4deg) translateY(6px); }
.look-print:nth-child(6n+2){ transform:rotate(3deg) translateY(28px); }
.look-print:nth-child(6n+3){ transform:rotate(-2deg) translateY(-4px); }
.look-print:nth-child(6n+4){ transform:rotate(2deg) translateY(12px); }
.look-print:nth-child(6n+5){ transform:rotate(-3deg) translateY(-8px); }
.look-print:nth-child(6n+6){ transform:rotate(4deg) translateY(16px); }
.look-print:hover,
.look-print:focus-visible{ z-index:2; transform:rotate(0) scale(1.04); }

.look-print img{
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:3 / 4;
    object-fit:cover;
    background:var(--panel-dark);
}

.look-caption{
    position:absolute;
    left:8px;
    right:8px;
    bottom:8px;
    overflow:hidden;
    font-family:var(--serif);
    font-size:14px;
    font-style:italic;
    text-align:center;
    text-overflow:ellipsis;
    white-space:nowrap;
}

/* Lookbook photo, big */
.lightbox{
    position:fixed;
    inset:0;
    z-index:200;
    display:grid;
    place-items:center;
    padding:16px;
    background:rgba(22,14,23,0.55);
}

html.lightbox-open body{ overflow:hidden; }

.lightbox-window{
    display:flex;
    flex-direction:column;
    width:min(620px,100%);
    max-height:calc(100dvh - 32px);
    background:var(--panel);
    box-shadow:6px 6px 0 rgba(22,14,23,0.4);
}

.lightbox-close{ cursor:var(--cursor); background:none; font-family:inherit; }

.lightbox-image{
    display:block;
    flex:1 1 auto;
    min-height:0;
    width:auto;
    max-width:calc(100% - 28px);
    max-height:calc(100dvh - 190px);
    margin:14px auto 0;
    aspect-ratio:3 / 4;
    object-fit:contain;
    border:2px solid;
    border-color:var(--ink) var(--highlight) var(--highlight) var(--ink);
    background:var(--panel-dark);
}

.lightbox-text{
    padding:10px 16px 0;
    font-family:var(--serif);
    font-size:16px;
    line-height:1.5;
}

.lightbox-text p{ margin:0 0 8px; }

.lightbox-steps{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 14px 12px;
    font-family:var(--serif);
    font-size:15px;
}

.lightbox-steps button{
    padding:6px 2px;
    border:0;
    background:none;
    color:var(--ink);
    font:inherit;
    text-decoration:underline;
    cursor:var(--cursor);
}

/* BLOG (layout "BL1"): diary list, and one post at a time */
.blog-window{
    background:var(--panel);
    box-shadow:6px 6px 0 rgba(59,43,61,0.35);
}

.blog-crumb{
    padding:7px 14px;
    border-bottom:var(--line);
    background:var(--panel-dark);
    font-family:var(--serif);
    font-size:14px;
}

.blog-body{ padding:22px 30px 26px; }

.blog-row{
    display:grid;
    grid-template-columns:110px minmax(0,1fr);
    gap:18px;
    padding:18px 0;
    border-top:var(--line);
    font-family:var(--serif);
}

.blog-row.no-photo{ grid-template-columns:minmax(0,1fr); }

.blog-row-photo img{
    display:block;
    width:110px;
    height:auto;
    aspect-ratio:3 / 4;
    object-fit:cover;
    border:2px solid;
    border-color:var(--ink) var(--highlight) var(--highlight) var(--ink);
    background:var(--panel-dark);
}

.blog-date{
    font-size:10px;
    letter-spacing:0.16em;
}

.blog-row-title{
    margin:6px 0;
    font-size:22px;
    font-weight:normal;
    line-height:1.2;
}

.blog-excerpt{
    max-width:60ch;
    margin:0;
    font-size:16px;
    line-height:1.5;
}

.blog-more{
    display:inline-block;
    margin-top:8px;
    font-size:15px;
}

.blog-post{
    font-family:var(--serif);
    font-size:17px;
    line-height:1.6;
}

.blog-post-title{
    margin:8px 0 16px;
    font-size:26px;
    font-weight:normal;
    line-height:1.2;
}

.blog-post-image{
    display:block;
    width:auto;
    max-width:min(100%, 560px);
    max-height:70vh;
    height:auto;
    margin:0 0 18px;
    border:2px solid;
    border-color:var(--ink) var(--highlight) var(--highlight) var(--ink);
}

.blog-post-text{ max-width:62ch; }
.blog-post-text p{ margin:0 0 14px; }
.blog-post-text img{ max-width:100%; height:auto; }

.blog-steps{
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-top:24px;
    font-size:15px;
}


/* ---------- 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-body{ display:block; }

.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;
}

/* VIEW PRODUCT and ADD TO CART, side by side (stacked on phones) */
.card-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px;
}

.card-view,
.card-cart{
    width:100%;
    min-width:0;
    min-height:32px;
    padding:0 6px;
    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:var(--cursor);
}

.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; }

/* 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:var(--cursor);
}

.pv-photo:disabled{ cursor:var(--cursor); }

.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:var(--cursor);
    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:var(--cursor);
}

.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 background picture is drawn at half size and fainter, so it doesn't swamp the screen. */
    .bg-collage{
        background-size:200% auto;
        background-position:left top;
        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 are a drop-down 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-drop-box{ height:44px; font-size:17px; }
    .cat-drop-button{ width:38px; }
    .cat-link{ min-height:40px; font-size:17px; }
    .side-pages{ display:none; }
    .side-btn{ min-height:40px; }
    /* On phones the three menu buttons sit side by side, to keep the box short */
    .side-menu{ flex-direction:row; gap:6px; }
    .side-menu > a{ flex:1 1 auto; justify-content:center; padding:0 8px; letter-spacing:0.08em; }
    .side-menu .side-cart{ gap:6px; padding-right:5px; }
    /* Five menu buttons: SHOP / LOOKBOOK / BLOG on one row, ABOUT US / CART on the next */
    .side-menu{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); }
    .side-menu > a{ grid-column:span 2; min-width:0; }
    .side-menu > a:nth-child(n+4){ grid-column:span 3; }

    .look-prints{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 18px; padding:12px 4px 20px; }
    .look-print{ padding:7px 7px 28px; }
    .look-caption{ font-size:13px; }
    .blog-body{ padding:16px 14px 20px; }
    .blog-row{ grid-template-columns:84px minmax(0,1fr); gap:14px; }
    .blog-row-photo img{ width:84px; }
    .blog-row-title{ font-size:20px; }
    .blog-steps{ flex-wrap:wrap; }
    .blog-steps a{ display:inline-flex; align-items:center; min-height:44px; }
    .side-filters{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    .side-filters .cat-drop-box{ font-size:16px; padding-left:8px; }
    .side-filters .cat-drop-button{ width:32px; }
    .sort-drop .cat-list{ left:auto; width:max(100%, 200px); }

    /* About page: photo on top, then the text */
    .about-window{ box-shadow:4px 4px 0 rgba(59,43,61,0.35); }
    .about-body{ grid-template-columns:1fr; gap:20px; padding:16px 14px 22px; }
    .about-photo{ order:-1; width:min(100%, 260px); justify-self:center; }
    .about-titlebar{ height:40px; }
    .about-close{ width:34px; height:30px; }

    /* 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-actions{ grid-template-columns:1fr; }
    .card-view,
    .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; }

    .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;
    }
}