/* ==========================================================================
   Site font, from variables.css
   The extra "html" in these selectors outranks the Helix Typography
   settings, which print inline <style> AFTER this file. So the font is
   changed in variables.css, not in the template admin screen.
   ========================================================================== */

:root {
    --bs-font-sans-serif: var(--cotsperfmainfont);   /* Bootstrap tooltips, popovers */
    --bs-body-font-family: var(--cotsperfmainfont);
}

html body,
html h1, html h2, html h3, html h4, html h5, html h6 {font-family: var(--cotsperfmainfont);font-weight: 300;}

html .sp-megamenu-parent > li > a,
html .sp-megamenu-parent > li > span,
html .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
html .menu.nav-pills > li > a,
html .menu.nav-pills > li > span,
html .menu.nav-pills .sp-dropdown li.sp-menu-item > a {font-family: var(--cotsperfmainfont);}
#sp-main-footer, #sp-footer-title {background: #454545;color: #fff;padding: 30px 0px 30px 0px;}
#sp-footer-title {text-align: center;margin-top: 40px;}
#sp-main-footer a {color: #fff;}
#sp-main-footer a:hover {color:var(--cotsperfcream);}
#sp-user1 {border-right: solid 1px #fff;}
#sp-user3 {border-left: solid 1px #fff;}

/* ==========================================================================
   Header: logo row (#sp-header-topbar in headers/6-CotsPerf/header.php)
   Colours come from variables.css.
   ========================================================================== */

#sp-header-topbar {
    background: var(--cotsperfburgundy); /* solid fallback */
    background: radial-gradient(circle, var(--cotsperfburgundy) 20%, var(--cotsperfdarkcolor) 100%);
    margin: 0;         /* Helix adds a 10px margin below 992px, which leaves white gaps around the band */
    padding: 30px 0;
}

#sp-header-topbar .container-inner {
    border-bottom: 0;  /* Helix's light grey divider looks wrong on the burgundy */
    padding-bottom: 0;
}

/* 60th anniversary badge, left of the logo.
   It sits in the middle of the gap between the browser's left edge and the
   logo, so the space either side of it is equal. The logo is centred, so
   that midpoint is 25% of the width minus a quarter of the logo's width.
   The logo widths come from the Helix logo height setting (60px, and 36px
   at 992px and below) applied to the 409 x 56 logo image. */
#sp-header-topbar {
    --cp-logo-width: 438px;
    --cp-badge-height: 60px;
}

#sp-header-topbar::before {
    content: "";
    position: absolute;  /* #sp-header-topbar is position: relative in Helix */
    top: 50%;
    left: calc(25% - var(--cp-logo-width) / 4);
    height: var(--cp-badge-height);
    aspect-ratio: 217 / 102;  /* the image's own proportions */
    background: url('../images/60-anniversary-logo.png') center / contain no-repeat;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.no-gap #sp-main-body {padding:0px}

/* Shop Fragrances page (page class .shop-fragrances-home on its menu item):
   main body container full width instead of Bootstrap's fixed breakpoint
   widths. Its 15px side padding stays, so content doesn't touch the edges.
   Other pages keep the fixed widths. */
.shop-fragrances-home #sp-main-body > .container {max-width: 100%;}

/* Hikashop overrides */
.hikashop_products_listing_main {text-align: center;}
.shop-fragrances-home h1 {color: var(--cotsperfshop);}
.hikashop_filter_button_outside {margin: 20px 0px !important;}
/* Raw Materials: the filter module and listing styles are in the "Raw
   Materials page" section at the end of this file. */
.material-fields {margin-top:30px;}
.cw-identity {margin-bottom: 20px;}
.hikashop_product_stock_count {display: none !important;}
.cw-material .cw-editorial h2 {font-weight: 600;}
.cw-details .cw-odour-profile {font-size: 1.15rem;border-bottom: solid 1px #121212;padding-bottom: 5px;margin-bottom: 10px;}
.johnsnose {display: flex;margin-top: 15px;}
/* END Hikashop overrides */

@media (max-width: 992px) {
    #sp-header-topbar {
        --cp-logo-width: 263px;
        --cp-badge-height: 36px;
    }
}

@media (max-width: 576px) {
    #sp-header-topbar::before {
        display: none;  /* not enough room beside the logo on phones */
    }
}

/* ==========================================================================
   Header: menu row (#sp-header)
   40% shorter than Helix's default: 60px -> 36px (50px -> 30px on phones).
   The menu links and the burger button carry their own 60px heights, so
   they are reduced to match.
   ========================================================================== */

#sp-header {
    background: var(--cotsperfcream);
    height: 40px;
}
.sp-sign-in .fa-user {color:#fff;}
.sp-sign-in .signin-text {color: var(--cotsperfblack);}
#sp-header #offcanvas-toggler {
    height: 40px;
    line-height: 40px;
}

#sp-header .sp-megamenu-parent > li > a,
#sp-header .sp-megamenu-parent > li > span {
    line-height: 40px;
}
.sp-megamenu-parent > li.sp-has-child > a::after,
.sp-megamenu-parent > li.sp-has-child > span::after {
  display: none !important;
}
.sp-menu-heading {font-weight: 600;}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item.active>a {font-weight: 600;}
@media (max-width: 575px) {
    #sp-header {
        height: 30px;
    }

    #sp-header #offcanvas-toggler {
        height: 30px;
        line-height: 30px;
    }
}

/* Top-level menu items */
#sp-header .sp-megamenu-parent > li > a,
#sp-header .sp-megamenu-parent > li > span {
    color: var(--cotsperfblack);
    text-transform: uppercase;
    font-weight: 500;
}

#sp-header .sp-megamenu-parent > li:hover > a,
#sp-header .sp-megamenu-parent > li:hover > span {
    color: #fff;
    text-decoration: underline 1px;
    text-underline-offset: 4px;
}

/* Current page: stays black on hover too */
#sp-header .sp-megamenu-parent > li.active > a,
#sp-header .sp-megamenu-parent > li.active > span {
    color: #000;
    text-decoration: underline 1px;
    text-underline-offset: 4px;
    font-weight: 700;
}
/* ==========================================================================
   Home page: the three selector blocks ("Homepage top selectors" module)
   Phones:            one column - Shop, Create, Formulation.
   Tablets 768-991px: Shop full width, then Create and Formulation side by side.
   Desktop 992px+:    Create | Shop | Formulation, as in the HTML.
   Each block: bottle image on top, then the centred heading and list.
   The image is wrapped in a link, so the link is the flex/grid item that gets
   positioned; :is(a, img) keeps a block working if its link is removed.
   ========================================================================== */

.homeblocks {
    row-gap: 2rem;                /* space between blocks when they stack */
    container-type: inline-size;  /* 1cqi = 1% of this row's width, used by the h2 size */
}

.homeblocks > .homeblock {
    display: flex;
    flex-direction: column;
    text-align: center;
    --cp-block-width: 100cqi;     /* the block's share of the row; changed per layout below */
}

.homeblocks > .homeblock > :is(a, img) {
    align-self: center;
    margin-bottom: 1rem;
}

/* Shop Fragrances first until the desktop layout */
.homeblocks > .shop-fragrances {
    order: -1;
}
/* Headings: 2.25em when there's room, otherwise as large as fits the block.
   The block's text width is its share of the row minus its side padding
   (the Bootstrap gutter). 8.5 is the widest heading line ("& Manufacturing"
   measures 8.32em in Montserrat 300) plus a little spare - change it if the
   heading text changes. */
.homeblocks h2 {font-size: min(2.25em, calc((var(--cp-block-width) - var(--bs-gutter-x)) / 8.5));}
.homeblocks .create-your-own h2 a {color: var(--cotsperfcreate);}
.homeblocks .shop-fragrances h2 a {color: var(--cotsperfshop);}
.homeblocks .formulation-manufacture h2 a {color: var(--cotsperfmanuf);}

.breadcrumb {padding: 0 !important;background-color: #fff;}

@media (max-width: 991.98px) {
    /* Stop the bottles getting very tall when a block is full width.
       width: auto keeps the proportions against the img width attribute. */
    .homeblocks > .homeblock > img,
    .homeblocks > .homeblock > a > img {
        max-height: 360px;
        width: auto;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .homeblocks > .shop-fragrances {
        width: 100%;
    }

    .homeblocks > .create-your-own,
    .homeblocks > .formulation-manufacture {
        width: 50%;
        --cp-block-width: 50cqi;
    }
}

/* Desktop: the three blocks share one image row, one heading row and one list
   row (CSS subgrid). The bottles stand on the same line and the headings
   start level, even when a heading or list wraps in the narrow side columns. */
@media (min-width: 992px) {
    .homeblocks {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);  /* exactly 25/50/25, like the col-md classes */
        row-gap: 0;                          /* spacing comes from the margins instead */
    }

    .homeblocks > .homeblock {
        display: grid;
        grid-row: span 3;
        grid-template-rows: subgrid;
        width: auto;   /* in a grid, Bootstrap's col-md-3 25% would be 25% of the cell */
    }

    .homeblocks > .homeblock > :is(a, img) {
        align-self: end;
        justify-self: center;
    }

    .homeblocks > .shop-fragrances {
        order: 0;
        --cp-block-width: 50cqi;
    }

    .homeblocks > .create-your-own,
    .homeblocks > .formulation-manufacture {
        --cp-block-width: 25cqi;
    }

    .home .page-header {column-count: 1 !important;}
    .home .page-header h1 {font-size: 1.5rem;font-weight: 400;}
    .home .article-details {max-width: 80%;margin: 0 auto;}
    .home .article-details div {column-count:2;}
}

/* ==========================================================================
   HikaShop product listings: second image on hover
   The "Image and title" item layout override
   (html/com_hikashop/product/listing_img_title.php) puts the root product's
   second image on top of the first when the product has one. Hovering the
   image fades it in, and it fades out again when the pointer leaves.
   ========================================================================== */

/* The image box (.hikashop_product_image_subdiv) is at most the thumbnail's
   width and shrinks with narrower columns (see the style block at the end of
   the override). The link and the hover wrapper fill it, so the image, which
   Helix gives max-width: 100%, shrinks with it instead of overflowing. */
.hikashop_listing_img_title .hikashop_product_image_subdiv > a {
    display: block;
}

.hikashop_listing_img_title .hikashop_product_image img {
    margin-inline: auto;
}

.cp-hover-swap {
    position: relative;
    display: block;
}

.cp-hover-swap-main,
.cp-hover-swap-alt {
    display: block;
}

.cp-hover-swap-alt {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .3s ease;
}

.cp-hover-swap-alt img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* The first image is hidden only once the second has finished fading in,
   and comes back at once on hover out, so transparent image edges never
   show both bottles at the same time. */
.cp-hover-swap-main {
    transition: opacity 0s;
}

@media (hover: hover) {   /* not on touch screens, where a tap would leave it stuck */
    .cp-hover-swap:hover .cp-hover-swap-alt {
        opacity: 1;
    }

    .cp-hover-swap:hover .cp-hover-swap-main {
        opacity: 0;
        transition-delay: .3s;
    }
}

a:focus-visible .cp-hover-swap-alt {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .cp-hover-swap-alt,
    .cp-hover-swap:hover .cp-hover-swap-main {
        transition: none;
    }
}

/* ==========================================================================
   HikaShop product listings: description and Discover link
   Added below the product name by the same listing_img_title.php override.
   With the listing's "Consistent height" option on "aligned", HikaShop makes
   each tile a flex column, so margin-top: auto keeps the Discover links on
   one line across a row, whatever the length of the descriptions above.
   ========================================================================== */

.hikashop_listing_img_title .hikashop_product_desc {
    margin-top: .5rem;
}

.hikashop_listing_img_title .hikashop_product_desc > :last-child {
    margin-bottom: 0;
}

.cp-discover {
    margin-top: auto;
    padding: .75rem 0 .5rem;
}

/* Each tile also fills its grid cell, so the tiles in a row are the same
   height without HikaShop's equal-height script, which runs once on page
   load (possibly before the fonts arrive) and not again on resize. */
.hikashop_product:has(.hikashop_subcontainer_aligned .hikashop_listing_img_title),
.hikashop_product:has(.hikashop_subcontainer_aligned .hikashop_listing_img_title) > .hikashop_container {
    display: flex;
    flex-direction: column;
}

.hikashop_product:has(.hikashop_subcontainer_aligned .hikashop_listing_img_title) > .hikashop_container,
.hikashop_container > .hikashop_subcontainer_aligned:has(.hikashop_listing_img_title) {
    flex: 1 0 auto;
}

/* ==========================================================================
   Shop Fragrances page (.shop-fragrances-home): product tile text
   The product name is the tile's heading: larger than the text below it and
   dark, so it no longer looks the same as the Discover link. The description
   is a little smaller and softer. Discover is a small uppercase link, like
   the main menu, with a Shop Fragrances orange underline (the orange itself
   is too light for small text on white).
   ========================================================================== */

.shop-fragrances-home .hikashop_listing_img_title .hikashop_product_name {
    margin-top: 1rem;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.4;
}

.shop-fragrances-home .hikashop_listing_img_title .hikashop_product_name a {
    color: var(--cotsperfblack);
}

.shop-fragrances-home .hikashop_listing_img_title .hikashop_product_name a:hover,
.shop-fragrances-home .hikashop_listing_img_title .hikashop_product_name a:focus-visible {
    color: var(--cotsperfshop);
}

.shop-fragrances-home .hikashop_listing_img_title .hikashop_product_desc {
    font-size: .9375rem;
    line-height: 1.6;
    color: #555;
}

.shop-fragrances-home .cp-discover-link {
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cotsperfblack);
    text-decoration: underline;
    text-decoration-color: var(--cotsperfshop);
    text-decoration-thickness: 1px;
    text-underline-offset: .4em;
}

.shop-fragrances-home .cp-discover-link:hover,
.shop-fragrances-home .cp-discover-link:focus-visible {
    color: var(--cotsperfshop);
}

/* ==========================================================================
   Shop Fragrances page (.shop-fragrances-home): category links and layout
   The links under the page title ("Eau de Parfum | Flower Waters | ...") and
   the ids on the category titles come from the listing.php override
   (html/com_hikashop/product/listing.php).
   ========================================================================== */

.cp-category-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: .5rem;
    margin: 1rem 0 3rem;
    padding: 0;
    list-style: none;
}

.cp-category-nav li {
    padding: 0 1rem;
    font-size: 1.125rem;  /* as the product names */
    line-height: 1.2;
}

.cp-category-nav li + li {
    border-left: 1px solid var(--cotsperfcream);  /* the "|" between links */
}

.cp-category-nav a {
    color: var(--cotsperfblack);
    text-underline-offset: .3em;
}

.cp-category-nav a:hover,
.cp-category-nav a:focus-visible {
    color: var(--cotsperfshop);
    text-decoration: underline;
}

/* Phones: one link per line. Side by side they wrap, and the wrapped line
   would start with a "|". */
@media (max-width: 599.98px) {
    .cp-category-nav ul {
        flex-direction: column;
        align-items: center;
    }

    .cp-category-nav li {
        padding: .25rem 0;
    }

    .cp-category-nav li + li {
        border-left: 0;
    }
}

/* A link lands with the category title just below the sticky menu bar
   (40px, 30px on phones) rather than hidden behind it. Bootstrap already
   makes the jump a smooth scroll, unless the visitor prefers reduced motion. */
.shop-fragrances-home .cp-category-title {
    scroll-margin-top: 70px;
}

/* 75px from the bottom of one category's products to the next title */
.shop-fragrances-home .hikashop_products_listing + .cp-category-title {
    margin-top: 75px;
}

/* Products centred: HikaShop lays them out on a 12-column grid, which leaves
   a part-filled last row on the left. As a wrapping flex row they centre
   instead. Each product keeps HikaShop's width for the screen size, from the
   --hk-span it sets (3 of 12 on desktops, 6 on tablets, 12 on phones). */
.shop-fragrances-home .hikashop_products .hk-row-fluid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.shop-fragrances-home .hikashop_products .hk-row-fluid > .hikashop_product {
    flex: 0 0 calc(var(--hk-span, 12) / 12 * 100%);
    max-width: calc(var(--hk-span, 12) / 12 * 100%);
}

/* ==========================================================================
   Product page (html/com_hikashop/product/show_default.php and its blocks)
   Laid out as the product page mockup: the shop title and category links,
   then a narrow centred column with the name, price, sizes, quantity and
   Add to basket on the left and the fragrance notes, ingredients and the
   selected size's description on the right, then the images and the
   "Product Information". Script: js/cp-product.js.
   ========================================================================== */

.cp-product {
    --cp-product-rule: 1px solid #d0d0d0;
    --cp-product-label-width: 105px;  /* "Select Size" and "Quantity" */
    max-width: 865px;
    margin: 0 auto 4rem;
    font-size: .875rem;
    line-height: 1.6;
}

/* Shop title and category links, as on the listing page */
.cp-shop-heading {
    margin-bottom: 5rem;
    text-align: center;
}

.cp-shop-title {
    margin: 0 0 8px;
    font-size: 40px;       /* the listing page's <h1> */
    font-weight: 300;
    line-height: 48px;
    color: var(--cotsperfshop);
}

.cp-shop-heading .cp-category-nav ul {
    margin-bottom: 0;
}

.cp-shop-heading .cp-category-nav a {
    color: #707070;
}

.cp-shop-heading .cp-category-nav .is-current a {
    color: var(--cotsperfblack);
    font-weight: 500;
}

/* Name above the left column; the rule runs under both columns */
.cp-product-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 28px;
}

.cp-product .cp-product-name {
    grid-column: 1;
    margin: 0 0 1.25rem;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cotsperfblack);
}

.cp-product-buy,
.cp-product-details {
    grid-row: 2;
    min-width: 0;
    padding-top: 1.75rem;
    border-top: var(--cp-product-rule);
}

.cp-product-buy {
    grid-column: 1;
}

.cp-product-details {
    grid-column: 2;
}

/* Price */
.cp-product .hikashop_product_price_main {
    display: block;
    margin-bottom: 1.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--cotsperfblack);
}

.cp-product .hikashop_product_price_per_unit {
    display: none;  /* " each" */
}

/* Sizes: "Select Size" then the options on one line */
.cp-product .hikashop_product_characteristics {
    margin-bottom: 1.5rem;
}

.cp-product .hikashop_product_characteristics_table,
.cp-product .hikashop_product_characteristics_table tbody {
    display: block;
    width: 100%;
}

.cp-product .hikashop_product_characteristics_table tr {
    display: grid;
    grid-template-columns: var(--cp-product-label-width) minmax(0, 1fr);
    align-items: center;
}

.cp-product .hikashop_product_characteristics_table tr + tr {
    margin-top: 1rem;
}

.cp-product .hikashop_product_characteristics_table td {
    padding: 0;
    border: 0;
}

.cp-product .hikashop_product_characteristics_table td:first-child,
.cp-buy-label {
    font-size: .8125rem;
    font-weight: 600;
    color: var(--cotsperfblack);
}

.cp-product .hikashop_product_characteristics .controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1rem;
}

.cp-product .hikashop_product_characteristics .form-check-inline {
    display: inline-flex;
    align-items: center;
    gap: .45em;
    min-height: 0;
    margin: 0;
    padding: 0;
}

.cp-product .hikashop_product_characteristics .form-check-input {
    float: none;
    flex: none;
    width: 13px;
    height: 13px;
    margin: 0;
    border: 1px solid var(--cotsperfblack);
    background: #fff;
    box-shadow: none;
    cursor: pointer;
}

.cp-product .hikashop_product_characteristics .form-check-input:checked {
    background: var(--cotsperfblack);
    box-shadow: inset 0 0 0 2px #fff;
}

.cp-product .hikashop_product_characteristics .form-check-input:focus-visible {
    outline: 2px solid var(--cotsperfshop);
    outline-offset: 2px;
}

.cp-product .hikashop_product_characteristics .form-check-label {
    font-size: .8125rem;
    font-weight: 300;
    cursor: pointer;
}

/* Quantity and Add to basket. HikaShop's quantity block is laid out on
   .cp-buy's grid: the label and the quantity field on the first row, then
   the button (and any stock or other messages) the full width. */
.cp-buy {
    display: grid;
    grid-template-columns: var(--cp-product-label-width) minmax(0, 1fr);
    align-items: center;
}

.cp-buy #hikashop_product_quantity_main {
    display: contents;
}

.cp-buy #hikashop_product_quantity_main > *,
.cp-buy #hikashop_product_quantity_alt {
    grid-column: 1 / -1;
}

.cp-buy-label {
    grid-column: 1;
    grid-row: 1;
}

.cp-buy #hikashop_product_quantity_main > .hikashop_quantity_form {
    grid-column: 2;
    grid-row: 1;
}

/* No quantity field (e.g. out of stock): no label */
.cp-buy:not(:has(.hikashop_product_quantity_field)) .cp-buy-label {
    display: none;
}

.cp-buy .hikashop_product_quantity_input_div_default_main {
    display: inline-flex;
    border: 1px solid #ccc;
}

.cp-buy #hikashop_product_quantity_main .hikashop_product_quantity_change_div_default {
    display: contents;  /* so the - and + can sit either side of the number */
}

.cp-buy .hikashop_product_quantity_change_div_minus_default {
    order: -1;
}

.cp-buy .hikashop_product_quantity_change_div_plus_default {
    order: 1;
}

.cp-buy #hikashop_product_quantity_main .hikashop_product_quantity_input_div_default,
.cp-buy #hikashop_product_quantity_main .hikashop_product_quantity_change_div_default > div {
    display: flex;
    align-items: center;
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
}

.cp-buy #hikashop_product_quantity_main .hikashop_product_quantity_field {
    width: 2.75rem;
    height: 2rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    font-size: .875rem;
    text-align: center;
    box-shadow: none;
}

.cp-buy #hikashop_product_quantity_main .hikashop_product_quantity_field_change {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--cotsperfblack);
    font-size: 1rem;
    line-height: 1;
}

.cp-buy #hikashop_product_quantity_main .hikashop_product_quantity_field_change:hover,
.cp-buy #hikashop_product_quantity_main .hikashop_product_quantity_field_change:focus-visible {
    background: #f0f0f0;
}

.cp-buy .hikashop_product_quantity_add_to_cart_div:empty {
    display: none;
}

.cp-buy [data-addtocart] {
    display: block;
    width: 100%;
    margin-top: 1.5rem;
    padding: .7rem 1rem;
    border: 0;
    border-radius: 0;
    background: #707070;  /* the mockup's grey, darkened so the white text can be read (4.9:1) */
    color: #fff;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cp-buy [data-addtocart]:hover,
.cp-buy [data-addtocart]:focus-visible {
    background: var(--cotsperfblack);
    color: #fff;
}

/* Right column: fragrance notes (the product's tags) with the ingredients
   button beside them - "Fragrance notes - click to view ingredients" - then
   the ingredients when opened, the notes, and any other product fields.
   The tag and field blocks are replaced when a size is selected, so their
   contents are placed on .cp-notes's grid rather than styled as blocks. */
.cp-notes {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    margin-bottom: 1.75rem;
}

.cp-notes:not(:has(.cp-notes-label, .cp-ingredients-toggle, .cp-fields)) {
    display: none;
}

.cp-notes > .cp-notes-tags,
.cp-notes > .cp-custom-info,
.cp-notes .cp-ingredients-wrap {
    display: contents;
}

.cp-notes-label {
    grid-row: 1;
    grid-column: 1;
    margin-right: .5em;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--cotsperfblack);
}

.cp-ingredients-toggle {
    grid-row: 1;
    grid-column: 2;
    justify-self: start;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: .8125rem;
    text-align: left;
    cursor: pointer;
}

/* After "Fragrance notes": "- click to view ingredients" */
.cp-notes:has(.cp-notes-label) .cp-ingredients-toggle {
    text-transform: lowercase;
}

.cp-notes:has(.cp-notes-label) .cp-ingredients-toggle::before {
    content: "- ";
}

.cp-ingredients-toggle:hover,
.cp-ingredients-toggle:focus-visible,
.cp-ingredients-toggle[aria-expanded="true"] {
    color: var(--cotsperfshop);
}

.cp-ingredients {
    grid-row: 2;
    grid-column: 1 / -1;
    margin: .5rem 0 .25rem;
    font-size: .8125rem;
    color: #555;
}

.cp-notes-list {
    grid-row: 3;
    grid-column: 1 / -1;
    margin: .5rem 0 0;
    padding: 0;
    list-style: none;
}

.cp-notes-list li + li {
    margin-top: .35rem;
}

.cp-fields {
    grid-row: 4;
    grid-column: 1 / -1;
    margin: 1rem 0 0;
}

.cp-field {
    display: grid;
    grid-template-columns: minmax(7rem, auto) minmax(0, 1fr);
    column-gap: 1rem;
}

.cp-field + .cp-field {
    margin-top: .35rem;
}

.cp-field dt {
    font-weight: 600;
}

.cp-field dd {
    margin: 0;
}

/* Description of the selected size */
.cp-product-description p {
    margin: 0 0 .6em;
}

.cp-product-description > :last-child,
.cp-product-description > :last-child > :last-child {
    margin-bottom: 0;
}

/* Images: two side by side (one on phones), standing on the same line, each
   with a faint reflection below it (Chrome, Edge and Safari). More than two
   scroll sideways, with dots to page through them. */
.cp-product .cp-gallery {
    position: relative;
    margin-top: 3.5rem;
}

.cp-gallery-track {
    position: relative;
    display: flex;
    align-items: flex-end;
    column-gap: 40px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.cp-gallery-track::-webkit-scrollbar {
    display: none;
}

.cp-gallery-track:focus-visible {
    outline: 2px solid var(--cotsperfshop);
    outline-offset: 4px;
}

.cp-gallery-item {
    flex: 0 0 calc((100% - 40px) / 2);
    scroll-snap-align: start;
}

.cp-gallery-image {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto 22%;  /* room for the reflection */
    -webkit-box-reflect: below 0 linear-gradient(transparent 75%, rgba(255, 255, 255, .3));
}

@supports not (-webkit-box-reflect: below) {
    .cp-gallery-image {
        margin-bottom: 0;
    }
}

.cp-gallery-dots {
    display: flex;
    justify-content: center;
    gap: .25rem;
    margin-top: 1rem;
}

.cp-gallery-dots[hidden] {
    display: none;
}

.cp-gallery-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;   /* a larger target than the dot */
    height: 24px;
    padding: 0;
    border: 0;
    background: none;
}

.cp-gallery-dot::before {
    content: "";
    width: 11px;
    height: 11px;
    border: 1px solid var(--cotsperfblack);
    border-radius: 50%;
}

.cp-gallery-dot[aria-current="true"]::before {
    background: var(--cotsperfblack);
}

.cp-gallery-dot:focus-visible {
    outline: 2px solid var(--cotsperfshop);
}

/* Wide screens: the dots in a column to the left of the images */
@media (min-width: 1200px) {
    .cp-gallery-dots {
        position: absolute;
        top: 40%;
        left: -100px;
        flex-direction: column;
        margin: 0;
        transform: translateY(-50%);
    }
}

/* Product Information: the main product's description */
.cp-product-info {
    margin-top: 1.5rem;
}

.cp-product .cp-product-info-title {
    margin: 0 0 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: var(--cp-product-rule);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cotsperfblack);
}

.cp-product-info-text p {
    margin: 0 0 .6em;
}

/* Below 992px: one column (two leave too little room for the sizes) */
@media (max-width: 991.98px) {
    .cp-product-main {
        grid-template-columns: minmax(0, 1fr);
    }

    .cp-product-details {
        grid-column: 1;
        grid-row: auto;
        margin-top: 2.5rem;
    }
}

@media (max-width: 767.98px) {
    .cp-shop-heading {
        margin-bottom: 3rem;
    }
}

@media (max-width: 575.98px) {
    .cp-gallery-item {
        flex-basis: 100%;
    }

    /* Sizes in two tidy columns rather than wrapping unevenly */
    .cp-product .hikashop_product_characteristics .controls {
        display: grid;
        grid-template-columns: repeat(2, max-content);
        justify-content: start;
        column-gap: 2rem;
    }
}

/* ==========================================================================
   Raw Materials page: filter module and product listing, as on the live site
   (live site templates/t4_bs5_blank/local/css/custom.css, "HIKASHOP -
   MATERIALS" and "HIKASHOP MATERIALS SWITCHER").
   Markup: html/mod_hikashop_filter/default.php, html/com_hikashop/product/
   filter.php (a Material Details row, then a Fragrance Notes row), listing_div.php (the
   .cp-rawmaterials grid, Grid View / List View, list headings) and
   listing_title_material.php. Script: js/cp-raw-materials.js.
   The values the live site takes from its T4 template (text colour and weight,
   heading size, button shapes and colours) are set here too, only for these
   blocks, so the rest of this site is unaffected.
   ========================================================================== */

/* --- Filter module --- */
.hikashop_filter_module {
    text-align: left;
    color: #454545;
    font-weight: 400;
    line-height: 1.5;
}

html .hikashop_filter_module h1 {
    margin: 16px 0 8px;
    font-size: 46px;
    font-weight: 600;
    line-height: 1.3;
    color: #454545;
}

.hikashop_filter_module p {
    margin: 0 0 16px;
}

.hikashop_filter_module .hikashop_filter_main_div {
    margin: 0 auto 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid;
}

.hikashop_filter_module .hikashop_filter_title {
    display: inline-block;
    width: 100%;
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #ccc;
    font-weight: 700;
}

/* Row 1 (filter.php): Material Details | Material Name | Code | CAS Number,
   four equal columns from 768px; stacked below that, under the heading */
.hikashop_filter_module .cp-material-details {
    margin-bottom: 20px;
}

.hikashop_filter_module .cp-material-details .hikashop_filter_main {
    margin-bottom: 10px;
}

/* The fields fill their columns (HikaShop limits them to 90%), so the last
   lines up with the right edge of the notes below */
.hikashop_filter_module .cp-material-details .form-control {
    width: 100%;
    max-width: none;
}

@media (min-width: 768px) {
    .hikashop_filter_module .cp-material-details {
        align-items: center;
    }

    .hikashop_filter_module .cp-material-details .hikashop_filter_main {
        margin-bottom: 0;
    }

    /* A label beside the fields here, not a heading over them: no rule */
    .hikashop_filter_module .cp-material-details-title .hikashop_filter_title {
        margin: 0;
        padding: 0;
        border: 0;
    }
}

/* Row 2: the Fragrance Notes, full width, in equal columns - so every note
   is the same width whatever its text. Column counts that divide the 48
   notes into full rows: 8 from 1200px, 6 from 992px, 4 from 768px, 3 from
   576px, 2 on phones */
.hikashop_filter_module .cp-fragrance-notes .filter_values_container {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 5px;
}

@media (min-width: 576px) {
    .hikashop_filter_module .cp-fragrance-notes .filter_values_container {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .hikashop_filter_module .cp-fragrance-notes .filter_values_container {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .hikashop_filter_module .cp-fragrance-notes .filter_values_container {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .hikashop_filter_module .cp-fragrance-notes .filter_values_container {
        grid-template-columns: repeat(8, minmax(0, 1fr));
    }
}

/* Each note fills its column; a long name wraps rather than widening it */
.hikashop_filter_module .cp-fragrance-notes .hikashop_filter_checkbox {
    margin: 0;
    padding: 6px 10px;
    text-align: center;
}

.hikashop_filter_module .form-control {
    border-radius: 4px;
}

.hikashop_filter_module .filter_values_container br {
    display: none;
}

/* Fragrance Notes: each checkbox a pill, filled when ticked. The checkbox
   covers the whole pill, invisibly, so the pill is what's clicked. */
.hikashop_filter_module .hikashop_filter_checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 5px;
    padding: 6px 20px;
    border: 1px solid #ddd;
    border-radius: 20px;
    cursor: pointer;
    transition: background .2s ease;
}

.hikashop_filter_module .hikashop_filter_checkbox:hover {
    background: #f5f5f5;
}

.hikashop_filter_module .hikashop_filter_checkbox input[type="checkbox"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.hikashop_filter_module .hikashop_filter_checkbox label {
    margin: 0;
    font-size: 14px;
    cursor: pointer;
}

.hikashop_filter_module .hikashop_filter_checkbox input:checked + label {
    font-weight: 600;
}

.hikashop_filter_module .hikashop_filter_checkbox:has(input:checked) {
    border-color: #820024;
    background: #820024;
    color: #fff;
}

.hikashop_filter_module .hikashop_filter_checkbox:has(input:focus-visible) {
    outline: 2px solid #820024;
    outline-offset: 2px;
}

/* Filter button: the live site's pill button (.cp-button) in burgundy */
.hikashop_filter_module .hikashop_filter_button_outside input,
.hikashop_filter_module .hikashop_filter_button_inside input {
    display: inline-block;
    min-width: 228px;
    max-height: 45px;
    margin-top: 0;
    padding: 12px 35px 15px;
    border: 0;
    border-radius: 30px;
    background-color: #820024;
    color: #fff;
    font-size: 16px;
    line-height: 1rem;
}

.hikashop_filter_module .hikashop_filter_button_outside input:hover,
.hikashop_filter_module .hikashop_filter_button_inside input:hover {
    background-color: #bfba91;
}

.hikashop_filter_module .hikashop_reset_button_outside button {
    min-width: 114px;
    margin-top: 0;
}

/* --- Listing --- */
.hk-row-fluid.cp-rawmaterials {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    color: #454545;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

.hk-row-fluid.cp-rawmaterials .hkc-md-2 {
    flex: 0 0 16.66%;
    max-width: 16.66%;
    box-sizing: border-box;
    padding: 0;
}

.cp-rawmaterials .hikashop_container {
    box-shadow: 0 0 5px 0 rgba(215, 215, 215, .75);
}

.cp-rawmaterials .hikashop_subcontainer {
    display: flex;
    flex-direction: column;
    min-height: 180px;
    padding: 5px;
    background: #fff;
    text-align: center;
}

.cp-rawmaterials .raw-material-listing,
.cp-rawmaterials .hikashop_listing_title {
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
}

.cp-rawmaterials .raw-material-listing a {
    color: #820024;
    text-decoration: none;
}

.cp-rawmaterials .raw-material-listing .hikashop_product_name a {
    display: block;
    min-height: 50px;
    border-bottom: 1px solid #ccc;
    font-weight: 700;
}

.cp-rawmaterials .hikashop_action_area {
    margin-top: auto;
}

/* "Select Size": the live site's pill button, in grey */
.cp-rawmaterials .raw-material-listing .cp-button {
    display: inline-block;
    min-width: auto;
    max-height: 45px;
    margin-top: auto;
    padding: 5px 10px;
    border: 0;
    border-radius: 30px;
    background: #e8e8e8;
    color: #888;
    font-size: 16px;
    font-weight: 400;
    line-height: 1rem;
    text-decoration: none;
}

.cp-rawmaterials .raw-material-listing .cp-button:hover,
.cp-rawmaterials .raw-material-listing .cp-button:focus-visible {
    background: #bfba91;
    color: #000;
}

/* Grid View / List View buttons */
.cp-rawmaterials .layout-controls {
    display: block;
    width: 100%;
    margin: 0 0 20px;
    padding: 0 15px;
    text-align: right;
}

.cp-rawmaterials .layout-controls .btn {
    padding: 6px 12px;
    border: 1px solid;
    border-radius: 4px;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.cp-rawmaterials .layout-controls .btn-primary {
    border-color: #820024;
    background: #820024;
}

.cp-rawmaterials .layout-controls .btn-secondary {
    border-color: #6c757d;
    background: #6c757d;
}

.cp-rawmaterials .layout-controls .btn-secondary:hover {
    border-color: #5c636a;
    background: #5c636a;
}

.cp-rawmaterials .layout-controls .btn:focus-visible {
    outline: 2px solid #820024;
    outline-offset: 2px;
}

/* List View: one row per material under the dark headings row, alternate
   rows shaded, with the name, code, CAS number and button in columns.
   (The !important rules beat HikaShop's equal-height script's inline
   min-height and the grid's widths.) */
.cp-rawmaterials .raw-material-header {
    display: none;
    width: 100%;
    margin-bottom: 10px;
    padding: 12px 0;
    border-radius: 4px 4px 0 0;
    background: #333;
    color: #fff;
    font-weight: 700;
    text-align: left;  /* the listing is centred (.hikashop_products_listing_main) */
}

.cp-rawmaterials.list-view .raw-material-header {
    display: flex;
}

.cp-rawmaterials.list-view .hkc-md-2 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-bottom: 2px;
    padding: 0 !important;
}

.cp-rawmaterials.list-view .hikashop_container {
    margin: 0 !important;
    box-shadow: none;
}

.cp-rawmaterials.list-view .hikashop_subcontainer {
    min-height: auto !important;
    padding: 5px 0 !important;
    border: none;
}

.cp-rawmaterials.list-view > div:nth-child(even) .hikashop_subcontainer {
    background-color: #f2f2f2 !important;
}

.cp-rawmaterials.list-view .hikashop_listing_title {
    flex-direction: row;
    align-items: center;
    text-align: left;
}

.cp-rawmaterials.list-view .raw-material-header span,
.cp-rawmaterials.list-view .hikashop_listing_title > span,
.cp-rawmaterials.list-view .hikashop_listing_title > div {
    flex: 1;
    padding: 0 15px;
}

.cp-rawmaterials.list-view .hikashop_product_name,
.cp-rawmaterials.list-view .hdr-name {
    flex: 2 !important;
}

.cp-rawmaterials.list-view .raw-material-listing .hikashop_product_name a {
    min-height: auto;
    border-bottom: none;
}

.cp-rawmaterials.list-view div.hikashop_subcontainer span {
    text-align: left !important;
}

.cp-rawmaterials.list-view .hikashop_product_custom_name {
    display: none;
}

/* Phones: one material per row */
@media (max-width: 768px) {
    .hk-row-fluid.cp-rawmaterials .hkc-md-2 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ==========================================================================
   Raw Materials product page (html/com_hikashop/product/
   show_default_materials.php): changes to its layout - product name,
   purchase panel, Interesting Fact, category buttons, Detailed Specification
   The page's other styles are in that file's own <style> block.
   ========================================================================== */

/* Product name (the page's h1). At this size a long single word
   (e.g. "Trichloromethylphenyl") is wider than a phone, so a word that can't
   fit on a line is broken rather than cut off */
.cw-material .cw-name-main {
    font-size: 2.5rem;
    overflow-wrap: break-word;
}

/* Purchase panel: Price | Quantity | Add to cart on the first row, the
   weights (and any options or item fields) on the row below */
.cw-material .cw-po-price {
    flex: 0 0 auto;
    padding-right: 1.5rem;
    margin-right: .5rem;
    border-right: 1px solid #cfc5b8;  /* the divider between price and quantity */
}

/* Empty wrappers would only add gaps to the price/quantity row */
.cw-material .hikashop_product_contact_main:not(:has(*)),
.cw-material .hikashop_product_quantity_add_to_cart_div:empty {
    display: none;
}

.cw-material #hikashop_product_quantity_main > :last-child {
    margin-right: 0 !important;
}

/* Options row: hidden when the product has no weights, options or item fields */
.cw-material .cw-po-options:not(:has(#hikashop_product_characteristics, #hikashop_product_options, #hikashop_product_custom_item_info)) {
    display: none;
}

/* Below xl the purchase panel is too narrow for price, quantity and Add to
   cart on one line: the price takes its own line, its divider moving
   underneath */
@media (max-width: 1199.98px) {
    .cw-material .cw-po-price {
        flex-basis: 100%;
        margin-right: 0;
        padding: 0 0 1rem;
        border-right: 0;
        border-bottom: 1px solid #cfc5b8;
    }
}

/* Left column, under Documents: the Interesting Fact box (its title an h4),
   set 20px away from the documents list */
.cw-material .cw-interesting-fact {
    margin-top: 20px;
}

/* Then Essential Solvents and Centre Aisle, full width and stacked, each
   category's short description under its name */
.cw-material .cw-cat-links {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: 1.25rem;
}

.cw-material .cw-cat-btn {
    display: block;
    padding: .55rem 1.25rem;
    border-radius: 2px;
    background: var(--cotsperfcream);
    color: #fff;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
}

/* :focus and :active too, or the template's link colours turn the text blue */
.cw-material .cw-cat-btn:hover,
.cw-material .cw-cat-btn:focus,
.cw-material .cw-cat-btn:active {
    background: var(--cotsperfburgundy);
    color: #fff;
}

/* The category name is an h4. Headings are weight 300 site-wide (top of this
   file), so it's set to 600 here, keeping the button's white text and no
   heading margins */
.cw-material .cw-cat-btn-title {
    margin: 0;
    color: inherit;
    font-weight: 600;
}

.cw-material .cw-cat-btn-desc {
    display: block;
    margin-top: .15rem;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.3;
}

/* Right column: "Detailed Specification", a full-width burgundy block over the
   specification fields. It's an h2 like the column's other section titles
   (same size and weight); the extra class outranks their margins
   (.cw-editorial h2 in the template) */
.cw-material .cw-editorial .cw-spec-heading {
    margin: 0 0 .75rem;
    padding: .6rem 1rem;
    border-radius: 2px;
    background: var(--cotsperfburgundy);
    color: #fff;
}

/* ==========================================================================
   Make Your Own Perfume and Formulation & Manufacturing: course cards
   The "Course Cards" Category Blog layout (html/com_content/category/
   coursecards.php and coursecards_item.php), chosen on those two menu items
   only. The page title centred in the section's colour, then the articles as
   cards - image, title, intro text, then "View details & course dates" or
   the menu item's Card Link Text ("Discover" on Formulation) - 4 to a row on
   desktop, 2 on tablets and 1 on phones (the layout's Bootstrap columns), a
   part-filled row centred. Hovering a card tints its text block with the
   section's colour.
   ========================================================================== */

/* The section's colour: "create", or "manuf" on Formulation & Manufacturing
   (its menu item's page class, formulation-home, is on the body) */
.cp-course-cards,
.cp-course-cards-extra {
    --cp-course-cards-colour: var(--cotsperfcreate);
}

.formulation-home .cp-course-cards {
    --cp-course-cards-colour: var(--cotsperfmanuf);
}

/* Main body container full width instead of Bootstrap's fixed breakpoint
   widths, as on the Shop Fragrances page; its 15px side padding stays, so
   the cards don't touch the edges. Keyed to this layout with :has(), so no
   page class is needed on the menu item */
#sp-main-body > .container:has(.cp-course-cards) {
    max-width: 100%;
}

.cp-course-cards .page-header h1 {
    text-align: center;
    color: var(--cp-course-cards-colour);
}

/* The Raw Materials and Blending Equipment & Bottles cards under the courses:
   the "Make your Own page block" custom module (content-bottom position),
   using the same card markup, centred in the middle two columns. 2.5rem
   between the rows: the row's gutter (--bs-gutter-y) already adds its share */
.cp-course-cards-extra {
    margin-top: calc(2.5rem - var(--bs-gutter-y));
}

.cp-course-card {
    --cp-course-card-bg: #f9f9f9;  /* the text block's grey, as in the mockup */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cp-course-card-image {
    display: block;
}

/* The course photos are 604 x 655: all shown at that shape, so the text
   blocks in a row start level */
.cp-course-card-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 604 / 655;
    object-fit: cover;
}

/* The text block fills the rest of the card, so the blocks in a row are the
   same height and each "View details" link sits at the bottom */
.cp-course-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 1rem 1.25rem 1.25rem;
    background-color: var(--cp-course-card-bg);
    text-align: center;
    transition: background-color .3s ease;
}

/* Hover, and keyboard focus inside the card: a light tint of the section's
   colour (12% of it over the grey), dark enough to see, light enough for the
   text to stay readable */
.cp-course-card:hover .cp-course-card-body,
.cp-course-card:focus-within .cp-course-card-body {
    background-color: color-mix(in srgb, var(--cp-course-cards-colour) 12%, var(--cp-course-card-bg));
}

.cp-course-card .cp-course-card-title {
    margin: 0 0 .5rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
}

.cp-course-card-intro {
    margin-bottom: 1rem;
    color: var(--cotsperfblack);
    font-size: .8125rem;
    line-height: 1.45;
}

.cp-course-card-intro p:last-child {
    margin-bottom: 0;
}

.cp-course-card-more {
    margin-top: auto;
    font-size: .8125rem;
    font-weight: 500;
}

/* The title and link keep the text colour (the template's link hover/focus
   colours would be blue), underlined on hover and focus */
.cp-course-card-title a,
.cp-course-card-more {
    color: inherit;
}

.cp-course-card-title a:hover,
.cp-course-card-title a:focus,
.cp-course-card-title a:active,
.cp-course-card-more:hover,
.cp-course-card-more:focus,
.cp-course-card-more:active {
    color: inherit;
    text-decoration: underline;
}

/* ==========================================================================
   Perfume course pages
   The "coursepage" article layout (html/com_content/article/coursepage.php),
   chosen on each Perfume Courses article. As the Advanced Five Day Course
   mockup: the Full Article Image as a full-width banner straight under the
   header, the title centred under it ("Perfume Making" in the create colour
   at the Shop Fragrances title's size, the course name below), then the
   article text in a centred column: the course description on the left and
   the "Course Dates" box (the article's #availability column) on the right
   from 992px; below that, the box first, then the description.
   ========================================================================== */

/* Main body: no top padding when there's a banner, so it meets the header,
   and the container full width so the banner can be. The text is kept to
   .cp-course-page-inner's width below */
#sp-main-body:has(.cp-course-banner) {
    padding-top: 0;
}

#sp-main-body > .container:has(.cp-course-page) {
    max-width: 100%;
}

/* The banner out over the column's 15px side padding, to the window edges */
.cp-course-banner {
    margin: 0 -15px;
}

.cp-course-banner img {
    display: block;
    width: 100%;
    height: auto;
}

.cp-course-page-inner {
    max-width: 1000px;
    margin: 0 auto;
}

.cp-course-header {
    margin: .5rem 0 3.5rem;
    text-align: center;
}

/* The size and weight of the Shop Fragrances title: Bootstrap's h1 size
   (growing with the window up to 2.5rem at 1200px), which Helix's
   .article-details .article-header h1 would otherwise change - hence three
   classes here */
.cp-course-page .cp-course-header .cp-course-title {
    margin: 0;
    color: var(--cotsperfcreate);
    font-size: calc(1.375rem + 1.5vw);
    font-weight: 300;
    line-height: 1.2;
}

@media (min-width: 1200px) {
    .cp-course-page .cp-course-header .cp-course-title {
        font-size: 2.5rem;
    }
}

.cp-course-subtitle {
    display: block;
    margin-top: .25rem;
    color: #444;
    font-size: clamp(1.125rem, .9rem + .6vw, 1.5rem);
    font-weight: 600;
    line-height: 1.3;
}

/* Article text: "Course Description" and the other bold headings (a <strong>
   paragraph, or an h4 in the Refresher Course) in the text's size, bold */
.cp-course-body strong {
    font-weight: 600;
}

.cp-course-body h4 {
    margin-bottom: 1rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: inherit;
}

.cp-course-body a {
    color: var(--cotsperfburgundy);
    font-weight: 500;
}

.cp-course-body a:hover,
.cp-course-body a:focus {
    color: var(--cotsperfburgundy);
    text-decoration: underline;
}

/* Below 992px, where the columns stack: the Course Dates box first, above
   the description (it comes second in the article) */
@media (max-width: 991.98px) {
    .cp-course-body .row > .availability {
        order: -1;
        margin-bottom: 2rem;
    }
}

/* "Course Dates" box: the .yel-bg inside the article's #availability column.
   A 30% tint of the create colour; smaller text, mostly centred (the
   article's own .text-center blocks) */
.cp-course-body .availability .yel-bg {
    --cp-course-dates-navy: #004779;  /* the article's "Course Dates" subheading colour */
    padding: 1.5rem 1.75rem 1.25rem;
    background-color: color-mix(in srgb, var(--cotsperfcreate) 30%, #fff);
    font-size: .875rem;
    line-height: 1.5;
}

.cp-course-body .availability .yel-bg h4 {
    margin: 0 0 1.25rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid #555;
    color: #444;
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
}

.cp-course-body .availability .yel-bg p {
    margin-bottom: .75rem;
}

/* "Course cost: £1,625" (an h2), "Course length: 5 days" and the "Course
   Dates" subheading (h3s): the box's text size, not heading sizes */
.cp-course-body .availability .yel-bg h2,
.cp-course-body .availability .yel-bg h3 {
    margin: 0 0 .75rem;
    font-size: inherit;
    line-height: inherit;
}

.cp-course-body .availability .yel-bg h2 {
    font-weight: 600;
}

.cp-course-body .availability .yel-bg h3 {
    color: #6c6c6c;
    font-weight: 300;
}

/* The "Course Dates" subheading: its navy (set in the article) at normal weight */
.cp-course-body .availability .yel-bg h3 strong {
    font-weight: 400;
}

.cp-course-body .availability .yel-bg a:not(.btn) {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* "View availability & book" */
.cp-course-body .availability .yel-bg .btn {
    margin-top: .5rem;
    padding: .75rem 2rem;
    border: 0;
    border-radius: 50rem;
    background-color: var(--cp-course-dates-navy);
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color .3s ease;
}

.cp-course-body .availability .yel-bg .btn:hover,
.cp-course-body .availability .yel-bg .btn:focus-visible {
    background-color: color-mix(in srgb, var(--cp-course-dates-navy) 80%, #000);
    color: #fff;
}

/* "Clicking the above link will open ..." */
.cp-course-body .availability .yel-bg .row {
    font-size: .8125rem;
}