/*
 * product.css — the product detail page.
 *
 * tasks/PLAN_08_SHOP_CATALOGUE_260919.md step D6.
 *
 * The cards at the foot of the page are the crosslink strip and are styled by
 * product-list.css; everything here is the detail page's own.
 *
 * WHAT WAS MOVED OUT OF THE MARKUP. The old partial carried the whole
 * product-safety box as an inline `style` attribute —
 * `background-color: #FEF2F2; color: #111111; padding: 0.5rem 1rem 0.25rem
 * 1rem; font-size: 0.8rem; line-height: 1.2;` — on a div with no class at
 * all, so it could not be restyled without editing PHP. It is `.product-safety`
 * now, plan 04 decision 6, and it is read by 294 of the 536 products.
 *
 * The other inline styles on that page are NOT moved: the three coloured
 * badges (`#FFFF81`, `#ffe2e2`, `#e9d4ff`) and the grey `history.go(-1)`
 * button are the same literals the category cards carry, and splitting one
 * of a pair into a class is worse than leaving both alone. They go together
 * or not at all, and that is a visual decision for the customer.
 *
 * Linked because the file EXISTS — section.styles.phtml globs the folder
 * after custom.min.css (plan 04 decision 6).
 */

/* The product-safety box. 294 products have a `ps_key`. */
.product-safety {
    background-color: #FEF2F2;
    color: #111111;
    padding: 0.5rem 1rem 0.25rem 1rem;
    font-size: 0.8rem;
    line-height: 1.2;
}

/* markdown_to_html() wraps each block in a <p>, and the box's own padding
   already separates it from the heading above. */
.product-safety p:last-child {
    margin-bottom: 0.25rem;
}

/* The xzoom gallery's thumbnail row. js/xzoom.js positions the magnified
   panel itself; what it does not do is space the thumbnails, so a product
   with five photos had them touching. */
.xzoom-thumbs a {
    display: inline-block;
    margin: 0 8px 8px 0;
}

.xzoom-thumbs img {
    border: 1px solid #eee;
}

/* The rotating gallery (blnPicRotate = 'J', 117 products) swaps the src of
   one <img> every 1.2 s. Photos of different proportions made the column
   jump on every swap. */
#rotator {
    max-width: 100%;
    height: auto;
}

/* The variant rows. Each ends in a 1px divider drawn by an empty div in the
   markup; without a little room above it the price sits on the line. */
.product-detail .row + .row {
    margin-top: 10px;
}

/* The asterisk on the price that the VAT footnote answers. <sup> inside
   <small> inside a 24px span comes out at about 9px, which is a dot. */
.product-detail sup {
    font-size: 60%;
}