/*
 * "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 {
    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 {
    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 {
    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 {
    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 {
    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: 32px;
        max-width: none;
        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; }