/*
 * "Clean" storefront skin for the Shopwise theme.
 *
 * A light, airy look: near-black text on white, one accent colour, soft grey
 * surfaces, rounded controls, buttons in normal case. Layered on top of the
 * theme's own stylesheet (loaded after it), so the theme's files stay as
 * shipped. Colours come from the theme's variables, so a store's own
 * primary colour and fonts (Store design) carry through.
 */

:root {
    --skin-accent: var(--primary-color, #111111);
    --skin-ink: #040404;
    --skin-muted: #686666;
    --skin-line: #e7e7e7;
    --skin-surface: #f6f6f6;
    --skin-strip: #f5f5f5;
    --skin-radius: 6px;
    --skin-radius-lg: 10px;
}

/* ------------------------------------------------------------------ base */

body {
    color: var(--skin-ink);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

p,
.leads {
    color: var(--skin-muted);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6, .sx-h1 {
    color: var(--skin-ink);
    font-weight: 500;
    letter-spacing: -0.01em;
}

a {
    color: var(--skin-ink);
    transition: color .2s ease;
}

a:hover {
    color: var(--skin-accent);
}

::selection {
    background: var(--skin-accent);
    color: #fff;
}

:focus-visible {
    outline: 2px solid var(--skin-accent);
    outline-offset: 2px;
}

.section {
    padding-top: 70px;
    padding-bottom: 70px;
}

.section.small_pt { padding-top: 40px; }
.section.small_pb { padding-bottom: 40px; }

.bg_gray,
.bg_light {
    background-color: var(--skin-surface) !important;
}

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

.btn {
    border-radius: var(--skin-radius);
    text-transform: none;
    font-weight: 500;
    letter-spacing: 0;
    padding: 11px 26px;
    font-size: 15px;
    box-shadow: none !important;
}

.btn.btn-sm { padding: 7px 16px; font-size: 14px; }
.btn.btn-lg { padding: 14px 34px; font-size: 16px; }

.btn-fill-out,
.btn-primary,
.btn-default {
    background-color: var(--skin-accent) !important;
    border: 1px solid var(--skin-accent) !important;
    color: #fff !important;
}

/* The theme animates two halves behind the label; a plain colour change reads calmer. */
.btn-fill-out::before,
.btn-fill-out::after {
    display: none !important;
}

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

.btn-dark,
.btn-secondary {
    background-color: var(--skin-ink) !important;
    border: 1px solid var(--skin-ink) !important;
    color: #fff !important;
}

.btn-dark:hover,
.btn-secondary:hover {
    background-color: var(--skin-accent) !important;
    border-color: var(--skin-accent) !important;
}

.btn-fill-line,
.btn-border-fill,
.btn-outline-secondary {
    background: #fff !important;
    border: 1px solid var(--skin-line) !important;
    color: var(--skin-ink) !important;
}

.btn-fill-line::before,
.btn-fill-line::after,
.btn-border-fill::before,
.btn-border-fill::after {
    display: none !important;
}

.btn-fill-line:hover,
.btn-border-fill:hover,
.btn-outline-secondary:hover {
    background: var(--skin-ink) !important;
    border-color: var(--skin-ink) !important;
    color: #fff !important;
}

.btn-radius { border-radius: var(--skin-radius); }

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

.form-control,
.form-select,
.custom_select select,
textarea.form-control {
    border: 1px solid var(--skin-line);
    border-radius: var(--skin-radius);
    color: var(--skin-ink);
    box-shadow: none !important;
    min-height: 46px;
}

.form-control-sm,
.form-select.form-control-sm { min-height: 38px; }

.form-control:focus,
.form-select:focus {
    border-color: var(--skin-ink);
}

.form-control::placeholder {
    color: #9a9a9a;
}

label,
.form-label {
    color: var(--skin-ink);
    font-weight: 500;
}

.form-check-input:checked,
.custome-checkbox .form-check-input:checked + .form-check-label::before {
    background-color: var(--skin-accent);
    border-color: var(--skin-accent);
}

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

.top-header {
    background: var(--skin-strip);
    border-bottom: 0;
    padding: 9px 0;
    font-size: 14px;
    color: var(--skin-ink);
}

.top-header a,
.top-header span,
.top-header .contact_detail li,
.top-header .header_list li a,
.top-header .btn-select-language,
.top-header .choose-currency {
    color: var(--skin-ink) !important;
    font-size: 14px;
}

.top-header a:hover {
    color: var(--skin-accent) !important;
}

.middle-header {
    background: #fff;
    padding: 22px 0;
    border-bottom: 0;
}

.middle-header .contact_phone,
.middle-header .contact_phone span {
    color: var(--skin-ink);
    font-weight: 500;
}

.middle-header .contact_phone i {
    color: var(--skin-accent);
}

/* Search: one soft grey pill instead of a bordered box. */
.product_search_form .input-group {
    background: var(--skin-surface);
    border-radius: var(--skin-radius);
    overflow: hidden;
    border: 1px solid transparent;
    transition: border-color .2s ease, background-color .2s ease;
}

.product_search_form .input-group:focus-within {
    background: #fff;
    border-color: var(--skin-ink);
}

.product_search_form .form-control,
.product_search_form .custom_select select,
.product_search_form select {
    background-color: transparent !important;
    border: 0 !important;
    min-height: 50px;
    color: var(--skin-ink);
}

.product_search_form .input-group-prepend {
    border-right: 1px solid var(--skin-line);
}

.product_search_form .search_btn,
.product_search_form .search_btn:hover {
    background: transparent !important;
    color: var(--skin-ink) !important;
    border: 0 !important;
    padding: 0 18px;
}

.product_search_form .search_btn:hover {
    color: var(--skin-accent) !important;
}

/* Menu bar: white, with a hairline under it. The colours follow the theme's own options. */
.bottom_header {
    background: var(--header-menu-background-color, #fff) !important;
    border-top: 1px solid var(--skin-line);
    border-bottom: 1px solid var(--skin-line);
}

.bottom_header .navbar-nav > li > .nav-link,
.bottom_header .navbar .attr-nav li .nav-link,
.bottom_header .navbar .attr-nav li a {
    color: var(--header-menu-text-color, var(--skin-ink)) !important;
    text-transform: none !important;
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0;
}

.bottom_header .navbar-nav > li > .nav-link:hover,
.bottom_header .navbar-nav > li.active > .nav-link,
.bottom_header .navbar .attr-nav li a:hover {
    color: var(--skin-accent) !important;
}

.main_menu_uppercase .navbar-nav > li > .nav-link {
    text-transform: none !important;
}

.navbar .dropdown-menu,
.cart_box,
.categories_wrap #navCatContent,
#navCatContent {
    border: 1px solid var(--skin-line);
    border-radius: 0 0 var(--skin-radius-lg) var(--skin-radius-lg);
    box-shadow: 0 14px 34px rgba(4, 4, 4, .07);
    background: #fff;
}

.navbar .dropdown-menu .dropdown-item,
.navbar .dropdown-menu .nav-link,
#navCatContent .dropdown-item,
#navCatContent .nav-link {
    color: var(--skin-ink) !important;
    font-size: 15px;
    text-transform: none;
}

.navbar .dropdown-menu .dropdown-item:hover,
#navCatContent .dropdown-item:hover,
#navCatContent .nav-link:hover {
    color: var(--skin-accent) !important;
    background: transparent;
}

.categories_btn {
    background: var(--skin-accent) !important;
    color: #fff !important;
    border-radius: var(--skin-radius) var(--skin-radius) 0 0;
    font-weight: 500;
    text-transform: none;
}

.more_categories {
    color: var(--skin-accent);
    border-top: 1px solid var(--skin-line);
}

.cart_count,
.wishlist_count {
    background: var(--skin-accent);
    color: #fff;
}

/* ------------------------------------------------------ banners, sliders */

.banner_section .carousel-item,
.banner_section .background_bg,
.sale-banner img,
.shop_banner_slider img,
.single_banner img {
    border-radius: var(--skin-radius-lg);
}

.banner_content h2,
.banner_content .h2 {
    font-weight: 500;
    letter-spacing: -0.02em;
}

.banner_content h2 span,
.banner_content_subtitle {
    color: var(--skin-accent);
}

.carousel-indicators.indicators_style1 [data-bs-target],
.carousel-indicators [data-bs-target],
.owl-theme .owl-dots .owl-dot span,
.slick-dots li button {
    width: 22px !important;
    height: 3px !important;
    border-radius: 2px !important;
    border: 0 !important;
    background: #cfcfcf !important;
    opacity: 1;
}

.carousel-indicators [data-bs-target].active,
.owl-theme .owl-dots .owl-dot.active span,
.slick-dots li.slick-active button {
    background: var(--skin-accent) !important;
}

.slick-dots li button::before { display: none; }

.carousel-control-next,
.carousel-control-prev,
.owl-theme .owl-nav [class*="owl-"],
.slick-arrow {
    background: #fff !important;
    color: var(--skin-ink) !important;
    border: 1px solid var(--skin-line) !important;
    border-radius: 50% !important;
    box-shadow: none !important;
}

.owl-theme .owl-nav [class*="owl-"]:hover,
.slick-arrow:hover {
    background: var(--skin-ink) !important;
    border-color: var(--skin-ink) !important;
    color: #fff !important;
}

/* -------------------------------------------------- section headings, tabs */

.heading_s1 h2,
.heading_s1 h3,
.heading_s1 h4,
.heading_s2 h2,
.heading_s4 h2,
.heading_tab_header .heading_s2 h4 {
    font-size: 26px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.01em;
    color: var(--skin-ink);
}

.heading_s1::before,
.heading_s1::after {
    display: none;
}

.heading_tab_header {
    border-bottom: 1px solid var(--skin-line);
    padding-bottom: 14px;
    margin-bottom: 26px;
}

.nav-tabs,
.tab-style1 .nav-tabs,
.tab-style2 .nav-tabs,
.tab-style3 .nav-tabs {
    border-bottom: 0;
    gap: 6px;
}

.nav-tabs .nav-link,
.tab-style1 .nav-tabs li.nav-item a,
.tab-style2 .nav-tabs li.nav-item a,
.tab-style3 .nav-tabs li.nav-item a {
    border: 0 !important;
    background: transparent !important;
    color: var(--skin-ink);
    font-weight: 500;
    font-size: 15px;
    text-transform: none;
    padding: 6px 14px;
    position: relative;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover,
.tab-style1 .nav-tabs li.nav-item a.active,
.tab-style2 .nav-tabs li.nav-item a.active,
.tab-style3 .nav-tabs li.nav-item a.active {
    color: var(--skin-accent) !important;
}

.nav-tabs .nav-link.active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    height: 2px;
    background: var(--skin-accent);
    border-radius: 2px;
}

/* --------------------------------------------------------- category tiles */

.categories_box,
.cat_style1 .categories_box {
    text-align: center;
}

.categories_box a {
    display: block;
    padding: 22px 12px;
    border: 1px solid var(--skin-line);
    border-radius: var(--skin-radius-lg);
    background: #fff;
    transition: border-color .2s ease, transform .2s ease;
}

.categories_box a:hover {
    border-color: var(--skin-ink);
    transform: translateY(-2px);
}

.categories_box span {
    color: var(--skin-ink);
    font-weight: 500;
    font-size: 15px;
}

.categories_box i {
    color: var(--skin-accent);
}

/* ------------------------------------------------------------ product card */

.product,
.product_wrap {
    background: #fff;
    border: 1px solid transparent;
    border-radius: var(--skin-radius-lg);
    box-shadow: none !important;
    overflow: hidden;
    transition: border-color .2s ease;
    margin-bottom: 26px;
}

.product:hover,
.product_wrap:hover {
    border-color: var(--skin-line);
    box-shadow: none !important;
}

.product_img {
    background: var(--skin-surface);
    border-radius: var(--skin-radius-lg);
    overflow: hidden;
}

.product_img img {
    transition: transform .45s ease;
}

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

.product_info {
    padding: 16px 12px 18px;
    text-align: left;
}

.product_title {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 6px;
}

.product_title a {
    color: var(--skin-ink);
}

.product_title a:hover {
    color: var(--skin-accent);
}

.product_price .price,
.product_price .product-sale-price-text,
.price {
    color: var(--skin-accent);
    font-weight: 600;
    font-size: 17px;
}

.product_price del,
.product_price .product-price-original,
.product_price .product-price-original del {
    color: #9a9a9a;
    font-weight: 400;
    font-size: 14px;
}

.on_sale,
.on_sale span,
.on_sale_percentage_text {
    color: #1a8f52;
    font-size: 13px;
    font-weight: 500;
}

.pr_flash,
.pr_flash.bg-success,
.pr_flash.bg-danger {
    background: var(--skin-accent) !important;
    color: #fff;
    border-radius: var(--skin-radius);
    font-size: 12px;
    font-weight: 500;
    text-transform: none;
    padding: 3px 10px;
    top: 12px;
    left: 12px;
}

.rating_wrap .rating_num {
    color: var(--skin-muted);
    font-size: 13px;
}

.pr_desc p {
    color: var(--skin-muted);
}

/* Hover actions: white round buttons on the image. */
.product_action_box li a,
.pr_action_btn li a {
    background: #fff;
    color: var(--skin-ink);
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(4, 4, 4, .10);
    border: 0;
}

.product_action_box li a:hover,
.pr_action_btn li a:hover {
    background: var(--skin-accent);
    color: #fff;
}

.product_action_box li.add-to-cart a,
.pr_action_btn li.add-to-cart a {
    border-radius: var(--skin-radius);
}

.product_img::before {
    background: rgba(4, 4, 4, .04);
}

/* Deal of the day and small list products */
.deal_wrap {
    border: 1px solid var(--skin-line);
    border-radius: var(--skin-radius-lg);
    box-shadow: none;
}

.countdown_time .countdown_box .countdown-wrap,
.countdown_style4 .countdown_box .countdown-wrap {
    background: var(--skin-surface);
    border-radius: var(--skin-radius);
    color: var(--skin-ink);
}

.deal_progress .progress { background: var(--skin-surface); height: 6px; border-radius: 3px; }
.deal_progress .progress-bar { background: var(--skin-accent); }

/* ------------------------------------------------- feature strip, banners */

.icon_box,
.icon_box_style1 {
    border: 0;
    padding: 18px 10px;
}

.icon_box .icon i,
.icon_box_style1 .icon i {
    color: var(--skin-accent);
}

.icon_box_content h5,
.icon_box_title {
    font-size: 16px;
    font-weight: 600;
}

/* ------------------------------------------------- page title, breadcrumb */

.breadcrumb_section {
    background: var(--skin-surface) !important;
    padding: 34px 0;
}

.breadcrumb_section .page-title h1,
.page-title h1, .breadcrumb_section .page-title .sx-h1, .page-title .sx-h1 {
    font-size: 26px;
    font-weight: 600;
    text-transform: none;
}

.breadcrumb-item,
.breadcrumb-item a {
    color: var(--skin-muted);
    font-size: 14px;
}

.breadcrumb-item.active,
.breadcrumb-item a:hover {
    color: var(--skin-ink);
}

/* --------------------------------------------------- shop listing, sidebar */

.product_header {
    border-bottom: 1px solid var(--skin-line);
    padding-bottom: 16px;
    margin-bottom: 26px;
}

.shorting_icon {
    border: 1px solid var(--skin-line);
    border-radius: var(--skin-radius);
    color: var(--skin-muted);
}

.shorting_icon.active,
.shorting_icon:hover {
    background: var(--skin-ink);
    border-color: var(--skin-ink);
    color: #fff;
}

.sidebar .widget,
.bb-shop-sidebar .bb-product-filter {
    border: 0;
    border-bottom: 1px solid var(--skin-line);
    padding-bottom: 22px;
    margin-bottom: 22px;
}

.sidebar .widget_title,
.bb-product-filter-title {
    font-size: 17px;
    font-weight: 600;
    text-transform: none;
    color: var(--skin-ink);
    margin-bottom: 14px;
}

.bb-product-filter-link,
.widget_categories li a,
.widget_links li a {
    color: var(--skin-muted);
    font-size: 15px;
}

.bb-product-filter-link:hover,
.bb-product-filter-link.active,
.widget_categories li a:hover,
.widget_links li a:hover {
    color: var(--skin-accent);
}

.ui-slider.ui-widget-content {
    background: var(--skin-line);
    height: 4px;
    border: 0;
}

.ui-slider .ui-slider-range {
    background: var(--skin-accent);
}

.ui-slider .ui-slider-handle {
    background: #fff;
    border: 2px solid var(--skin-accent);
    border-radius: 50%;
}

.pagination .page-link,
.pagination_style1 .page-link {
    border: 1px solid var(--skin-line);
    border-radius: var(--skin-radius) !important;
    color: var(--skin-ink);
    margin: 0 3px;
    min-width: 40px;
    text-align: center;
}

.pagination .page-item.active .page-link,
.pagination .page-link:hover {
    background: var(--skin-ink);
    border-color: var(--skin-ink);
    color: #fff;
}

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

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

.product_gallery_item a,
.product_gallery_item .item {
    border: 1px solid var(--skin-line);
    border-radius: var(--skin-radius);
    overflow: hidden;
}

.product_gallery_item a.active,
.product_gallery_item .slick-current a {
    border-color: var(--skin-accent);
}

.pr_detail .product_title,
.pr_detail h1.product_title,
.pr_detail .product_description .product_title, .pr_detail .sx-h1.product_title {
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.pr_detail .product_price .price,
.pr_detail .product-sale-price-text {
    font-size: 26px;
}

.pr_detail .pr_desc p,
.pr_detail .product_description p {
    color: var(--skin-muted);
}

.pr_detail hr,
.product-meta,
.product_share {
    border-color: var(--skin-line);
}

.product-meta li,
.product-meta li a {
    color: var(--skin-muted);
}

.product-meta li a:hover {
    color: var(--skin-accent);
}

.number-items-available {
    color: #1a8f52;
    font-weight: 500;
}

.cart-product-quantity .quantity,
.quantity {
    border: 1px solid var(--skin-line);
    border-radius: var(--skin-radius);
    display: inline-flex;
    align-items: center;
    overflow: hidden;
}

.quantity .minus,
.quantity .plus {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--skin-ink);
    width: 40px;
    height: 44px;
    line-height: 44px;
}

.quantity .minus:hover,
.quantity .plus:hover {
    background: var(--skin-surface);
    color: var(--skin-accent);
}

.quantity .qty {
    border: 0;
    background: transparent;
    height: 44px;
    min-height: 44px;
    width: 46px;
    text-align: center;
    color: var(--skin-ink);
}

.attribute-swatch-item,
.product_color_switch span,
.visual-swatch label span {
    border-radius: var(--skin-radius);
}

.bb-social-sharing__item a,
.product_share .social_icons li a {
    border: 1px solid var(--skin-line);
    border-radius: 50%;
    color: var(--skin-ink);
    background: #fff;
}

.bb-social-sharing__item a:hover,
.product_share .social_icons li a:hover {
    background: var(--skin-accent);
    border-color: var(--skin-accent);
    color: #fff;
}

.tab-style3 .tab-content,
.shop_info_tab {
    border-top: 1px solid var(--skin-line);
    padding-top: 26px;
}

.product-specification-table td,
.product-specification-table th,
.table td,
.table th {
    border-color: var(--skin-line);
}

.review-item,
.product-review-summary {
    border-color: var(--skin-line);
}

.product-review-progress-bar-value {
    background: var(--skin-accent);
}

/* ------------------------------------------------------- cart and checkout */

.shop_cart_table table,
.table-responsive.shop_cart_table,
.shop_cart_table {
    border: 1px solid var(--skin-line);
    border-radius: var(--skin-radius-lg);
    overflow: hidden;
}

.shop_cart_table thead th,
.table thead th {
    background: var(--skin-surface);
    color: var(--skin-ink);
    font-weight: 600;
    text-transform: none;
    border-bottom: 1px solid var(--skin-line);
}

.cart_totals,
.order_review,
.toggle_info,
.payment_method,
.bb-customer-card {
    border: 1px solid var(--skin-line);
    border-radius: var(--skin-radius-lg);
    background: #fff;
    box-shadow: none;
}

.cart_total_amount,
.product-subtotal,
.cart_total_amount strong {
    color: var(--skin-ink);
    font-weight: 600;
}

.cart_box .cart_list li,
.cart_box .cart_footer {
    border-color: var(--skin-line);
}

.cart_box .cart_total strong,
.cart_box .cart_price {
    color: var(--skin-accent);
}

.alert {
    border-radius: var(--skin-radius);
    border: 1px solid var(--skin-line);
}

/* -------------------------------------------------------- blog, testimonials */

.blog_post,
.blog_style1 {
    border: 0;
    box-shadow: none;
}

.blog_img {
    border-radius: var(--skin-radius-lg);
    overflow: hidden;
}

.blog_title a,
.blog_content h5 a,
.blog_content h6 a {
    color: var(--skin-ink);
    font-weight: 600;
}

.blog_title a:hover,
.blog_content h5 a:hover,
.blog_content h6 a:hover {
    color: var(--skin-accent);
}

.blog_meta li,
.blog_meta li a {
    color: var(--skin-muted);
    font-size: 14px;
}

.testimonial_box,
.testimonial_style1 .testimonial_box {
    background: var(--skin-surface);
    border: 0;
    border-radius: var(--skin-radius-lg);
    box-shadow: none;
    padding: 30px;
}

.cl_logo,
.client_logo .cl_logo {
    border: 1px solid var(--skin-line);
    border-radius: var(--skin-radius-lg);
    background: #fff;
}

/* ------------------------------------------------------- newsletter block */

.bg_default {
    background-color: var(--skin-strip) !important;
}

.bg_default .heading_s1 h3,
.bg_default h3,
.bg_default p {
    color: var(--skin-ink) !important;
}

.newsletter_form2 input,
.newsletter_form input {
    background: #fff;
    border: 1px solid var(--skin-line);
    border-radius: var(--skin-radius);
    color: var(--skin-ink);
}

.newsletter_form2 .btn,
.newsletter_form .btn {
    border-radius: var(--skin-radius);
    background: var(--skin-ink) !important;
    border-color: var(--skin-ink) !important;
    color: #fff !important;
}

.newsletter_form2 .btn:hover,
.newsletter_form .btn:hover {
    background: var(--skin-accent) !important;
    border-color: var(--skin-accent) !important;
}

.subscribe_popup .modal-content,
.modal-content {
    border: 0;
    border-radius: var(--skin-radius-lg);
    overflow: hidden;
}

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

footer.footer_dark,
.footer_dark {
    background-color: var(--footer-background-color, #fff) !important;
    background-image: none !important;
    color: var(--footer-text-color, var(--skin-ink));
    border-top: 1px solid var(--skin-line);
}

.footer_dark .footer_top {
    padding: 64px 0 34px;
}

.footer_dark .widget_title,
.footer_dark h6,
.footer_dark h5 {
    color: var(--footer-text-color, var(--skin-ink)) !important;
    font-size: 16px;
    font-weight: 600;
    text-transform: none;
    margin-bottom: 18px;
}

.footer_dark p,
.footer_dark li,
.footer_dark .widget_links li a,
.footer_dark .contact_info li span,
.footer_dark .contact_info li a,
.footer_dark .contact_info li p {
    color: var(--skin-muted) !important;
    font-size: 15px;
}

.footer_dark .widget_links li a:hover,
.footer_dark .contact_info li a:hover {
    color: var(--skin-accent) !important;
}

.footer_dark .contact_info li i,
.footer_dark .contact_info_light li i {
    color: var(--skin-accent);
}

.footer_dark .social_icons li a,
.social_white li a {
    background: var(--skin-surface) !important;
    color: var(--skin-ink) !important;
    border: 0;
    border-radius: 50%;
}

.footer_dark .social_icons li a:hover,
.social_white li a:hover {
    background: var(--skin-accent) !important;
    color: #fff !important;
}

.footer_dark .bottom_footer,
.bottom_footer.border-top-tran {
    border-top: 1px solid var(--skin-line) !important;
    padding: 20px 0;
}

.footer_dark .bottom_footer p {
    color: var(--skin-muted) !important;
    font-size: 14px;
}

.scrollup {
    background: var(--skin-ink);
    color: #fff;
    border-radius: 50%;
}

.scrollup:hover {
    background: var(--skin-accent);
}

/* --------------------------------------------------- account, auth pages */

.login_wrap,
.login_register_wrap .login_wrap,
.dashboard_content .card,
.dashboard_menu {
    border: 1px solid var(--skin-line);
    border-radius: var(--skin-radius-lg);
    box-shadow: none;
}

.dashboard_menu .nav-link {
    color: var(--skin-ink);
    border-color: var(--skin-line);
}

.dashboard_menu .nav-link.active,
.dashboard_menu .nav-link:hover {
    background: var(--skin-accent);
    color: #fff;
}

.card {
    border-color: var(--skin-line);
    border-radius: var(--skin-radius-lg);
}

.card-header {
    background: var(--skin-surface);
    border-bottom-color: var(--skin-line);
    font-weight: 600;
}

/* ------------------------------------------------------------------ small */

@media (max-width: 991.98px) {
    .section { padding-top: 46px; padding-bottom: 46px; }

    .middle-header { padding: 14px 0; }

    .heading_s1 h2,
    .heading_s1 h3,
    .heading_s2 h2,
    .heading_s4 h2 { font-size: 22px; }

    .pr_detail .product_title { font-size: 24px; }

    .bottom_header .navbar-collapse {
        background: #fff;
        border-top: 1px solid var(--skin-line);
    }
}

@media (max-width: 575.98px) {
    .product_info { padding: 12px 8px 14px; }
    .product_title { font-size: 15px; }
    .btn { padding: 10px 20px; }
    .footer_dark .footer_top { padding: 44px 0 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .product_img img,
    .categories_box a,
    a,
    .btn {
        transition: none !important;
    }

    .product:hover .product_img img,
    .categories_box a:hover {
        transform: none;
    }
}

/* ------------------------------------------------------------ corrections */

/* The category button's label and icon stay white on the accent colour. */
.categories_btn,
.categories_btn span,
.categories_btn i {
    color: #fff !important;
}

/* Slider dots: plain bars (Bootstrap gives them transparent borders and a clipped background). */
.carousel-indicators [data-bs-target],
.carousel-indicators.indicators_style1 [data-bs-target] {
    background-clip: border-box !important;
    box-shadow: none !important;
    outline: 0 !important;
    margin: 0 3px !important;
    text-indent: -999px;
}

.carousel-indicators [data-bs-target]::before,
.carousel-indicators [data-bs-target]::after {
    display: none !important;
}

/* The demo content puts Bootstrap's utility classes on buttons; the skin's shape and case win. */
.btn.text-uppercase {
    text-transform: none !important;
}

.btn.rounded-0:not(.input-group .btn) {
    border-radius: var(--skin-radius) !important;
}

/* Language and currency pickers in the top strip: plain text, not buttons. */
.btn.btn-select-language,
.top-header .dropdown-toggle {
    background: transparent !important;
    border: 0 !important;
    color: var(--skin-ink) !important;
    padding: 0 !important;
    text-transform: none !important;
    font-weight: 400;
    font-size: 14px;
}

/* Product names are headings (h3/h6) in the theme: one size everywhere. */
.product .product_title,
.product_wrap .product_title,
h3.product_title,
h6.product_title {
    font-size: 16px !important;
    font-weight: 500 !important;
}

.pr_detail .product_title,
.pr_detail h1.product_title,
.pr_detail h4.product_title, .pr_detail .sx-h1.product_title {
    font-size: 28px !important;
    font-weight: 600 !important;
}

.heading_s4 h4,
.heading_s4 h2 {
    font-weight: 600;
}

/* Cart: one tidy quantity control and a coupon field that lines up with its button */
.shop_cart_table .quantity,
.product-quantity .quantity {
    display: inline-flex;
    align-items: center;
    padding: 0;
}

.shop_cart_table .quantity .minus,
.shop_cart_table .quantity .plus,
.shop_cart_table .quantity .qty,
.product-quantity .quantity .minus,
.product-quantity .quantity .plus,
.product-quantity .quantity .qty {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 44px !important;
    line-height: 44px;
    float: none;
}

.shop_cart_table .quantity .minus:hover,
.shop_cart_table .quantity .plus:hover {
    background: var(--skin-surface) !important;
}

.form-coupon-wrapper {
    align-items: stretch;
    padding: 12px;
}

.form-coupon-wrapper .coupon-code {
    border: 1px solid var(--skin-line) !important;
    border-right: 0 !important;
    height: 44px;
}

.form-coupon-wrapper .btn-apply-coupon-code {
    height: 44px;
    padding: 0 18px;
}

/* Bootstrap's "primary" helpers follow the store colour (account dashboard cards, links, outlines) */
.bg-primary {
    background-color: var(--skin-accent) !important;
}

.bg-primary.bg-opacity-10 {
    background-color: color-mix(in srgb, var(--skin-accent) 10%, transparent) !important;
}

.bg-primary.bg-opacity-25 {
    background-color: color-mix(in srgb, var(--skin-accent) 25%, transparent) !important;
}

.text-primary {
    color: var(--skin-accent) !important;
}

.border-primary {
    border-color: var(--skin-accent) !important;
}

.btn-outline-primary {
    color: var(--skin-accent);
    border-color: var(--skin-accent);
}

.btn-outline-primary:hover {
    background: var(--skin-accent);
    border-color: var(--skin-accent);
    color: #fff;
}

/* A footer "Contact Info" column with no address, email or phone filled in is a heading over nothing. */
/* (:has() cannot be nested, hence the two-part test.) */
footer [class*="col-"]:has(> .widget > ul.contact_info):not(:has(ul.contact_info li)) {
    display: none;
}

/* ------------------------------------------------ an empty store's welcome */

/* Written into a new empty store's home page (TenantSetupCommand::welcome). */
.store-welcome {
    max-width: 760px;
    margin: 0 auto;
    padding: 96px 20px 88px;
    text-align: center;
}

.store-welcome-kicker {
    margin: 0 0 14px;
    color: var(--skin-muted);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.store-welcome h1, .store-welcome .sx-h1 {
    margin: 0;
    font-size: clamp(34px, 5.4vw, 60px);
    line-height: 1.08;
    letter-spacing: -.03em;
}

.store-welcome p:last-child {
    max-width: 520px;
    margin: 18px auto 0;
    color: var(--skin-muted);
    font-size: 18px;
    line-height: 1.55;
}

/* Once the page shows a product, the shop is open: the welcome steps aside, and so does a product heading over nothing before that. */
body:has(.product_wrap, .product, .sx-card) .store-welcome,
body:has(.store-welcome):not(:has(.product_wrap, .product, .sx-card)) .heading_tab_header,
body:has(.store-welcome):not(:has(.product_wrap, .product, .sx-card)) .sx-hero {
    display: none;
}

/* ------------------------------------------------- one menu on small screens */

/* Nothing parked off the edge of the screen may make the page slide sideways. */
html,
body {
    overflow-x: clip;
}

@media (max-width: 991.98px) {
    /* The categories panel is folded into the one menu (menu.js), so its own button goes. */
    .pf-menu-ready .bottom_header .categories_wrap,
    .pf-menu-ready .bottom_header .row > [class*="col-"]:has(> .categories_wrap) {
        display: none !important;
    }

    .pf-menu-ready .bottom_header .row > [class*="col-"]:has(> nav.navbar) {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    .header_wrap .navbar-collapse.mobile_side_menu {
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        width: min(86vw, 340px);
        display: block;
        height: auto !important;
        padding: 0 0 28px;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: #fff !important;
        border: 0;
        box-shadow: -24px 0 60px rgba(0, 0, 0, .14);
        z-index: 1060;
        transform: translateX(105%);
        visibility: hidden;
        transition: transform .3s cubic-bezier(.32, .72, 0, 1), visibility 0s .3s;
    }

    .header_wrap .navbar-collapse.mobile_side_menu.show,
    .header_wrap .navbar-collapse.mobile_side_menu.pf-open {
        transform: none;
        visibility: visible;
        transition: transform .3s cubic-bezier(.32, .72, 0, 1);
    }

    /* With the script running, the panel follows the tap at once, not the end of the theme's own animation. */
    .pf-menu-ready .header_wrap .navbar-collapse.mobile_side_menu:not(.pf-open) {
        transform: translateX(105%);
        visibility: hidden;
    }

    .pf-drawer-shade {
        position: fixed;
        inset: 0;
        z-index: 1055;
        background: rgba(0, 0, 0, .32);
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease, visibility 0s .3s;
    }

    .pf-drawer-shade.pf-on {
        opacity: 1;
        visibility: visible;
        transition: opacity .3s ease;
    }

    html.pf-menu-open,
    html.pf-menu-open body {
        overflow: hidden;
    }

    .pf-drawer-head {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 20px 14px;
        background: #fff;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #6e6e73;
    }

    .pf-drawer-close {
        width: 36px;
        height: 36px;
        border: 0;
        border-radius: 50%;
        background: #f2f2f4;
        color: #111;
        font-size: 24px;
        line-height: 1;
        padding: 0 0 3px;
    }

    .header_wrap .mobile_side_menu .navbar-nav,
    .header_wrap.light_skin .mobile_side_menu .navbar-nav,
    .light_skin .navbar .navbar-collapse.mobile_side_menu .navbar-nav:not([class*="bg_"]):not([class*="bg-"]),
    .header_wrap .navbar .navbar-collapse.mobile_side_menu .navbar-nav:not([class*="bg_"]):not([class*="bg-"]) {
        display: block;
        height: auto;
        max-height: none;
        overflow: visible;
        margin: 0;
        padding: 0 20px;
        background: #fff !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .header_wrap .mobile_side_menu .navbar-nav > li {
        float: none;
        border-bottom: 1px solid var(--skin-line, #ececee);
    }

    .header_wrap .mobile_side_menu .navbar-nav > li > .nav-link,
    .header_wrap .mobile_side_menu .navbar-nav > li > a {
        display: block;
        padding: 15px 0 !important;
        color: #111 !important;
        font-size: 17px;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
    }

    .header_wrap .mobile_side_menu .dropdown-menu {
        position: static !important;
        transform: none !important;
        float: none;
        margin: 0 0 10px;
        padding: 0 0 0 12px !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .header_wrap .mobile_side_menu .dropdown-menu a,
    .header_wrap .mobile_side_menu .dropdown-menu .dropdown-item,
    .header_wrap .mobile_side_menu .dropdown-menu .nav-link {
        padding: 9px 0 !important;
        color: #424245 !important;
        font-size: 15px;
        font-weight: 400;
        white-space: normal;
        background: transparent !important;
    }

    .header_wrap .mobile_side_menu .dropdown-header {
        padding: 8px 0 2px;
        color: #6e6e73 !important;
        font-size: 12px;
        letter-spacing: .05em;
        text-transform: uppercase;
    }

    .pf-drawer-cats {
        padding: 22px 20px 0;
    }

    .pf-drawer-label {
        margin-bottom: 6px;
        color: #6e6e73;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .pf-drawer-cats ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .pf-drawer-cats a {
        display: block;
        padding: 11px 0;
        color: #111 !important;
        font-size: 16px;
    }

    .header_wrap .mobile_side_menu > ul:not(.navbar-nav),
    .header_wrap .mobile_side_menu > div:not(.pf-drawer-head):not(.pf-drawer-cats) {
        padding: 16px 20px 0;
        color: #111;
    }

    /* Language and currency, at the foot of the pages. */
    .header_wrap .navbar-collapse.mobile_side_menu .navbar-nav > li.mobile-menu-item {
        padding: 6px 0;
    }

    .header_wrap .navbar-collapse.mobile_side_menu .navbar-nav li.mobile-menu-item .language-wrapper,
    .header_wrap .navbar-collapse.mobile_side_menu .navbar-nav li.mobile-menu-item .dropdown {
        margin: 0 !important;
        padding: 0;
    }

    .header_wrap .navbar-collapse.mobile_side_menu .navbar-nav li.mobile-menu-item .btn-select-language,
    .header_wrap .navbar-collapse.mobile_side_menu .navbar-nav li.mobile-menu-item .btn-select-language span,
    .header_wrap .navbar-collapse.mobile_side_menu .navbar-nav li.mobile-menu-item .language-wrapper a,
    .header_wrap .navbar-collapse.mobile_side_menu .navbar-nav li.mobile-menu-item .language-wrapper a span {
        color: #111 !important;
        background: transparent !important;
    }

    .header_wrap .navbar-collapse.mobile_side_menu .navbar-nav li.mobile-menu-item .btn-select-language {
        width: 100%;
        padding: 9px 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        font-size: 15px;
        font-weight: 400;
        text-align: left;
    }
}

@media (min-width: 992px) {
    .pf-drawer-head,
    .pf-drawer-cats,
    .pf-drawer-shade {
        display: none !important;
    }
}

/* The grey placeholders shown while a section loads were wider than a phone and pushed the page sideways. */
.skeleton-loading-bg {
    max-width: 100%;
}

.d-flex:has(> [class*="skeleton-"]),
.row:has(> [class*="skeleton-"]),
[class*="skeleton-"]:has(> [class*="skeleton-"]) {
    max-width: 100%;
    overflow: hidden;
}

/* Product page: the gallery's arrows sat half off a phone's screen. */
@media (max-width: 575.98px) {
    .ec-cross-sale-arrows .slick-prev { left: 2px; }
    .ec-cross-sale-arrows .slick-next { right: 2px; }

    /* The contact form's row was 3px wider than the screen. */
    .contact-form-row { margin-left: 0 !important; margin-right: 0 !important; }
    .contact-form-row > [class*="contact-column-"] { padding-left: 0 !important; padding-right: 0 !important; }
}

/* Inside the phone menu every theme's links look the same: no pills, capitals or borrowed fonts from the desktop bar. */
@media (max-width: 991.98px) {
    .header_wrap .navbar-collapse.mobile_side_menu .navbar-nav > li > .nav-link,
    .header_wrap .navbar-collapse.mobile_side_menu .navbar-nav > li > a,
    .header_wrap .navbar-collapse.mobile_side_menu .navbar-nav > li > a.active,
    .header_wrap .navbar-collapse.mobile_side_menu .navbar-nav > li.active > a {
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #111 !important;
        font-family: inherit;
        line-height: 1.3;
    }

    .header_wrap .navbar-collapse.mobile_side_menu .navbar-nav > li > a::before,
    .header_wrap .navbar-collapse.mobile_side_menu .navbar-nav > li > a:not(.dropdown-toggle)::after {
        display: none !important;
    }

    .header_wrap .navbar-collapse.mobile_side_menu,
    .header_wrap .navbar-collapse.mobile_side_menu .dropdown-menu a,
    .pf-drawer-cats a {
        font-family: inherit;
    }

    .header_wrap .navbar-collapse.mobile_side_menu .navbar-nav {
        gap: 0 !important;
        flex-wrap: nowrap !important;
    }
}

/* The home banner without the categories panel beside it: held to the page width like everything
   else, with its words clear of the edge (it used to run edge to edge, text touching the screen). */
.banner_section.shop_banner_slider > .carousel {
    width: calc(100% - 24px);
    max-width: 1296px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    border-radius: var(--skin-radius-lg);
}

@media (min-width: 576px) { .banner_section.shop_banner_slider > .carousel { max-width: 516px; } }
@media (min-width: 768px) { .banner_section.shop_banner_slider > .carousel { max-width: 696px; } }
@media (min-width: 992px) { .banner_section.shop_banner_slider > .carousel { max-width: 936px; } }
@media (min-width: 1200px) { .banner_section.shop_banner_slider > .carousel { max-width: 1116px; } }
@media (min-width: 1400px) { .banner_section.shop_banner_slider > .carousel { max-width: 1296px; } }

.banner_section.shop_banner_slider > .carousel .banner_content_inner {
    padding: 0 clamp(20px, 6vw, 72px);
}

/* The search icon in the menu bar is printed white by the theme, whatever the bar's colour. */
.bottom_header .pr_search_trigger,
.bottom_header .pr_search_trigger.text-white,
.bottom_header .pr_search_trigger i {
    color: var(--header-menu-text-color, var(--skin-ink, #111)) !important;
}

/* The phone header's icons on one even line in every theme: search, account, wishlist, cart, menu. */
@media (max-width: 991.98px) {
    .bottom_header nav.navbar {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        gap: 2px;
        padding: 6px 0 !important;
    }

    .bottom_header nav.navbar > .pr_search_icon {
        display: flex !important;
        align-items: center;
        order: 1;
        float: none;
        margin: 0 0 0 auto;
    }

    .bottom_header nav.navbar > .attr-nav {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        order: 2;
        float: none !important;
        margin: 0;
    }

    .bottom_header nav.navbar > .attr-nav > li {
        float: none !important;
    }

    .bottom_header nav.navbar > .attr-nav > li > .nav-link,
    .bottom_header nav.navbar > .pr_search_icon .pr_search_trigger {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 42px;
        height: 42px;
        padding: 0 !important;
        line-height: 1;
    }

    .bottom_header nav.navbar > .attr-nav i,
    .bottom_header nav.navbar > .pr_search_icon i {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 20px;
    }

    .bottom_header nav.navbar > .attr-nav .cart_count,
    .bottom_header nav.navbar > .attr-nav .wishlist_count {
        top: 2px;
        right: 0;
    }

    .bottom_header nav.navbar > .side_navbar_toggler {
        order: 3;
        float: none;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        margin: 0 0 0 4px;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0;
        background: transparent !important;
        box-shadow: none !important;
        color: var(--header-menu-text-color, var(--skin-ink, #111)) !important;
        font-size: 22px;
    }

    /* The menu button: three thin lines, the weight of the icons beside it, with no box round them.
       (The theme's own glyph is much heavier than its neighbours.) */
    .bottom_header nav.navbar > .side_navbar_toggler > span { display: none !important; }

    .bottom_header nav.navbar > .side_navbar_toggler::before {
        content: "";
        display: block;
        width: 21px;
        height: 1.6px;
        border-radius: 2px;
        background: currentColor;
        box-shadow: 0 -6.5px 0 currentColor, 0 6.5px 0 currentColor;
    }
}

/* The cart drop-down sits inside the header's icon list, whose links take the menu's text colour.
   Its two buttons keep their own: a filled button with the menu's dark text had an unreadable label. */
.header_wrap .attr-nav li .cart_box a.btn-fill-out,
.header_wrap .attr-nav li .cart_box a.btn-fill-out:hover,
.header_wrap .attr-nav li .cart_box a.btn-fill-line:hover,
.header_wrap .navbar .attr-nav li .cart_box a.btn-fill-out,
.header_wrap .navbar .attr-nav li .cart_box a.btn-fill-out:hover,
.header_wrap .navbar .attr-nav li .cart_box a.btn-fill-line:hover {
    color: #fff !important;
}

.header_wrap .attr-nav li .cart_box a.btn-fill-line,
.header_wrap .navbar .attr-nav li .cart_box a.btn-fill-line {
    color: var(--skin-ink) !important;
}

.header_wrap .attr-nav li .cart_box a.btn {
    font-size: 15px;
}

/* The empty cart's one line of text sat against the top edge of its drop-down. */
.cart_box .cart_empty {
    margin: 0;
    padding: 26px 20px;
    color: var(--skin-muted, #6e6e73);
    font-size: 15px;
}

/* --------------------------------------------- search suggestions (typed in the header's search box)
   The list reuses the shop's product card, whose skin (no background, tall picture, large type) is meant
   for a grid. Here each result is one compact row on a white panel. */
.product_search_form form { position: relative; }

.panel--search-result,
.panel--search-result.active {
    border: 0 !important;
    margin-top: 8px;
}

.panel--search-result.active {
    background: #fff;
    border: 1px solid var(--skin-line) !important;
    border-radius: var(--skin-radius-lg, 14px);
    box-shadow: 0 18px 40px rgba(4, 4, 4, .12);
    overflow: hidden;
}

.panel--search-result .panel__content {
    max-height: min(420px, 60vh);
    overflow-y: auto;
    background: #fff;
    padding: 6px 0;
    margin: 0;
}

.panel--search-result .panel__content > .row { margin: 0; }

.panel--search-result .product_wrap {
    background: #fff !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 10px 16px !important;
    transform: none !important;
    overflow: visible;
}

.panel--search-result .product_wrap + .product_wrap { border-top: 1px solid var(--skin-line) !important; }
.panel--search-result .product_wrap:hover { background: var(--skin-surface) !important; }

.panel--search-result .product_wrap > .row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px;
    margin: 0 !important;
}

.panel--search-result .product_wrap > .row > [class*="col-"] {
    width: auto;
    max-width: none;
    padding: 0;
    flex: 0 0 auto;
}

.panel--search-result .product_wrap > .row > [class*="col-"]:last-child {
    flex: 1 1 auto;
    min-width: 0;
}

.panel--search-result .product-img,
.panel--search-result .product-img a {
    display: block;
    width: 56px;
    height: 56px;
    margin: 0;
    padding: 0;
    position: static;
    border-radius: 8px;
    overflow: hidden;
    background: var(--skin-surface);
}

.panel--search-result .product-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    position: static !important;
    transform: none !important;
}

.panel--search-result .product_info {
    padding: 0 !important;
    margin: 0;
    text-align: left;
    background: transparent;
    position: static;
}

.panel--search-result .product_title {
    margin: 0 0 2px;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel--search-result .product_title a { color: var(--skin-ink) !important; font-size: 15px; }
.panel--search-result .rating_wrap { display: none; }

.panel--search-result .product_price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
    margin: 0;
    float: none;
}

.panel--search-result .product_price .price { font-size: 14px; font-weight: 600; color: var(--skin-ink); }
.panel--search-result .product_price del { font-size: 13px; color: var(--skin-muted); margin: 0; }
.panel--search-result .on_sale { display: inline-block; position: static; margin: 0; font-size: 12px; }
.panel--search-result .on_sale span { font-size: 12px; }

.panel--search-result .panel__footer {
    background: #fff;
    border-top: 1px solid var(--skin-line);
    padding: 12px 16px;
}

.panel--search-result .panel__footer a {
    color: var(--skin-ink) !important;
    font-size: 14px;
    font-weight: 600;
}

.panel--search-result .panel__content.text-center {
    padding: 18px 16px !important;
    color: var(--skin-muted);
    font-size: 14px;
}

/* ------------------------------------------------------------ one header line on phones
   menu.js puts a copy of the logo at the start of the menu bar. On a phone the logo's own row is then
   hidden, and the bar reads: logo on the left; search, account, wishlist, cart and menu on the right. */
.bottom_header nav.navbar > .pf-nav-brand { display: none; }

@media (max-width: 991.98px) {
    .pf-brand-in-bar .middle-header {
        display: block !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .pf-brand-in-bar .middle-header .navbar-brand,
    .pf-brand-in-bar .middle-header .contact_phone { display: none !important; }

    .pf-brand-in-bar .bottom_header:not(.bottom_header_sticky) nav.navbar > .pf-nav-brand {
        display: flex !important;
        align-items: center;
        order: 0;
        flex: 0 1 auto;
        min-width: 0;
        margin: 0 auto 0 0;
        padding: 0;
        float: none;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.1;
        color: var(--skin-ink);
        text-decoration: none;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .pf-brand-in-bar .bottom_header:not(.bottom_header_sticky) nav.navbar > .pf-nav-brand img {
        display: block;
        width: auto;
        max-width: 100%;
        max-height: 32px;
    }

    .pf-brand-in-bar .bottom_header:not(.bottom_header_sticky) nav.navbar > .pf-nav-brand img + img { display: none; }

    .pf-brand-in-bar .bottom_header:not(.bottom_header_sticky) nav.navbar > .pr_search_icon { margin-left: 0; }

    .pf-brand-in-bar .bottom_header:not(.bottom_header_sticky) nav.navbar { padding: 8px 0 !important; }

    .pf-brand-in-bar .bottom_header nav.navbar > .navbar-toggler { order: 3; margin: 0; }
}

/* ------------------------------------------------------------ the search box on a phone
   Tapping the magnifier opens the search as a panel directly under the header, edge to edge. The theme
   placed it 146px below wherever it happened to sit, which put it over the page's first picture. */
@media (max-width: 991.98px) {
    .header_wrap { position: relative; }

    .header_wrap .middle-header,
    .header_wrap .middle-header .container,
    .header_wrap .middle-header .nav_block,
    .header_wrap .bottom_header:not(.bottom_header_sticky),
    .header_wrap .bottom_header:not(.bottom_header_sticky) .container,
    .header_wrap .bottom_header:not(.bottom_header_sticky) .row,
    .header_wrap .bottom_header:not(.bottom_header_sticky) .row > [class*="col-"],
    .header_wrap .bottom_header:not(.bottom_header_sticky) nav.navbar {
        position: static !important;
    }

    .header_wrap .product_search_form {
        display: none !important;
    }

    .header_wrap .product_search_form.show {
        display: block !important;
        position: absolute !important;
        top: 100% !important;
        bottom: auto !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 12px 16px 14px !important;
        background: #fff !important;
        border: 0 !important;
        border-bottom: 1px solid var(--skin-line) !important;
        box-shadow: 0 16px 28px rgba(4, 4, 4, .08);
        z-index: 1040;
    }

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

    .header_wrap .product_search_form .input-group {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        border: 1px solid transparent;
        border-radius: 999px;
        background: var(--skin-surface);
        overflow: hidden;
    }

    .header_wrap .product_search_form input.form-control {
        flex: 1 1 auto;
        width: auto;
        height: 46px;
        min-height: 46px;
        padding: 0 8px 0 20px !important;
        border: 0 !important;
        background: transparent !important;
        font-size: 16px; /* smaller than this and an iPhone zooms the page on focus */
    }

    .header_wrap .product_search_form .search_btn {
        position: static !important;
        flex: 0 0 auto;
        width: 48px;
        height: 46px;
        padding: 0 !important;
        border-radius: 0;
        background: transparent !important;
        color: var(--skin-ink) !important;
    }

    .header_wrap .product_search_form .panel--search-result {
        position: static;
        width: 100%;
    }

    /* The magnifier turns into a cross while the search is open (the theme's own swap), same size. */
    .bottom_header nav.navbar > .pr_search_icon .pr_search_trigger.show i::before { font-size: 20px; }
}

/* ---------------------------------------------- the bar that follows the page down, on a phone
   Its logo and its icons are two columns that the phone layout stacked: the logo on a line of its own,
   out of place, above the icons. They share one line, like the header at the top of the page. */
@media (max-width: 991.98px) {
    .bottom_header.bottom_header_sticky .row {
        flex-wrap: nowrap !important;
        align-items: center;
    }

    .bottom_header.bottom_header_sticky .row > [class*="col-"]:first-child {
        display: block !important;
        flex: 0 1 auto !important;
        width: auto !important;
        max-width: 48% !important;
        min-width: 0;
    }

    .bottom_header.bottom_header_sticky .row > [class*="col-"]:last-child {
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0;
    }

    .bottom_header.bottom_header_sticky .navbar-brand {
        display: flex !important;
        align-items: center;
        margin: 0;
        padding: 0 !important;
        font-size: 20px;
        font-weight: 700;
        line-height: 1.1;
        color: var(--skin-ink);
        text-decoration: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .bottom_header.bottom_header_sticky .navbar-brand img {
        display: block;
        width: auto;
        height: auto;
        max-width: 100%; /* a long name shrinks to fit beside the icons rather than being cut off */
        max-height: 32px;
        object-fit: contain;
    }

    .bottom_header.bottom_header_sticky nav.navbar { padding: 8px 0 !important; }
}

/* The same bar on a computer: the logo level with the menu beside it, not against the top edge. */
@media (min-width: 992px) {
    .bottom_header.bottom_header_sticky .row { align-items: center; }

    .bottom_header.bottom_header_sticky .navbar-brand {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;
    }

    .bottom_header.bottom_header_sticky .navbar-brand img {
        display: block;
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 36px;
    }
}

/* ------------------------------------------------ two more header layouts (computer)
   A theme's stylesheet asks for one with --pf-header and menu.js adds the class:
   center  the logo centred on its own row, the menu centred under it, the icons at the right of the menu;
   split   one row: the menu on the left, the logo in the middle, the icons on the right.
   In both the search is behind the magnifier and opens as a band under the header. */
@media (min-width: 992px) {
    .pf-header-center .bottom_header:not(.bottom_header_sticky) .row > [class*="col-"]:has(> .categories_wrap),
    .pf-header-split .bottom_header:not(.bottom_header_sticky) .row > [class*="col-"]:has(> .categories_wrap), .pf-header-balance .bottom_header:not(.bottom_header_sticky) .row > [class*="col-"]:has(> .categories_wrap) {
        display: none !important;
    }

    .pf-header-center .bottom_header:not(.bottom_header_sticky) .row > [class*="col-"]:has(> nav.navbar),
    .pf-header-split .bottom_header:not(.bottom_header_sticky) .row > [class*="col-"]:has(> nav.navbar), .pf-header-balance .bottom_header:not(.bottom_header_sticky) .row > [class*="col-"]:has(> nav.navbar) {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    .pf-header-center .header_wrap,
    .pf-header-split .header_wrap, .pf-header-balance .header_wrap { position: relative; }

    .pf-header-center .header_wrap .middle-header,
    .pf-header-center .header_wrap .middle-header .container,
    .pf-header-center .header_wrap .middle-header .nav_block,
    .pf-header-split .header_wrap .middle-header, .pf-header-balance .header_wrap .middle-header,
    .pf-header-split .header_wrap .middle-header .container, .pf-header-balance .header_wrap .middle-header .container,
    .pf-header-split .header_wrap .middle-header .nav_block, .pf-header-balance .header_wrap .middle-header .nav_block {
        position: static !important;
    }

    .pf-header-center .header_wrap .middle-header .product_search_form,
    .pf-header-split .header_wrap .middle-header .product_search_form, .pf-header-balance .header_wrap .middle-header .product_search_form,
    .pf-header-center .header_wrap .middle-header .contact_phone,
    .pf-header-split .header_wrap .middle-header .contact_phone, .pf-header-balance .header_wrap .middle-header .contact_phone {
        display: none !important;
    }

    .pf-header-center .header_wrap .middle-header .product_search_form.show,
    .pf-header-split .header_wrap .middle-header .product_search_form.show, .pf-header-balance .header_wrap .middle-header .product_search_form.show {
        display: block !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 22px max(16px, calc((100% - 760px) / 2)) 26px !important;
        background: var(--sx-page, #fff) !important;
        border: 0 !important;
        border-bottom: 1px solid var(--skin-line) !important;
        box-shadow: 0 24px 40px rgba(4, 4, 4, .08);
        z-index: 1040;
    }

    .pf-header-center .product_search_form.show .input-group-prepend,
    .pf-header-split .product_search_form.show .input-group-prepend, .pf-header-balance .product_search_form.show .input-group-prepend { display: none !important; }

    .pf-header-center .product_search_form.show .input-group,
    .pf-header-split .product_search_form.show .input-group, .pf-header-balance .product_search_form.show .input-group {
        display: flex;
        flex-wrap: nowrap;
        border: 1px solid var(--skin-line) !important;
        border-radius: var(--sx-btn-radius, 999px);
        background: #fff;
        overflow: hidden;
    }

    .pf-header-center .product_search_form.show input.form-control,
    .pf-header-split .product_search_form.show input.form-control, .pf-header-balance .product_search_form.show input.form-control {
        height: 52px;
        padding: 0 20px !important;
        border: 0 !important;
        font-size: 16px;
    }

    .pf-header-center .product_search_form.show .search_btn,
    .pf-header-split .product_search_form.show .search_btn, .pf-header-balance .product_search_form.show .search_btn {
        position: static !important;
        width: 56px;
        background: transparent !important;
        color: var(--skin-ink) !important;
    }

    .pf-header-center .product_search_form.show .panel--search-result,
    .pf-header-split .product_search_form.show .panel--search-result, .pf-header-balance .product_search_form.show .panel--search-result {
        position: static;
        width: 100%;
    }

    .pf-header-center .bottom_header:not(.bottom_header_sticky) nav.navbar > .pr_search_icon,
    .pf-header-split .bottom_header:not(.bottom_header_sticky) nav.navbar > .pr_search_icon, .pf-header-balance .bottom_header:not(.bottom_header_sticky) nav.navbar > .pr_search_icon {
        display: flex !important;
        align-items: center;
    }

    /* center */
    .pf-header-center .middle-header { padding: 26px 0 10px; }
    .pf-header-center .middle-header .nav_block { justify-content: center !important; }
    .pf-header-center .middle-header .navbar-brand { margin: 0 auto; }
    .pf-header-center .middle-header .navbar-brand img { max-height: 56px; width: auto; }

    .pf-header-center .bottom_header:not(.bottom_header_sticky) nav.navbar {
        position: relative;
        display: flex;
        justify-content: center;
        min-height: 54px;
        padding: 0 120px;
    }

    .pf-header-center .bottom_header:not(.bottom_header_sticky) nav.navbar > .navbar-collapse { flex: 0 1 auto; justify-content: center; }

    .pf-header-center .bottom_header:not(.bottom_header_sticky) nav.navbar > .attr-nav {
        position: absolute;
        right: 36px;
        top: 50%;
        transform: translateY(-50%);
        flex-direction: row;
    }

    .pf-header-center .bottom_header:not(.bottom_header_sticky) nav.navbar > .pr_search_icon {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }

    /* split */
    .pf-header-split .middle-header, .pf-header-balance .middle-header {
        display: block !important;
        height: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        overflow: visible;
    }

    .pf-header-split .middle-header .navbar-brand, .pf-header-balance .middle-header .navbar-brand { display: none !important; }

    .pf-header-split .bottom_header:not(.bottom_header_sticky) nav.navbar, .pf-header-balance .bottom_header:not(.bottom_header_sticky) nav.navbar {
        position: relative;
        display: flex;
        align-items: center;
        min-height: 84px;
    }

    .pf-header-split .bottom_header:not(.bottom_header_sticky) nav.navbar > .navbar-collapse, .pf-header-balance .bottom_header:not(.bottom_header_sticky) nav.navbar > .navbar-collapse {
        flex: 0 1 auto;
        max-width: calc(50% - 130px);
    }

    .pf-header-split .bottom_header:not(.bottom_header_sticky) nav.navbar > .navbar-collapse .navbar-nav, .pf-header-balance .bottom_header:not(.bottom_header_sticky) nav.navbar > .navbar-collapse .navbar-nav { flex-wrap: wrap; }

    .pf-header-split .bottom_header:not(.bottom_header_sticky) nav.navbar > .pf-nav-brand, .pf-header-balance .bottom_header:not(.bottom_header_sticky) nav.navbar > .pf-nav-brand {
        display: flex !important;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        margin: 0;
        padding: 0;
        font-size: 26px;
        line-height: 1;
        color: var(--skin-ink);
        text-decoration: none;
        white-space: nowrap;
    }

    .pf-header-split .bottom_header:not(.bottom_header_sticky) nav.navbar > .pf-nav-brand img, .pf-header-balance .bottom_header:not(.bottom_header_sticky) nav.navbar > .pf-nav-brand img { display: block; width: auto; max-height: 46px; }
    .pf-header-split .bottom_header:not(.bottom_header_sticky) nav.navbar > .pf-nav-brand img + img, .pf-header-balance .bottom_header:not(.bottom_header_sticky) nav.navbar > .pf-nav-brand img + img { display: none; }

    .pf-header-split .bottom_header:not(.bottom_header_sticky) nav.navbar > .pr_search_icon, .pf-header-balance .bottom_header:not(.bottom_header_sticky) nav.navbar > .pr_search_icon { margin-left: auto; order: 3; }
    .pf-header-split .bottom_header:not(.bottom_header_sticky) nav.navbar > .attr-nav, .pf-header-balance .bottom_header:not(.bottom_header_sticky) nav.navbar > .attr-nav { order: 4; flex-direction: row; margin: 0; }
}

/* split, with a menu too long for one line beside the logo (menu.js): the logo centred on top, the menu
   centred on one line under it, the icons level with the logo. */
@media (min-width: 992px) {
    .pf-header-split-stacked .bottom_header:not(.bottom_header_sticky) nav.navbar {
        flex-wrap: wrap;
        justify-content: center;
        min-height: 0;
        padding: 0 !important;
    }

    .pf-header-split-stacked .bottom_header:not(.bottom_header_sticky) nav.navbar > .pf-nav-brand {
        position: static;
        transform: none;
        flex: 0 0 100%;
        justify-content: center;
        order: 0;
        padding: 22px 0 12px;
    }

    .pf-header-split-stacked .bottom_header:not(.bottom_header_sticky) nav.navbar > .navbar-collapse {
        order: 1;
        flex: 0 0 100%;
        max-width: 100%;
        justify-content: center;
        padding-bottom: 6px;
    }

    .pf-header-split-stacked .bottom_header:not(.bottom_header_sticky) nav.navbar > .navbar-collapse .navbar-nav {
        flex-wrap: wrap;
        justify-content: center;
    }

    .pf-header-split-stacked .bottom_header:not(.bottom_header_sticky) nav.navbar > .pr_search_icon,
    .pf-header-split-stacked .bottom_header:not(.bottom_header_sticky) nav.navbar > .attr-nav {
        position: absolute;
        top: 36px;
        transform: translateY(-50%);
        margin: 0;
    }

    .pf-header-split-stacked .bottom_header:not(.bottom_header_sticky) nav.navbar > .attr-nav { right: 0; }
    .pf-header-split-stacked .bottom_header:not(.bottom_header_sticky) nav.navbar > .pr_search_icon { right: 132px; }
    .pf-header-split-stacked .bottom_header:not(.bottom_header_sticky) .container { position: relative; }
}

/* Product tabs stay side by side on a phone (the theme stacks them, one per line). */
@media (max-width: 767.98px) {
    .pf-product-tabs .tab-style3 .nav-tabs { display: flex; flex-direction: row; flex-wrap: wrap; }
    .pf-product-tabs .tab-style3 .nav-tabs li.nav-item { flex: 0 0 auto; width: auto; }
}

/* ------------------------------------------------ shop filters: across the top, or behind a button
   A theme asks with --pf-filters (menu.js adds the class): top lays the filter boxes side by side above
   the products; toggle hides them behind a "Filter" button in the sort bar. The products then take the
   whole width. */
@media (min-width: 992px) {
    .pf-filters-top .pf-shop-main,
    .pf-filters-top .pf-shop-filters,
    .pf-filters-toggle .pf-shop-main,
    .pf-filters-toggle .pf-shop-filters {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .pf-filters-top .pf-shop-filters,
    .pf-filters-toggle .pf-shop-filters { order: -1; margin-bottom: 28px; }

    .pf-filters-top .pf-shop-filters .bb-product-form-filter,
    .pf-filters-toggle .pf-shop-filters .bb-product-form-filter {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 16px;
        align-items: start;
    }

    .pf-filters-top .pf-shop-filters .bb-product-filter,
    .pf-filters-toggle .pf-shop-filters .bb-product-filter {
        margin: 0 !important;
        max-height: 260px;
        overflow-y: auto;
    }
}

.pf-filters-toggle .pf-shop-filters { display: none; }
.pf-filters-open .pf-shop-filters { display: block; }

.pf-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
    padding: 9px 16px;
    border: 1px solid var(--skin-line);
    background: transparent;
    color: var(--skin-ink);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.pf-filters-open .pf-filter-toggle { background: var(--skin-ink); border-color: var(--skin-ink); color: #ffffff; }
.pf-filters-toggle .pf-shop-main .product_header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* The coupon box keeps a readable width when a theme narrows the cart. */
.pf-cart .shop_cart_table tfoot .row > [class*="col-"] { flex: 0 0 auto; width: 100%; max-width: 400px; }

/* ------------------------------------------------ product cards: the second photo on hover */
.product .product_img > a,
.product_wrap .product_img > a { position: relative; display: block; height: 100%; }

.product .product_img .pf-card-second,
.product_wrap .product_img .pf-card-second {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .35s ease;
}

@media (hover: hover) {
    .product:hover .product_img .pf-card-second,
    .product_wrap:hover .product_img .pf-card-second { opacity: 1; }
}

/* ------------------------------------------------ keyboard focus, and less motion when asked */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--skin-accent, #111111) !important;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* ------------------------------------------------ the add-to-cart bar on a phone (menu.js)
   Once the product page's own button has scrolled away, a bar at the bottom keeps the name, the price
   and the button in reach. Each theme's button style applies. */
.pf-buy-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--skin-line, #e7e7e7);
    background: var(--sx-page, #ffffff);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .08);
    transform: translateY(110%);
    transition: transform .25s ease;
}

.pf-buy-bar.pf-on { transform: none; }
.pf-buy-bar-text { flex: 1 1 auto; min-width: 0; }
.pf-buy-bar-name { display: block; overflow: hidden; color: var(--skin-ink, #111111); font-size: 14px; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.pf-buy-bar-price { display: block; color: var(--skin-muted, #686666); font-size: 13px; }
.pf-buy-bar .btn { flex: 0 0 auto; margin: 0 !important; padding: 12px 20px !important; white-space: nowrap; }

@media (min-width: 992px) {
    .pf-buy-bar { display: none !important; }
}

/* balance: the logo in the middle with half the menu on each side (menu.js copies the second half), the
   search and the account icons at the far right. */
.pf-menu-right { display: none; }

@media (min-width: 992px) {
    .pf-header-balance .bottom_header:not(.bottom_header_sticky) nav.navbar {
        position: relative;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        min-height: 78px;
        padding: 0 !important;
    }

    .pf-header-balance .bottom_header:not(.bottom_header_sticky) nav.navbar > .navbar-collapse {
        order: 1;
        flex: 1 1 0;
        max-width: none;
        justify-content: flex-end;
    }

    .pf-header-balance .bottom_header:not(.bottom_header_sticky) nav.navbar > .navbar-collapse .navbar-nav { flex-wrap: nowrap; }
    .pf-header-balance .bottom_header:not(.bottom_header_sticky) .pf-menu-moved { display: none !important; }

    .pf-header-balance .bottom_header:not(.bottom_header_sticky) nav.navbar > .pf-nav-brand {
        position: static;
        order: 2;
        flex: 0 0 auto;
        margin: 0 28px;
        transform: none;
    }

    .pf-header-balance .bottom_header:not(.bottom_header_sticky) nav.navbar > .pf-menu-right {
        display: flex;
        order: 3;
        flex: 1 1 0;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
        margin: 0;
    }

    .pf-header-balance .bottom_header:not(.bottom_header_sticky) nav.navbar > .pr_search_icon { order: 4; margin: 0 0 0 auto; }
    .pf-header-balance .bottom_header:not(.bottom_header_sticky) nav.navbar > .attr-nav { order: 5; flex-direction: row; margin: 0; }
    .pf-header-balance .bottom_header:not(.bottom_header_sticky) .container { position: relative; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .pf-header-balance .bottom_header .navbar-nav:not(.attr-nav) > li > .nav-link { padding: 8px 8px !important; font-size: 14.5px !important; }
}

/* Product names always take two lines in a grid, so the prices line up. */
.product .product_title,
.product_wrap .product_title {
    display: -webkit-box !important;
    overflow: hidden;
    line-height: 1.35 !important;
    white-space: normal !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.product .product_title a,
.product_wrap .product_title a { white-space: normal !important; }

.shop_container .product,
.shop_container .product_wrap { display: flex; flex-direction: column; height: 100%; }
.shop_container .product .product_info { display: flex; flex: 1 1 auto; flex-direction: column; }
.shop_container .product .product_price { margin-top: auto; }

/* ------------------------------------------------ phones: shop, category, search, brand and tag pages
   Two products a row (the category page had one huge one), a one-line sort bar, and lighter cards: the
   name on one line, a single round cart button on the photo instead of the four-button bar. */
@media (max-width: 767.98px) {
    .pf-shop .shop_container,
    .pf-shop .shop_container.row {
        --bs-gutter-x: 14px;
        row-gap: 22px;
    }

    .pf-shop .shop_container > [class*="col"] {
        flex: 0 0 50% !important;
        width: 50% !important;
        max-width: 50% !important;
    }

    .pf-shop .shop_container > .col-12 { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; }

    .pf-shop .product_header {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    .pf-shop .product_header_left,
    .pf-shop .product_header_right { display: flex; align-items: center; gap: 8px; margin: 0 !important; }
    .pf-shop .product_header_left { flex: 1 1 auto; min-width: 0; }
    .pf-shop .product_header_left .custom_select,
    .pf-shop .product_header_left select { width: 100%; }
    .pf-shop .products_view { display: none !important; }
    .pf-shop .product_header select { height: 40px; font-size: 14px; }

    .pf-shop .product .product_img,
    .pf-shop .product_wrap .product_img { aspect-ratio: 4 / 5; }

    .pf-shop .product_info { padding: 10px 2px 2px !important; }

    .pf-shop .product .product_title,
    .pf-shop .product .product_title a {
        display: block !important;
        min-height: 0;
        overflow: hidden;
        font-size: 14.5px !important;
        white-space: nowrap !important;
        text-overflow: ellipsis;
        -webkit-line-clamp: unset;
    }

    .pf-shop .product_price { margin-top: 4px; }
    .pf-shop .product_price .price { font-size: 15px !important; }
    .pf-shop .product_price del { font-size: 12.5px; }
    .pf-shop .on_sale { display: none !important; }
    .pf-shop .pr_flash { top: 8px; left: 8px; padding: 2px 7px; font-size: 10.5px; }

    /* Only the cart button, round, in the corner of the photo. */
    .pf-shop .product_action_box {
        top: auto !important;
        left: auto !important;
        right: 8px !important;
        bottom: 8px !important;
        width: auto !important;
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }

    .pf-shop .pr_action_btn { display: block !important; padding: 0 !important; background: transparent !important; box-shadow: none !important; }
    .pf-shop .pr_action_btn li { display: none !important; }
    .pf-shop .pr_action_btn li.add-to-cart { display: block !important; margin: 0 !important; }

    .pf-shop .pr_action_btn li.add-to-cart a {
        display: grid !important;
        place-items: center;
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: var(--skin-ink, #111111) !important;
        color: #ffffff !important;
        font-size: 0 !important;
        box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
    }

    .pf-shop .pr_action_btn li.add-to-cart a i { font-size: 16px !important; margin: 0 !important; }
}

@media (max-width: 767.98px) {
    .pf-shop .shop_container .product .product_price { margin-top: 2px !important; }
    .pf-shop .shop_container .product .product_info { flex: 0 0 auto; }
    .pf-shop .product .product_title { margin-bottom: 0 !important; }
}

@media (max-width: 767.98px) {
    .pf-shop .shop_container .product,
    .pf-shop .shop_container .product_wrap { height: auto !important; margin-bottom: 0 !important; }
    .pf-shop .shop_container { row-gap: 18px !important; }
}

/* Photos are cropped from the top, so people keep their heads (fashion photos are taller than the frame). */
.product .product_img img,
.product_wrap .product_img img,
.pf-product .product_img_box img { object-position: center top !important; }

/* Phones: related products and "also bought" two a row like the other lists, with the cart button only. */
@media (max-width: 767.98px) {
    .releted_product_slider .product_title,
    .releted_product_slider .product_title a { font-size: 14px !important; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; display: block !important; }
    .releted_product_slider .product_price .price { font-size: 15px !important; }
    .releted_product_slider .on_sale { display: none !important; }
    .releted_product_slider .pr_action_btn li { display: none !important; }
    .releted_product_slider .pr_action_btn li.add-to-cart { display: block !important; }
    .releted_product_slider .product_action_box { left: auto !important; right: 8px !important; bottom: 8px !important; top: auto !important; width: auto !important; opacity: 1 !important; transform: none !important; }
    .releted_product_slider .pr_action_btn { background: transparent !important; box-shadow: none !important; padding: 0 !important; }
    .releted_product_slider .pr_action_btn li.add-to-cart a { display: grid !important; place-items: center; width: 36px !important; height: 36px !important; padding: 0 !important; border-radius: 50% !important; background: var(--skin-ink, #111) !important; color: #fff !important; font-size: 0 !important; }
    .releted_product_slider .pr_action_btn li.add-to-cart a i { font-size: 15px !important; margin: 0 !important; }
}

/* The phone menu, in every theme: links, language, currency and categories all start at the same edge, with
   the same thin line between them. (The themes' desktop menu rules were indenting the links.) */
@media (max-width: 991.98px) {
    html body .header_wrap .navbar-collapse.mobile_side_menu .navbar-nav > li > .nav-link,
    html body .header_wrap .navbar-collapse.mobile_side_menu .navbar-nav > li > a {
        padding: 15px 0 !important;
        font-size: 17px !important;
        font-weight: 500 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        white-space: normal;
    }

    html body .header_wrap .navbar-collapse.mobile_side_menu .navbar-nav > li,
    html body .header_wrap .navbar-collapse.mobile_side_menu .navbar-nav > li.mobile-menu-item {
        border: 0 !important;
        border-bottom: 1px solid var(--skin-line, #ececee) !important;
    }

    html body .header_wrap .navbar-collapse.mobile_side_menu .navbar-nav > li.mobile-menu-item { padding: 4px 0; }
    html body .header_wrap .navbar-collapse.mobile_side_menu .navbar-nav li.mobile-menu-item .btn-select-language { padding: 10px 0 !important; font-size: 15px !important; }

    .pf-drawer-cats li { border-bottom: 1px solid var(--skin-line, #ececee); }
    .pf-drawer-cats li:last-child { border-bottom: 0; }
    .pf-drawer-cats a { padding: 13px 0 !important; font-size: 16px !important; }
}

@media (max-width: 991.98px) {
    html body .header_wrap .navbar-collapse.mobile_side_menu .navbar-nav li.mobile-menu-item,
    html body .header_wrap .navbar-collapse.mobile_side_menu .navbar-nav li.mobile-menu-item .language-wrapper,
    html body .header_wrap .navbar-collapse.mobile_side_menu .navbar-nav li.mobile-menu-item .dropdown { border-top: 0 !important; }
}

/* Phones have no hover: the product photo's hover zoom (and its hidden box hanging off the screen) is off. */
@media (max-width: 991.98px) {
    .zoomContainer,
    .zoomWindowContainer { display: none !important; }
}

/* ------------------------------------------------------------------------------------------------
   A website that does not sell (a portfolio, personal page or business website with selling off):
   no product search, category button, customer sign-in, compare or price filter. Botble's own
   switches already take away the cart, wishlist, prices and checkout.
   ------------------------------------------------------------------------------------------------ */
body[data-pf-sell="0"] .middle-header .product_search_form,
body[data-pf-sell="0"] .categories_wrap,
body[data-pf-sell="0"] #navCatContent,
body[data-pf-sell="0"] .pr_search_icon,
body[data-pf-sell="0"] .top-header .header_list,
body[data-pf-sell="0"] .navbar-nav.attr-nav > li:has(a[href*="/customer"]),
body[data-pf-sell="0"] .navbar-nav.attr-nav > li:has(a[href*="/login"]),
body[data-pf-sell="0"] .pf-drawer-cats,
body[data-pf-sell="0"] .bb-product-filter:has(.bb-product-price-filter),
body[data-pf-sell="0"] .bb-product-filter:has([name="min_price"]),
body[data-pf-sell="0"] .product_header .custom_select:has(select[name="sort-by"]),
body[data-pf-sell="0"] .rating_wrap,
body[data-pf-sell="0"] .sp-card-rating,
body[data-pf-sell="0"] .pf-buy-bar { display: none !important; }

/* Without the shop's second header row items, the logo and menu share one line. */
body[data-pf-sell="0"] .middle-header .product_search_form + * { margin-left: auto; }

/* ...and no currency switch or shopper account column in the footer either. */
body[data-pf-sell="0"] .product_search_form,
body[data-pf-sell="0"] .search_wrap,
body[data-pf-sell="0"] .choose-currency,
body[data-pf-sell="0"] .language-wrapper.choose-currency,
body[data-pf-sell="0"] footer .widget:has(a[href*="/customer"]),
body[data-pf-sell="0"] footer .widget:has(a[href*="orders/tracking"]),
body[data-pf-sell="0"] footer [class*="col-"]:has(> .widget a[href*="/customer"]) { display: none !important; }

/* Cookie notice on phones: a slim bar at the bottom instead of a card over a third of the screen. One line of
   text, the three choices side by side, no title row (the close button there does the same as "Essential only"). */
@media (max-width: 639px) {
    body .site-notice { left: 8px; right: 8px; bottom: 8px; }
    body .site-notice .site-notice-body { border-radius: 14px; box-shadow: 0 8px 28px rgba(0, 0, 0, .18); }
    body .site-notice .site-notice__header { display: none; }
    body .site-notice .site-notice__content { padding: 10px 12px; }
    body .site-notice .site-notice__message { font-size: 12px; line-height: 1.4; }
    body .site-notice .site-notice__actions { margin-top: 8px; flex-direction: row; flex-wrap: wrap; gap: 6px; }
    body .site-notice .site-notice__actions button { flex: 1 1 0; min-width: 0; padding: 7px 8px; font-size: 11.5px; white-space: nowrap; }
    body .site-notice .site-notice__actions .site-notice__accept-all { flex-basis: 100%; }
}

/* Page layouts chosen in Store design > Theme (StoreDesign::layoutAttributes). Wide screens only: on phones the
   pictures always come first and the filters sit above the products. */
@media (min-width: 992px) {
    body[data-pf-product="gallery-right"] .pf-product-top { flex-direction: row-reverse; }
    body[data-pf-product="wide-gallery"] .pf-product-top > .pf-product-media { flex: 0 0 58%; max-width: 58%; }
    body[data-pf-product="wide-gallery"] .pf-product-top > .pf-product-info { flex: 0 0 42%; max-width: 42%; }
    body[data-pf-product="stacked"] .pf-product-top > .pf-product-media,
    body[data-pf-product="stacked"] .pf-product-top > .pf-product-info { flex: 0 0 100%; max-width: 100%; }
    body[data-pf-product="stacked"] .pf-product-top > .pf-product-media { max-width: 860px; margin: 0 auto 32px; }
    body[data-pf-product="stacked"] .pf-product-top > .pf-product-info { max-width: 860px; margin: 0 auto; }

    body[data-pf-shop="left"] .pf-shop-filters { order: 0 !important; }
    body[data-pf-shop="right"] .pf-shop-filters { order: 2 !important; }
    body[data-pf-shop="none"] .pf-shop-filters { display: none !important; }
    body[data-pf-shop="none"] .pf-shop-main { flex: 0 0 100%; max-width: 100%; }
}

/* ------------------------------------------------ the header as one line (computer)
   Logo, menu, search and the account icons on a single row, in place of a logo row over a menu row: a style asks
   for it with --pf-header: row (Runway), or the shop chooses it in Store design. menu.js moves the logo and the
   search box into the bar. */
@media (min-width: 992px) {
    .pf-header-row .middle-header { display: none !important; }

    .pf-header-row .bottom_header:not(.bottom_header_sticky) nav.navbar {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: clamp(12px, 2vw, 32px);
        padding: 14px 0;
    }

    .pf-header-row .bottom_header:not(.bottom_header_sticky) nav.navbar > .pf-nav-brand {
        display: flex !important;
        align-items: center;
        flex: 0 0 auto;
        margin: 0;
        padding: 0;
        font-size: 24px;
        font-weight: 700;
        line-height: 1.1;
        color: var(--header-menu-text-color, var(--skin-ink));
        text-decoration: none;
        white-space: nowrap;
    }

    .pf-header-row .bottom_header:not(.bottom_header_sticky) nav.navbar > .pf-nav-brand img { display: block; width: auto; max-height: 36px; }
    .pf-header-row .bottom_header:not(.bottom_header_sticky) nav.navbar > .pf-nav-brand img + img { display: none; }

    .pf-header-row .bottom_header:not(.bottom_header_sticky) nav.navbar > .navbar-collapse {
        flex: 0 1 auto;
        min-width: 0;
    }

    .pf-header-row .bottom_header:not(.bottom_header_sticky) nav.navbar > .product_search_form {
        flex: 1 1 200px;
        width: auto;
        min-width: 150px;
        max-width: 360px;
        margin: 0 0 0 auto;
        border: 0;
        background: transparent;
    }

    .pf-header-row .bottom_header:not(.bottom_header_sticky) nav.navbar > .product_search_form input.form-control { height: 42px; }

    .pf-header-row .bottom_header:not(.bottom_header_sticky) nav.navbar > .attr-nav {
        flex: 0 0 auto;
        flex-direction: row;
        margin: 0;
    }

    /* The suggestions open under the search box, wide enough to read whatever the box's width. */
    .pf-header-row nav.navbar > .product_search_form .panel--search-result {
        left: auto;
        right: 0;
        width: max(100%, 380px);
    }
}

/* A menu too long for the one line (menu.js adds pf-header-row-stacked): logo, search and icons stay on
   the first line and the menu takes a full line of its own under them. */
@media (min-width: 992px) {
    .pf-header-row-stacked .bottom_header:not(.bottom_header_sticky) nav.navbar { flex-wrap: wrap; row-gap: 10px; }
    .pf-header-row-stacked .bottom_header:not(.bottom_header_sticky) nav.navbar > .navbar-collapse { order: 99; flex: 1 0 100%; }
    .pf-header-row-stacked .bottom_header:not(.bottom_header_sticky) nav.navbar > .navbar-collapse > .navbar-nav { flex-wrap: wrap; }
}

/* A long menu on a narrower computer screen: tighter links, and the search box gives way first. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .pf-header-row .bottom_header .navbar-nav:not(.attr-nav) > li > .nav-link { padding: 8px 11px; font-size: 14px; }
    .pf-header-row .bottom_header:not(.bottom_header_sticky) nav.navbar > .product_search_form { max-width: 220px; }
}

/* In the one line the menu takes the whole bar (no "All categories" column: the categories are in the menu and the
   search) and the search box is a plain box, without its category picker. */
@media (min-width: 992px) {
    .pf-header-row .bottom_header:not(.bottom_header_sticky) .row > [class*="col-"]:has(> .categories_wrap) { display: none !important; }
    .pf-header-row .bottom_header:not(.bottom_header_sticky) .row > [class*="col-"]:has(> nav.navbar) { flex: 0 0 100%; max-width: 100%; width: 100%; }
    .pf-header-row nav.navbar > .product_search_form .input-group-prepend { display: none !important; }
}

/* ------------------------------------------------ the search behind the magnifier (computer)
   A style asks for it with --pf-search: icon, or the shop chooses it in Store design; menu.js adds pf-search-icon.
   The box is hidden; the magnifier beside the account icons opens it as a band under the header (the theme's script
   adds .show), the same as on a phone. */
@media (min-width: 992px) {
    .pf-search-icon .header_wrap { position: relative; }

    .pf-search-icon .header_wrap .middle-header,
    .pf-search-icon .header_wrap .middle-header .container,
    .pf-search-icon .header_wrap .middle-header .nav_block,
    .pf-search-icon .header_wrap .bottom_header:not(.bottom_header_sticky),
    .pf-search-icon .header_wrap .bottom_header:not(.bottom_header_sticky) .container,
    .pf-search-icon .header_wrap .bottom_header:not(.bottom_header_sticky) .row,
    .pf-search-icon .header_wrap .bottom_header:not(.bottom_header_sticky) .row > [class*="col-"],
    .pf-search-icon .header_wrap .bottom_header:not(.bottom_header_sticky) nav.navbar {
        position: static !important;
    }

    .pf-search-icon .header_wrap .product_search_form:not(.show) { display: none !important; }

    /* In the one line the logo's own row has nothing left to show: it stays only to hold the search band. */
    .pf-search-icon.pf-header-row .header_wrap .middle-header {
        display: block !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    .pf-search-icon.pf-header-row .header_wrap .middle-header .navbar-brand,
    .pf-search-icon.pf-header-row .header_wrap .middle-header .contact_phone { display: none !important; }

    .pf-search-icon .header_wrap .product_search_form.show {
        display: block !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 22px max(16px, calc((100% - 760px) / 2)) 26px !important;
        background: var(--sx-page, #fff) !important;
        border: 0 !important;
        border-bottom: 1px solid var(--skin-line) !important;
        box-shadow: 0 24px 40px rgba(4, 4, 4, .08);
        z-index: 1040;
    }

    .pf-search-icon .header_wrap .product_search_form.show .input-group-prepend { display: none !important; }

    .pf-search-icon .header_wrap .product_search_form.show .input-group {
        display: flex;
        flex-wrap: nowrap;
        border: 1px solid var(--skin-line) !important;
        border-radius: var(--sx-btn-radius, 999px);
        background: #fff;
        overflow: hidden;
    }

    .pf-search-icon .header_wrap .product_search_form.show input.form-control {
        height: 52px;
        padding: 0 20px !important;
        border: 0 !important;
        background: #fff !important;
        font-size: 16px;
    }

    .pf-search-icon .header_wrap .product_search_form.show .search_btn {
        position: static !important;
        width: 56px;
        background: transparent !important;
        color: var(--skin-ink) !important;
    }

    .pf-search-icon .header_wrap .product_search_form.show .panel--search-result { position: static; width: 100%; }

    /* The magnifier, just before the account icons. */
    .pf-search-icon .bottom_header:not(.bottom_header_sticky) nav.navbar > .pr_search_icon {
        display: flex !important;
        align-items: center;
        order: 8;
        float: none;
        margin: 0 0 0 auto;
    }

    .pf-search-icon .bottom_header:not(.bottom_header_sticky) nav.navbar > .attr-nav { order: 9; }

    .pf-search-icon .bottom_header nav.navbar > .pr_search_icon .pr_search_trigger {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 42px;
        height: 42px;
        padding: 0 !important;
        color: var(--header-menu-text-color, var(--skin-ink)) !important;
    }

    .pf-search-icon .bottom_header nav.navbar > .pr_search_icon i { margin: 0 !important; font-size: 20px; }
}

/* The "All categories" button kept in the one line, beside the logo (--pf-row-categories: keep). Its list opens under it. */
@media (min-width: 992px) {
    .pf-row-categories .bottom_header:not(.bottom_header_sticky) nav.navbar > .categories_wrap {
        position: relative;
        flex: 0 0 auto;
        width: auto;
        z-index: 30;
    }

    .pf-row-categories .bottom_header:not(.bottom_header_sticky) nav.navbar > .categories_wrap .categories_btn {
        width: auto;
        height: 44px;
        padding: 0 20px;
        white-space: nowrap;
    }

    .pf-row-categories .bottom_header:not(.bottom_header_sticky) nav.navbar > .categories_wrap #navCatContent {
        position: absolute;
        top: 100%;
        left: 0;
        width: 280px;
    }
}
@media (max-width: 991.98px) {
    .pf-row-categories .bottom_header nav.navbar > .categories_wrap { display: none !important; }
}

/* The strip above the header (currency, language, sign-in), hidden in Store design. Sign-in stays in the menu bar. */
body[data-pf-topbar="hide"] .header_wrap .top-header { display: none !important; }

/* Menu bar colours the store set in Store design, different from its style's (StoreDesign::menuColourAttributes):
   they win over the style's own. The links are coloured on a computer only; on a phone they sit in the drawer. */
html body[data-pf-menu-bg="custom"] .header_wrap .bottom_header:not(.bottom_header_sticky),
html body[data-pf-menu-bg="custom"] .header_wrap .bottom_header.bottom_header_sticky { background: var(--header-menu-background-color) !important; }
html body[data-pf-menu-ink="custom"] .header_wrap .bottom_header .attr-nav .nav-link,
html body[data-pf-menu-ink="custom"] .header_wrap .bottom_header .attr-nav .nav-link i,
html body[data-pf-menu-ink="custom"] .header_wrap .bottom_header .navbar-toggler,
html body[data-pf-menu-ink="custom"] .header_wrap .bottom_header .pr_search_trigger { color: var(--header-menu-text-color) !important; }
@media (min-width: 992px) {
    html body[data-pf-menu-ink="custom"] .header_wrap .bottom_header .navbar-collapse .navbar-nav > li > .nav-link,
    html body[data-pf-menu-ink="custom"] .header_wrap .bottom_header .navbar-collapse .navbar-nav > li > a,
    html body[data-pf-menu-ink="custom"] .header_wrap .bottom_header .pf-menu-right > li > .nav-link,
    html body[data-pf-menu-ink="custom"] .header_wrap .bottom_header nav.navbar > .pf-nav-brand { color: var(--header-menu-text-color) !important; }
}

/* A Text section from Store design: the store's own words in a readable column between the other sections. */
.pf-text { width: min(760px, calc(100% - 32px)); margin: clamp(40px, 6vw, 84px) auto; color: var(--skin-ink, #1f1f23); font-size: 17px; line-height: 1.7; }
.pf-text > :first-child { margin-top: 0; }
.pf-text > :last-child { margin-bottom: 0; }
.pf-text h2 { margin: 1.1em 0 .45em; font-size: clamp(26px, 3vw, 38px); line-height: 1.15; letter-spacing: -.02em; }
.pf-text h3 { margin: 1.2em 0 .4em; font-size: clamp(20px, 2vw, 24px); line-height: 1.25; }
.pf-text p { margin: 0 0 1em; }
.pf-text ul, .pf-text ol { margin: 0 0 1em; padding-left: 1.3em; }
.pf-text li { margin: .25em 0; }
.pf-text blockquote { margin: 1.2em 0; padding: 2px 0 2px 20px; border-left: 3px solid var(--primary-color, currentColor); font-size: 1.1em; font-style: italic; }
.pf-text a { color: var(--primary-color, inherit); text-decoration: underline; text-underline-offset: 3px; }

/* The cart: the store's own message and the free-delivery bar (Store design > Theme). */
.pf-cart-message { margin: 0 0 14px; padding: 10px 14px; border-radius: var(--skin-radius, 6px); background: var(--skin-surface, #f6f6f6); color: var(--skin-ink, #111); font-size: 14.5px; line-height: 1.45; }
.pf-free-bar { margin: 0 0 18px; }
.pf-free-bar p { margin: 0 0 8px; color: var(--skin-ink, #111); font-size: 14.5px; }
.pf-free-bar-track { display: block; height: 6px; border-radius: 999px; background: var(--skin-line, #e7e7e7); overflow: hidden; }
.pf-free-bar-track i { display: block; height: 100%; border-radius: inherit; background: var(--primary-color, #111); transition: width .4s ease; }

/* Products in a row on the shop and category pages, when the store chose it in Store design (data-pf-cols and
   data-pf-cols-phone, StoreDesign::layoutAttributes); otherwise each style keeps its own. */
@media (min-width: 992px) {
    html body[data-pf-cols="2"] .pf-shop .shop_container > [class*="col"] { flex: 0 0 50% !important; max-width: 50% !important; }
    html body[data-pf-cols="3"] .pf-shop .shop_container > [class*="col"] { flex: 0 0 33.3333% !important; max-width: 33.3333% !important; }
    html body[data-pf-cols="4"] .pf-shop .shop_container > [class*="col"] { flex: 0 0 25% !important; max-width: 25% !important; }
    html body[data-pf-cols="5"] .pf-shop .shop_container > [class*="col"] { flex: 0 0 20% !important; max-width: 20% !important; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
    html body[data-pf-cols="5"] .pf-shop .shop_container > [class*="col"] { flex: 0 0 25% !important; max-width: 25% !important; }
}
@media (max-width: 575.98px) {
    html body[data-pf-cols-phone="1"] .pf-shop .shop_container > [class*="col"] { flex: 0 0 100% !important; max-width: 100% !important; }
    html body[data-pf-cols-phone="2"] .pf-shop .shop_container > [class*="col"] { flex: 0 0 50% !important; max-width: 50% !important; }
}

/* The footer logo keeps a sensible size whatever picture was uploaded (a 3000-pixel square logo filled the whole
   footer column). Proportions are kept; small logos are not enlarged. Every style and site kind. */
footer .footer_logo img {
    width: auto !important;
    height: auto !important;
    max-height: 72px;
    max-width: min(240px, 100%);
    object-fit: contain;
}

/* Phone menu: the language and currency rows are left out when there is nothing to choose (one language) or the
   website does not sell (its currency switch is hidden above), instead of showing empty ruled lines under the menu. */
.mobile_side_menu .navbar-nav > li.mobile-menu-item:not(:has(a, button)),
body[data-pf-sell="0"] .mobile_side_menu .navbar-nav > li.mobile-menu-item:has(.choose-currency) { display: none !important; }