/*
 * AI Site Builder — brand colour override.
 *
 * Niara's $brand-primary is #ff6f61, a coral-pink that fights the Global Web
 * Concepts orange. It is COMPILED into global.css (29 occurrences) and ten
 * further stylesheets; nothing on this server recompiles SCSS, so editing
 * _theme_variables.scss achieves nothing.
 *
 * This file lives in css/autoload/, which the rendered page loads AFTER
 * global.css — verified from the document itself, position 4 vs position 1.
 * That is enough to beat global.css on order alone.
 *
 * !important appears ONLY against stylesheets that load LATER than autoload/,
 * and only ever on a colour property. Every selector below was READ OUT of the
 * file that defines it — an earlier version of this file guessed them from
 * Bootstrap convention and missed almost every one, which is why the cart icon
 * stayed coral.
 *
 *   #f09546 primary   #df7e37 border/darker   #e39155 active   #243141 navy
 */

/* ---- global.css: order alone wins, no !important needed ---- */
a:hover,
a:focus,
.text-primary,
.btn-link:hover,
.btn-link:focus {
    color: #f09546;
}

a.text-primary:hover,
a.text-primary:focus {
    color: #df7e37;
}

.bg-primary,
.label-primary,
.badge-primary {
    background-color: #f09546;
}

.btn-primary {
    background-color: #f09546;
    border-color: #df7e37;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
    background-color: #e39155;
    border-color: #df7e37;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus,
.navbar-default .navbar-link:hover,
.navbar-default .btn-link:hover,
.navbar-default .btn-link:focus {
    color: #f09546;
}

/* ================================================================
   Stylesheets that load AFTER this one. Order cannot help, so these
   carry !important — scoped strictly to colour, never layout.
   ================================================================ */

/* blockcart.css — the FontAwesome basket glyph */
#blockcart-header:before {
    color: #f09546 !important;
}

/* blockcategories.css — 7 occurrences, the most of any module */
.blockcategories .ilvl-1:hover,
.blockcategories .ilvl-2:hover,
.blockcategories .ilvl-3:hover,
.blockcategories .ilvl-1:hover.active,
.blockcategories .ilvl-1:hover:hover,
.blockcategories .ilvl-1:hover:focus,
.blockcategories .list-group-item-wrapper.active > .ilvl-1,
.blockcategories .list-group-item-wrapper.active > .ilvl-1.active,
.blockcategories .list-group-item-wrapper.active > .ilvl-1:hover,
.blockcategories .list-group-item-wrapper.active > .ilvl-1:focus {
    color: #f09546 !important;
}

/* product.css — the price is the single most visible accent in a shop */
.our_price_display,
.our_price_display .price {
    color: #f09546 !important;
}

/* product_list.css — grid/list view switcher */
#product-list-switcher .selected .icon {
    color: #f09546 !important;
}

/* my-account.css */
.nav-pills.stacked-menu > li > a,
.nav-pills.stacked-menu > li > a:hover,
.nav-pills.stacked-menu > li > a:focus {
    color: #f09546 !important;
}


/* blocksearch.css — autocomplete highlight */
.blocksearch.ac_results li.ac_over {
    color: #f09546 !important;
}

/* blockwishlist.css */
#wishlist_block .ajax_cart_block_remove_link:hover,
#module-blockwishlist-mywishlist .wishlistLinkTop ul.display_list a,
#module-blockwishlist-mywishlist .wishlistLinkTop ul.display_list a:hover {
    color: #f09546 !important;
}

/* superfish-modified.css — top menu */
.sf-menu > li span:after,
.sf-menu > li > ul > li > a,
.sf-menu > li > ul > li > a:hover {
    color: #f09546 !important;
}
/* ---- homeslider.css — CORRECTED ----
 *
 * The previous version of this block set `color` on `.homeslider-description`,
 * the positioning container. That cascaded into the <h2> (turning "VIEW ALL
 * SOAPS" orange, which was never the intent) and left the call-to-action
 * button unstyled. Read out of homeslider.css properly:
 *
 *   line 44  .homeslider-description       — position/cursor only, NO colour
 *   line 49  .homeslider-description h2    — this is what carries #ff6f61
 *   line 61  .homeslider-description .btn  — the button, its own rule
 */
.homeslider-description h2 {
    color: #f09546 !important;
}

.homeslider-description .btn {
    background-color: #f09546 !important;
    border-color: #df7e37 !important;
    color: #fff !important;
}

.homeslider-description .btn:hover,
.homeslider-description .btn:focus {
    background-color: #e39155 !important;
    border-color: #df7e37 !important;
    color: #fff !important;
}

/* ================================================================
   Checkout step bar — global.css `.nav-pills > li.active > a`
   ================================================================

   THE BRAND PASS ABOVE MISSED THIS ONE. The five-step bar at the top of
   the cart (01. Summary … 05. Payment) is a Bootstrap nav-pills list, and
   its active pill takes $brand-primary straight from global.css, so it
   stayed Niara coral long after everything around it had been rebranded.

   It is NOT the brand orange, for a measured reason: white text on
   #f09546 is 2.31:1 against WCAG's 4.5:1 minimum for normal text — the
   worst of every colour considered, and worse than the coral it replaces
   (2.73:1, itself already failing). A large saturated orange block
   directly beneath an orange logo also reads as too much of one colour.

   THE BAR FILLS AS THE BUYER PROGRESSES. A step already passed
   (`li.completed`) was stock grey, which made the bar look like one tile
   drifting rightward across dead space. Completed steps are green too, so
   by the payment step the whole bar is green and the control reads as
   progress rather than as a position marker.

   THESE ARE PALE GREENS WITH DARK TEXT, not white on solid green. A light
   fill cannot carry white text — every pastel tested failed badly against
   it — so the text colour flips to dark green and the contrast is taken
   the other way round:

     completed  #c8e6c9 on #1b5e20   5.85:1
     active     #bfe4c6 on #14472a   7.70:1

   THE CURRENT STEP IS MARKED BY WEIGHT AND AN UNDERLINE, NOT BY FILL, and
   that is the whole point of this arrangement. The two greens are nine
   points apart in red, so as fills alone they read as one continuous block
   and the bar stops answering "which step am I on" — which is its only
   job. Rather than darken one of them and lose the soft palette, the
   active step takes a bold label and a 1px inset underline in the deep
   #166b3a. A cue that is not colour cannot be washed out by choosing
   gentler colours later.

   The underline is `box-shadow: inset`, NOT `border-bottom`: a border
   would add 1px to the pill's height and shunt the active step out of
   line with its four neighbours.

   The li itself is cleared to transparent. The stock grey lives on the
   `li`, not only on the `a`, and once the pills were inset (see the
   chevron block below) that grey showed through the new gutter as a
   sliver beside the first completed step.

   Order alone wins for the active pill — autoload/ loads after global.css
   — but `li.completed > a` needs !important: it is set in a stylesheet
   that loads later still.
*/
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    background-color: #bfe4c6;
    color: #14472a;
    font-weight: 700;
    box-shadow: inset 0 -1px 0 #166b3a;
}

.nav-pills.nav-justified > li.completed > a {
    background-color: #c8e6c9 !important;
    color: #1b5e20 !important;
}

/* ----------------------------------------------------------------
   Only ONE of the five steps is a real link
   ----------------------------------------------------------------

   Checked in the rendered page rather than assumed: `li.completed > a`
   carries a genuine href back to that step, while the ACTIVE step and
   every `li.not-completed` one are `href="javascript:;"` — dead links
   that go nowhere.

   Bootstrap dresses all five identically: `.nav > li > a:hover/:focus`
   paints #eee, and `href` gives them `cursor: pointer`. So a future step
   invited a click, turned grey, took focus, and then sat there grey —
   because `:focus` persists after the click that achieved nothing. The
   text also went orange, since this file's own `a:hover, a:focus` rule
   caught it.

   Each state is now dressed as what it actually is.
*/

/* A real link: hovering deepens the pale green one step. #b7dfba on
   #14532d is 6.19:1, so the affordance costs no legibility. */
.nav-pills.nav-justified > li.completed > a:hover,
.nav-pills.nav-justified > li.completed > a:focus {
    background-color: #b7dfba !important;
    color: #14532d !important;
}

/* Dead links: no pointer, and no hover or focus paint at all. */
.nav-pills.nav-justified > li.active > a,
.nav-pills.nav-justified > li.not-completed > a {
    cursor: default;
}

.nav-pills.nav-justified > li.not-completed > a:hover,
.nav-pills.nav-justified > li.not-completed > a:focus {
    background-color: transparent;
    color: #121212;
}

.nav-pills.nav-justified > li.active > a:hover,
.nav-pills.nav-justified > li.active > a:focus {
    background-color: #bfe4c6;
    color: #14472a;
}

/*
 * A mouse click on an inert control should not leave a focus ring behind.
 * `:focus-visible` is the modern split: keyboard focus KEEPS the ring, so
 * this is not the accessibility sin that a blanket `outline: none` is.
 */
.nav-pills.nav-justified > li > a:focus:not(:focus-visible) {
    outline: none;
}

.nav-pills.nav-justified > li,
.nav-pills.nav-justified > li.completed,
.nav-pills.nav-justified > li.active {
    background-color: transparent !important;
}

/* ----------------------------------------------------------------
   Checkout step bar — a chevron pointing into each following step
   ----------------------------------------------------------------

   FOUR chevrons across five steps: the rule is `li + li`, so each one
   belongs to the step it points AT, and the first step has none. That is
   the correct count by construction rather than by counting.

   DRAWN WITH BORDERS, NOT FONT AWESOME. This store carries two different
   Font Awesome versions and a rule that picks the wrong one renders an
   empty box — silently. Two borders on a rotated empty box need no font,
   no extra request, and cannot arrive as the wrong glyph. Same reasoning
   as the inline-SVG tick in gwcbulletpoints.

   THE PILLS ARE INSET TO MAKE ROOM FOR THE CHEVRON, and that is not
   cosmetic. Bootstrap sets `.nav > li > a { position: relative }`, so the
   pill is a POSITIONED element appearing after the ::before in DOM order
   — it paints ON TOP of it. With the pill filling its cell edge to edge,
   every chevron beside a coloured step was drawn underneath that step's
   background and simply vanished. It looked fine on step 01 only because
   steps 02-05 had no background yet to hide it.

   A 14px margin on each pill leaves a 28px gutter on the cell boundary
   that no pill paints into, and the chevron is centred on that boundary
   with translateX(-50%). Nothing overlaps, so no z-index is needed.

   Hidden below 768px, where Bootstrap stacks the steps vertically and a
   right-pointing chevron would point at nothing.
*/
.nav-pills.nav-justified > li {
    position: relative;
}

.nav-pills.nav-justified > li > a {
    margin-left: 14px;
    margin-right: 14px;
}

.nav-pills.nav-justified > li + li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -5px;
    border-top: 2px solid #b9c0c7;
    border-right: 2px solid #b9c0c7;
    transform: translateX(-50%) rotate(45deg);
    pointer-events: none;
}

@media (max-width: 767px) {
    .nav-pills.nav-justified > li + li::before {
        display: none;
    }
}

/* ================================================================
   Sweep: every remaining coral declaration in the theme
   ================================================================

   Found by auditing HUE AND SATURATION rather than grepping for
   "#ff6f61". SCSS darken() had produced #ff412e for the hover states, and
   a literal grep misses it completely — which is how a coral hover
   survived on every button on the site long after the bar above it had
   been rebranded.

   The filter is hue < 20deg with saturation > 80%. That catches the Niara
   coral family and deliberately spares Bootstrap's semantic reds
   (#a94442 alert text at 43% sat, #d9534f btn-danger at 65%), which must
   stay red because they mean "error", not "brand".

   DELIBERATELY NOT CHANGED: #cc0000 on .special-price,
   .price-percent-reduction and #reduction_percent/#reduction_amount.
   That is the sale price, and red for a markdown is a retail convention
   older than this theme. It is not coral and not a rebrand miss.

   Order alone wins for global.css and compatibility.css, both of which
   load before autoload/zz-brand.css. blockcategories.css loads AFTER, so
   its one rule carries !important — colour only.
*/

/* --- the one that started this: every button's hover state --- */
.btn:hover {
    background: #f09546;
    border: #df7e37;
}

.button.ajax_add_to_cart_button:hover {
    background: #f09546;
    border: #df7e37;
}

/* --- pagination --- */
.pagination > li > a:hover,
.pagination > li > a:focus,
.pagination > li > span:hover,
.pagination > li > span:focus {
    color: #f09546;
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > a:focus,
.pagination > .active > span,
.pagination > .active > span:hover,
.pagination > .active > span:focus {
    background-color: #f09546;
    border-color: #df7e37;
}

/* --- dropdowns, list groups, panels --- */
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
    background-color: #f09546;
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    background-color: #f09546;
    border-color: #df7e37;
}

.panel-primary {
    border-color: #df7e37;
}

.panel-primary > .panel-heading {
    background-color: #f09546;
    border-color: #df7e37;
}

.panel-primary > .panel-heading + .panel-collapse > .panel-body {
    border-top-color: #df7e37;
}

.panel-primary > .panel-heading .badge {
    color: #f09546;
}

.panel-primary > .panel-footer + .panel-collapse > .panel-body {
    border-bottom-color: #df7e37;
}

/* --- progress bar (file uploads etc., NOT the checkout step bar) --- */
.progress-bar {
    background-color: #f09546;
}

/* --- the darkened hover shade, #ff412e --- */
a.bg-primary:hover,
a.bg-primary:focus {
    background-color: #df7e37;
}

.label-primary[href]:hover,
.label-primary[href]:focus {
    background-color: #df7e37;
}

/* --- sale / discount badges (the BADGE, not the price) --- */
.product-label-sale {
    background: #f09546;
}

.product-label-discount {
    background-color: #f09546;
}

/* --- footer and cart odds and ends --- */
#footer a:hover {
    color: #f09546;
}

#display_cart_vouchers span:hover {
    color: #f09546;
}

/* --- blockcategories.css loads after this file, so: !important --- */
.blockcategories .list-group-item.current:before {
    color: #f09546 !important;
}

/* ================================================================
   Dropdown cart — the trash can on each line
   ================================================================

   Red because deletion is destructive and should not read as an ordinary
   link. #d9534f and #c9302c are Bootstrap's own danger pair and were
   ALREADY in this theme's palette, so this introduces no new colour —
   and it is deliberately not the #cc0000 used for sale prices, which
   means "markdown", not "delete".

   The hover rule needs its class-plus-pseudo specificity (0,2,0) to beat
   this file's own `a:hover` (0,1,1), or the trash would turn brand orange
   on hover like every other link.

   THE ROW NEEDS ALMOST NO RIGHT PADDING, and that is a consequence of
   where the can sits. Raised 20px above the row's centre it lands beside
   the PRODUCT IMAGE, above the name and price lines entirely, so those
   lines never reach across to it and do not need a gutter reserved for
   it. An earlier version centred the can on the row and had to reserve
   28px, which narrowed a ~283px dropdown enough to push the price onto
   its own line below the attribute. Moving the can up gave the text
   column back (measured: 239px) and removed the trade-off rather than
   tuning it.
*/
.cart_block dl.products dt {
    position: relative;
    padding-right: 4px;
}

.cart_block_remove_link {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -20px;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    color: #d9534f;
    font-size: 17px;
    opacity: 0.75;
    transition: opacity 0.12s ease, color 0.12s ease;
}

.cart_block_remove_link:hover,
.cart_block_remove_link:focus {
    color: #c9302c;
    opacity: 1;
    text-decoration: none;
}

/* Mid-delete: stop it inviting a second click the request cannot honour. */
.cart_block_remove_link.is-removing {
    opacity: 0.35;
    cursor: default;
}