/*
 * Rifa theme — what the CMS needs on top of the supplied stylesheet.
 *
 * style.css is loaded untouched. Everything here either (a) styles an
 * element the CMS renders that the reference did not have — a page <h1> in
 * the title band, a placeholder for a product with no picture, a Livewire
 * loading state — or (b) restates a reference rule under a different
 * selector because the markup was corrected for accessibility.
 */

/* ---- content width: the container grows with the screen, up to 1920px ---- */

/*
 * The reference capped every `.container` at 1200px, which leaves wide
 * margins on large monitors. From 1200px up the container is fluid instead,
 * up to 1920px, with side padding that matches the header's own so the
 * content edge lines up with the logo and menu icons. Below 1200px nothing
 * changes: Bootstrap's own container widths apply.
 */
:root {
    --content-max-width: 1920px;
    --content-gutter: 40px;
}

@media only screen and (min-width: 1200px) {
    .container {
        max-width: var(--content-max-width);
        padding-right: var(--content-gutter);
        padding-left: var(--content-gutter);
    }
}

/* The header and footer pad 80px from 1601px up; the content follows. */
@media only screen and (min-width: 1601px) {
    :root {
        --content-gutter: 80px;
    }
}

/* ---- accessibility helpers ---------------------------------------------- */

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ---- title band: the reference styles an h2; the CMS renders the h1 ------ */

.breadcrumb-content h1 {
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 12px;
    line-height: 1.2;
    color: #343538;
}

.breadcrumb-content h1:last-child {
    margin-bottom: 0;
}

@media only screen and (max-width: 767px) {
    .breadcrumb-content h1 {
        font-size: 22px;
    }
}

/* ---- logo fallback when no image is set ---------------------------------- */

.logo-text {
    display: inline-block;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #343538;
}

/* ---- product cards: one picture shape whatever the upload ---------------- */

/*
 * The design's product photographs are all 470×679. Editors upload what
 * they have, so the card frame keeps that shape and the picture fills it;
 * the hover picture sits over it at the same size.
 */
:root {
    --product-card-ratio: 470 / 679;
}

.product-wrap .product-img {
    aspect-ratio: var(--product-card-ratio);
    background-color: #f7f7f7;
}

.product-wrap .product-img > a,
.product-wrap .product-img > span.default-img {
    display: block;
    height: 100%;
}

.product-wrap .product-img .default-img,
.product-wrap .product-img .hover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.product-wrap .product-img .hover-img {
    display: block;
}

/* ---- product cards without a picture ------------------------------------- */

.product-img-placeholder {
    display: block;
    width: 100%;
    background: #f7f7f7 url("../img/bullet.png") center / 24px no-repeat;
}

.product-img-placeholder--large {
    padding-top: 100%;
}

.team-photo-placeholder {
    display: block;
    width: 100%;
    padding-top: 120%;
    background-color: #f7f7f7;
}

/* ---- shop filter: active state and the clear control --------------------- */

.product-filter-wrapper .product-sort ul li a.active,
.product-filter-wrapper .product-color ul li a.active {
    color: var(--brand);
}

.product-filter-wrapper .product-color ul li a.active .color-text {
    color: var(--brand);
}

.product-filter-wrapper li.is-empty a {
    opacity: 0.45;
}

.product-filter-wrapper .facet-count {
    margin-left: 4px;
    font-size: 11px;
    color: #9d9d9d;
}

.shop-topbar-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.filter-clear button {
    padding: 0;
    border: 0;
    background: transparent;
    color: #8a8a8a;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}

.filter-clear button:hover {
    color: var(--brand);
}

.product-area-wrap.is-loading {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

/* ---- pagination: dots between page runs ---------------------------------- */

.pro-pagination-style ul li span.dots {
    display: inline-block;
    padding: 0 6px;
    color: #9d9d9d;
}

/* ---- category banner above the shop grid --------------------------------- */

/*
 * A category's picture is whatever the editor uploaded — often the square-ish
 * panel from the homepage — so the banner keeps one wide shape and crops.
 */
:root {
    --category-banner-ratio: 3 / 1;
}

.category-banner img {
    width: 100%;
    aspect-ratio: var(--category-banner-ratio);
    object-fit: cover;
    object-position: center;
}

@media only screen and (max-width: 767px) {
    :root {
        --category-banner-ratio: 2 / 1;
    }
}

/* ---- product page ------------------------------------------------------- */

.product-bullets img {
    margin-right: 4px;
    vertical-align: middle;
}

.pro-details-sku .pro-stock {
    margin-left: 16px;
    color: #343538;
}

.pro-details-sku .pro-stock i {
    color: #9fc539;
}

.pro-details-color ul li[class*="bg-"] {
    border: 1px solid #e8e8e8;
}

.pro-details-downloads ul li a {
    text-decoration: underline;
}

/*
 * The design's contact page pads .contact-info-area to sit beside a map;
 * on the product page the same form fills its own column instead.
 */
.contact-info-area.product-inquiry {
    padding: 0;
}

.product-inquiry h3 {
    font-size: 20px;
    margin-bottom: 20px;
}

/* ---- forms: the design has no <select>; give it the input's look --------- */

.contact-from-2 select.contact-select {
    width: 100%;
    height: 50px;
    margin-bottom: 20px;
    padding: 2px 20px;
    border: 1px solid #e8e8e8;
    background: #fff url("../img/icon-img/select.png") right 20px center no-repeat;
    color: #8a8a8a;
    font-size: 12px;
    -webkit-appearance: none;
    appearance: none;
}

.contact-from-2 input[type="file"] {
    height: auto;
    padding: 12px 20px;
    border: 1px solid #e8e8e8;
    margin-bottom: 20px;
    font-size: 12px;
    width: 100%;
}

.contact-from-2 label:not(.visually-hidden) {
    display: block;
    margin-bottom: 8px;
    font-size: 12px;
    color: #8a8a8a;
}

.contact-checkbox {
    margin-bottom: 20px;
}

.contact-checkbox input {
    width: auto;
    height: auto;
    margin: 0 8px 0 0;
    border: 0;
}

.form-messege.success {
    color: #9fc539;
}

.form-messege.error {
    color: #e9595e;
}

.inquiry-context {
    margin-bottom: 15px;
    font-size: 12px;
}

/* ---- accordion: an icon beside the question ------------------------------ */

.faq-accordion .faq-icon {
    margin-right: 10px;
    vertical-align: middle;
}

/* ---- section heading strapline under an about-content h2 ---------------- */

.about-content .section-subtitle {
    margin-top: -30px;
    color: #9d9d9d;
    font-family: "Playfair Display", serif;
    font-style: italic;
    font-size: 14px;
}

/* Prose that follows a heading block picks up the reference's body style. */
.about-content--prose p {
    font-size: 12px;
    line-height: 30px;
}

.about-content--prose h2,
.about-content--prose h3 {
    margin-bottom: 20px;
}

.about-content--prose h2:before {
    content: none;
}

/* ---- blog: card without a picture keeps the design's tile height --------- */

.sin-blog-bg-color {
    min-height: 260px;
}

.blog-categories ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.related-posts .section-title h2 {
    font-size: 24px;
}

/* ---- testimonials: rating stars ----------------------------------------- */

.testimonial-rating i {
    color: var(--brand);
    font-size: 12px;
}

.testimonial-rating i.is-off {
    color: #e8e8e8;
}

/* ---- job listing card --------------------------------------------------- */

.job-card {
    padding: 30px;
    border: 1px solid #e8e8e8;
}

.job-card .blog-meta-2 {
    display: flex;
    justify-content: space-between;
}

/* ---- 404 ---------------------------------------------------------------- */

.error-code {
    font-size: 120px;
    font-weight: 700;
    line-height: 1;
    color: #e8e8e8;
    margin-bottom: 20px;
}

/* ---- mobile drawer: contact lines reuse the currency block's rhythm ------ */

.mobile-contact-wrap .single-mobile-curr-lang span a {
    text-transform: none;
}

/* ---- Empty states ------------------------------------------------------- */

.empty-state {
    padding: 40px 0;
    color: #9d9d9d;
    font-family: "Playfair Display", serif;
    font-style: italic;
}

/* ---- shop: the sort picker, drawn like the design's "Show" picker ------ */

.shop-top-bar .shop-topbar-left .page-show + .page-show {
    margin-left: 45px;
}

.shop-top-bar .shop-topbar-left .page-show ul li a.active {
    font-weight: 700;
}

@media only screen and (max-width: 767px) {
    .shop-top-bar .shop-topbar-left p {
        margin-bottom: 8px;
    }

    .shop-top-bar .shop-topbar-left .page-show + .page-show {
        margin-left: 0;
    }

    .shop-top-bar .shop-topbar-left .page-show {
        clear: both;
        margin: 4px 0;
    }

    /* Options run on from their label instead of dropping under it. */
    .shop-top-bar .shop-topbar-left .page-show span,
    .shop-top-bar .shop-topbar-left .page-show ul {
        display: inline;
        float: none;
    }

    .shop-top-bar .shop-topbar-left .page-show ul li {
        line-height: 2;
    }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .shop-top-bar .shop-topbar-left .page-show + .page-show {
        margin-left: 30px;
    }
}

/* ---- shop: swatch chips from the value's own colour ------------------- */

.product-filter-wrapper .product-color ul li a .swatch-chip {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    border: 1px solid #e8e8e8;
    border-radius: 50%;
    vertical-align: middle;
}

.product-filter-wrapper .product-color ul li a.active .swatch-chip {
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--brand);
}

.product-filter-wrapper .product-color ul li a .swatch-fallback {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid #e8e8e8;
    font-size: 12px;
}

/* ==========================================================================
   Brand colour
   --------------------------------------------------------------------------
   The logo is one red on white (sampled from logo.png: rgb(224, 40, 48)).
   The supplied stylesheet carries the template's gold wherever it marks an
   accent: hovers, active states, the odd fill. The rules below re-point the
   accents this theme actually renders at the brand red, and add a few faint
   tints. Layout and spacing are untouched. Colour only.
   ========================================================================== */

:root {
    --brand: #e02830;
    --brand-dark: #b81f27;       /* hovered fills */
    --brand-soft: #fdf3f3;       /* faint tint for bands, rows and panels */
    --brand-line: #f3c4c6;       /* hairlines on tinted surfaces */
    --brand-text-on: #fff;
}

/* ---- header ------------------------------------------------------------- */

/* A hairline of brand along the top edge of every page. */
.header-area {
    border-top: 3px solid var(--brand);
}

.main-menu > nav > ul > li > a::after {
    background-color: var(--brand);
}

.header-right-wrap .same-style > a:hover,
.header-right-wrap .same-style > a:hover i,
.search-content-wrap > .search-close i:hover,
.search-content-wrap .search-content .search-form .button-search:hover,
.mobile-off-canvas-active .mobile-aside-close:hover i,
.mobile-off-canvas-active .header-mobile-aside-wrap .mobile-search form button:hover,
.mobile-off-canvas-active .header-mobile-aside-wrap .mobile-menu-wrap .slinky-mobile-menu > ul > li:hover > a span,
.mobile-off-canvas-active .header-mobile-aside-wrap .mobile-menu-wrap .slinky-mobile-menu > ul > li ul li a:hover span,
.header-aside-active .header-aside-wrap .aside-close:hover i,
.header-contact-info ul li a:hover {
    color: var(--brand);
}

/* ---- title band ---------------------------------------------------------- */

.breadcrumb-area {
    background-color: var(--brand-soft);
}

.breadcrumb-area .breadcrumb-content ul li a:hover {
    color: var(--brand);
}

/* ---- section titles: the short rule beneath a heading ------------------- */

.section-title.section-title-border h2:before,
.about-content h2:before {
    background-color: var(--brand);
}

.eyebrow {
    color: var(--brand);
}

/* ---- buttons ------------------------------------------------------------- */

/* The outline button (CTA, 404, careers) rests in brand and fills on hover. */
.btn.btn-color-gray {
    border-color: var(--brand);
    color: var(--brand);
}

/* The one solid button on the site: contact and product enquiry submit. */
.contact-info-area .contact-from-2 form button.submit {
    background-color: var(--brand);
}

.contact-info-area .contact-from-2 form button.submit:hover {
    background-color: var(--brand-dark);
}

/* The newsletter's text button. */
.subscribe-style .subscribe-form .subscribe-form-style .mc-form .clear input,
.subscribe-style-2 .subscribe-form-style-2 .mc-form .clear input {
    color: var(--brand);
}

.btn.btn-color-black:hover,
.btn.btn-color-gray:hover,
.btn.btn-color-white:hover,
.btn.btn-outline-bigger:hover,
.category-wrap .category-btn a.btn:hover,
.error-content .back-home a:hover,
.contact-info-area .contact-from-2 form button.submit:hover {
    border-color: var(--brand);
    background-color: var(--brand);
    color: var(--brand-text-on);
}

.subscribe-style .subscribe-form .subscribe-form-style .mc-form .clear input:hover,
.subscribe-style-2 .subscribe-form-style-2 .mc-form .clear input:hover {
    background-color: var(--brand);
    color: var(--brand-text-on);
}

/* ---- hero slider bullets -------------------------------------------------- */

.tp-bullet.selected:before,
.tp-bullet:hover:before {
    background-color: var(--brand);
}

/* ---- product cards -------------------------------------------------------- */

.product-wrap .product-content .product-cart a {
    color: var(--brand);
}

.product-wrap .product-content .product-cart a:hover,
.product-wrap .product-content h3 a:hover,
.product-wrap .product-content h4 a:hover {
    color: var(--brand-dark);
}

.product-wrap .product-img .product-quickview a:hover {
    background-color: var(--brand);
    color: var(--brand-text-on);
}

/* ---- shop: filters, sort, paging ------------------------------------------ */

.shop-top-bar .shop-topbar-left .page-show ul li a:hover,
.shop-top-bar .shop-topbar-left .page-show ul li a.active {
    color: var(--brand);
    border-bottom-color: var(--brand);
}

.shop-top-bar .shop-topbar-right .filter-active a:hover {
    color: var(--brand);
}

.shop-top-bar .shop-topbar-right .filter-active a:hover:before,
.shop-top-bar .shop-topbar-right .filter-active a:hover:after {
    background-color: var(--brand);
}

.product-filter-wrapper {
    border-top: 2px solid var(--brand);
}

.product-filter-wrapper .product-sort ul li a:hover,
.product-filter-wrapper .product-size ul li a:hover,
.product-filter-wrapper .product-color ul li a:hover .color-text {
    color: var(--brand);
}

.pro-pagination-style ul li a:hover {
    border-color: var(--brand);
    color: var(--brand);
}

.pro-pagination-style ul li a.active {
    background-color: var(--brand);
    border-color: var(--brand);
    color: var(--brand-text-on);
}

/* ---- product page ---------------------------------------------------------- */

.product-dec-left .product-dec-small.slick-active.slick-current,
.quickview-small-img-slider .single-small-img.slick-active.slick-current {
    border-color: var(--brand);
}

/* The zoom button over the gallery picture. */
.product-dec-right .easyzoom-style a.easyzoom-pop-up {
    background-color: var(--brand);
    color: var(--brand-text-on);
}

.product-dec-right .easyzoom-style a.easyzoom-pop-up:hover {
    background-color: var(--brand-dark);
}

.product-dec-left .product-dec-icon:hover,
.product-dec-left-2 .product-dec-icon-2:hover,
.product-details-content .pro-details-meta ul li a:hover,
.product-details-content .pro-details-social ul li a:hover,
.product-details-content .pro-details-size ul li a:hover,
.pro-details-downloads ul li a:hover {
    color: var(--brand);
}

/* Parameters table: the alternate rows take the faint brand tint. */
.myaccount-table .table tr.trcolor td {
    background-color: var(--brand-soft);
}

/* ---- forms ------------------------------------------------------------------ */

.contact-info-area .contact-from-2 form input:focus,
.contact-info-area .contact-from-2 form textarea:focus,
.contact-from-2 select.contact-select:focus,
.subscribe-form-style .mc-form input.email:focus {
    border-color: var(--brand);
    outline: none;
}

.form-messege.error {
    color: var(--brand);
}

/* The phone, mail and pin icons on the contact page. */
.contact-info-area .contact-info-bottom .single-contact-info i {
    color: var(--brand);
}

/* ---- content blocks -------------------------------------------------------- */

.faq-accordion.actives {
    border-color: var(--brand-line);
}

.faq-accordion.actives .panel-heading h4 a {
    color: var(--brand);
}

.faq-accordion .panel-heading h4 a:not(.collapsed)::before,
.faq-accordion .panel-heading h4 a:not(.collapsed)::after {
    background-color: var(--brand);
}

.single-service:hover h4 {
    color: var(--brand);
}

.team-wrap .team-content .team-social ul li a:hover,
.team-wrap .team-content-2 .team-social a:hover,
.blog-wrap .blog-content .blog-category a:hover,
.blog-wrap .blog-content .blog-meta a:hover,
.blog-wrap .blog-content h3 a:hover,
.single-blog-wrap .blog-content-3 .blog-meta-2 a:hover,
.single-blog-wrap .blog-content-3 span a:hover,
.sidebar-widget .sidebar-widget-tags2 ul li a:hover,
.about-me-area .about-me-content-1 .about-social a:hover {
    color: var(--brand);
}

.testimonial-active.owl-carousel.owl-dot-style-1 .owl-dots .owl-dot.active,
.testimonial-active.owl-carousel.owl-dot-style-1 .owl-dots .owl-dot:hover,
.nav-style-2 .owl-nav div:hover,
.nav-style-3 .owl-nav div:hover {
    background-color: var(--brand);
}

/* ---- footer ------------------------------------------------------------------ */

.footer-widget .footer-list ul li a:hover,
.footer-widget.footer-about .footer-social a:hover,
.footer-widget.footer-social-2 a:hover,
.footer-widget.copyright-2 p a:hover,
.copyright p a:hover {
    color: var(--brand);
}

.copyright {
    border-top: 1px solid var(--brand-line);
    background-color: var(--brand-soft);
}

/* Social icons in the footer rest in brand; the reference's hover darkens. */
.footer-widget.footer-about .footer-social a {
    color: var(--brand);
}

.footer-widget.footer-about .footer-social a:hover {
    color: var(--brand-dark);
}

/* ---- scroll-to-top ---------------------------------------------------------- */

#scrollUp {
    background-color: var(--brand);
}

#scrollUp:hover {
    background-color: var(--brand-dark);
}

/* ---- text selection ---------------------------------------------------------- */

::selection {
    background-color: var(--brand);
    color: var(--brand-text-on);
}