/*body, button, input, select, textarea {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}*/


/* =========================================================
   XEROX PLUS — PAPER CUPS CATEGORY
   only for /uk/category/print-paper-cups/
   ========================================================= */

html:has(head meta[property="og:url"][content*="/uk/category/print-paper-cups/"]) {

  /* -------------------------------------------------------
     1. Прибираємо лівий блок "Тип стаканчиків"
     ------------------------------------------------------- */
   .container .row > .col-lg-3.col-md-4:not(.col-xs-6):not(.mb-5) {
  display: none !important;
}

  /* -------------------------------------------------------
     2. Розтягуємо праву колонку на всю ширину
     ------------------------------------------------------- */
  .container .row > .col-sm-9,
  .container .row > .col-md-9,
  .container .row > .col-sm-8,
  .container .row > .col-md-8,
  .container .row > .content-block,
  .container .row > .right-block {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .container .row {
    display: flex !important;
    flex-wrap: wrap !important;
  }

  /* -------------------------------------------------------
     3. Заголовки груп — більші і по центру
     ------------------------------------------------------- */
 .gray-bg.px-3.py-2.mb-3 {
  
  font-size: 26px !important;
  font-weight: 700 !important;
  text-align: center !important;

  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  padding: 14px 20px !important;
}
  /* -------------------------------------------------------
     4. Товари не таблицею, а один під одним
     ------------------------------------------------------- */
  table,
  tbody,
  tr {
    display: block !important;
    width: 100% !important;
  }

  td {
    display: block !important;
    width: 100% !important;
    border: 0 !important;
    padding: 0 !important;
  }

  /* Якщо товари виводяться сіткою через bootstrap-колонки */
  .row-category-products,
  .row-products,
  .product-list .row,
  .category-products .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  .row-category-products > div,
  .row-products > div,
  .product-list .row > div,
  .category-products .row > div {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* -------------------------------------------------------
     5. Оформлення карток товарів на всю ширину
     ------------------------------------------------------- */
  .product-item,
  .thumbnail,
  .card,
  .product-card,
  .row-category-products > div > a,
  .row-products > div > a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 18px 20px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 4px 14px rgba(0,0,0,.05) !important;
    text-decoration: none !important;
  }

  /* -------------------------------------------------------
     6. Назва товару, кількість, ціна — охайніше
     ------------------------------------------------------- */
  .product-item .name,
  .product-card .name,
  .thumbnail .caption h4,
  .thumbnail .caption .name,
  .row-category-products > div > a .name,
  .row-products > div > a .name {
    font-size: 22px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
  }

  /* -------------------------------------------------------
     7. На мобільному теж один під одним
     ------------------------------------------------------- */
  @media (max-width: 768px) {
    .product-item,
    .thumbnail,
    .card,
    .product-card,
    .row-category-products > div > a,
    .row-products > div > a {
      flex-direction: column !important;
      align-items: flex-start !important;
    }

    .container .row > div:last-child h2,
    .container .row > div:last-child h3,
    .container .row > div:last-child h4,
    .container .row > div:last-child > div > h2,
    .container .row > div:last-child > div > h3,
    .container .row > div:last-child > div > h4 {
      font-size: 24px !important;
    }
  }
}

/* =========================================================
   ONLY: /uk/category/packet/
   ========================================================= */

html:has(head link[rel="canonical"][href*="/uk/category/packet/"]) .container .row.row-category-products > div,
html:has(head meta[property="og:url"][content*="/uk/category/packet/"]) .container .row.row-category-products > div {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* сама картка */
html:has(head link[rel="canonical"][href*="/uk/category/packet/"]) .container .row.row-category-products > div > a.no-underline,
html:has(head meta[property="og:url"][content*="/uk/category/packet/"]) .container .row.row-category-products > div > a.no-underline {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 24px !important;
  height: auto !important;
  padding: 0 !important;
  text-decoration: none !important;
}

/* ліва колонка з картинкою */
html:has(head link[rel="canonical"][href*="/uk/category/packet/"]) .container .row.row-category-products > div > a.no-underline > .img-cont,
html:has(head meta[property="og:url"][content*="/uk/category/packet/"]) .container .row.row-category-products > div > a.no-underline > .img-cont {
  flex: 0 0 260px !important;
  width: 260px !important;
  max-width: 260px !important;
}

/* сама картинка */
html:has(head link[rel="canonical"][href*="/uk/category/packet/"]) .container .row.row-category-products > div > a.no-underline > .img-cont > img,
html:has(head meta[property="og:url"][content*="/uk/category/packet/"]) .container .row.row-category-products > div > a.no-underline > .img-cont > img {
  width: 100% !important;
  height: 220px !important;
  object-fit: contain !important;
  margin-bottom: 0 !important;
  display: none !important;
}

/* права колонка з текстом */
html:has(head link[rel="canonical"][href*="/uk/category/packet/"]) .container .row.row-category-products > div > a.no-underline > div:last-child,
html:has(head meta[property="og:url"][content*="/uk/category/packet/"]) .container .row.row-category-products > div > a.no-underline > div:last-child {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-width: 0 !important;
}

/* нижній рядок: кнопка/ціна */
html:has(head link[rel="canonical"][href*="/uk/category/packet/"]) .container .row.row-category-products > div > a.no-underline > div:last-child > div:last-child,
html:has(head meta[property="og:url"][content*="/uk/category/packet/"]) .container .row.row-category-products > div > a.no-underline > div:last-child > div:last-child {
  margin-top: 14px !important;
}

/* відступи між товарами */
html:has(head link[rel="canonical"][href*="/uk/category/packet/"]) .container .row.row-category-products > div,
html:has(head meta[property="og:url"][content*="/uk/category/packet/"]) .container .row.row-category-products > div {
  margin-bottom: 24px !important;
}

/* мобільна версія */
@media (max-width: 767px) {
  html:has(head link[rel="canonical"][href*="/uk/category/packet/"]) .container .row.row-category-products > div > a.no-underline,
  html:has(head meta[property="og:url"][content*="/uk/category/packet/"]) .container .row.row-category-products > div > a.no-underline {
    flex-direction: column !important;
    gap: 16px !important;
  }

  html:has(head link[rel="canonical"][href*="/uk/category/packet/"]) .container .row.row-category-products > div > a.no-underline > .img-cont,
  html:has(head meta[property="og:url"][content*="/uk/category/packet/"]) .container .row.row-category-products > div > a.no-underline > .img-cont {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  html:has(head link[rel="canonical"][href*="/uk/category/packet/"]) .container .row.row-category-products > div > a.no-underline > .img-cont > img,
  html:has(head meta[property="og:url"][content*="/uk/category/packet/"]) .container .row.row-category-products > div > a.no-underline > .img-cont > img {
    height: auto !important;
    max-height: 260px !important;
  }
}

/* правий блок */
.row.row-category-products > .col-lg-3.col-md-4.col-xs-6.mb-5 
> a.no-underline > div:last-child {

  justify-content: center !important; /* центр по вертикалі */
  gap: 12px !important;               /* відступ між текстом і кнопкою */
}

/* прибираємо фіксовану висоту в нижнього рядка */
.row.row-category-products > .col-lg-3.col-md-4.col-xs-6.mb-5 
> a.no-underline > div:last-child > div:last-child {

  height: auto !important;
}

/* 1. Назва товару — більша і жирніша */
.row.row-category-products .mb-2 {
  font-size: 20px !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
}

/* 2. Прибираємо "Замовити" */
.row.row-category-products a.no-underline > div:last-child > div:last-child > div:first-child {
  display: none !important;
}

/* 3. Контейнер ціни — вліво */
.row.row-category-products a.no-underline > div:last-child > div:last-child {
  justify-content: flex-start !important;
}

/* 4. Сама кнопка (ціна) */
.row.row-category-products .text-nowrap.bg-success {
  font-size: 18px !important;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  background: #16a34a !important; /* трохи чистіший зелений */
}

/* 5. Додаємо "Ціна:" перед */
.row.row-category-products .text-nowrap.bg-success::before {
  content: "Ціна: ";
  margin-right: 6px;
  font-weight: 400;
  opacity: 0.85;
}
.row.row-category-products .text-nowrap.bg-success {
  background: transparent !important;
  color: #111827 !important;
  padding: 0 !important;
  font-weight: 600 !important;
}

.img-cont img.mb-4 {
  display: none;
}


/*та додаємо наші картинки .col-lg-3.col-md-4.col-xs-6.mb-5
 html:has(head meta[property="og:url"][content*="/uk/category/packet/"]) .container .row.row-category-products > div > a.no-underline > .img-cont {
  background-image: url('https://pic.xerox.co.ua/pics/paket.png');
  background-size: 150px 150px;
  background-position: center;
  background-repeat: no-repeat;
  width: 300px;
  height: 200px; 
}*/

html:has(head meta[property="og:url"][content*="/uk/category/packet/"]) 
.row.row-category-products .img-cont {
  background-size: 150px 150px;
  background-position: center;
  background-repeat: no-repeat;
  width: 300px;
  height: 200px; 
}
a[href*="kraft-paket-na-vynos-buryy-30x32x15"] .img-cont { background-image: url('https://pic.xerox.co.ua/pics/kraft-paket-na-vynos-buryy-30x32x15.png'); }
a[href*="kraft-paket-na-vynos-belyy-30x32x15"] .img-cont { background-image: url('https://pic.xerox.co.ua/pics/kraft-paket-na-vynos-belyy-30x32x15.png'); }
a[href*="paket-kraft-buryy-34x26x14"] .img-cont { background-image: url('https://pic.xerox.co.ua/pics/paket-kraft-buryy-34x26x14.png'); }
a[href*="paket-kraft-belyy-34x26x14"] .img-cont { background-image: url('https://pic.xerox.co.ua/pics/paket-kraft-belyy-34x26x14.png'); }
a[href*="paket-kraft-buryy-38x32x15"] .img-cont { background-image: url('https://pic.xerox.co.ua/pics/paket-kraft-buryy-38x32x15.png'); }
a[href*="paket-kraft-belyy-42x32x15"] .img-cont { background-image: url('https://pic.xerox.co.ua/pics/paket-kraft-belyy-42x32x15.png'); }
a[href*="paket-pod-butylku-kraft-buryy"] .img-cont { background-image: url('https://pic.xerox.co.ua/pics/paket-pod-butylku-kraft-buryy.png'); }
a[href*="paket-banan-40x50"] .img-cont { background-image: url('https://pic.xerox.co.ua/pics/paket-banan-40x50.png'); }
a[href*="paket-banan-30x40"] .img-cont { background-image: url('https://pic.xerox.co.ua/pics/paket-banan-30x40.png'); }
a[href*="paket-a5"] .img-cont { background-image: url('https://pic.xerox.co.ua/pics/paket-a5.png'); }
a[href*="paket-a4"] .img-cont { background-image: url('https://pic.xerox.co.ua/pics/paket-a4.png'); }
a[href*="paket-a3"] .img-cont { background-image: url('https://pic.xerox.co.ua/pics/paket-a3.png'); }
a[href*="paket-dlya-vina"] .img-cont { background-image: url('https://pic.xerox.co.ua/pics/paket-dlya-vina.png'); }

html:has(head meta[property="og:url"][content*="kraft-paket-na-vynos-buryy-30x32x15"])
img.mainImage {
  content: url("https://pic.xerox.co.ua/pics/kraft-paket-na-vynos-buryy-30x32x15.png") !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 0 !important;
  width: 110% !important;     /* виходить за межі */
  max-width: 110% !important;
  margin-left: -5% !important; /* центруємо */
}


html:has(head meta[property="og:url"][content*="kraft-paket-na-vynos-belyy-30x32x15"])
img.mainImage {
  content: url("https://pic.xerox.co.ua/pics/kraft-paket-na-vynos-belyy-30x32x15.png") !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 0 !important;
  width: 110% !important;     /* виходить за межі */
  max-width: 110% !important;
  margin-left: -5% !important; /* центруємо */
}

html:has(head meta[property="og:url"][content*="paket-kraft-buryy-34x26x14"])
img.mainImage {
  content: url("https://pic.xerox.co.ua/pics/paket-kraft-buryy-34x26x14.png") !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 0 !important;
  width: 110% !important;     /* виходить за межі */
  max-width: 110% !important;
  margin-left: -5% !important; /* центруємо */
}

html:has(head meta[property="og:url"][content*="paket-kraft-belyy-34x26x14"])
img.mainImage {
  content: url("https://pic.xerox.co.ua/pics/paket-kraft-belyy-34x26x14.png") !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 0 !important;
  width: 110% !important;     /* виходить за межі */
  max-width: 110% !important;
  margin-left: -5% !important; /* центруємо */
}

html:has(head meta[property="og:url"][content*="paket-kraft-buryy-38x32x15"])
img.mainImage {
  content: url("https://pic.xerox.co.ua/pics/paket-kraft-buryy-38x32x15.png") !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 0 !important;
  width: 110% !important;     /* виходить за межі */
  max-width: 110% !important;
  margin-left: -5% !important; /* центруємо */
}

html:has(head meta[property="og:url"][content*="paket-kraft-belyy-42x32x15"])
img.mainImage {
  content: url("https://pic.xerox.co.ua/pics/paket-kraft-belyy-42x32x15.png") !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 0 !important;
  width: 110% !important;     /* виходить за межі */
  max-width: 110% !important;
  margin-left: -5% !important; /* центруємо */
}

html:has(head meta[property="og:url"][content*="paket-pod-butylku-kraft-buryy"])
img.mainImage {
  content: url("https://pic.xerox.co.ua/pics/paket-pod-butylku-kraft-buryy.png") !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 0 !important;
  width: 110% !important;     /* виходить за межі */
  max-width: 110% !important;
  margin-left: -5% !important; /* центруємо */
}

html:has(head meta[property="og:url"][content*="paket-banan-40x50"])
img.mainImage {
  content: url("https://pic.xerox.co.ua/pics/paket-banan-40x50.png") !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 0 !important;
  width: 110% !important;     /* виходить за межі */
  max-width: 110% !important;
  margin-left: -5% !important; /* центруємо */
}

html:has(head meta[property="og:url"][content*="paket-banan-30x40"])
img.mainImage {
  content: url("https://pic.xerox.co.ua/pics/paket-banan-30x40.png") !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 0 !important;
  width: 110% !important;     /* виходить за межі */
  max-width: 110% !important;
  margin-left: -5% !important; /* центруємо */
}

html:has(head meta[property="og:url"][content*="paket-a5"])
#mainImage {
  content: url("https://pic.xerox.co.ua/pics/paket-a5.png") !important;
  border-radius: 0 !important;
  width: 110% !important;
  margin-left: -5% !important;
}

html:has(head meta[property="og:url"][content*="paket-a4"])
#mainImage {
  content: url("https://pic.xerox.co.ua/pics/paket-a4.png") !important;
  border-radius: 0 !important;
  width: 110% !important;
  margin-left: -5% !important;
}
html:has(head meta[property="og:url"][content*="paket-a3"])
#mainImage {
  content: url("https://pic.xerox.co.ua/pics/paket-a3.png") !important;
  border-radius: 0 !important;
  width: 110% !important;
  margin-left: -5% !important;
}

html:has(head meta[property="og:url"][content*="paket-dlya-vina"])
#mainImage {
  content: url("https://pic.xerox.co.ua/pics/paket-dlya-vina.png") !important;
  border-radius: 0 !important;
  width: 110% !important;
  margin-left: -5% !important;
}
                        

.category-container .page-header {
  text-align: center !important;
  font-size: 32px !important;
  font-weight: 600 !important;
  margin-bottom: 10px !important;
}


/*///////////////////////////////////////// 
ETIKETKA
/////////////////////////////////////////*/


/* --- etikетка-pb --- */
html:has(head meta[property="og:url"][content*="etiketka-pb"]) {
#productBox > .col-sm-7::before{
  content: "";
  position: absolute;
  inset: 0;
  background: #fff url("https://pic.xerox.co.ua/pics/etiketka-pb.png") center / contain no-repeat;
  border-radius: 8px;
}
}

/* --- etikетка (базова) --- */
html:has(head meta[property="og:url"][content*="/shop/etiketka/"]) {
#productBox > .col-sm-7::before{
  content: "";
  position: absolute;
  inset: 0;
  background: #fff url("https://pic.xerox.co.ua/pics/etiketka.png") center / contain no-repeat;
  border-radius: 8px;
}
}

/* --- etikетка-pp ---*/
html:has(head meta[property="og:url"][content*="etiketka-pp"]) {
#productBox > .col-sm-7::before{
  content: "";
  position: absolute;
  inset: 0;
  background: #fff url("https://pic.xerox.co.ua/pics/etiketka-pp.png") center / contain no-repeat;
  border-radius: 8px;
} }

/* --- etikетка-ps --- */
html:has(head meta[property="og:url"][content*="etiketka-ps"]) {
#productBox > .col-sm-7::before{
  content: "";
  position: absolute;
  inset: 0;
  background: #fff url("https://pic.xerox.co.ua/pics/etiketka-ps.png") center / contain no-repeat;
  border-radius: 8px;
}}

/* --- etikетка-ps --- */
html:has(head meta[property="og:url"][content*="etiketka-kraft"]) {
#productBox > .col-sm-7::before{
  content: "";
  position: absolute;
  inset: 0;
  background: #fff url("https://pic.xerox.co.ua/pics/etiketka-kraft.png") center / contain no-repeat;
  border-radius: 8px;
}}

/* =========================================================
   XEROX PLUS — ORDERS ACTIVE
   SCOPED ONLY TO /uk/orders-active/
   ========================================================= */


/* =========================================================
   1. Breadcrumb + title
   ========================================================= */

body:has(#ordersActive) .container > div > .breadcrumb.text-muted.mt-3{
  display: none !important;
}

body:has(#ordersActive) .container > h1.page-header{
  margin: 24px 0 20px !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 34px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  color: #111827 !important;
}


/* =========================================================
   2. Main layout:
   top controls below list, CTA after table
   ========================================================= */

body:has(#ordersActive) .container:has(#panelOrders){
  display: flex !important;
  flex-direction: column !important;
}

body:has(#ordersActive) #panelOrders{
  order: 1 !important;
}

body:has(#ordersActive) .container > .row.d-flex.flex-wrap{
  order: 2 !important;
}


/* =========================================================
   3. Top controls row
   only filter remains
   ========================================================= */

body:has(#ordersActive) .container > .row.d-flex.flex-wrap{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin: 20px 0 0 !important;
}

body:has(#ordersActive) .container > .row.d-flex.flex-wrap > .col-xs-12.col-sm-12.col-md-9.col-lg-10.mb-3,
body:has(#ordersActive) .container > .row.d-flex.flex-wrap > .col-md-3.col-lg-2.col-xs-12.col-sm-12.mb-3{
  margin-bottom: 0 !important;
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}


/* =========================================================
   4. Hide search / share / delete block / mass actions
   ========================================================= */

body:has(#ordersActive) #orderSearch,
body:has(#ordersActive) #btnSearch,
body:has(#ordersActive) .shareCart,
body:has(#ordersActive) #ordersActive .float-control-panel,
body:has(#ordersActive) .orderAllCheckBox,
body:has(#ordersActive) .orderCheckBox{
  display: none !important;
}

body:has(#ordersActive) .form-group.form-group-sm:has(#orderSearch),
body:has(#ordersActive) .container .input-group:has(#orderSearch){
  display: none !important;
}

body:has(#ordersActive) .container > .row.d-flex.flex-wrap .panel.panel-default.m-0 .d-flex.align-items-center.flex-wrap > div[style*="margin: 10px;"]:has(.shareCart){
  display: none !important;
}


/* =========================================================
   5. Filter panel
   ========================================================= */

body:has(#ordersActive) .container > .row.d-flex.flex-wrap .panel.panel-default.m-0{
  width: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.05) !important;
  overflow: hidden !important;
  background: #fff !important;
}

body:has(#ordersActive) .container > .row.d-flex.flex-wrap .panel.panel-default.m-0 > .panel-body{
  padding: 8px 12px !important;
  background: #fff !important;
}

body:has(#ordersActive) .container > .row.d-flex.flex-wrap .panel.panel-default.m-0 .d-flex.align-items-center.flex-wrap{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 0 !important;
}

body:has(#ordersActive) .container > .row.d-flex.flex-wrap .panel.panel-default.m-0 .form-group.form-group-sm{
  margin: 0 !important;
}

body:has(#ordersActive) label[for="orderStatusFilter"]{
  margin: 0 8px 0 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #374151 !important;
}

body:has(#ordersActive) #orderStatusFilter{
  height: 40px !important;
  min-width: 220px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-size: 14px !important;
  padding: 8px 12px !important;
  background: #fff !important;
}


/* =========================================================
   6. CTA button "Виготовити!"
   below table
   ========================================================= */

body:has(#ordersActive) .container > .row.d-flex.flex-wrap > .col-md-3.col-lg-2.col-xs-12.col-sm-12.mb-3{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body:has(#ordersActive) .container > .row.d-flex.flex-wrap > .col-md-3.col-lg-2.col-xs-12.col-sm-12.mb-3 > a[href*="/checkout/"]{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 0 !important;
  width: 100% !important;
  max-width: 420px !important;
  min-width: 220px !important;
  min-height: 56px !important;
  padding: 0 24px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: #d71920 !important;
  color: transparent !important;
  font-size: 0 !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  box-shadow: 0 12px 28px rgba(215,25,32,.22) !important;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important;
}

body:has(#ordersActive) .container > .row.d-flex.flex-wrap > .col-md-3.col-lg-2.col-xs-12.col-sm-12.mb-3 > a[href*="/checkout/"]::after{
  content: "Виготовити!";
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}

body:has(#ordersActive) .container > .row.d-flex.flex-wrap > .col-md-3.col-lg-2.col-xs-12.col-sm-12.mb-3 > a[href*="/checkout/"]:hover{
  background: #b8141a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 32px rgba(215,25,32,.28) !important;
}


/* =========================================================
   7. Orders panel base
   ========================================================= */

body:has(#ordersActive) #ordersActive{
  position: relative !important;
}

body:has(#ordersActive) #panelOrders{
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  margin-top: 0 !important;
  overflow: visible !important;
}

body:has(#ordersActive) #panelOrders thead{
  display: none !important;
}

body:has(#ordersActive) #panelOrders table,
body:has(#ordersActive) #panelOrders tbody{
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}


/* =========================================================
   8. Hide unnecessary columns
   3  = Термін
   5  = Розмір
   8  = Покр
   9  = Файли
   10 = Доставка
   14 = Checkbox
   ========================================================= */

body:has(#ordersActive) #panelOrders table th:nth-child(3),
body:has(#ordersActive) #panelOrders table td:nth-child(3),
body:has(#ordersActive) #panelOrders table th:nth-child(5),
body:has(#ordersActive) #panelOrders table td:nth-child(5),
body:has(#ordersActive) #panelOrders table th:nth-child(8),
body:has(#ordersActive) #panelOrders table td:nth-child(8),
body:has(#ordersActive) #panelOrders table th:nth-child(9),
body:has(#ordersActive) #panelOrders table td:nth-child(9),
body:has(#ordersActive) #panelOrders table th:nth-child(10),
body:has(#ordersActive) #panelOrders table td:nth-child(10),
body:has(#ordersActive) #panelOrders table th:nth-child(14),
body:has(#ordersActive) #panelOrders table td:nth-child(14){
  display: none !important;
}


/* =========================================================
   9. Table -> clean list view
   visible columns:
   1 №
   2 Created
   4 Name
   6 Qty
   7 Material
   11 Sum
   12 $
   13 Status
   ========================================================= */

body:has(#ordersActive) #panelOrders tbody tr{
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  padding: 18px 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid #e5e7eb !important;
  background: #fff !important;
  transition: background .15s ease !important;
}

body:has(#ordersActive) #panelOrders tbody tr:hover{
  background: #fafafa !important;
}

body:has(#ordersActive) #panelOrders tbody td{
  border: none !important;
  padding: 0 12px !important;
  vertical-align: middle !important;
  background: transparent !important;
}

body:has(#ordersActive) #panelOrders .table-striped > tbody > tr:nth-of-type(odd){
  background: #fff !important;
}


/* =========================================================
   10. Column widths and typography
   ========================================================= */

/* № */
body:has(#ordersActive) #panelOrders tbody td:first-child{
  width: 90px !important;
  flex: 0 0 90px !important;
}

body:has(#ordersActive) #panelOrders tbody td:first-child a.order_show_info{
  font-weight: 700 !important;
  color: #2563eb !important;
  text-decoration: none !important;
}

/* Created */
body:has(#ordersActive) #panelOrders tbody td:nth-child(2){
  width: 100px !important;
  flex: 0 0 100px !important;
  color: #6b7280 !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

/* Name */
body:has(#ordersActive) #panelOrders tbody td:nth-child(4){
  flex: 1 1 auto !important;
  min-width: 180px !important;
}

body:has(#ordersActive) #panelOrders tbody td:nth-child(4) a.order_show_info{
  color: #111827 !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  text-decoration: none !important;
}

body:has(#ordersActive) #panelOrders tbody td:nth-child(4) a.order_show_info:hover,
body:has(#ordersActive) #panelOrders tbody td:first-child a.order_show_info:hover{
  text-decoration: underline !important;
}

/* Qty */
body:has(#ordersActive) #panelOrders tbody td:nth-child(6){
  width: 90px !important;
  flex: 0 0 90px !important;
  color: #374151 !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

/* Material */
body:has(#ordersActive) #panelOrders tbody td:nth-child(7){
  width: 180px !important;
  flex: 0 0 180px !important;
  color: #374151 !important;
  font-size: 13px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Sum */
body:has(#ordersActive) #panelOrders tbody td.text-right.text-success.text-nowrap{
  width: 140px !important;
  flex: 0 0 140px !important;
  color: #d71920 !important;
  white-space: nowrap !important;
}

body:has(#ordersActive) #panelOrders tbody td.text-right.text-success.text-nowrap strong{
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #d71920 !important;
}

/* Dollar/payment column */
body:has(#ordersActive) #panelOrders tbody td:nth-child(12){
  width: 30px !important;
  flex: 0 0 30px !important;
  text-align: center !important;
  color: #9ca3af !important;
}

/* Status */
body:has(#ordersActive) #panelOrders tbody td:nth-child(13){
  width: 140px !important;
  flex: 0 0 140px !important;
  text-align: left !important;
}

body:has(#ordersActive) #panelOrders td .label{
  border-radius: 999px !important;
  padding: 7px 12px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  width: auto !important;
  display: inline-block !important;
}

body:has(#ordersActive) #panelOrders td .label-danger{
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border: 1px solid #fecaca !important;
}


/* =========================================================
   11. Remove small visual noise
   ========================================================= */

body:has(#ordersActive) #panelOrders abbr{
  text-decoration: none !important;
  border-bottom: 0 !important;
}

body:has(#ordersActive) #panelOrders .fa-dollar-sign{
  color: #9ca3af !important;
}


/* =========================================================
   12. Responsive
   ========================================================= */

@media (max-width: 991px){
  body:has(#ordersActive) #panelOrders{
    overflow-x: auto !important;
  }

  body:has(#ordersActive) #panelOrders table{
    min-width: 930px !important;
  }

  body:has(#ordersActive) .container > .row.d-flex.flex-wrap{
    justify-content: center !important;
  }

  body:has(#ordersActive) .container > .row.d-flex.flex-wrap > .col-md-3.col-lg-2.col-xs-12.col-sm-12.mb-3{
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    justify-content: center !important;
  }

  body:has(#ordersActive) .container > .row.d-flex.flex-wrap > .col-md-3.col-lg-2.col-xs-12.col-sm-12.mb-3 > a[href*="/checkout/"]{
    max-width: 100% !important;
    min-height: 52px !important;
  }

  body:has(#ordersActive) .container > .row.d-flex.flex-wrap > .col-md-3.col-lg-2.col-xs-12.col-sm-12.mb-3 > a[href*="/checkout/"]::after{
    font-size: 16px !important;
  }
}

@media (max-width: 767px){
  body:has(#ordersActive) .container > h1.page-header{
    font-size: 28px !important;
    margin: 18px 0 16px !important;
  }

  body:has(#ordersActive) .container > .row.d-flex.flex-wrap .panel.panel-default.m-0 .d-flex.align-items-center.flex-wrap{
    padding: 0 !important;
  }

  body:has(#ordersActive) #orderStatusFilter{
    min-width: 100% !important;
  }

  body:has(#ordersActive) #panelOrders table{
    min-width: 860px !important;
  }
}



/*///////////////////////////////////////////////////////////////*/




#boxLink #saveLink i{
  display: none;
}

#boxLink #saveLink{
  background: #2563eb;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  box-shadow: 0 2px 8px rgba(37,99,235,0.25);
  transition: all .2s ease;
}

#boxLink #saveLink:hover{
  background: #1d4ed8;
  box-shadow: 0 4px 14px rgba(37,99,235,0.35);
  transform: translateY(-1px);
}

#boxLink #saveLink:active{
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(37,99,235,0.25);
}

#boxLink #fileLinkWait{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

#boxLink #fileLinkWait .form-group{
  flex: 1;
  margin-bottom: 0;
}

#boxLink #fileLinkWait .d-flex{
  margin-left: auto;
  gap: 8px;
}

#boxLink > p{
  display: none !important;
}

#boxLink .list-group > li.list-group-item:first-child{
  font-size: 0;
}

/* підставити новий */
#boxLink .list-group > li.list-group-item:first-child::after{
  content: "Будь-ласка, завантажте файл файлообмінник (wetransfer.com, send-anywhere.com чи ін.) і надайте нам посилання.";
  font-size: 14px;
  line-height: 1.4;
  display: block;
}

.mb-4[style*="border: 1px solid #ccc"] > .row.row-10px > .col-sm-6:first-child{
  display: none !important;
}

/* праву колонку розтягнути на всю ширину */
.mb-4[style*="border: 1px solid #ccc"] > .row.row-10px > .col-sm-6:last-child{
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

a.link-dashed[href*="order-upload-remote"]{
  display: none !important;
}

section:has(#order-upload-frame)::before{
content:
"Підтримуються файли: PDF, JPG, PNG, ZIP\A\A"
"Рекомендації до макета:\A"
"• Додайте поля під обріз (2–3 мм)\A"
"• Залишайте зону безпеки для тексту\A"
"• Зображення — не менше 300 dpi\A"
"• Макет у масштабі 1:1\A"
"• Шрифти вбудувати або перевести у криві\A"
"• Не використовуйте рамки по краю\A"
"• Контур різу — окремим шаром\A\A"
"Натисни :-->> для завантаження файлу";
  white-space: pre-line;
  display: block;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: #f5f6f7;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  color: #374151;
}

.mb-3.d-flex a.btn-outline-primary.btn-xs{
  font-size: 0;
}

.mb-3.d-flex a.btn-outline-primary.btn-xs::after{
  content: "-->>";
  font-size: 12px;
}

.mb-3.d-flex button.btn-primary.btn-xs{
  font-size: 0;
}

.mb-3.d-flex button.btn-primary.btn-xs::after{
  content: "->>";
  font-size: 12px;
}


section .mb-3.d-flex > span.h5.my-0{
  position: relative;
  color: transparent !important;
}
section .mb-3.d-flex > div.h5.my-0{
  position: relative;
  color: transparent !important;
}


section .mb-3.d-flex > span.h5.my-0::after{
  content: "Макет для Друку";
  position: absolute;
  left: 0;
  top: 0;
  color: #111827;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
}
section .mb-3.d-flex > div.h5.my-0::after{
  content: "Макет для Друку";
  position: absolute;
  left: 0;
  top: 0;
  color: #111827;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
}

.aboutProfProv{
  display: none !important;
} 

.container > h1.page-header,
.container > .mt-3.mb-3{
  display: inline-block;
  vertical-align: middle;
}

/* Вирівнювання в ряд */
.container > h1.page-header{
  margin-right: 20px !important;
}

/* Поле назви — гнучке */
.container > .mt-3.mb-3{
  width: auto !important;
  flex: 1;
}

/* Щоб інпут займав доступний простір */
#order_name{
  width: 320px; /* можна змінити */
  max-width: 60vw;
}

/* Сховати оригінальний текст заголовка (змінюємо вигляд айді замовлення */
.container > h1.page-header{
  display: inline-block;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

/* Ховаємо тільки перше слово "Замовлення" */
.container > h1.page-header{
  text-indent: -110px;
  padding-left: 110px;
}

/* Додаємо "ID:" */
.container > h1.page-header::before{
  content: "ID:";
  color: #6b7280;
  font-weight: 600;
  margin-right: 6px;
}

/* змінюємо форму завантаження макету*/
----------------------
.page-wrapper .container > .row > .col-md-4 > .gray-box-p10.mb-5.hidden + .h4.mt-0,
.page-wrapper .container > .row > .col-md-4 > .gray-box-p10.mb-5.hidden + .h4.mt-0 + .gray-box-p10{
  display: none !important;
}
.page-wrapper .container > .row > .col-md-4 > div.h4.mt-0{
  display: none !important;
}

.page-wrapper .container > .row > .col-md-8 > .mt-5:has(.pay-container){
  display: none !important;
}

#order-upload-frame{
  display: none !important;
}
#boxLink{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}


.page-wrapper .container > .row{
  display: flex;
  flex-wrap: wrap;
}

/* Блок "Ви обрали" — на всю ширину і першим */
.page-wrapper .container > .row > .col-md-4{
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  order: -1;
}

/* Основний лівий блок — нижче */
.page-wrapper .container > .row > .col-md-8{
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  order: 1;
}


/* =========================
   PREMIUM CARD — "Ви обрали"
========================= */

/* Ряд робимо flex-контейнером */
.page-wrapper .container > .row{
  display: flex;
  flex-wrap: wrap;
}

/* Блок "Ви обрали" переносимо вверх і на всю ширину */
.page-wrapper .container > .row > .col-md-4{
  order: -1;
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  margin-bottom: 28px;
}

/* Основний контент — нижче */
.page-wrapper .container > .row > .col-md-8{
  order: 1;
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Заголовок блоку */
.page-wrapper .container > .row > .col-md-4 > .h4:first-child{
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6b7280;
  margin-bottom: 12px !important;
}

/* Преміальна картка */
.page-wrapper .container > .row > .col-md-4 .gray-box-p10.mb-4{
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px !important;
  padding: 28px 32px !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* Сітка параметрів */
.page-wrapper .container > .row > .col-md-4 .gray-box-p10.mb-4 dl{
  display: grid;
  grid-template-columns: minmax(380px, 380px) minmax(160px, 450px) minmax(380px, 380px) minmax(160px, 450px);
  column-gap: 24px;
  row-gap: 14px;
  margin: 0;
}


.page-wrapper .container > .row > .col-md-4 .gray-box-p10.mb-4 dl dt{
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: normal;
  line-height: 1.35;
}

.page-wrapper .container > .row > .col-md-4 .gray-box-p10.mb-4 dl dd{
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  line-height: 1.35;
  min-width: 0;
}

.page-wrapper .container > .row > .col-md-4 .gray-box-p10.mb-4 dl hr{
  grid-column: 1 / -1;
  width: 100%;
  margin: 4px 0 !important;
  border: 0;
  border-top: 1px solid #eef0f3;
}


/* Назви параметрів */
.page-wrapper .container > .row > .col-md-4 .gray-box-p10.mb-4 dl dt{
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Значення */
.page-wrapper .container > .row > .col-md-4 .gray-box-p10.mb-4 dl dd{
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  line-height: 1.35;
}

/* Розділювачі */
.page-wrapper .container > .row > .col-md-4 .gray-box-p10.mb-4 dl hr{
  grid-column: 1 / -1;
  width: 100%;
  margin: 4px 0 !important;
  border: 0;
  border-top: 1px solid #eef0f3;
}

/* Акцент на фінальній сумі */
.page-wrapper .container > .row > .col-md-4 .gray-box-p10.mb-4 dl dt:last-of-type{
  color: #d71920;
}

.page-wrapper .container > .row > .col-md-4 .gray-box-p10.mb-4 dl dd:last-of-type{
  color: #d71920;
  font-size: 34px;
  font-weight: 700;
  line-height: 1;
}

/* Другорядні блоки під ним — теж акуратні */
.page-wrapper .container > .row > .col-md-4 > .h4:not(:first-child){
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6b7280;
  margin-top: 24px !important;
  margin-bottom: 12px !important;
}

.page-wrapper .container > .row > .col-md-4 .gray-box-p10:not(.mb-4){
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 14px !important;
  padding: 22px 24px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.04);
}

/* Мобільна адаптація */
@media (max-width: 991px){
  .page-wrapper .container > .row > .col-md-4 .gray-box-p10.mb-4{
    padding: 22px 20px !important;
  }

  .page-wrapper .container > .row > .col-md-4 .gray-box-p10.mb-4 dl{
    grid-template-columns: 140px 1fr;
    column-gap: 18px;
  }

  .page-wrapper .container > .row > .col-md-4 .gray-box-p10.mb-4 dl dd:last-of-type{
    font-size: 28px;
  }
}

@media (max-width: 575px){
  .page-wrapper .container > .row > .col-md-4 .gray-box-p10.mb-4 dl{
    grid-template-columns: 1fr;
    row-gap: 6px;
  }

  .page-wrapper .container > .row > .col-md-4 .gray-box-p10.mb-4 dl dt{
    margin-top: 8px;
  }

  .page-wrapper .container > .row > .col-md-4 .gray-box-p10.mb-4 dl dd:last-of-type{
    font-size: 26px;
    margin-top: 6px;
  }
}



/* прибираємо картинки з вспливаючих вікон вибору матеріалу*/
#modal_dialog-01 .col-md-4.mb-2 img{
  display: none !important;
}

@media (min-width: 768px) {
  #productBox{
    display: flex;
    flex-direction: row;
  }

  #affixCont{
    order: 2;
  }

  .productOptions{
    order: 1;
  }

#productBox{
    display: flex !important;
  }

  /* Правий блок (опції) – ширший */
  #productBox > .productOptions{
    flex: 0 0 60% !important;
    max-width: 60% !important;
  }

  /* Лівий блок (картинка) – вужчий */
  #productBox > #affixCont{
    flex: 0 0 40% !important;
    max-width: 40% !important;
  }

}


#productBox #mainImage {
  border-radius: 0 !important;
}
#productBox .productOptions {
  border: 1px solid #d1d5db;   /* нейтральний світло-сірий */
  border-radius: 0 !important; /* гострі кути */
  padding: 20px;
  background: #ffffff;
}

#affixCont{
  margin-top: 52px !important;
}
.productOptions{
  margin-top: 52px !important;
}

/* 2) Сам інфо-блок (без великого margin-bottom) */
.container.mb-5:has(.selectType option[value*="/uk/shop/nakleyka/"][selected]) 
.productOptions h1.page-header.hidden-xs::after{
  content: "Зазвичай ви можете друкувати наліпки на вашому пристрої. \AАле якщо вам треба зробити контурну порізку і у вас немає фінішної опції - тут ми вам допоможемо!";
  white-space: pre-line;
  display: block;
  margin-top: 12px;
  padding: 12px 16px;
  background: #f3f4f6;
  border-radius: 0px;
  font-size: 16px;
  color: #374151;
}




/* =========================
   PRINT-SKOTCH (clean final)
   ========================= */

/* 0) Права колонка керується order */
#productBox .productOptions{
  display: flex;
  flex-direction: column;
  text-align: left;
}

/* 1) Порядок блоків */
#productBox .productOptions > h1.page-header,
#productBox .productOptions > h1.hidden-xs{
  order: 1;
  margin-bottom: 12px !important;
}

/* "Буде відправлено" одразу після назви */
#productBox .productOptions .productOptionsValues[data-id="304"]{
  order: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px 0 !important;
}

/* решта опцій */
#productBox .productOptions .productOptionsValues[data-id="317"]{ order: 10; }
#productBox .productOptions .productOptionsValues[data-id="318"]{ order: 11; }
#productBox .productOptions .productOptionsValues[data-id="152"]{ order: 12; }
#productBox .productOptions .productOptionsValues[data-id="12"] { order: 13; }
#productBox .productOptions #section-cost{ order: 30; }

/* 2) form-group як на "етикетках" */
#productBox .productOptions .form-group.productOptionsValues{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

#productBox .productOptions .form-group.productOptionsValues > label{
  margin: 0;
  min-width: 180px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: #111;
}

#productBox .productOptions .form-group.productOptionsValues > .form-control.optionValues{
  width: 220px !important;
  min-width: 220px;
  max-width: 220px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid #ddd;
  box-shadow: none;
  padding: 8px 12px;
}

/* hidden лишається hidden */
#productBox .productOptions .form-group.productOptionsValues.hidden{
  display: none !important;
}

/* 3) data-id=304 -> "Буде відправлено: <значення>" */
#productBox .productOptions .productOptionsValues[data-id="304"] > label{
  margin: 0;
  font-size: 0; /* ховаємо "Терміни виробництва" */
  min-width: auto;
}
#productBox .productOptions .productOptionsValues[data-id="304"] > label::before{
  content: "Буде відправлено:";
  font-size: 14px;
  font-weight: 600;
  color: #111;
  white-space: nowrap;
}

/* Показуємо поточне selected як "текстоподібний" select (динамічний) */
#productBox .productOptions .productOptionsValues[data-id="304"] > select.form-control.optionValues{
  width: auto !important;
  min-width: 0;
  max-width: none;
  height: auto;
  padding: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 14px;
  font-weight: 700;
  color: #d60000;
  pointer-events: none;      /* не змінюється вручну */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
#productBox .productOptions .productOptionsValues[data-id="304"] > select::-ms-expand{
  display: none;
}

/* 4) Блок вартості */
#productBox .productOptions #section-cost{
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 14px;
  margin-top: 12px;
}

/* "Тираж" -> "Кількість:" */
#productBox .productOptions #section-cost > label{
  font-size: 0;
  margin: 0 0 8px 0;
  display: block;
}
#productBox .productOptions #section-cost > label::before{
  content: "Кількість:";
  font-size: 14px;
  font-weight: 600;
  color: #111;
}

/* кнопка кількості 220px */
#productBox .productOptions #section-cost .table-price .dropdown-toggle{
  width: 220px !important;
  min-width: 220px;
  max-width: 220px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid #ddd;
  background: #fff;
  text-align: left;
  padding: 8px 12px;
  font-size: 14px;
}
#productBox .productOptions #section-cost .table-price .dropdown-item{
  white-space: nowrap;
}

/* ціна: червона, велика, зліва */
#productBox .productOptions #section-cost #cost{
  margin-top: 8px;
  text-align: left !important;
}
#productBox .productOptions #section-cost #productCost{
  display: block;
  text-align: left !important;
  color: #dc2626 !important;
  font-size: 32px !important;
  line-height: 1.1;
  font-weight: 700 !important;
  margin: 8px 0 12px;
}
#productBox .productOptions #section-cost .text-center{ text-align: left !important; }
#productBox .productOptions #section-cost .text-nowrap{ white-space: normal !important; }

/* кнопка: червона + "Замовити" */
#productBox .productOptions #section-cost .productAddToCart_v4{
  width: 220px !important;
  height: 44px;
  border-radius: 8px;
  border: 1px solid #dc2626 !important;
  background: #dc2626 !important;
  color: transparent !important;
  font-size: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#productBox .productOptions #section-cost .productAddToCart_v4::after{
  content: "Замовити";
  color: #fff;
  font-size: 16px;
  line-height: 1;
}
#productBox .productOptions #section-cost .productAddToCart_v4:hover,
#productBox .productOptions #section-cost .productAddToCart_v4:focus{
  background: #b91c1c !important;
  border-color: #b91c1c !important;
}

/* прибираємо порожню ліву колонку біля кнопки */
#productBox .productOptions #section-cost .row.row-10px:last-child .col-xs-6:first-child{
  display: none !important;
}
#productBox .productOptions #section-cost .row.row-10px:last-child .col-xs-6:last-child{
  width: 100% !important;
}

/* 5) Mobile */
@media (max-width: 767px){
  #productBox .productOptions .form-group.productOptionsValues{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  #productBox .productOptions .form-group.productOptionsValues > label{
    min-width: 0;
  }
  #productBox .productOptions .form-group.productOptionsValues > .form-control.optionValues,
  #productBox .productOptions #section-cost .table-price .dropdown-toggle,
  #productBox .productOptions #section-cost .productAddToCart_v4{
    width: 100% !important;
    min-width: 0;
    max-width: none;
  }
  #productBox .productOptions #section-cost #productCost{
    font-size: 28px !important;
  }
}
/* Ховаємо текст "Терміни виробництва" тільки для блоку data-id=304 */
#productBox .productOptions .productOptionsValues[data-id="304"] label{
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}

/* Повертаємо наш підпис */
#productBox .productOptions .productOptionsValues[data-id="304"] label::before{
  content: "Буде відправлено:" !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  color: #111 !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}
/* ===== PRINT-SKOTCH: fix "Буде відправлено" + перенос вгору ===== */

/* Робимо праву колонку флекс-контейнером */
#productBox .productOptions{
  display: flex !important;
  flex-direction: column !important;
}

/* Порядок елементів */
#productBox .productOptions > h1.page-header{ order: 1 !important; }
#productBox .productOptions > .productOptionsValues[data-id="304"]{ order: 2 !important; }
#productBox .productOptions > .productOptionsValues[data-id="317"]{ order: 10 !important; }
#productBox .productOptions > .productOptionsValues[data-id="318"]{ order: 11 !important; }
#productBox .productOptions > .productOptionsValues[data-id="152"]{ order: 12 !important; }
#productBox .productOptions > .productOptionsValues[data-id="12"] { order: 13 !important; }
#productBox .productOptions > #section-cost{ order: 30 !important; }

/* Стиль самого блоку "Буде відправлено" */
#productBox .productOptions > .productOptionsValues[data-id="304"]{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 14px 0 !important;
}

/* Ховаємо оригінальний текст label */
#productBox .productOptions > .productOptionsValues[data-id="304"] > label{
  font-size: 0 !important;
  line-height: 0 !important;
  margin: 0 !important;
}

/* Додаємо свій текст */
#productBox .productOptions > .productOptionsValues[data-id="304"] > label::before{
  content: "Буде відправлено:" !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  color: #111 !important;
  white-space: nowrap !important;
}

/* Select показуємо як "текстове значення" (динамічне selected) */
#productBox .productOptions > .productOptionsValues[data-id="304"] > select.form-control.optionValues{
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  pointer-events: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #d60000 !important;
}
#productBox .productOptions > .productOptionsValues[data-id="304"] > select::-ms-expand{
  display: none !important;
}
/* Перейменування лейблів на сторінці print-skotch */
#productBox .productOptions > .productOptionsValues[data-id="317"] > label,
#productBox .productOptions > .productOptionsValues[data-id="318"] > label{
  font-size: 0 !important;   /* ховаємо оригінальний текст */
  line-height: 0 !important;
}

/* Основа скотчу -> Основа */
#productBox .productOptions > .productOptionsValues[data-id="317"] > label::before{
  content: "Основа" !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  color: #111 !important;
}

/* Довжина одного рулону -> Довжина рулону */
#productBox .productOptions > .productOptionsValues[data-id="318"] > label::before{
  content: "Довжина рулону" !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  font-weight: 600 !important;
  color: #111 !important;
}





/* =========================================
   NAKLEYKA -> form-group у стилі "етикеток"
   ========================================= */

/* ===== FIX 1: фіксована ширина кнопки кількості ===== */
#productBox .productOptions #cost .table-price > #dropdownMenuButton.btn.dropdown-toggle{
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  flex: 0 0 220px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  white-space: nowrap !important;
}

/* Якщо батько розтягує елемент на 100% */
#productBox .productOptions #cost .table-price{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* Мобільний: можна лишити 220 або зробити 100% */
@media (max-width: 575px){
  #productBox .productOptions #cost .table-price > #dropdownMenuButton.btn.dropdown-toggle{
    width: 220px !important;      /* якщо хочеш завжди 220 */
    min-width: 220px !important;
    max-width: 220px !important;
    /* або заміни 3 рядки вище на 100% / 100% / 100% */
  }
}

/* ===== FIX 2: ціна червона, великим, зліва, окремим рядком ===== */

/* Переводимо верхній row у колонку */
#productBox .productOptions #cost .row.row-10px.mb-4{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

/* Скидаємо bootstrap-ширини колонок усередині цього row */
#productBox .productOptions #cost .row.row-10px.mb-4 > .col-xs-6,
#productBox .productOptions #cost .row.row-10px.mb-4 > .col-sm-6,
#productBox .productOptions #cost .row.row-10px.mb-4 > .col-md-6{
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Сама ціна */
#productBox .productOptions #cost #productCost.text-success{
  color: #dc2626 !important;
  font-size: 32px !important;
  line-height: 1.1 !important;
  font-weight: 700 !important;
  text-align: left !important;
  display: block !important;
  margin: 0 !important;
}

/* ===== FIX 3: кнопка червона + текст "Замовити" ===== */

/* Ряд кнопки на всю ширину */
#productBox .productOptions #cost #buttonAddToCart.row{
  margin: 0 !important;
}
#productBox .productOptions #cost #buttonAddToCart > .col-xs-6,
#productBox .productOptions #cost #buttonAddToCart > .col-sm-6,
#productBox .productOptions #cost #buttonAddToCart > .col-md-6{
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  padding: 0 !important;
}

/* Стиль кнопки */
#productBox .productOptions #cost #buttonAddToCart .productAddToCart_v4.btn{
  width: 100% !important;
  height: 44px !important;
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-size: 0 !important;          /* ховаємо старий текст без text-indent багів */
  line-height: 44px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Новий текст кнопки */
#productBox .productOptions #cost #buttonAddToCart .productAddToCart_v4.btn::after{
  content: "Замовити";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

#productBox .productOptions #cost #buttonAddToCart .productAddToCart_v4.btn:hover{
  background: #b91c1c !important;
  border-color: #b91c1c !important;
}


/* Базова геометрія правої колонки */
#productBox .productOptions .form-group{
  margin: 0 0 10px 0 !important;
}

/* Лейбл + select/input в один рядок */
#productBox .productOptions .form-group{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
}

/* Лейбл зліва (як "Матеріал", "Втулка" на етикетках) */
#productBox .productOptions .form-group > label{
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #222 !important;
  line-height: 40px !important;
  min-width: 180px !important;  /* фіксована ширина підпису */
  flex: 0 0 140px !important;
  text-align: left !important;
}

/* Уніфікація select/input */
#productBox .productOptions .form-group > .form-control{
  flex: 0 0 220px !important;     /* як фіксована кнопка на етикетках */
  width: 220px !important;
  max-width: 100% !important;
  height: 40px !important;
  padding: 8px 36px 8px 12px !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  background-color: #fff !important;
  color: #222 !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  text-align: left !important;
}

/* Фокус як у сучасних інпутах */
#productBox .productOptions .form-group > .form-control:focus{
  border-color: #cfcfcf !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,.04) !important;
  outline: none !important;
}

/* Акуратна стрілка select */
#productBox .productOptions .form-group > select.form-control{
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image:
    linear-gradient(45deg, transparent 50%, #666 50%),
    linear-gradient(135deg, #666 50%, transparent 50%);
  background-position:
    calc(100% - 16px) calc(50% - 2px),
    calc(100% - 11px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* Блок "Свій розмір" теж підтягуємо до стилю етикеток */
#productBox .productOptions .userSizeBlock{
  margin: 0 0 10px 0 !important;
  text-align: left !important;
}
#productBox .productOptions .userSizeBlock > label{
  display: none !important; /* прибираємо загальний title "Свій розмір", як на етикетках */
}
#productBox .productOptions .userSizeBlock .calc-input-wrapper{
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
#productBox .productOptions .userSizeBlock .calc-input-wrapper .form-group{
  margin: 0 !important;
}
#productBox .productOptions .userSizeBlock .calc-input-wrapper .form-group > label{
  min-width: 160px !important;
  flex: 0 0 140px !important;
  line-height: 40px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
}
#productBox .productOptions .userSizeBlock .calc-input-wrapper .form-group > .form-control{
  flex: 0 0 260px !important;
  width: 260px !important;
  height: 40px !important;
  border: 1px solid #ddd !important;
  border-radius: 6px !important;
  text-align: left !important;
}

/* Ховаємо декоративні "×" і "мм", щоб не ламали рядки */
#productBox .productOptions .userSizeBlock .calc-input-wrapper > div[style*="height: 50px"]{
  display: none !important;
}

/* PostPress hidden не чіпаємо, але якщо відкриються — вже будуть у стилі */
#productBox .productOptions #postPressOptions .form-group{
  margin-top: 8px !important;
}

/* Адаптив: на вузьких екранах робимо в стовпчик */
@media (max-width: 767px){
  #productBox .productOptions .form-group{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  #productBox .productOptions .form-group > label{
    min-width: 0 !important;
    flex: 0 0 auto !important;
    line-height: 1.2 !important;
  }
  #productBox .productOptions .form-group > .form-control{
    width: 100% !important;
    flex: 0 0 100% !important;
  }
  #productBox .productOptions .userSizeBlock .calc-input-wrapper .form-group > .form-control{
    width: 100% !important;
    flex: 0 0 100% !important;
  }
}


#productBox .productOptions #postPressOptions{
  display: none !important;
}
#productBox .productOptions #postPressOptions{
  display: none !important;
}

#productBox .productOptions .product-options__wrapper:has(.product-options__link){
  display: none !important;
}



/* Колонка керується порядком */
#productBox .productOptions{
  display: flex !important;
  flex-direction: column !important;
}

/* Назва товару — перша */
#productBox .productOptions > h1.page-header{
  order: 1 !important;
  margin-bottom: 10px !important;
}

/* Блок дати — другий */
#productBox .productOptions > .mb-3{
  order: 2 !important;
  margin: 0 0 12px 0 !important;
  text-align: left !important;

  /* щоб "Буде відправлено:" і дата були в один рядок */
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}

/* Решта блоків нижче */
#productBox .productOptions > .form-group,
#productBox .productOptions > .userSizeBlock,
#productBox .productOptions > section,
#productBox .productOptions > .product-options__wrapper,
#productBox .productOptions > .form-horizontal{
  order: 3 !important;
}

/* Ховаємо оригінальний label "Дата готовності" */
#productBox .productOptions > .mb-3 > label{
  display: none !important;
}

/* Додаємо свій текст */
#productBox .productOptions > .mb-3::before{
  content: "Буде відправлено:";
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #222 !important;
}

/* Ряд із кнопками-датами прибираємо в "текстовий" режим */
#productBox .productOptions > .mb-3 .row.row-10px{
  margin: 0 !important;
  display: contents !important; /* важливо: щоб колонки не ламали рядок */
}

#productBox .productOptions > .mb-3 .row.row-10px > [class*="col-"]{
  padding: 0 !important;
  float: none !important;
  width: auto !important;
  display: contents !important;
}

/* Самі кнопки — без фону/рамки */
#productBox .productOptions > .mb-3 .product-options__btn.workday{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
  width: auto !important;
  cursor: pointer !important;
}

/* Показуємо лише активний варіант */
#productBox .productOptions > .mb-3 .product-options__btn.workday:not(.active){
  display: none !important;
}

/* Показуємо тільки дату активного варіанту */
#productBox .productOptions > .mb-3 .product-options__btn.workday.active .wd-date{
  display: inline !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #222 !important;
}

/* Якщо на активному варіанті дата має class hidden — примусово показати */
#productBox .productOptions > .mb-3 .product-options__btn.workday.active .wd-date.hidden{
  display: inline !important;
}

/* Текст "Хочу дешевше/терміново" не показуємо */
#productBox .productOptions > .mb-3 .product-options__btn.workday .wd-text{
  display: none !important;
}



/* =========================================================
   FIX: динамічний H1 вгорі ВСЬОГО #productBox без наїздів
   ========================================================= */

/* Контейнер для абсолютного H1 */
#productBox{
  position: relative !important;
  padding-top: 86px !important;   /* резерв під 1-2 рядки заголовка */
}

/* ВАЖЛИВО: прибираємо позиціонування у правої колонки,
   щоб containing block для absolute був саме #productBox */
#productBox .productOptions{
  position: static !important;
}

/* Сам динамічний заголовок */
#productBox .productOptions > h1.hidden-xs{
  display: block !important;
  position: absolute !important;
  top: 12px !important;
  left: 14px !important;
  right: 14px !important;

  margin: 0 !important;
  padding: 0 !important;

  font-size: 30px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  text-align: left !important;

  z-index: 20 !important;
  background: #fff !important;    /* щоб нічого не “просвічувало” знизу */
}

/* Щоб перший блок у правій колонці (у тебе це дата/відправка) не наїжджав */
#productBox .productOptions > .product-options__wrapper.mb-5{
  margin-top: 0 !important;
}

/* Мобільна адаптація */
@media (max-width: 767px){
  #productBox{
    padding-top: 68px !important;
  }

  #productBox .productOptions > h1.hidden-xs{
    top: 10px !important;
    left: 10px !important;
    right: 10px !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
  }
}


/* =========================================================
міняємо фонти як на сайті ксерокс.ком   ========================================================= */


/* =========================================================
   #cost: "Кількість:", червона ціна на новому рядку,
   червона кнопка "Замовити"
   ========================================================= */

/* 1) Лейбл "Кількість:" перед dropdown */
#productBox #cost .table-price::before{
  content: "Кількість:";
  display: inline-block !important;
  margin-right: 8px !important;
  white-space: nowrap !important;
  font-size: 16px !important;
  line-height: 40px !important;
  font-weight: 700 !important;
  vertical-align: middle !important;
  color: inherit !important;
}

/* table-price як flex, щоб лейбл + кнопка були в один ряд */
#productBox #cost .table-price{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0 !important;
}

/* 2) Ціну переносимо на новий рядок + червоний колір */
#productBox #cost .product-options__dropdown > .row{
  display: flex !important;
  flex-wrap: wrap !important;      /* дозволяє новий рядок */
  align-items: center !important;
  gap: 10px 12px !important;
}

#productBox #cost .product-options__dropdown > .row > .col-md-6{
  float: none !important;
  width: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* перший col (вибір кількості) лишається в рядку */
#productBox #cost .product-options__dropdown > .row > .col-md-6:first-child{
  flex: 0 0 auto !important;
}

/* другий col (ціна) — на новий рядок */
#productBox #cost .product-options__dropdown > .row > .col-md-6:last-child{
  flex: 0 0 100% !important;
}

/* червона ціна */
#productBox #cost #productCost{
  color: #d32f2f !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin-top: 2px !important;
  text-align: left !important;
}

/* 3) Кнопка червона + текст "Замовити" */
#productBox #cost .options-btn-group .options-btn.productAddToCart_v4{
  background-color: #d32f2f !important;
  border-color: #d32f2f !important;
  color: #fff !important;
  width: 100% !important;
  min-height: 44px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  font-size: 0 !important;         /* ховаємо оригінальний текст */
  position: relative !important;
}

#productBox #cost .options-btn-group .options-btn.productAddToCart_v4::after{
  content: "Замовити";
  font-size: 16px !important;
  line-height: 44px !important;
  color: #fff !important;
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  text-align: center !important;
}

/* hover/focus */
#productBox #cost .options-btn-group .options-btn.productAddToCart_v4:hover,
#productBox #cost .options-btn-group .options-btn.productAddToCart_v4:focus{
  background-color: #b71c1c !important;
  border-color: #b71c1c !important;
  color: #fff !important;
}
/* =========================================================
   Додаємо "Ціна:" перед #productCost
   ========================================================= */

#productBox #cost #productCost::before{
  content: "Ціна: ";
  display: inline-block !important;
  margin-right: 6px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  color: #d32f2f !important;
  vertical-align: baseline !important;
}

/* Щоб виглядало як один акуратний рядок */
#productBox #cost #productCost{
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 0 !important;
}

/* 1) Кнопка вибору кількості — більша, як інші елементи */
#productBox #cost .table-price > .btn.dropdown-toggle{
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;

  height: 40px !important;
  min-height: 40px !important;
  line-height: 40px !important;

  padding: 0 32px 0 12px !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

/* меню такої ж ширини */
#productBox #cost .table-price > .dropdown-menu{
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
}

/* 2) Ціна — вирівняти ліворуч */
#productBox #cost .product-options__dropdown > .row > .col-md-6:last-child{
  flex: 0 0 100% !important;  /* окремий рядок, якщо ти так і хотів */
  text-align: left !important;
}

#productBox #cost #productCost{
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  margin-left: 0 !important;
}

/* =========================================================
   #cost як сіра картка (кількість + ціна + кнопка)
   ========================================================= */

#productBox #cost{
  background: #f3f4f6 !important;      /* світло-сірий фон */
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  padding: 14px !important;
  margin-top: 14px !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

/* Внутрішній wrapper без зайвих відступів */
#productBox #cost .product-options__wrapper{
  margin: 0 !important;
  background: transparent !important;
}

/* Рядок з кількістю/ціною */
#productBox #cost .product-options__dropdown > .row{
  margin: 0 !important;
}

/* Кнопка замовлення не прилипає до ціни */
#productBox #cost .options-btn-group{
  margin-top: 12px !important;
}

/* (опційно) легкий hover для картки */
#productBox #cost:hover{
  border-color: #d1d5db !important;
}

/* =========================================================
  Ширина і Висота етикетки  userSizeBlock: лейбл перед інпутом, 2 рядки, зліва
   ========================================================= */

/* Контейнер у 2 рядки */
#productBox .col-sm-5.col-xs-12.productOptions > .row.size.userSizeBlock{
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin: 0 0 12px 0 !important;
}

/* Кожен рядок на всю ширину */
#productBox .col-sm-5.col-xs-12.productOptions > .row.size.userSizeBlock > .col-xs-6{
  width: 100% !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Рядок: [Лейбл] [Інпут] */
#productBox .col-sm-5.col-xs-12.productOptions > .row.size.userSizeBlock .product-options__wrapper{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  margin: 0 !important;
  text-align: left !important;
}

/* Ховаємо рідний h3 */
#productBox .col-sm-5.col-xs-12.productOptions > .row.size.userSizeBlock .product-options__title{
  display: none !important;
}

/* Додаємо лейбли через ::before */
#productBox .col-sm-5.col-xs-12.productOptions > .row.size.userSizeBlock .product-options__wrapper:has(input.userSize.width)::before{
  content: "Ширина етикетки (мм):";
  display: inline-block !important;
  min-width: 185px !important;
  white-space: nowrap !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  text-align: left !important;
}

#productBox .col-sm-5.col-xs-12.productOptions > .row.size.userSizeBlock .product-options__wrapper:has(input.userSize.height)::before{
  content: "Висота етикетки (мм):";
  display: inline-block !important;
  min-width: 185px !important;
  white-space: nowrap !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  text-align: left !important;
}

/* Інпути */
#productBox .col-sm-5.col-xs-12.productOptions > .row.size.userSizeBlock input.userSize{
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 12px !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

/* прибрати стрілки number (опційно) 
#productBox .col-sm-5.col-xs-12.productOptions > .row.size.userSizeBlock input[type="number"]::-webkit-outer-spin-button,
#productBox .col-sm-5.col-xs-12.productOptions > .row.size.userSizeBlock input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
#productBox .col-sm-5.col-xs-12.productOptions > .row.size.userSizeBlock input[type="number"]{
  -moz-appearance: textfield;
}*/

/* FIX: Ширина/Висота — лейбл + інпут в один рядок */
#productBox .col-sm-5.col-xs-12.productOptions > .row.size.userSizeBlock > .col-xs-6 .product-options__wrapper{
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

/* Псевдолейбли тільки inline, без переносу */
#productBox .col-sm-5.col-xs-12.productOptions > .row.size.userSizeBlock > .col-xs-6 .product-options__wrapper::before{
  display: inline-block !important;
  flex: 0 0 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
  margin: 0 !important;
  white-space: nowrap !important;
  line-height: 40px !important; /* вирівнювання по висоті інпута */
}

/* Інпут фіксованої ширини як інші елементи */
#productBox .col-sm-5.col-xs-12.productOptions > .row.size.userSizeBlock > .col-xs-6 input.userSize{
  display: inline-block !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  flex: 0 0 220px !important;
  margin: 0 !important;
}

/* На випадок, якщо h3 ще займає місце */
#productBox .col-sm-5.col-xs-12.productOptions > .row.size.userSizeBlock .product-options__title{
  display: none !important;
  margin: 0 !important;
}



/* =========================================================
   Втулка - Намотка - Відстань
   ========================================================= */

/* 1) Ховаємо оригінальні h3 у видимих рядках hiddenOptions */
#productBox .col-sm-5.col-xs-12.productOptions > .hiddenOptions > .product-options__wrapper:not(.hidden) > .product-options__title{
  display:none !important;
}

/* 2) Базовий префікс-лейбл перед dropdown */
#productBox .col-sm-5.col-xs-12.productOptions > .hiddenOptions > .product-options__wrapper:not(.hidden) > .product-options__dropdown::before{
  display:inline-block !important;
  margin-right:8px !important;
  white-space:nowrap !important;
  font-size:16px !important;
  line-height:1.25 !important;
  font-weight:700 !important;
  vertical-align:middle !important;
}

/* 3) Точні назви для кожного рядка */
#productBox .col-sm-5.col-xs-12.productOptions > .hiddenOptions > .product-options__wrapper:not(.hidden):nth-child(2) > .product-options__dropdown::before{
  content:"Ширина втулки:";
}

#productBox .col-sm-5.col-xs-12.productOptions > .hiddenOptions > .product-options__wrapper:not(.hidden):nth-child(3) > .product-options__dropdown::before{
  content:"Тип намотки:";
}

#productBox .col-sm-5.col-xs-12.productOptions > .hiddenOptions > .product-options__wrapper:not(.hidden):nth-child(4) > .product-options__dropdown::before{
  content:"Відстань між етикетками:";
}

/* 4) Щоб лейбл + кнопка гарантовано були в один рядок ліворуч */
#productBox .col-sm-5.col-xs-12.productOptions > .hiddenOptions > .product-options__wrapper:not(.hidden) > .product-options__dropdown{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:0 !important;
  text-align:left !important;
}
/* =========================================================
   hiddenOptions: fixed buttons + vertical spacing
   ========================================================= */

/* 1) Більший вертикальний відступ між рядками */
#productBox .col-sm-5.col-xs-12.productOptions > .hiddenOptions{
  gap: 12px !important;               /* було щільно — тепер "повітря" */
}

/* fallback, якщо gap десь ігнорується */
#productBox .col-sm-5.col-xs-12.productOptions > .hiddenOptions > .product-options__wrapper:not(.hidden){
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
#productBox .col-sm-5.col-xs-12.productOptions > .hiddenOptions > .product-options__wrapper:not(.hidden) + .product-options__wrapper:not(.hidden){
  margin-top: 10px !important;
}

/* 2) Фіксований розмір кнопок */
#productBox .col-sm-5.col-xs-12.productOptions > .hiddenOptions > .product-options__wrapper:not(.hidden) > .product-options__dropdown > .btn{
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  height: 40px !important;
  min-height: 40px !important;
  line-height: 40px !important;
  padding: 0 32px 0 12px !important; /* праворуч місце під стрілку */
  box-sizing: border-box !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  border-radius: 6px !important;
}

/* 3) Меню тієї ж ширини, що кнопка */
#productBox .col-sm-5.col-xs-12.productOptions > .hiddenOptions > .product-options__wrapper:not(.hidden) > .product-options__dropdown > .dropdown-menu{
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
}

/* Для "Тип намотки" можна лишити ширше меню через картинки */
#productBox .col-sm-5.col-xs-12.productOptions > .hiddenOptions > .product-options__wrapper:not(.hidden) > .product-options__dropdown[data-id="279"] > .dropdown-menu{
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
}

/* 4) Щоб label перед кнопкою та кнопка були на одній лінії */
#productBox .col-sm-5.col-xs-12.productOptions > .hiddenOptions > .product-options__wrapper:not(.hidden) > .product-options__dropdown{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}



/* ===== Матеріал: компактний стабільний рядок (fixed 220px) ===== */

/* Блок "Матеріал" (перший wrapper після userSizeBlock) */
#productBox .col-sm-5.col-xs-12.productOptions > .row.size.userSizeBlock + .product-options__wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

/* Ховаємо штатний h3 */
#productBox .col-sm-5.col-xs-12.productOptions > .row.size.userSizeBlock + .product-options__wrapper > .product-options__title {
  display: none !important;
}

/* Псевдопідпис */
#productBox .col-sm-5.col-xs-12.productOptions > .row.size.userSizeBlock + .product-options__wrapper > .product-options__dropdown::before {
  content: "Матеріал етикетки:";
  display: inline-block !important;
  margin-right: 8px !important;
  white-space: nowrap !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
  vertical-align: middle !important;
}

/* Dropdown контейнер */
#productBox .col-sm-5.col-xs-12.productOptions > .row.size.userSizeBlock + .product-options__wrapper > .product-options__dropdown {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

/* Фіксована кнопка */
#productBox .col-sm-5.col-xs-12.productOptions > .row.size.userSizeBlock + .product-options__wrapper > .product-options__dropdown > .btn {
  width: 220px !important;
  min-width: 220px !important;
  max-width: 220px !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  padding-right: 28px !important; /* місце під стрілку */
}

/* Меню під ширину кнопки */
#productBox .col-sm-5.col-xs-12.productOptions > .row.size.userSizeBlock + .product-options__wrapper > .product-options__dropdown > .dropdown-menu {
  min-width: 220px !important;
  width: 220px !important;
}

/* Мобільна: щоб не ламалось */
@media (max-width: 480px) {
  #productBox .col-sm-5.col-xs-12.productOptions > .row.size.userSizeBlock + .product-options__wrapper {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  #productBox .col-sm-5.col-xs-12.productOptions > .row.size.userSizeBlock + .product-options__wrapper > .product-options__dropdown > .btn,
  #productBox .col-sm-5.col-xs-12.productOptions > .row.size.userSizeBlock + .product-options__wrapper > .product-options__dropdown > .dropdown-menu {
    width: min(220px, 100%) !important;
    min-width: min(220px, 100%) !important;
    max-width: 100% !important;
  }
}
/* Батьківський блок "Матеріал" */
#productBox .col-sm-5.col-xs-12.productOptions > .row.size.userSizeBlock + .product-options__wrapper {
  justify-content: flex-start !important; /* головне */
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: left !important;
}

/* Сам dropdown-контейнер не тягнемо/не центруємо */
#productBox .col-sm-5.col-xs-12.productOptions > .row.size.userSizeBlock + .product-options__wrapper > .product-options__dropdown {
  margin-left: 0 !important;
  margin-right: 0 !important;
  align-self: flex-start !important;
}

/* Якщо кнопка/блок випадково має auto-центрування */
#productBox .col-sm-5.col-xs-12.productOptions > .row.size.userSizeBlock + .product-options__wrapper > .product-options__dropdown > .btn {
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: inline-block !important;
}



/* Додати суфікс після дати */
#productBox .product-options__wrapper.mb-5 .wd-text::after {
  content: " — буде відправлено.";
  display: inline;
}

/* (опційно) зробити фразу трохи менш акцентною */
#productBox .product-options__wrapper.mb-5 .wd-text {
  font-weight: 600;
}
#productBox .product-options__wrapper.mb-5 .wd-text::after {
  font-weight: 500;
  opacity: 0.9;
}

/* 1) Прибрати заголовок "Дата готовності" */
#productBox .product-options__wrapper.mb-5 > .product-options__title {
  display: none !important;
}

/* 2) Прибрати рамку/фон/відступи у зовнішнього блоку */
#productBox .product-options__wrapper.mb-5 {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
}

/* 3) Прибрати "кнопковий" контейнер навколо дати */
#productBox .product-options__wrapper.mb-5 .product-options__switch,
#productBox .product-options__wrapper.mb-5 .product-options__btn.workday {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}

/* 4) Нормальний вигляд тексту дати */
#productBox .product-options__wrapper.mb-5 .wd-text {
  padding: 0 !important;
  margin: 0 !important;
}
#productBox .product-options__wrapper.mb-5,
#productBox .product-options__wrapper.mb-5 .product-options__switch,
#productBox .product-options__wrapper.mb-5 .product-options__btn.workday,
#productBox .product-options__wrapper.mb-5 .wd-text {
  text-align: left !important;
  justify-content: flex-start !important;
  margin-left: 0 !important;
}

#productBox .product-options__wrapper.mb-5 {
  display: flex !important;
  width: 100% !important;
}

/* Перенести блок дати першим після h1 у правій колонці */
#productBox .col-sm-5.col-xs-12.productOptions {
  display: flex !important;
  flex-direction: column !important;
}

/* Базовий порядок для всіх прямих дітей */
#productBox .col-sm-5.col-xs-12.productOptions > * {
  order: 20;
}

/* h1 першим */
#productBox .col-sm-5.col-xs-12.productOptions > h1.hidden-xs {
  order: 1 !important;
}

/* Блок з датою другим */
#productBox .col-sm-5.col-xs-12.productOptions > .product-options__wrapper.mb-5 {
  order: 2 !important;
}

/* Щоб не розтягувало на всю висоту і лишалось ліворуч */
#productBox .col-sm-5.col-xs-12.productOptions > .product-options__wrapper.mb-5 {
  align-self: flex-start !important;
  width: 100% !important; /* якщо треба на всю ширину, лишай 100%; якщо ні — auto */
}

/* Відступ перед блоком ціни */
#productBox .col-sm-5.col-xs-12.productOptions > #cost.text-center,
#productBox .col-sm-5.col-xs-12.productOptions > #cost {
  margin-top: 14px !important; /* зміни на 16/20 якщо треба більше */
}

/* =========================================================
   Swap: userSizeBlock <-> first product-options__wrapper (Матеріал)
   у правій колонці після переносу блоку дати нагору
   ========================================================= */

#productBox .col-sm-5.col-xs-12.productOptions {
  display: flex !important;
  flex-direction: column !important;
}

/* базовий порядок */
#productBox .col-sm-5.col-xs-12.productOptions > * {
  order: 20;
}

/* уже налаштоване раніше: h1 і дата зверху */
#productBox .col-sm-5.col-xs-12.productOptions > h1.hidden-xs {
  order: 1 !important;
}
#productBox .col-sm-5.col-xs-12.productOptions > .product-options__wrapper.mb-5 {
  order: 2 !important;
}

/* ВАЖЛИВО: міняємо місцями ці два блоки */
#productBox .col-sm-5.col-xs-12.productOptions > .row.size.userSizeBlock {
  order: 4 !important; /* тепер НИЖЧЕ */
}

#productBox .col-sm-5.col-xs-12.productOptions > .row.size.userSizeBlock + .product-options__wrapper {
  order: 3 !important; /* тепер ВИЩЕ (Матеріал) */
}

/* решта блоків */
#productBox .col-sm-5.col-xs-12.productOptions > .hiddenOptions { order: 5 !important; }
#productBox .col-sm-5.col-xs-12.productOptions > #cost { order: 6 !important; }




.customer-menu .customer-menu-item {
  display: none;
}

.customer-menu .customer-menu-item[href="//plus.xerox.co.ua/uk/customer-general/"] {
  display: block;
}
.customer-menu .customer-menu-item[href="//plus.xerox.co.ua/uk/orders-active/"] {
  display: block;
}
.customer-menu .customer-menu-item[href="//plus.xerox.co.ua/uk/my-bills/"] {
  display: block;
}
.customer-menu .customer-menu-item.logout.hidden-left-menu{
  display: block;
}

/* висота прямокутників із категоріями там де є підменю*/
.category-container {
  height: 50px;
  border-radius: 0px
}
.category-container .page-header {
  margin-top: 10;
  padding-top: 0;
}
.category-container {
  padding-top: 10px;
}




/*
h1.mt-0.mb-4 {
  font-size: 0; /* Ховаємо оригінальний текст */
  position: relative;
}

h1.mt-0.mb-4::before {
  content: "Обирайте що потрібно Вашим замовникам і ми доставимо це дуже швидко:";
  font-size: 2rem;
  color: #333;
}

div.breadcrumb.text-muted.mt-3 {
  font-size: 0; /* Ховаємо оригінальний текст */
  position: relative;
}*/

/* Ширина елементів на головному екрані
div.col-lg-3.col-md-4 {
  display: none; 
} 

.col-md-3.col-sm-4.col-xs-6.mb-3 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Всі елементи знизу */
height: 250px;
width:250px
padding: 1rem;

}*/

.store-index-button {
  height: 10px;
}

/* скрити опцію оплати */
.options_desktop_wrapper {
  display: none;
}

/* скрити опцію оплати частинами */
.privat24Installment.mt-4 {
  display: none;
}

/* скрити навігацію у калькуляторі */
.nav-calc {
  display: none;
}

/* скрити інформацію про продукт*/
#infoPageWide{
  display: none;
}

/* скрити інформацію про продукт і оплату*/
.container.pt-5{
  display: none;
}

/* скрити кнопку з комерційною пропозицією*/
.btn.btn-outline-secondary.btn-xs{
  display: none;
}

/* скрити кнопку із описом Канва*/
.blogPageShow{
  display: none;
}

/* скрити Важливо! Після оплати замовлення*/
.ps-3{
  display: none;
}

/* скрити опції оплати в корзині */
.payment{
  display: none;
}

/* скрити опції доставки*/

.delivery .checkbox:nth-of-type(1),
.delivery .checkbox:nth-of-type(9){
  display: none;
}

/* скрити лого вольф у корзині */
.row .col-sm-6 .main-logo{
  display: none;
}
.row .col-sm-6.text-right{
  display: none;
}


/* скрити рекламу що раптово всплила*/
#cont_info_01 {
  display: none;
}

/* змінюємо кнопки у хедері*/
.header-lang-container {
  display: none !important;
}

/* прибираємо зображення продукту у карточці продукта
#productBox .col-sm-7.col-xs-12 {
  display: none;
}

.col-sm-7.col-xs-12 img.img-responsive.mainImage {
  display: none;
}
.col-sm-7.col-xs-12 img.img-responsive {
  display: none;
}
.col-sm-7.col-xs-12 img.mainImage {
  display: none;
}
.col-sm-7.col-xs-12 img.additionalImages {
  display: none;
}
*/

/*та додаємо наші картинки .5
#productBox > .col-sm-7.col-xs-12:first-of-type {
  background-image: url('https://pic.xerox.co.ua/pics/paket.png');
  background-size: 150px 150px;
  background-position: center;
  background-repeat: no-repeat;
  width: 300px;
  height: 200px; 
}*/

/* скриваємо опис Рекомендації до макетів (зустрів у Стаканчиках)*/
.productOptions .h3,
.productOptions .desc-options {
  display: none;
}
/*скриваємо можливість загрузки файла на обмінник*/
#boxUpload {
    visibility: hidden;
}
.ppGetFromCloud {
    display: none;
}