/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

/*
 * Colour-variant swatches, on product cards and on the product page.
 *
 * Both are fed a photo of the actual colourway instead of the attribute's html colour (every
 * one of which is #000000 on this shop):
 *   - product cards : override/classes/Product.php::getAttributesColorList()
 *   - product page  : override/controllers/front/ProductController.php::assignAttributesGroups()
 *
 * Neither place sets background-size, which would anchor a photo at its top-left corner.
 * Centre the image so the swatch is a cropped centre patch of the product shot rather than the
 * whole photo squeezed down. How tight that crop is depends on how large the source is relative
 * to the ~2rem box: the PS1.6 site fed a 398x425 image into it, showing roughly 8% of the width,
 * which reads as a colour rather than as a tiny product picture.
 *
 * The product page does the same - large_default at its natural size.
 */
.product-variants .color {
    background-size: auto;
    background-position: center center;
    background-repeat: no-repeat;
}

/*
 * Product cards cannot afford that format. A listing carries ~200 distinct swatches and CSS
 * background images are never lazy-loaded, so large_default (~67 KB each) would mean ~13 MB per
 * page. They are fed small_default (~5.3 KB) instead, and the crop is recreated here by scaling
 * the source up rather than by shipping a bigger file: 380px matches what large_default would
 * have covered. Upscaling costs sharpness, which is invisible on a 32px colour patch.
 *
 * Cards also ship 1rem chips sized for flat colour; the product page is already 2rem.
 */
.variant-links .color {
    width: 2rem;
    height: 2rem;
    background-size: 380px auto;
    background-position: center center;
    background-repeat: no-repeat;
}

/*
 * Rich-text <pre> blocks must wrap.
 *
 * 14 product descriptions were pasted straight out of Google Translate and carry its markup
 * with them (<pre class="tw-data-text tw-ta" id="tw-target-text">). Bootstrap 4 gives <pre>
 * `overflow: auto`, so that text renders as a single unwrapped line with a horizontal
 * scrollbar - only the first line is readable. The theme does ship `white-space: pre-wrap`,
 * but only inside @media print.
 *
 * Bootstrap 3 on the PS1.6 site wrapped <pre> unconditionally, which is why the same content
 * reads correctly there. Restore that, scoped to rich-text areas so a genuine code block
 * elsewhere keeps its own behaviour.
 */
.rte-content pre,
.product-description pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow: visible;
}

/*
 * Delivery-information block on the product page (iqithtmlandbanners block 1, hooked to
 * displayRightColumnProduct). The module's template prints an <h5 class="block-title"> for
 * this hook; the PS1.6 block it was migrated from had no heading, so hide it. The block keeps
 * a real name so it stays identifiable in the back office - delete this rule to show it.
 */
#iqithtmlandbanners-block-1 .block-title {
    display: none;
}

/*
 * "Add to cart" in its disabled state.
 *
 * The theme keeps the primary button's coral background (#fa7c63) with white text and merely
 * drops it to opacity .5, so a disabled button reads as a washed-out version of the live CTA -
 * hard to read, and easy to mistake for a working button. Give it a neutral grey at full
 * opacity instead: legible (white on #6e6e6e clears WCAG AA) and unmistakably inactive.
 */
.btn.add-to-cart:disabled,
.btn.add-to-cart.disabled,
.btn.add-to-cart:disabled:hover,
.btn.add-to-cart.disabled:hover {
    background: #6e6e6e;
    color: #ffffff;
    opacity: 1;
    cursor: not-allowed;
}

/*
 * Product tags (iqitproducttags) on the product page.
 *
 * The theme styles .iqitproducttags only for spacing - .tag / .tag-default carry no rules at
 * all, so the tags rendered as a plain row of body-coloured links with nothing to say they
 * were tags. Give them the usual pill shape, and the theme accent (#fa7c63, same as
 * btn_action_bg / lp_price) on hover so they read as navigable.
 */
.iqitproducttags ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.iqitproducttags li {
    display: inline-block;
    padding: 0;
    margin: 0 .4rem .4rem 0;
}

.iqitproducttags .tag {
    display: inline-block;
    padding: .25rem .75rem;
    border: 1px solid #e3e3e3;
    border-radius: 2rem;
    background: #f7f7f7;
    color: #545454;
    font-size: .875rem;
    line-height: 1.5;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}

.iqitproducttags .tag:hover,
.iqitproducttags .tag:focus {
    background: #fa7c63;
    border-color: #fa7c63;
    color: #ffffff;
    text-decoration: none;
}