/* An accessory's page (Decision 29), on the tile page's shell. */

/* The tile page's photo frame (.product-gallery__main): the same tinted canvas,
   radius and proportions - square on a phone, 4:3 from 640px - so every product
   photo sits on the same ground, whatever its shape. Without the gallery's
   viewer: an accessory has one photo and nothing to enlarge.

   The frame is capped in height where the photo used to be, so on a phone the
   order button stays in the first screen. And in width to 1.4 times the photo's
   own width (--accessory-photo-width, set by accessoire.html): a small source
   photo, which is never enlarged, gets a canvas to match rather than sitting
   stranded in the middle of a large one. Photos stored at 480-576px are not
   affected; that cap is wider than the column. */
.accessory-photo {
    --accessory-photo-inset: var(--shop-space-4);
    --accessory-photo-max: calc(var(--accessory-photo-width, 100vw) * 1.4 + 2 * var(--accessory-photo-inset));
    position: relative;
    /* Explicit, so the height cap below shortens the frame rather than
       narrowing it (on an auto width, aspect-ratio carries a max-height over
       to the width). */
    inline-size: 100%;
    max-inline-size: var(--accessory-photo-max);
    aspect-ratio: 1;
    max-block-size: calc(14rem + 2 * var(--accessory-photo-inset));
    overflow: hidden;
    border-radius: var(--shop-radius-lg);
    background: var(--shop-surface-subtle);
}

/* base.css gives picture display: contents, so the img is the frame's child.
   Filling the frame (a percentage height does not resolve against an
   aspect-ratio box), the photo inside it scaled down to fit but never up past
   its own size - most accessories are stored at 576px at most, some far
   smaller - nor cropped. Centred by object-fit's default position. */
.accessory-photo__image {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    display: block;
    width: 100%;
    height: 100%;
    padding: var(--accessory-photo-inset);
    object-fit: scale-down;
}

/* A short phone (iPhone SE). */
@media (max-width: 639.98px) and (max-height: 700px) {
    .accessory-photo {
        max-block-size: calc(9rem + 2 * var(--accessory-photo-inset));
    }
}

/* Quantity and button on one line; they wrap at 320px with 200% text. */
.accessory-order {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--shop-space-3);
    margin: 0;
}

.accessory-order .shop-btn.accessory-order__button {
    flex: 1 1 12rem;
}

.accessory-description {
    max-width: 68ch;
    color: var(--shop-text);
    font-size: var(--shop-text-md);
    line-height: var(--shop-leading-normal);
    overflow-wrap: break-word;
}

.accessory-description strong {
    color: var(--shop-ink);
    font-weight: var(--shop-weight-semibold);
}

.accessory-description > :first-child {
    margin-block-start: 0;
}

.accessory-description > :last-child {
    margin-block-end: 0;
}

@media (min-width: 640px) {
    .accessory-photo {
        aspect-ratio: 4 / 3;
        max-inline-size: min(36rem, var(--accessory-photo-max));
        max-block-size: calc(24rem + 2 * var(--accessory-photo-inset));
    }

    .accessory-description {
        font-size: var(--shop-text-base);
    }
}

@media (min-width: 1024px) {
    /* The tile grid's three rows would leave empty gaps here: one row, or two
       when there are details (under the photo). */
    .product-page--accessory .product-page__main {
        grid-template-rows: auto;
    }

    .product-page--accessory .product-page__buy {
        grid-area: 1 / 2 / 2 / 3;
    }

    .product-page--accessory .product-page__main:has(> .product-details) {
        grid-template-rows: auto 1fr;
    }

    .product-page--accessory .product-page__main:has(> .product-details) .product-page__buy {
        grid-area: 1 / 2 / 3 / 3;
    }

    .product-page--accessory .product-details {
        grid-area: 2 / 1;
    }

    .accessory-photo {
        --accessory-photo-inset: var(--shop-space-6);
        max-inline-size: var(--accessory-photo-max);
        max-block-size: none;
    }
}