/* PAGE

   Prints run on the dark brown ground rather than the site's off-white, so the
   artworks are read against the same tone throughout. That is the .dark class
   baseof puts on the body — the palette itself lives in style.css, and the
   shared styles follow it on their own. Only what is particular to the prints
   is below. */


/* SPLIT HERO */

/* Two equal vertical halves filling the viewport: title on the solid half, the
   carousel on the other. Keeps the .header class so the site header stays white
   on top of it. */
.split-hero {
    display: flex;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    overflow: hidden;
}
.split-hero > * {
    flex: 0 0 50%;
    max-width: 50%;
    position: relative;
}
.split-hero-text {
    background: var(--bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 6rem 1.5rem;
}
.split-hero-text h1 {
    font-size: 2.5rem;
    max-width: 30rem;
    margin-bottom: 0;
}

/* The subtitle doubles as the scroll cue at the foot of the text half. */
.split-hero-down {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    text-decoration: none;
    color: var(--text);
    font-weight: 400;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: opacity 0.3s ease;
}
.split-hero-down:hover {opacity: 0.6;}
.split-hero-arrow {
    display: block;
    position: relative;
    width: 2rem;
    height: 2rem;
    margin: 0.9rem auto 0;
    /* The ring sits back from the chevron it holds, so it takes the link's own
       colour thinned down rather than a tone of its own. */
    border: 1px solid color-mix(in srgb, currentColor 60%, transparent);
    border-radius: 50%;
}
.split-hero-arrow::after {
    content: '';
    position: absolute;
    top: 42%;
    left: 50%;
    width: 30%;
    height: 30%;
    border-bottom: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: translate(-50%, -50%) rotate(45deg);
}

/* The carousel is the home page's, resized to the half it sits in. The home
   page darkens the foot of its slides for the scroll cue; the split has no
   overlay down there, so that gradient goes. */
.split-hero .split-hero-carousel {
    height: 100%;
    background: var(--bg);
}
.split-hero .split-hero-carousel ul li div::after {display: none;}

/* Stacked on smaller displays, carousel first — the title half would otherwise
   push the photographs below the fold. */
@media (max-width: 60rem) {
    .split-hero {
        flex-direction: column;
        height: auto;
        max-height: none;
    }
    .split-hero > * {
        flex: 0 0 auto;
        max-width: 100%;
    }
    .split-hero .split-hero-carousel {order: -1; height: 60vh;}
    .split-hero-text {padding: 7rem 0rem; margin-bottom: -7rem;}
    .split-hero-down {position: static; transform: none; margin-top: 2.5rem;}
}
/* home-carousel.css hides the desktop carousel below this width for the home
   page's mobile variant; the split has a single carousel for both. */
@media (max-width: 45rem) {
    .split-hero .split-hero-carousel {display: block;}
}


/* PRINTS CAROUSEL */

/* Each card is a single link, so the img/div rules carousel.css puts on the
   direct children of the li move down one level. */
.main-content section.section-prints .carousel ul li > a {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
/* Mid-drag the scroller wins: the cards stay clickable, but nothing inside them
   shows a pointer while the row is being dragged. */
.main-content section.section-prints .carousel ul.grabbing li > a,
.main-content section.section-prints .carousel ul.grabbing li > a * {
    cursor: grabbing;
}
.main-content section.section-prints .carousel ul li img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: opacity 0.3s ease;
}
.main-content section.section-prints .carousel ul li a:hover img {opacity: 0.8;}
.main-content section.section-prints .carousel ul li > a > div {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-block: 1rem;
}
.main-content section.section-prints .carousel .title {color: var(--text-strong); font-weight: 400;}
.main-content section.section-prints .carousel .subtitle {color: var(--text-subtle);}

@media (max-width: 45rem) {
    .main-content section.section-prints {padding: 4.5rem 0;}
}


/* SINGLE PRINT */

/* The print sits in the same 60 / 40 split the shop uses: the gallery takes the
   wide half, everything you need to buy it the narrow one. The fr units make
   those two halves 60 / 40 of the space that is left once the gutter between
   them is taken out. */
.main-content section.section-product {
    margin-bottom: 15rem;
}
.main-content section.section-product .container {
    max-width: 96rem;
    display: grid;
    grid-template-columns: minmax(0, 57fr) minmax(0, 43fr);
    align-items: start;
    column-gap: 6rem;
}

/* GALLERY — the artwork large, the rest as a grid of squares under it. Both are
   lightbox links, so a click opens the full-size image and the arrows walk the
   whole set. */
.product-gallery {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Stays put while the column beside it scrolls. Held to the height of the
       screen on purpose: a sticky element taller than the viewport pins its top
       and its foot can never be scrolled to, which would leave the row of
       squares permanently out of reach. */
    position: sticky;
    top: 6rem;
    max-height: calc(100vh - 9rem);
}
.product-gallery a {cursor: zoom-in;}
/* The squares keep their size and the artwork gives up the difference, so a tall
   print on a short screen shows a smaller picture rather than a cropped column.
   min-height:0 is what lets a flex item shrink below its content at all. */
.product-main {min-height: 0; display: flex;}

/* No fixed box: the main image takes the shape of whatever it is showing, so a
   square frame shot is shorter than the 4:5 artwork rather than being padded out
   to its height. The width and height attributes on the img give the browser the
   proportions up front, so the swap reserves its space instead of reflowing. */
.product-main img {
    width: 100%;
    height: auto;
    /* Where the column has the room this letterboxes nothing: the ratio comes
       from the shot's own dimensions. Where it does not — a tall print on a
       short screen — the picture is scaled down inside the space left over and
       sits in the middle of it. */
    max-height: 100%;
    object-fit: contain;
}

/* One row, five squares wide, whatever the print has to show. */
.product-thumbs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
}
/* Everything past the row stays in the markup — hidden, but still picked up by
   lightbox.js, so the arrows walk the whole set once you are inside it. */
.product-thumbs a {display: none; position: relative;}
.product-thumbs a:nth-child(-n + 5) {display: block;}

/* Squares crop — these are a way in to the full image, not the image itself. */
.product-thumbs img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    transition: opacity 0.2s ease;
}
.product-thumbs a:hover img {opacity: 0.75;}

/* The last square of the row stands for everything below it, so it is dimmed
   and counts them off. It stays clickable: it opens the lightbox on its own
   image, and the rest are an arrow key away. */
.product-thumbs a[data-more]::after {
    content: attr(data-more);
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(24, 18, 19, 0.6);
    color: #F9FAF5;
    font-size: 1.3rem;
    font-weight: 400;
    line-height: 1;
}
.product-thumbs a[data-more]:hover::after {background: rgba(24, 18, 19, 0.45);}

/* INFORMATION — the column that scrolls. Only one of the two can usefully
   stick: the sticky one holds still against the other one moving, so if both
   were pinned to the screen there would be nothing left to scroll and neither
   would appear to stick at all. This is the taller of the two, so it is the one
   that travels, and the gallery holds. */
.product-info {
    padding-right: 0.5rem;
}
.product-vendor {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}
.main-content section.section-product h1 {margin-bottom: 2.25rem;}
.product-poem {
    color: var(--text-strong);
    font-family: 'Noto Serif', serif;
    font-size: 1.15rem;
    line-height: 1.7;
}

/* THE FORM */
.product-form {margin-block: 2.5rem 6rem;}
.product-option {
    border: 0;
    margin-bottom: 2.25rem;
}
.product-option legend {
    padding: 0;
    margin-bottom: 0.6rem;
    color: var(--text-strong);
    font-weight: 400;
}
.product-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.product-swatches label {position: relative; margin: 0;}
/* The radio itself does the work — checked, disabled and focus all style the
   box next to it — so it only has to stay in the layout, not be seen. */
.product-swatches label input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
/* An unpicked box is outlined in its own text colour thinned right down, so the
   swatches sit back until one of them is chosen. */
.product-swatches label span {
    display: block;
    padding: 0.75rem 1.5rem;
    border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
    border-radius: 2rem;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.product-swatches label:hover span {border-color: color-mix(in srgb, currentColor 85%, transparent);}
/* A size is a letter or two, so it is drawn as a circle: the box is squared off
   and the label centred in it. The options are words and stay the pills they
   are, which is why this hangs off the size row alone. */
.product-swatches.circles label span {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border-radius: 50%;
}
/* The picked box is filled the way the button below it is filled — the same
   pair of colours the page hands the call to action, so on a dark page the
   swatch turns light along with it. */
.product-swatches label input:checked + span {
    background: var(--button-bg);
    border-color: var(--button-bg);
    color: var(--button-text);
    font-weight: 400;
}
.product-swatches label input:focus-visible + span {
    outline: 2px solid var(--text-strong);
    outline-offset: 2px;
}
.product-swatches label input:disabled {cursor: not-allowed;}
.product-swatches label input:disabled + span {
    opacity: 0.35;
    text-decoration: line-through;
    background: none;
    color: inherit;
    border-color: color-mix(in srgb, currentColor 40%, transparent);
}

/* The price stands on its own line between the swatches and the button, with
   room on both sides of it. */
.product-price {
    display: block;
    color: var(--text-strong);
    font-family: 'Noto Serif', serif;
    font-size: 1.75rem;
    line-height: 1.2;
    margin-block: 3rem 1.75rem;
}
/* The shared .button, run the full width of the column. Its colours come from
   the page's palette, which on a dark page is already the light-on-brown one. */
.product-submit {
    display: block;
    width: 100%;
    text-align: center;
    cursor: pointer;
    border: 0;
    font-family: inherit;
}
.product-submit:disabled {
    background: color-mix(in srgb, var(--button-bg) 30%, transparent);
    color: color-mix(in srgb, var(--button-text) 70%, transparent);
    cursor: not-allowed;
}

/* The shared accordion, tightened up for the narrow column. */
.product-details {margin-top: 2.5rem;}
.product-details ul {margin: 0 0 1.6em 1.1em;}
.product-details li {margin-bottom: 0.35em;}
.product-details > li > * > button {font-size: 1rem; padding-block: 1.1rem;}

.product-content {margin-top: 2rem;}

/* Below the split the two halves stack, gallery first, and the information can
   no longer stick to anything — it is the end of the page. */
@media (max-width: 60rem) {
    .main-content section.section-product {margin-block: 5rem;}
    .main-content section.section-product .container {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 3rem;
    }
    /* Stacked, there is no second column for the gallery to hold still against,
       and pinning it would only cover the text underneath it. */
    .product-gallery {
        position: static;
        max-height: none;
        overflow: visible;
    }
    .product-info {padding-right: 0;}
}
/* The row keeps its five columns at every width: the "+n" is counted when the
   page is built, so narrowing the row here would make it lie. */