.price-cta-text {
    margin: 10px 0px 0px 0px;
color: black;
font-size: 14px;
font-weight: 500;
    
}
/* ===== HEADINGS - Classical Black ===== */
#wrapper h1,
#wrapper h2,
#wrapper h3,
#wrapper h4,
#wrapper h5,
#wrapper h6,
#wrapper .elementor-heading-title {
  color: #1A1A1A !important;
}

/* ===== PARAGRAPHS & BODY TEXT ===== */
#wrapper p,
#wrapper .elementor-widget-text-editor p,
#wrapper .elementor-text-editor {
  color: #3D3D3D !important;
}

/* ===== LIST ITEMS ===== */
ul li,
ol li {
  color: #3D3D3D;
}

#certificates .slick-slide-inner img{
    width:auto!important;
    height:60px!important;
}

#certificates  .slick-slide-inner{
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-right: 10px!important;
}

#certificates  .slick-slide-image{
  height: auto;
  display: block;
}

#certificates  .elementor-image-carousel-caption{
  font-size: 1rem;
  font-weight: 500;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
  line-height: 1.3;
  max-width: 100%;
  text-align:left;
}

/*#certificates  .slick-slide{*/
/*  margin: 0px;*/
/*}*/

#certificates .slick-list{
  margin: 0px;
  padding:0px!important;
}

/*#certificates  .elementor-image-carousel-caption{*/
/*  overflow: hidden;*/
  /*text-overflow: ellipsis;*/
/*}*/


.product-features-custom{
    margin: 0 0 2rem;
}
.product-composition .composition-header{
    font-size: 15px;
    line-height: 1em;
    font-weight: normal;
    color: #6e6e6e;
}
.p-custom{
    font-size: 15px;
    margin-top: 10px!important;
}
.toogle-sign-custom{
    color:#c92466;
}

#footer .tb-sect-icon{
    width:auto!important;
}

/* Make popup behave like a left sheet */
.elementor-popup-modal.filter-sheet-popup {
  justify-content: flex-start !important;
  align-items: stretch !important;
}

.elementor-popup-modal.filter-sheet-popup .dialog-widget-content {
  margin: 0;
  width: 340px;
  max-width: 90vw;
  height: 100vh;
  border-radius: 0;
  box-shadow: 2px 0 20px rgba(0,0,0,.15);
}

/* Scrollable content inside */
.elementor-popup-modal.filter-sheet-popup .dialog-message {
  height: 100%;
  overflow-y: auto;
}

/* Overlay similar to shadcn Sheet */
.elementor-popup-modal.filter-sheet-popup .dialog-container {
  background: rgba(0,0,0,.45);
}

/* Close button minimal style */
.filter-sheet-close {
  cursor: pointer;
  text-align: right;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
}
#main-menu .pk-nav-ul li a i{
    margin-right:5px;
}

/* Гарантируем, что все изображения имеют одинаковую высоту и занимают весь блок */
.medas-custom-categories img {
    width: 100%;
    height: 420px;              /* можешь менять под свой дизайн */
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 0;
}

/* Родительские элементы CE / Alysum иногда ломают высоту. Исправляем: */
.medas-custom-categories .ce-media,
.medas-custom-categories .ce-media-wrapper,
.medas-custom-categories .promo-block__image,
.medas-custom-categories .promo-block__image-wrapper {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
}

/* На мобилках лучше ниже высота */
@media (max-width: 768px) {
    .medas-custom-categories img {
        height: 260px;
    }
}

/* Родитель — ограничиваем область стилей */
.medas-custom-categories .promo-block {
    text-align: center;
}

/* Верхний маленький текст */
.medas-custom-categories .promo-block__top-text {
    font-size: 0.667em;
    line-height: 1.3em;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #999;
    font-family: 'Open Sans', Arial, sans-serif;
    margin-bottom: 10px;
}

/* Тайтл */
.medas-custom-categories .promo-block__title {
    font-size: 1.0667em;
    line-height: 1.5625em;
    font-family: 'Open Sans', Arial, sans-serif;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sub-categories-menu .text-sub p{
    margin:0;
}

.md-color-link{
    display:inline-block;
}

#search_filters ul.pkradio span.color{
    width: 32px!important;
    height: 32px!important;
    display: inline-block!important;
    margin: .3125rem!important;
    cursor: pointer!important;
    background-size: contain!important;
    background-color: inherit !important;
}
.custom-checkbox input[type='checkbox'] + span{
    background-color: inherit !important;
}

.pm-details-layout1 #main-content .view_grid .product-miniature .product-title{
    width: initial!important;
    max-width: initial!important;
}

#search_filters section.facet{
    margin-bottom: 30px;
}

#tab-content {
    padding: 40px 0px;
}

#js-product-list-top.products-selection{
    margin-bottom:0px;
}

.product-thumbnail{
    margin-bottom:0px;
}

/* Product card */
.product-miniature {
  border: 1px solid #ddd;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* Title – reserve space (2 lines) */
.product-miniature h3,
.product-miniature .product-title {
  line-height: 1.3;
  min-height: calc(1.3em * 2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Buttons always at bottom */
.product-miniature .product-actions {
  margin-top: auto;
}

#main-content #products.view_grid3 .product_list #js-product-list .grid-container {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (min-width: 1200px) {
  .product-miniature:not(:nth-child(4n)) {
    border-right: none;
  }

  .product-miniature:not(:nth-last-child(-n + 4)) {
    border-bottom: none;
    margin-bottom: 0px;
  }
}

@media (max-width: 1199px) and (min-width: 992px) {
  #main-content #products.view_grid3 .product_list #js-product-list .grid-container {
    grid-template-columns: repeat(3, minmax(0, 1fr))!important;
  }

  .product-miniature:not(:nth-child(3n)) {
    border-right: none;
  }

  .product-miniature:not(:nth-last-child(-n + 3)) {
    border-bottom: none;
  }
}

@media (max-width: 991px) and (min-width: 576px) {
  #main-content #products.view_grid3 .product_list #js-product-list .grid-container {
    grid-template-columns: repeat(2, minmax(0, 1fr))!important;
  }

  .product-miniature:not(:nth-child(2n)) {
    border-right: none;
  }

  .product-miniature:not(:nth-last-child(-n + 2)) {
    border-bottom: none;
  }
}

@media (max-width: 575px) {
  #main-content #products.view_grid3 .product_list #js-product-list .grid-container {
    grid-template-columns: 1fr!important;
  }

  .product-miniature {
    border-right: 1px solid #ddd;
    border-bottom: none;
  }

  .product-miniature:last-child {
    border-bottom: 1px solid #ddd;
  }
}

#products:not(.view_list) .product_list .grid-container {
    row-gap: 0px!important;
}

#product h1{
    font-family: "Open Sans", sans-serif;
    font-size:2.133em;
    line-height: 1.126em;
    font-weight: 400;
    color:#333;
}
#product .normal-price{
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    font-style:normal;
    text-transform: initial;
}

#product .add .productButtons{
    margin-top: 0px;
    margin-left:20px;
}

.page-search .product_list{
    margin-top: 20px;
}
.page-search #main-content #products:not(.view_list) .product_list .grid-container{
    grid-column-gap:0;
}

.qty--kg {
    position: relative;
    display: inline-block;
    width: initial!important;
}

/* input — отступ ТОЛЬКО слева */
.qty--kg input {
    padding-right: 1rem!important;
}

/* kg — поверх input, но НЕ в его padding */
.qty--kg::after {
    content: "kg";
    position: absolute;
    right: 45px;
    top: 52%;
    transform: translateY(-50%);
    font-size: 14px;
    color: #313537;
    pointer-events: none;
    z-index: 3;

}

/* кнопки TouchSpin */
.qty--kg .input-group-btn-vertical {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    z-index: 4;
}
.product-quantity #quantity_wanted{
    padding-left:5px;
}

.product-variants-item ul li input:checked + span{
    border:2px solid #b41f5b!important;
}

.product-features {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    max-width: 420px;
}

.product-features li {
    font-size: 0.867em;
}

.product-features .label {
    min-width: 120px;
    color: #777;
    margin-right: 5px;
    font-size: 15px;
}

.product-features .value {
    margin-left: 5px;
    color: #333;
}
.cta-link{
    color:#b41f5b;
}
.productButtons.flex-container.align-items-center .favoritesButton{
    display:none;
}
.product-quantity .favoritesButton{
    display:flex!important;
}
.product-quantity #quantity_wanted, 
.product-quantity .input-group-btn-vertical .btn
{
    border: 0;

}
.page-contact #left-column{
    display:none;
}
.page-contact #content-wrapper-left{
    width:100%;
}
.team-link .elementor-button-link{
    width:100%;
}
body{
    font:15px/24px "Open Sans",Arial,sans-serif!important;
}
.tab-pane li{
    margin-top: 10px;
    margin-bottom: 10px;
}
.nav-item.tab-order-2{
    display:none;
}
.tesm-button a{
}
.tesm-grid .elementor-row{
    column-gap: 20px;
}

#description .product-description:after {
  content: "";
  display: block;
  width: 60px;
  height: 60px; /* adjust */
  margin-top: 24px;
  background: url("/img/cms/j8wzv8skok8smx51g9bljrg603xv5c9f.png") no-repeat center;
  background-size: contain;
}

/* FORM */

/* Add to your theme's custom.css or module CSS */

/* Hide duplicate company field in default PrestaShop section */
.js-customer-form .form-group:has(input[name="company"]):not(.b2b-registration-fields .form-group) {
    display: none !important;
}

/* Hide duplicate identification number field */
.js-customer-form .form-group:has(input[name="id_customer"]),
.js-customer-form .form-group:has(input[name="siret"]) {
    display: none !important;
}

/* Move checkboxes to bottom using flexbox */
.js-customer-form section {
    display: flex;
    flex-direction: column;
}

.js-customer-form section .form-group:has(input[type="checkbox"]) {
    order: 100; /* Move to end */
}

.b2b-registration-fields {
    order: 50; /* B2B section before checkboxes */
}

.product-miniature .cta-link{
    color:#b41f5b!important;
}

.pm-details-layout1 #main-content .view_grid .product-miniature .product-price-and-shipping{
    position:initial;
    width:initial;
    align-items:flex-start;
    margin-bottom:15px;
}
.elementor-25010000 .elementor-element.elementor-element-2a76641e .product-price-and-shipping .price{
    
}
.product-flag.on-sale{
    display:none;
}
.waga {
    font-family: "Open Sans";
    font-style: initial;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: normal;
}
.register-form a{
    color:#b41f5b;
}

/* Hide combination thumbnail strip under product image */
#product-images-cont .product-thumbs,
#product-images-cont .js-product-thumbs,
#product-images-cont .slick-slider:not(.main-image-container),
#product-images-cont > :not(.main-image-container) .slick-list {
    display: none !important;
}

/* Remove thumbs-exist spacing */
.product-cover.thumbs-exist {
    margin-bottom: 0 !important;
}

.input-group-btn-vertical {
  display: none !important;
}

.b2b-qty-control, .b2b-cart-qty {
    display: flex;
    align-items: center;
    gap: 0;
    background-color: #fafafa;
    border: 1px solid #eeeeee;

}

.b2b-qty-control button, .b2b-cart-qty button {
    width: 38px;
    height: 38px;
    border-radius: 0px;
    background-color: transparent;
    color: gray;
    font-size: 12pt;

}
.b2b-qty-control button:hover, .b2b-cart-qty button:hover {
    /* background-color: #e4e4e4; */
    color: #c92466;

}
.input-group-btn-vertical {
  display: none !important;
}

.bootstrap-touchspin {
  display: contents !important;
}

#cart-subtotal-shipping  span.value{
    display:none;
}
#cart-subtotal-shipping  span.value.after{
    display:block;
}

#payment-option-1-additional-information a{
    color: #c92466;
}

#bankwire-modal.modal.fade{
    opacity:1;
}
#bankwire-modal .close{
    display:none;
}

.register-form .form-control{
    border: 1px solid #ececec;
}

#module-ph_simpleblog-single .simpleblog__post__content img {
    display: none;
}
.facet--color .facet-label a{    
    display:none!important;
}

/* Сетка для свотчей цвета */
#search_filters .facet.facet--color ul {
  display: grid!important;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

#search_filters .facet.facet--color .facet-label {
  margin: 0;
  padding: 0;
  width: auto;
}

/* На случай если внутри <li> есть label/обёртки, ломающие сетку */
#search_filters .facet.facet--color .facet-label > label,
#search_filters .facet.facet--color .facet-label > * {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}
.b2b-captcha-refresh{
    background: rgb(189, 189, 189)!important;
    border-radius:0!important;
}
.b2b-captcha-refresh:hover{
    background:#c22362!important;
}
.product-variants > .product-variants-item ul li{
    margin-right: 0.03rem!important;
}
#search_filters .facet > ul li{
    padding-bottom: 5px!important;
}
#search_filters .facet.facet--color ul{
    gap:0px!important
}
#bankwire-modal .modal-body p,
#bankwire-modal .modal-header ,
#bankwire-modal .modal-body dl,
#payment-option-1-additional-information section p{
    display:none;
}
#bankwire-modal .modal-content{
    padding-left:0px;
}
#bankwire-modal .modal-body {
    color:black;
}
.page-prices-drop .product_list_top{
    display:none;
}
.product-flag.discount{
    color:white;
    background:#e33434;
    margin-top: 15px;
    font-style: initial;
}
.product-variants-item .color{
    width:50px;
    height:50px;
}


.product-variants-item .input-container { position: relative; overflow: visible; }

/* Match (and outweigh) the parent theme rule
   `.product-variants > .product-variants-item li > span:not(.color)` which
   forces min-width: 32px / height: 32px / border on every non-.color span
   inside a swatch. Without this our 17×17 icon span gets stretched to a
   white bordered box and the background image disappears. */
.product-variants > .product-variants-item li > span.color-discount-badge,
.product-variants-item .input-container .color-discount-badge {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
    width: 17px;
    min-width: 0;
    height: 17px;
    margin: 0;
    padding: 0;
    border: 0;
    background: url('/themes/alysumchild/assets/discount_icon.svg') no-repeat center;
    background-size: contain;
    box-shadow: none;
    pointer-events: none;
    cursor: default;
    /* Hide the text label — span keeps it for screen-reader access via aria-label. */
    font-size: 0;
    line-height: 0;
    color: transparent;
    text-indent: -9999px;
    overflow: hidden;
    white-space: nowrap;
    display: block;
}
.js-address-form .info-block a{
    color:#c92466;
}
.js-address-form .info-block a:hover{
    text-decoration:underline;
}
#js-delivery .carrier .col-sm-4{
    display:none;
}
#order-summary-content  .summary-selected-carrier .carrier-delay,
.carriere-name-container .carrier-delay{ 
    /* display: none; */
    width: 100%;
    display: inline-flex;
    color: rgb(163, 163, 163);
    font-size: 13px;
    text-transform: uppercase;

}

/* ===== CART FIX ===== */
@media (width > =1280px) {
    #cart #main > .cart-grid .cart-grid-body {
        flex-grow:1
    }

    #cart #main > .cart-grid .cart-grid-right {
        min-width:400px
    }
}

@media (min-width: 992px) {
  body#cart .cart-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 30px;
  }

  body#cart .cart-grid-body {
    flex: 0 0 calc(66.6667% - 15px);
    max-width: calc(66.6667% - 15px);
    min-width: 0;
  }

  body#cart .cart-grid-right {
    flex: 0 0 calc(33.3333% - 15px);
    max-width: calc(33.3333% - 15px);
    position: sticky;
    top: 100px;
  }
}

@media (max-width: 991.98px) {
  body#cart .cart-grid-right {
    margin-top: 24px;
  }
}

.form-control:focus{
    color: #5f5f5f;
}

#main-content #products:not(.view_list) .product_list .grid-container{
    grid-column-gap: 0;
}
#content-hook_payment_return{
    display:none;
}
#prices-drop .elementor-widget-pkminiaturebuttons{
    display:none;
}

/* -----------------------------------------------------------------------
 * alysumchild — mobile-fix.css
 *
 * Targeted overrides for issues observed on this site below 992px.
 * Loaded globally via theme.yml (assets.css.all, priority 250), so it
 * ships AFTER every page-specific stylesheet from both parent and child.
 *
 * Sections:
 *   1. Bottom mobile-nav hamburger (.pk-mobile-bottom-panel)
 *   2. PLP filter sidebar / left column collapse
 *   3. Discount-swap overlay — usable on touch (always visible <576px)
 *   4. Product card density — 2-col grid below 576px
 *   5. Drawer / scrollbar overlay cleanup
 *   6. Header tap targets + drawer width
 * --------------------------------------------------------------------- */


/* === 1. Bottom mobile nav bar — force visible + tappable =============== */
/*
 * Root cause: server renders <ul class="pk-mobile-bottom-panel fixed w-100
 * flex-container ... hidden"> with the `hidden` class on. The parent's
 * features/mobileBottomPanel.js is supposed to remove `hidden` on touch
 * widths — but the live alysum.js bundle does NOT contain that feature
 * (confirmed by inspecting /themes/alysum/assets/js/alysum.js on the live
 * site: zero references to mobileBottomPanel). So the entire bottom bar
 * — cart, account, search, MENU (el-pknav), favorites — stays invisible
 * forever, leaving the only mobile navigation entry point dead.
 *
 * Fix: at mobile widths, override `.hidden` to force the bar visible AND
 * apply the position:fixed bottom-bar layout the JS would normally have
 * enabled. Then size every nav item so it's tappable.
 */
@media (max-width: 991px) {
    /* Force the bar visible regardless of `hidden` class. */
    ul.pk-mobile-bottom-panel.hidden,
    ul.pk-mobile-bottom-panel {
        display: flex !important;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 4px 6px env(safe-area-inset-bottom, 4px) 6px !important;
        background: #fff !important;
        border-top: 1px solid #e5e5e5 !important;
        box-shadow: 0 -2px 8px rgba(0,0,0,.06) !important;
        z-index: 100 !important;
        list-style: none !important;
        justify-content: space-around !important;
        align-items: stretch !important;
        gap: 4px;
    }
    /* Each <li> wraps a single button — let them flex evenly across the row */
    ul.pk-mobile-bottom-panel > li {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* The actual tap target — was rendering 0x0. Force size + flex layout. */
    ul.pk-mobile-bottom-panel > li > button,
    ul.pk-mobile-bottom-panel > li > a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 48px !important;
        padding: 4px 2px !important;
        background: transparent !important;
        border: 0 !important;
        color: inherit !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
        cursor: pointer;
        gap: 2px;
    }
    /* SVG icon — render at a consistent size so the flex-column doesn't collapse */
    ul.pk-mobile-bottom-panel .svgic,
    ul.pk-mobile-bottom-panel > li > button > svg,
    ul.pk-mobile-bottom-panel > li > a > svg {
        width: 22px !important;
        height: 22px !important;
        display: block !important;
        flex: 0 0 22px !important;
    }
    /* The text label under the icon */
    ul.pk-mobile-bottom-panel > li > button > span:not(.cart-counter):not(.cart-products-count),
    ul.pk-mobile-bottom-panel > li > a > span:not(.cart-counter):not(.cart-products-count) {
        display: block !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100%;
    }
    /* Cart counter badge — position it over the icon, top-right */
    ul.pk-mobile-bottom-panel .cart-products-count,
    ul.pk-mobile-bottom-panel .cart-counter {
        position: absolute !important;
        top: 0 !important;
        right: 12% !important;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        background: #c92466;
        color: #fff;
        border-radius: 8px;
        font-size: 10px;
        line-height: 16px;
        text-align: center;
    }
    /* Push site content up so the fixed bar doesn't cover the footer */
    body {
        padding-bottom: 60px;
    }
}


/* === 2. PLP filter sidebar / left column collapse ===================== */
/* Facet structure (facets.tpl): <section class="facet"> ▸ h4.facet-title
 * with a Bootstrap collapse trigger ▸ ul.collapse (or .collapse.in when
 * expanded). The parent default expands every facet on this site, which
 * floods the mobile viewport before the product grid is reachable.
 * Force the collapsed state below 768px so users see the grid first. */
@media (max-width: 767px) {
    /* #subcategories duplicates the menu and burns vertical space */
    #subcategories {
        display: none;
    }
    /* Stack #left-column above products but keep it tight */
    #category #left-column,
    body[id^="category"] #left-column,
    #left-column {
        margin-bottom: 8px;
        padding: 0 !important;
    }
    /* Facet titles become full-width tappable bars */
    section.facet > .facet-title {
        margin: 0 0 4px !important;
        padding: 12px 14px !important;
        background: #f7f7f7 !important;
        border: 1px solid #e5e5e5 !important;
        font-size: 14px !important;
        cursor: pointer;
    }
    section.facet > .facet-title .title {
        float: right;
    }
    /* Force every facet UL closed; Bootstrap's .collapse.in (or .show)
     * overrides this when the user expands it. */
    section.facet > ul.collapse {
        display: none !important;
    }
    section.facet > ul.collapse.in,
    section.facet > ul.collapse.show {
        display: block !important;
        padding: 8px 14px 12px !important;
        margin: 0 0 8px !important;
        background: #fff !important;
        border: 1px solid #e5e5e5 !important;
        border-top: 0 !important;
    }
    /* Facet labels — readable, no horizontal cramping */
    section.facet .facet-label {
        padding: 6px 0 !important;
        line-height: 1.3 !important;
    }
}


/* === 3. Discount-swap overlay — usable on touch ======================= */
/* discount-swap.js (prices-drop only) injects .alysumchild-discount-cartrow
 * with position:absolute + opacity:0 + pointer-events:none, only revealed
 * via .product-miniature:hover. Touch users can never reach it.
 *
 * Below 576px: place it back in the normal flow under the cover, always
 * visible. !important needed because the JS injects rules via <style>. */
@media (max-width: 575px) {
    .product-miniature .alysumchild-discount-cartrow {
        position: static !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
        margin: 8px 0 0 !important;
        padding: 8px !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    .alysumchild-discount-swatches {
        justify-content: flex-start !important;
        gap: 8px !important;
    }
    .alysumchild-discount-swatch {
        width: 28px !important;
        height: 28px !important;
    }
    .alysumchild-discount-qty button,
    .alysumchild-discount-qty input,
    .alysumchild-discount-addbtn {
        min-height: 40px !important;
        font-size: 14px !important;
    }
}


/* === 4. Product card density — 2-col grid below 576px ================ */
/* Listing wrapper is #js-product-list > .product-list-container (see
 * alysum/templates/catalog/_partials/products.tpl). Single column on
 * mobile wastes screen estate; force a 2-col grid below 576px. */
@media (max-width: 575px) {
    #js-product-list .product-list-container,
    #js-product-list .product-list-container.grid-container {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 0 !important;
    }
    #js-product-list .product-list-container > * {
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 auto !important;
    }
    .product-miniature {
        margin-bottom: 0 !important;
    }
    .product-miniature .product-title,
    .product-miniature .product-title a {
        font-size: 12px !important;
        line-height: 1.25 !important;
    }
    .product-miniature .product-price-and-shipping {
        font-size: 13px !important;
    }
    .product-miniature .product-description-short {
        display: none !important;
    }
    .product-miniature .thumbnail-container,
    .product-miniature .product-thumbnail img {
        width: 100% !important;
        height: auto !important;
    }
}


/* === 5. Drawer / scrollbar overlay cleanup ============================ */
/* OverlayScrollbars custom scrollbars at z=99999 interfere with native
 * mobile scroll. .pk-shadow at z=998 covers the full viewport even when
 * no drawer is open, swallowing taps. Neutralize both on mobile. */
@media (max-width: 991px) {
    .os-scrollbar.os-scrollbar-horizontal,
    .os-scrollbar.os-scrollbar-vertical {
        display: none !important;
    }
    /* .pk-shadow keeps pointer-events:none unless a drawer is actually
     * open. PK theme uses .pk-aside.open / body.pk-overlay-on for that. */
    .pk-shadow {
        pointer-events: none !important;
    }
    body.pk-overlay-on .pk-shadow,
    body:has(.pk-aside.open) .pk-shadow,
    body:has(.pk-aside.is-open) .pk-shadow {
        pointer-events: auto !important;
    }
    /* Cart/account/search drawer asides — never wider than the viewport */
    aside.pk-aside.pk-right {
        max-width: 100vw !important;
    }
}


/* === 6. Header tap targets + Elementor mobile sections ================ */
@media (max-width: 575px) {
    .mobile-header-wrapper .menu-toggle,
    .mobile-header-wrapper [class*="menu-trigger"],
    .mobile-header-wrapper a[class*="menu"] {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    /* Elementor section carousels can push fixed elements offscreen by
     * forcing min-widths from the desktop layout. Constrain to viewport. */
    .elementor-section.elementor-section-boxed > .elementor-container {
        max-width: 100% !important;
    }
    .elementor-image-carousel-wrapper.elementor-slick-slider {
        max-width: 100vw;
        overflow: hidden;
    }
    .elementor-element-10289edc .text-block-wrap {float:left!important;}
}

/* -----------------------------------------------------------------------
 * alysumchild — mobile-fix.css
 *
 * Targeted overrides for issues observed on this site below 992px.
 * Loaded globally via theme.yml (assets.css.all, priority 250), so it
 * ships AFTER every page-specific stylesheet from both parent and child.
 *
 * Sections:
 *   1. Bottom mobile-nav hamburger (.pk-mobile-bottom-panel)
 *   2. PLP filter sidebar / left column collapse
 *   3. Discount-swap overlay — usable on touch (always visible <576px)
 *   4. Product card density — 2-col grid below 576px
 *   5. Drawer / scrollbar overlay cleanup
 *   6. Header tap targets + drawer width
 * --------------------------------------------------------------------- */


/* === 1. Bottom mobile nav bar — force visible + tappable =============== */
/*
 * Root cause: server renders <ul class="pk-mobile-bottom-panel fixed w-100
 * flex-container ... hidden"> with the `hidden` class on. The parent's
 * features/mobileBottomPanel.js is supposed to remove `hidden` on touch
 * widths — but the live alysum.js bundle does NOT contain that feature
 * (confirmed by inspecting /themes/alysum/assets/js/alysum.js on the live
 * site: zero references to mobileBottomPanel). So the entire bottom bar
 * — cart, account, search, MENU (el-pknav), favorites — stays invisible
 * forever, leaving the only mobile navigation entry point dead.
 *
 * Fix: at mobile widths, override `.hidden` to force the bar visible AND
 * apply the position:fixed bottom-bar layout the JS would normally have
 * enabled. Then size every nav item so it's tappable.
 */
@media (max-width: 991px) {
    /* Force the bar visible regardless of `hidden` class. */
    ul.pk-mobile-bottom-panel.hidden,
    ul.pk-mobile-bottom-panel {
        display: flex !important;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 4px 6px env(safe-area-inset-bottom, 4px) 6px !important;
        background: #fff !important;
        border-top: 1px solid #e5e5e5 !important;
        box-shadow: 0 -2px 8px rgba(0,0,0,.06) !important;
        z-index: 100 !important;
        list-style: none !important;
        justify-content: space-around !important;
        align-items: stretch !important;
        gap: 4px;
    }
    /* Each <li> wraps a single button — let them flex evenly across the row */
    ul.pk-mobile-bottom-panel > li {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* The actual tap target — was rendering 0x0. Force size + flex layout. */
    ul.pk-mobile-bottom-panel > li > button,
    ul.pk-mobile-bottom-panel > li > a {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 48px !important;
        padding: 4px 2px !important;
        background: transparent !important;
        border: 0 !important;
        color: inherit !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
        cursor: pointer;
        gap: 2px;
    }
    /* SVG icon — render at a consistent size so the flex-column doesn't collapse */
    ul.pk-mobile-bottom-panel .svgic,
    ul.pk-mobile-bottom-panel > li > button > svg,
    ul.pk-mobile-bottom-panel > li > a > svg {
        width: 22px !important;
        height: 22px !important;
        display: block !important;
        flex: 0 0 22px !important;
    }
    /* The text label under the icon */
    ul.pk-mobile-bottom-panel > li > button > span:not(.cart-counter):not(.cart-products-count),
    ul.pk-mobile-bottom-panel > li > a > span:not(.cart-counter):not(.cart-products-count) {
        display: block !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        max-width: 100%;
    }
    /* Cart counter badge — position it over the icon, top-right */
    ul.pk-mobile-bottom-panel .cart-products-count,
    ul.pk-mobile-bottom-panel .cart-counter {
        position: absolute !important;
        top: 0 !important;
        right: 12% !important;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        background: #c92466;
        color: #fff;
        border-radius: 8px;
        font-size: 10px;
        line-height: 16px;
        text-align: center;
    }
    /* Push site content up so the fixed bar doesn't cover the footer */
    body {
        padding-bottom: 60px;
    }
}


/* === 2. PLP filter sidebar / left column collapse ===================== */
/* Facet structure (facets.tpl): <section class="facet"> ▸ h4.facet-title
 * with a Bootstrap collapse trigger ▸ ul.collapse (or .collapse.in when
 * expanded). The parent default expands every facet on this site, which
 * floods the mobile viewport before the product grid is reachable.
 * Force the collapsed state below 768px so users see the grid first. */
@media (max-width: 767px) {
    /* #subcategories duplicates the menu and burns vertical space */
    #subcategories {
        display: none;
    }
    /* Stack #left-column above products but keep it tight */
    #category #left-column,
    body[id^="category"] #left-column,
    #left-column {
        margin-bottom: 8px;
        padding: 0 !important;
    }
    /* Facet titles become full-width tappable bars */
    section.facet > .facet-title {
        margin: 0 0 4px !important;
        padding: 12px 14px !important;
        background: #f7f7f7 !important;
        border: 1px solid #e5e5e5 !important;
        font-size: 14px !important;
        cursor: pointer;
    }
    section.facet > .facet-title .title {
        float: right;
    }
    /* Force every facet UL closed; Bootstrap's .collapse.in (or .show)
     * overrides this when the user expands it. */
    section.facet > ul.collapse {
        display: none !important;
    }
    section.facet > ul.collapse.in,
    section.facet > ul.collapse.show {
        display: block !important;
        padding: 8px 14px 12px !important;
        margin: 0 0 8px !important;
        background: #fff !important;
        border: 1px solid #e5e5e5 !important;
        border-top: 0 !important;
    }
    /* Facet labels — readable, no horizontal cramping */
    section.facet .facet-label {
        padding: 6px 0 !important;
        line-height: 1.3 !important;
    }
}


/* === 3. Discount-swap overlay — usable on touch ======================= */
/* discount-swap.js (prices-drop only) injects .alysumchild-discount-cartrow
 * with position:absolute + opacity:0 + pointer-events:none, only revealed
 * via .product-miniature:hover. Touch users can never reach it.
 *
 * Below 576px: place it back in the normal flow under the cover, always
 * visible. !important needed because the JS injects rules via <style>. */
@media (max-width: 575px) {
    .product-miniature .alysumchild-discount-cartrow {
        position: static !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
        margin: 8px 0 0 !important;
        padding: 8px !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    .alysumchild-discount-swatches {
        justify-content: flex-start !important;
        gap: 8px !important;
    }
    .alysumchild-discount-swatch {
        width: 28px !important;
        height: 28px !important;
    }
    .alysumchild-discount-qty button,
    .alysumchild-discount-qty input,
    .alysumchild-discount-addbtn {
        min-height: 40px !important;
        font-size: 14px !important;
    }
}


/* === 4. Product card density — 2-col grid below 576px ================ */
/* Listing wrapper is #js-product-list > .product-list-container (see
 * alysum/templates/catalog/_partials/products.tpl). Single column on
 * mobile wastes screen estate; force a 2-col grid below 576px. */
@media (max-width: 575px) {
    #js-product-list .product-list-container,
    #js-product-list .product-list-container.grid-container {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 0 !important;
    }
    #js-product-list .product-list-container > * {
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 auto !important;
    }
    .product-miniature {
        margin-bottom: 0 !important;
    }
    .product-miniature .product-title,
    .product-miniature .product-title a {
        font-size: 12px !important;
        line-height: 1.25 !important;
    }
    .product-miniature .product-price-and-shipping {
        font-size: 13px !important;
    }
    .product-miniature .product-description-short {
        display: none !important;
    }
    .product-miniature .thumbnail-container,
    .product-miniature .product-thumbnail img {
        width: 100% !important;
        height: auto !important;
    }
}


/* === 5. Drawer / scrollbar overlay cleanup ============================ */
/* OverlayScrollbars custom scrollbars at z=99999 interfere with native
 * mobile scroll. .pk-shadow at z=998 covers the full viewport even when
 * no drawer is open, swallowing taps. Neutralize both on mobile. */
@media (max-width: 991px) {
    .os-scrollbar.os-scrollbar-horizontal,
    .os-scrollbar.os-scrollbar-vertical {
        display: none !important;
    }
    /* .pk-shadow keeps pointer-events:none unless a drawer is actually
     * open. PK theme uses .pk-aside.open / body.pk-overlay-on for that. */
    .pk-shadow {
        pointer-events: none !important;
    }
    body.pk-overlay-on .pk-shadow,
    body:has(.pk-aside.open) .pk-shadow,
    body:has(.pk-aside.is-open) .pk-shadow {
        pointer-events: auto !important;
    }
    /* Cart/account/search drawer asides — never wider than the viewport */
    aside.pk-aside.pk-right {
        max-width: 100vw !important;
    }
    .pk-nav-ul {
        flex-direction: column;
        justify-content: flex-start;
        text-align: left;
        .pk-aside & {
            display: block;
        }
        .pk-ce-widget & {
            display: none!important;
        }
    }
}


/* === 6. Header tap targets + Elementor mobile sections ================ */
@media (max-width: 575px) {
    .mobile-header-wrapper .menu-toggle,
    .mobile-header-wrapper [class*="menu-trigger"],
    .mobile-header-wrapper a[class*="menu"] {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    /* Elementor section carousels can push fixed elements offscreen by
     * forcing min-widths from the desktop layout. Constrain to viewport. */
    .elementor-section.elementor-section-boxed > .elementor-container {
        max-width: 100% !important;
    }
    .elementor-image-carousel-wrapper.elementor-slick-slider {
        max-width: 100vw;
        overflow: hidden;
    }
    .elementor-26010000 .elementor-element.elementor-element-1c79a7b3 > .elementor-element-populated{
        margin:0px;
    }
    #product .elementor-container{width:100%;}
    #product #main, #product #wrapper{padding: 0;}
    .product-quantity .productButtons{display:none;}
    .productButtons.flex-container.align-items-center .favoritesButton{display:block;}
}


/* === 7. Mobile MENU drawer (el-pknav) ================================= */
/*
 * The "Menu" bottom-panel button had no drawer at all: the pkelements server
 * code never emits a `pknav-sidebar-template`
 * (DisplayBeforeBodyClosingTag::addMenu() is an empty TODO stub, and
 * WidgetPknav::getStackData only emits one when its `is_in_stack` option is
 * 'yes' — default 'no'). So <aside data-pktabcontent="el-pknav"> never existed
 * and tapping Menu toggled `.active` on nothing.
 *
 * assets/js/mobile-menu-drawer.js reconstructs that <aside> on the client from
 * a clone of the header `.pk-nav-ul`, reusing pkelements' own `.pk-aside`
 * markup so open/close (tabsToggler / closeAllSidebars / .pk-shadow) and the
 * slide-in styling all work unchanged. These rules only lay the cloned menu
 * out vertically inside the drawer and draw a sprite-independent close (×).
 * Everything here is scoped to `.pk-aside.pk-el-pknav`, so it can only affect
 * the drawer this child theme builds — never the parent's other sidebars.
 * Not media-gated: the drawer must read correctly wherever its trigger fires.
 */
.pk-aside.pk-el-pknav .pk-nav,
.pk-aside.pk-el-pknav .pk-nav-ul {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    list-style: none !important;
}
/* The clone can carry the header list's `hidden` class — force it open here. */
.pk-aside.pk-el-pknav .pk-nav-ul.hidden {
    display: flex !important;
}
.pk-aside.pk-el-pknav .pk-nav-li {
    width: 100% !important;
    margin: 0 !important;
    border-bottom: 1px solid #ececec;
}
.pk-aside.pk-el-pknav .pk-nav-li > .flex-container {
    justify-content: space-between;
    align-items: center;
}
.pk-aside.pk-el-pknav .pk-nav-link {
    display: block;
    flex: 1 1 auto;
    padding: 14px 4px !important;
    font-size: 15px;
    line-height: 1.3;
    color: #222;
}
.pk-aside.pk-el-pknav .pk-nav-link:hover {
    text-decoration: none;
    color: #000;
}
/* Submenu expand control — give it a real tap target and rotate on open. */
.pk-aside.pk-el-pknav .pk-dropdown-toggler {
    padding: 12px 8px;
    line-height: 0;
    cursor: pointer;
}
.pk-aside.pk-el-pknav .pk-dropdown-toggler .pk-smooth {
    transition: transform .2s ease;
}
.pk-aside.pk-el-pknav .pk-nav-li.pk-dropdown-open > .flex-container .pk-dropdown-toggler .pk-smooth {
    transform: rotate(180deg);
}
/* Submenu panel: desktop renders it absolute/hover — here it is inline and
 * collapsed until the <li> gets `.pk-dropdown-open` (vendor toggler / our shim). */
.pk-aside.pk-el-pknav .pk-dropdown {
    position: static !important;
    width: auto !important;
    display: none !important;
    box-shadow: none !important;
    border: 0 !important;
    padding: 0 0 10px 14px !important;
    transform: none !important;
}
.pk-aside.pk-el-pknav .pk-nav-li.pk-dropdown-open > .pk-dropdown {
    display: block !important;
}
/* A nested hamburger icon should never appear inside the open drawer. */
.pk-aside.pk-el-pknav .pk-menu-icon {
    display: none !important;
}
/* Sprite-independent close (×): the parent draws this glyph from an SVG sprite
 * symbol that isn't guaranteed to be on the page, so paint it with CSS to keep
 * the close button reliably visible and tappable. */
.pk-aside.pk-el-pknav .close-sidebar {
    width: 28px !important;
    height: 28px !important;
    top: 16px !important;
    right: 16px !important;
}
.pk-aside.pk-el-pknav .close-sidebar::before,
.pk-aside.pk-el-pknav .close-sidebar::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 2px;
    background: #333;
}
.pk-aside.pk-el-pknav .close-sidebar::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.pk-aside.pk-el-pknav .close-sidebar::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}
#cart .js-cart-line-product-quantity{
color: #313537;
width: 70px;
line-height: 20px;
padding: 12px;
text-align: center;
border: 0px solid #313537;
background: none;
margin: 0;
font-size: 15px;
}