/*
 * "Runway": a premium theme for fashion and clothing shops.
 *
 * Built for photographs. A dark announcement line, the search in the middle
 * of the masthead and the menu as rounded tabs; a home page of opening
 * banners, a photo board of categories, product shelves with full cards,
 * offers, a sale with a clock, a product to buy in place, a look and tabs.
 * The shop, product and footer pages are dressed to match: soft rounded
 * pictures, quiet type, one strong red for a sale.
 *
 * Written by hand (not by build_theme_styles.py).
 */

:root {
    --skin-ink: #121212;
    --skin-muted: #6b6f76;
    --skin-line: #e8e8ea;
    --skin-surface: #f4f4f5;
    --skin-strip: #121212;
    --skin-radius: 12px;
    --skin-radius-lg: 20px;

    --rw-display: "Outfit", "DM Sans", "Helvetica Neue", Arial, sans-serif;
    --rw-accent: #4338ca;

    --sx-page: #ffffff;
    --sx-surface: #f4f4f5;
    --sx-accent: var(--rw-accent);
    --sx-radius: 20px;
    --sx-btn-radius: 999px;
    --sx-width: 1400px;
    --sx-heading-font: var(--rw-display);
    --sx-heading-weight: 600;
    --sx-heading-tracking: -.02em;
    --sx-tint-a: #e7e5f6;
    --sx-tint-b: #c9c5ee;
    --sx-tint-c: #f1f0f7;
}

body {
    background: #ffffff;
    color: var(--skin-ink);
    font-size: 15.5px;
}

h1, h2, h3, h4,
.heading_s1 h2, .heading_s1 h3, .heading_s2 h2, .heading_s4 h2,
.page-title h1,
.product_description .product_title,
.widget_title,
.bb-product-filter-title {
    font-family: var(--rw-display);
    font-weight: 600;
    letter-spacing: -.02em;
    text-transform: none;
}

.btn {
    border-radius: 999px !important;
    padding: 13px 26px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.btn-fill-out,
.btn-primary {
    border-color: var(--skin-ink) !important;
    background: var(--skin-ink) !important;
    color: #ffffff !important;
}

/* ------------------------------------------------------------- masthead */

.header_wrap,
.middle-header,
.bottom_header {
    background: #ffffff !important;
}

.top-header {
    padding: 7px 0;
    background: var(--skin-ink) !important;
    font-size: 12.5px;
}

.top-header,
.top-header a,
.top-header a i,
.top-header span,
.top-header .contact_detail li,
.top-header .header_list li a,
.top-header .header_list li a span,
.top-header .btn-select-language,
.top-header .choose-currency,
.header_list li a {
    color: #ffffff !important; /* every piece of text on the dark strip, not only the links */
}

.bottom_header {
    margin-bottom: 0 !important;
}

@media (min-width: 992px) {
    .middle-header {
        padding: 20px 0 14px;
        border: 0;
    }

    .middle-header .nav_block {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 520px) minmax(0, 1fr);
        align-items: center;
        gap: clamp(18px, 3vw, 48px);
    }

    .middle-header .navbar-brand {
        margin: 0;
        padding: 0;
    }

    .middle-header .navbar-brand img {
        max-height: 36px;
    }

    .middle-header .product_search_form {
        width: 100%;
        margin: 0;
        border: 0;
        background: transparent;
    }

    .product_search_form .input-group-prepend {
        display: none;
    }

    .product_search_form .input-group {
        border: 0;
        border-radius: 999px;
        background: var(--skin-surface);
        overflow: hidden;
    }

    .product_search_form input.form-control {
        height: 46px;
        padding: 0 54px 0 22px;
        border: 0 !important;
        background: transparent !important;
        font-size: 14.5px;
    }

    .product_search_form .search_btn {
        top: 4px;
        right: 4px;
        bottom: 4px;
        width: 40px;
        height: auto;
        border-radius: 999px;
        background: var(--skin-ink);
        color: #ffffff;
    }

    .middle-header .contact_phone {
        justify-self: end;
    }

    .bottom_header {
        border-bottom: 1px solid var(--skin-line);
    }

    /* No category drawer: the menu, as tabs, has the line; the icons sit at its end. */
    .bottom_header .row > [class*="col-"]:first-child {
        display: none;
    }

    .bottom_header_sticky .row > [class*="col-"]:first-child {
        display: block;
    }

    .bottom_header .row > [class*="col-"]:last-child {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .bottom_header_sticky .row > [class*="col-"]:last-child {
        flex: 1 1 0;
    }

    .bottom_header .navbar {
        justify-content: space-between;
        padding: 6px 0 10px;
    }

    .bottom_header .navbar-collapse {
        flex-grow: 0;
    }

    .bottom_header .navbar-nav:not(.attr-nav) {
        gap: 2px;
    }

    .bottom_header .pr_search_icon {
        display: none;
    }
}

.bottom_header .navbar-nav:not(.attr-nav) > li > .nav-link {
    padding: 9px 16px;
    border-radius: 999px;
    color: var(--skin-ink) !important;
    font-size: 14.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.bottom_header .navbar-nav:not(.attr-nav) > li > .nav-link:hover {
    background: var(--skin-surface);
}

.bottom_header .navbar-nav:not(.attr-nav) > li.active > .nav-link {
    background: var(--skin-ink);
    color: #ffffff !important;
}

.bottom_header .attr-nav > li > .nav-link,
.bottom_header .attr-nav i,
.bottom_header .navbar-toggler,
.bottom_header .pr_search_trigger {
    color: var(--skin-ink) !important;
}

.wishlist_count,
.cart_count {
    background: var(--sp-sale) !important;
    color: #ffffff !important;
}

@media (max-width: 991px) {
    .bottom_header .row > [class*="col-"]:first-child { display: none; }
    .bottom_header_sticky .row > [class*="col-"]:first-child { display: block; }
    .bottom_header .row > [class*="col-"]:last-child { flex: 0 0 100%; max-width: 100%; }
    .middle-header { padding: 14px 0 2px; border: 0; }
    .middle-header .product_search_form { display: none; }
}

/* -------------------------------------------------------- the home sections */

.sx-marquee {
    margin-top: var(--sp-space);
    padding: 16px 0;
    border-block: 1px solid var(--skin-line);
}

.sx-marquee span {
    font-size: clamp(16px, 1.5vw, 21px);
    font-weight: 500;
    letter-spacing: 0;
}

.sx-marquee i {
    width: 7px;
    height: 7px;
    background: var(--rw-accent);
}

.sx:last-of-type {
    padding-bottom: var(--sp-space);
}

/* ------------------------------------------- the theme's own product cards */

.section,
.breadcrumb_section,
.page-title-mini,
.bg_default,
.newsletter_small {
    background-color: #ffffff !important;
}

.product_wrap,
.product {
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
}

.product_wrap:hover,
.product:hover {
    box-shadow: none !important;
    transform: none;
}

.product .product_img,
.product_wrap .product_img {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: var(--skin-surface);
    aspect-ratio: 4 / 5;
}

.product .product_img img,
.product_wrap .product_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}

.product:hover .product_img img,
.product_wrap:hover .product_img img {
    transform: scale(1.04);
}

.product .rating_wrap,
.product .pr_desc,
.product .on_sale,
.shop_container.grid .on_sale {
    display: none;
}

.product_info {
    padding: 12px 4px 26px;
    text-align: left;
}

.product .product_title,
.product .product_title a,
.shop_container .product_title a {
    color: var(--skin-ink) !important;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
}

.product_price {
    margin-top: 4px;
}

.product_price .price {
    color: var(--skin-ink);
    font-size: 16.5px;
    font-weight: 700;
}

.pr_flash {
    top: 12px;
    left: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--sp-sale) !important;
    color: #ffffff !important;
    font-size: 11.5px;
    font-weight: 700;
}

.product_action_box {
    top: auto;
    bottom: 12px;
    left: 0;
    right: 0;
    transform: none;
    opacity: 0;
    transition: opacity .25s ease;
}

.product:hover .product_action_box,
.product_wrap:hover .product_action_box {
    opacity: 1;
}

.pr_action_btn li a {
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 8px 20px -10px rgba(18, 18, 18, .5);
    color: var(--skin-ink);
}

.pr_action_btn li a:hover {
    background: var(--skin-ink);
    color: #ffffff;
}

/* ----------------------------------------------- shop, filters, product */

.breadcrumb_section,
.page-title-mini {
    margin: 16px auto 0;
    padding: clamp(28px, 4vw, 54px) 0;
    width: min(100% - 40px, var(--sx-width));
    border-radius: 20px;
    background-color: var(--skin-surface) !important;
}

.breadcrumb_section .page-title h1,
.page-title-mini h1 {
    font-size: clamp(30px, 3.6vw, 48px);
}

.sidebar .widget,
.bb-product-filter {
    padding: 20px !important;
    margin-bottom: 14px;
    border: 1px solid var(--skin-line) !important;
    border-radius: 20px !important;
    background: #ffffff !important;
}

.sidebar .widget_title::after,
.sidebar .widget_title::before {
    display: none;
}

body:has(.pr_detail) .breadcrumb_section .page-title {
    display: none;
}

body:has(.pr_detail) .breadcrumb_section {
    padding: 16px 0;
    background-color: transparent !important;
}

.product-image .product_img_box,
.product_img_box {
    padding: 0;
    border: 0;
    border-radius: 24px;
    overflow: hidden;
    background: var(--skin-surface);
}

.product-image .product_img_box img {
    width: 100%;
}

.pr_detail .product_description .product_title {
    font-size: clamp(30px, 3.2vw, 44px) !important;
    line-height: 1.08;
}

.pr_detail .product_price .price {
    font-size: 28px;
}

/* ------------------------------------------------- newsletter and footer */

.newsletter_small,
.bg_default {
    padding: 0 0 clamp(26px, 3vw, 44px);
}

.newsletter_small .container,
.bg_default .container {
    max-width: var(--sx-width);
    width: min(100% - 40px, var(--sx-width));
    padding: clamp(28px, 4vw, 60px);
    border-radius: 24px;
    background: var(--skin-ink);
}

.newsletter_small h3,
.bg_default h3,
.newsletter_small .heading_s1 h3 {
    color: #ffffff !important;
    font-family: var(--rw-display);
    font-size: clamp(24px, 2.8vw, 38px);
    font-weight: 600;
}

.newsletter_small p,
.bg_default p {
    color: rgba(255, 255, 255, .72) !important;
}

.newsletter_form input.form-control {
    height: 54px;
    border: 0 !important;
    border-radius: 999px !important;
    padding-left: 24px;
}

.newsletter_form .btn {
    border-radius: 999px !important;
    background: var(--rw-accent) !important;
    border-color: var(--rw-accent) !important;
}

footer,
.footer_dark,
footer .footer_top,
footer .bottom_footer {
    background: var(--skin-surface) !important;
    color: var(--skin-ink);
}

footer .footer_top {
    padding: 60px 0 34px;
}

footer .widget_title {
    color: var(--skin-ink) !important;
    font-family: var(--rw-display);
    font-size: 16px;
    font-weight: 600;
}

footer a,
footer p,
footer .widget_links li a,
footer .widget_links li a span,
footer .contact_info li,
footer .bottom_footer p {
    color: var(--skin-muted) !important;
}

footer a:hover,
footer .widget_links li a:hover span {
    color: var(--skin-ink) !important;
}

footer .bottom_footer {
    border-top: 1px solid var(--skin-line);
    font-size: 13px;
}

.store-welcome h1 {
    font-family: var(--rw-display);
    font-size: clamp(40px, 6vw, 80px);
    font-weight: 600;
    letter-spacing: -.03em;
}

/* The masthead, the pages and the footer share the home page's width. */
@media (min-width: 992px) {
    .header_wrap .container,
    footer .container,
    .main_content > .section > .container {
        width: min(100% - 40px, var(--sx-width));
        max-width: var(--sx-width);
        padding-inline: 0;
    }
}

/* Menus that open under an item line up with its left edge. The theme opens them leftwards, and with this
   style's menu starting at the edge of the page the first ones ran off the screen with their text. */
@media (min-width: 992px) {
    .bottom_header .navbar-nav:not(.attr-nav) > li > .dropdown-menu,
    .bottom_header .navbar-nav:not(.attr-nav) > li > .dropdown-menu.dropdown-reverse {
        left: 0 !important;
        right: auto !important;
    }

    .bottom_header .navbar-nav:not(.attr-nav) > li:nth-last-child(-n + 2) > .dropdown-menu {
        left: auto !important;
        right: 0 !important;
    }
}