
/* V1 product page: 24px vertical gap between Description / Specifications / Reviews
   sections on tablet/desktop. On ≤500px the .prod-sections-wrap is a flexbox
   with gap:24px (see product.css mobile cleanup block), so this rule must NOT
   double the spacing by adding margin-top on the same children. */
@media (min-width:501px){
  .prod-page-wrap.prod-page-style--v1 .prod-sections-wrap > .prod-section + .prod-section,
  #product-product.prod-page-style--v1 .prod-sections-wrap > .prod-section + .prod-section,
  #product-product .prod-page-style--v1 .prod-sections-wrap > section.prod-section + section.prod-section{
    margin-top:24px !important;
  }
  .prod-page-wrap.prod-page-style--v1 .prod-sections-wrap > .prod-section:first-child,
  #product-product.prod-page-style--v1 .prod-sections-wrap > .prod-section:first-child{
    margin-top:0 !important;
  }
}


/* Основна ціна — велика видима (та що платить покупець) */
#product-product .prod-price-new{color:#1a1a1a !important;}
/* Закреслена стара ціна — приглушений сірий, не "Акційна ціна". */
#product-product .prod-price-old{color:#9a9a9a !important;}
/* Кнопка "Купити" — фон/текст (Картка товару → Загальний вигляд) */
#product-product .prod-btn-cart,
#product-product .prod-btn-cart.cart_button{background:#392923 !important;background-color:#392923 !important;color:#ffffff !important;}
/* Hover кнопки "Купити" */
#product-product .prod-btn-cart:hover,
#product-product .prod-btn-cart.cart_button:hover{background:#4d382e !important;background-color:#4d382e !important;color:#ffffff !important;}


/* Розміри застосовуються до самої <img>, контейнер адаптується.
   !important потрібен щоб перебивати глобальні правила .prod-thumb / .prod-main-slide img
   з product.css і mobile-медіа всередині нього. max-width:100% — щоб картинка
   ніколи не виходила за viewport на вузьких екранах. */
#product-product .prod-main-swiper{min-height:0 !important;}
#product-product .prod-main-slide{min-height:0 !important;padding:0 !important;}
/* Фото заполняет бокс из настроек (product_slider_main_w/h) 1:1, без серых полос —
   cover (кроп по краям). Полный кадр открывается в лайтбоксе по клику (data-full). */
#product-product .prod-main-slide img{max-height:none !important;object-fit:cover;}
/* Video slide matches the image box exactly (contain, не crop) so it never balloons
   the swiper height — otherwise a tall video leaves a big empty gap on image slides. */
#product-product .prod-main-slide--video video{max-height:none !important;object-fit:contain !important;background:#000;}
/* Полоса мініатюр обрізається рівно по низу основного фото (main_h_*), а лишок
   прокручується — інакше мініатюри торчать нижче картинки (було 720px константою в
   product.css при фото 633px — запас 87px за межі). */
/* Desktop (≥1367) — основний дефолт */
#product-product .prod-main-slide img,
#product-product .prod-main-slide--video video{width:844px !important;height:760px !important;max-width:100% !important;}
#product-product .prod-thumb{width:70px !important;height:70px !important;}
#product-product .prod-thumbs-swiper{max-height:760px !important;}
/* Laptop 992-1366 */
@media (min-width:992px) and (max-width:1366px){
  #product-product .prod-main-slide img,
  #product-product .prod-main-slide--video video{width:951px !important;height:713px !important;max-width:100% !important;}
  #product-product .prod-thumb{width:70px !important;height:70px !important;}
  #product-product .prod-thumbs-swiper{max-height:713px !important;}
}
/* Tablet 501-991 */
@media (min-width:501px) and (max-width:991px){
  #product-product .prod-main-slide img,
  #product-product .prod-main-slide--video video{width:952px !important;height:714px !important;max-width:100% !important;}
  #product-product .prod-thumb{width:70px !important;height:70px !important;}
  #product-product .prod-thumbs-swiper{max-height:714px !important;}
}
/* Mobile ≤500 */
@media (max-width:500px){
  #product-product .prod-main-slide img,
  #product-product .prod-main-slide--video video{width:461px !important;height:346px !important;max-width:100% !important;}
  #product-product .prod-thumb{width:70px !important;height:70px !important;}
  #product-product .prod-thumbs-swiper{max-height:346px !important;}
}
.prod-thumb--video{position:relative;}
.prod-thumb__play-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.prod-main-slide--video{display:flex;align-items:center;justify-content:center;background:#000;}


            /* Extra options (Add-ons) + Personalization — 1:1 with macro. Accent = global site button colour. */
            #product .prod-addons{border:1px solid #ececec;border-radius:12px;padding:18px 18px 6px;margin:18px 0;}
            #product .prod-addons-head{font-size:15px;font-weight:600;color:#1a1a1a;margin:0 0 14px;}
            /* Personalization — light-grey rounded collapsible panel (1:1 macro) */
            #product .prod-personal{background:#f6f5f3;border:0;border-radius:12px;padding:16px 18px;margin:18px 0;}
            #product .prod-personal-head{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;padding:0;margin:0 0 14px;font-size:15px;font-weight:600;color:#1a1a1a;cursor:pointer;text-align:left;line-height:1.3;}
            #product .prod-personal-toggle{flex:0 0 auto;width:14px;text-align:center;color:#1a1a1a;font-size:12px;}
            #product .prod-personal.is-collapsed .prod-personal-head{margin-bottom:0;}
            #product .prod-personal.is-collapsed .prod-personal-body{display:none;}
            #product .prod-addon-group{margin-bottom:16px;}
            #product .prod-addon-title{display:flex;align-items:center;gap:6px;font-size:13px;color:#8a8a8a;font-weight:600;margin-bottom:8px;}
            #product .prod-option-label--row{display:flex;align-items:center;gap:6px;}
            #product .prod-addon-row{display:flex;align-items:center;gap:10px;padding:8px 0;cursor:pointer;font-size:14px;color:#333;margin:0;}
            #product .prod-addon-row input{position:absolute;opacity:0;width:0;height:0;}
            #product .prod-addon-mark{flex:0 0 auto;width:18px;height:18px;border:1.5px solid #cfcfcf;background:#fff;display:inline-block;position:relative;transition:border-color .15s,background .15s;}
            #product .prod-addon-row input[type=radio]~.prod-addon-mark{border-radius:50%;}
            #product .prod-addon-row input[type=checkbox]~.prod-addon-mark{border-radius:5px;}
            #product .prod-addon-row input:checked~.prod-addon-mark{border-color:var(--otc-btn-primary,#392923);background:var(--otc-btn-primary,#392923);}
            #product .prod-addon-row input:checked~.prod-addon-mark::after{content:"";position:absolute;}
            #product .prod-addon-row input[type=radio]:checked~.prod-addon-mark::after{inset:4px;border-radius:50%;background:#fff;}
            #product .prod-addon-row input[type=checkbox]:checked~.prod-addon-mark::after{left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
            #product .prod-addon-name{flex:1 1 auto;min-width:0;}
            #product .prod-addon-price{margin-left:auto;font-weight:500;color:#1a1a1a;white-space:nowrap;}
            /* «Была» цена варианта — рядом с действующей надбавкой, тише и зачёркнутой. */
            #product .prod-price-was{color:#9a9a9a;font-weight:400;text-decoration:line-through;}
            /* Upload box */
            #product .prod-upload{margin-top:8px;}
            #product .prod-upload-input{position:absolute!important;left:-99999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;}
            #product .prod-upload-file[hidden]{display:none!important;}
            #product .prod-upload-box{background:#fff;border:1.5px dashed #dcdcdc;border-radius:10px;padding:22px 16px;text-align:center;cursor:pointer;transition:border-color .15s,background .15s;}
            #product .prod-upload-box:hover,#product .prod-upload-box.is-dragover{border-color:var(--otc-btn-primary,#392923);background:#faf8f6;}
            #product .prod-upload-box.is-loading{opacity:.6;pointer-events:none;}
            #product .prod-upload-icon{font-size:20px;color:#9a8f88;margin-bottom:6px;}
            #product .prod-upload-cta{font-size:14px;color:#555;}
            #product .prod-upload-link{color:var(--otc-btn-primary,#392923);font-weight:600;text-decoration:underline;}
            #product .prod-upload-hint{font-size:12px;color:#9a9a9a;margin-top:4px;}
            #product .prod-upload-file{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid #e5e5e5;border-radius:10px;padding:10px 12px;font-size:14px;color:#333;margin-top:8px;}
            #product .prod-upload-fname{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
            #product .prod-upload-remove{background:none;border:0;font-size:18px;line-height:1;color:#999;cursor:pointer;padding:0 2px;}
            #product .prod-upload-remove:hover{color:#e8473b;}
            #product .prod-file-guidelines{display:inline-block;margin-top:10px;font-size:13px;color:#1a1a1a;text-decoration:underline;text-underline-offset:2px;}
            /* Підсвітка картки гайдлайнів після переходу за посиланням — гасне сама. */
            #product .prod-file-guidelines-card{transition:box-shadow .25s ease;}
            #product .prod-file-guidelines-card.is-target{box-shadow:0 0 0 2px rgba(58,36,25,.35);}
            #product .prod-personal-block{margin-bottom:8px;}
            #product .prod-personal-title{display:flex;align-items:baseline;gap:8px;font-size:15px;font-weight:600;color:#1a1a1a;margin-bottom:6px;}
            /* Surcharge of a personalization sub-option (admin: price + / - / = next to its
               toggle) — right-aligned like the add-on prices above. */
            #product .prod-personal-price{margin-left:auto;font-size:14px;font-weight:500;color:#1a1a1a;white-space:nowrap;}
            #product .prod-personal-desc{font-size:13px;color:#777;line-height:1.5;margin-bottom:12px;}
            #product .prod-personal-or{text-align:center;color:#9a9a9a;font-size:13px;margin:6px 0 16px;}
            #product .prod-file-guidelines .fa{font-size:11px;margin-left:3px;}
            #product .prod-personal-textarea{resize:vertical;min-height:84px;}

            /* ── Colour swatches (option.type='color') ── */
            #product .prod-option--color .prod-option-label,
            #product .prod-option--image .prod-option-label{
              display:flex;align-items:center;gap:6px;flex-wrap:wrap;
              font-size:14px;font-weight:600;color:#222;margin-bottom:10px;
            }
            /* ── Знак вопроса у заголовка опции ──
               Подсказка — чистый CSS на ::after: без JS, работает и по наведению мышью, и по
               фокусу с клавиатуры. Прижимается вправо (margin-left:auto), поэтому строка
               заголовка должна быть flex — так она и свёрстана у всех типов опций. */
            #product .prod-opt-hint{
              margin-left:auto;position:relative;flex:0 0 auto;
              display:inline-flex;align-items:center;justify-content:center;
              width:18px;height:18px;border-radius:50%;
              border:1px solid #c9c4bf;background:#fff;
              font-size:11px;font-weight:600;line-height:1;color:#7a7a7a;
              cursor:help;user-select:none;
            }
            #product .prod-opt-hint:hover,#product .prod-opt-hint:focus{border-color:#1f1a17;color:#1f1a17;outline:none;}
            #product .prod-opt-hint::after{
              content:attr(data-hint);
              position:absolute;right:0;bottom:calc(100% + 8px);
              width:max-content;max-width:260px;
              background:#1f1a17;color:#fff;font-size:12px;font-weight:400;line-height:1.45;
              text-align:left;white-space:normal;padding:8px 10px;border-radius:8px;
              box-shadow:0 6px 18px rgba(0,0,0,.18);
              opacity:0;visibility:hidden;transform:translateY(4px);
              transition:opacity .15s ease,transform .15s ease,visibility .15s;
              pointer-events:none;z-index:20;
            }
            #product .prod-opt-hint:hover::after,#product .prod-opt-hint:focus::after{opacity:1;visibility:visible;transform:translateY(0);}
            @media (max-width:500px){ #product .prod-opt-hint::after{max-width:200px;} }
            #product .prod-color-sep{color:#222;margin-left:-4px;}
            #product .prod-color-current{font-weight:500;color:#7a7a7a;}
            /* Обязательная опция не выбрана (B048): подсветка поля, текст — во всплывашке. */
            #product .prod-option.has-error .prod-option-label{color:#c0392b;}
            #product .prod-option.has-error select.form-control,#product .prod-option.has-error .ps-toggle{border-color:#e74c3c !important;box-shadow:0 0 0 3px rgba(231,76,60,.12);}
            #product .prod-option.has-error .prod-color-row,#product .prod-option.has-error .prod-image-row,#product .prod-option.has-error .prod-option-chips{outline:2px solid rgba(231,76,60,.45);outline-offset:4px;border-radius:8px;}
            #product .prod-color-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
            #product .prod-color-swatch{position:relative;cursor:pointer;margin:0;line-height:0;}
            #product .prod-color-swatch input{position:absolute;inset:0;opacity:0;pointer-events:none;}
            #product .prod-color-dot{
              display:block;width:28px;height:28px;border-radius:50%;
              box-shadow:0 0 0 1px rgba(0,0,0,.08) inset;
              transition:box-shadow .15s ease,transform .15s ease;
            }
            #product .prod-color-swatch:hover .prod-color-dot{transform:scale(1.06);}
            #product .prod-color-swatch input:checked + .prod-color-dot{
              box-shadow:0 0 0 2px #fff inset, 0 0 0 2px #1f1a17;
            }

            /* ── Image radio (option.type='image') ── */
            #product .prod-image-row{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;}
            #product .prod-image-swatch{position:relative;cursor:pointer;margin:0;}
            #product .prod-image-swatch input{position:absolute;inset:0;opacity:0;pointer-events:none;}
            #product .prod-image-tile{
              display:flex;align-items:center;justify-content:center;
              width:56px;height:56px;
              border:1px solid #d6d6d6;border-radius:8px;
              background:#fff;overflow:hidden;
              transition:border-color .15s ease,box-shadow .15s ease;
            }
            #product .prod-image-tile img{max-width:80%;max-height:80%;display:block;object-fit:contain;}
            #product .prod-image-fallback{font-size:12px;font-weight:600;color:#555;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;}
            /* Значение без картинки: плитка тянется под подпись целиком («120″» не режем),
               для картинок размер остаётся квадратным. */
            #product .prod-image-tile--text{width:auto;min-width:56px;padding:0 10px;}
            /* Форма превью значения опции из админки (oc_option.image_display): square|circle.
               У круглой картинка обрезается по кругу (cover), а не вписывается — иначе внутри
               круга остаются пустые поля. */
            #product .prod-image-tile--circle{border-radius:50%;overflow:hidden;}
            #product .prod-image-tile--circle img{max-width:100%;max-height:100%;object-fit:cover;border-radius:50%;}
            #product .prod-image-swatch:hover .prod-image-tile{border-color:#8a8a8a;}
            #product .prod-image-swatch input:checked + .prod-image-tile{
              border-color:#1f1a17;box-shadow:0 0 0 1px #1f1a17 inset;
            }
            #product .prod-char-counter{text-align:right;font-size:12px;color:#9a9a9a;margin-top:4px;}
            

.pc-s1.product-card-wrapper{
  --otc-card-w:330px;    --otc-img-w:446px;  --otc-img-h:446px;}.pc-s1.product-card-wrapper{width:330px;max-width:100%;}@media (min-width:1367px){
  .pc-s1.product-card-wrapper{
    --otc-card-w:330px;    --otc-card-h:510px;          }  .pc-s1.product-card-wrapper{width:330px;max-width:100%;}      }
@media (min-width:992px) and (max-width:1366px){
  .pc-s1.product-card-wrapper{
    --otc-card-w:403px;        --otc-img-w:403px;    --otc-img-h:403px;  }  .pc-s1.product-card-wrapper{width:403px;max-width:100%;}        .pc-s1 .product-card-rating__product-img{aspect-ratio:403 / 403;}
  }
@media (min-width:501px) and (max-width:991px){
  .pc-s1.product-card-wrapper{
    --otc-card-w:446px;        --otc-img-w:446px;    --otc-img-h:446px;  }  .pc-s1.product-card-wrapper{width:446px;max-width:100%;}        .pc-s1 .product-card-rating__product-img{aspect-ratio:446 / 446;}
  }
@media (max-width:500px){
  .pc-s1.product-card-wrapper{
    --otc-card-w:172px;    --otc-card-h:303px;    --otc-img-w:172px;    --otc-img-h:200px;  }  .pc-s1.product-card-wrapper{width:172px;max-width:100%;}        .pc-s1 .product-card-rating__product-img{aspect-ratio:172 / 200;}
  }
.pc-s1.product-card-wrapper{background:#FFFFFF;}.pc-s1.product-card-wrapper{border-radius:10px;}.pc-s1 .product-card-rating__product-img{border-radius:var(--otc-card-radius,10px) !important;overflow:hidden;}.pc-s1 .product-card-rating__descr{padding:0px;}.pc-s1 .product-card-rating__descr{gap:10px;display:flex;flex-direction:column;}.pc-s1.product-card-wrapper{gap:10px;display:flex;flex-direction:column;}.pc-s1 .product-card-rating__title{color:#252525;}.pc-s1 .product-card-rating__title{font-size:14px;}.pc-s1 .price-new{color:#222222;}.pc-s1 .price-new.price-new--actual-special{color:#577B28 !important;}.pc-s1 .price-new{font-size:20px;}.pc-s1 .price-old{color:#7D7D7D;}.pc-s1 .price-old{font-size:14px;}.pc-s1 .product-card-rating__sku{color:#717171;}.pc-s1 .product-card-rating__stock{color:#0FA379;}.pc-s1 .product-card-rating__stock,.pc-s1 .product-card-rating__restock{font-size:12px;}.pc-s1 .product-card-rating__restock{color:#961885;}.pc-s1 .product-card-rating__freeship{color:#0FA379;}.pc-s1 .product-card-rating__review-count,.pc-s1 .product-card-rating__review-icon{color:#999999;}.pc-s1 .product-card-rating__btns .btn{background:#332723;}.pc-s1 .product-card-rating__btns .btn{color:#FFFFFF;}.pc-s1 .product-card-rating__btns .btn:hover{background:#4A3A33;}.pc-s1 .product-card-rating__btns .btn{border-radius:8px;}.pc-s1 .product-card-rating__product-img img{border-radius:inherit;}
.pc-s1 .product-card-rating__product-img{aspect-ratio:446 / 446;}
.pc-s1 .product-card-rating__product-img{background:#FFFFFF;--otc-card-img-bg:#FFFFFF;}.pc-s1 .product-card-rating__icons-btns .stats-btn{display:none!important;}.pc-s1 .product-card-rating__icons-btns{
top:8px;right:12px;left:auto;bottom:auto;
}
.pc-s1 .product-card-rating__icons-btns .icon-btn,
.pc-s1 .product-card-rating__icons-btns button{width:30px;height:30px;}
.pc-s1 .product-card-rating__icons-btns .icon-btn svg{width:30px;height:30px;}
.pc-s1 .product-card-rating__icons-btns .icon-btn,
.pc-s1 .product-card-rating__icons-btns button{border:1px solid #DDDDDD;}
.pc-s1 .product-card-rating__icons-btns .icon-btn,
.pc-s1 .product-card-rating__icons-btns button{box-shadow:0 2px 6px rgba(0,0,0,.08);}
.pc-s1 .product-card-rating__icons-btns .icon-btn,
.pc-s1 .product-card-rating__icons-btns button{background:#FFFFFF;}.pc-s1 .product-card-rating__icons-btns .icon-btn:hover,
.pc-s1 .product-card-rating__icons-btns .like-btn.active-like,
.pc-s1 .product-card-rating__icons-btns .stats-btn.active-like{color:#EC2424!important;}
.pc-s1 .product-card-rating__icons-btns .icon-btn:hover,
.pc-s1 .product-card-rating__icons-btns .like-btn.active-like,
.pc-s1 .product-card-rating__icons-btns .stats-btn.active-like{background:#FFFFFF!important;}
.pc-s1 .product-card-rating__sku{display:none!important;}.pc-s1 .product-card-rating__footer{display:none!important;}.pc-s1 .pc-price-btn-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:0;}
.pc-s1 .pc-price-btn-row .product-card-rating__price{flex:1 1 auto;min-width:0;}
.pc-s1 .pc-price-btn-row .product-card-rating__footer{flex:0 0 auto;width:auto;margin:0;padding:0;}
.pc-s1 .pc-price-btn-row .product-card-rating__btns{width:auto;}
.pc-s1 .pc-price-btn-row .product-card-rating__btns .btn{width:auto!important;height:48px!important;padding:0 16px!important;display:flex!important;align-items:center;justify-content:center;}
@media (max-width:500px){.pc-s1 .pc-price-btn-row .product-card-rating__btns .btn{height:32px!important;padding:0 12px!important;}}
.pc-s1 .product-card-rating__btns .btn .otc-cart-icon-img{filter:brightness(0) invert(1);}
.pc-s1.pc-oos--gray .product-card-rating__btns,
.pc-s1.pc-oos--gray-text .product-card-rating__btns{
  --otc-cart-btn-bg:#B9B9B9;
  --otc-cart-btn-hover-bg:#B9B9B9;
  --otc-cart-btn-text:#FFFFFF;
}
.pc-s1.pc-oos--gray .product-card-rating__btns .btn.btn-custom,
.pc-s1.pc-oos--gray-text .product-card-rating__btns .btn.btn-custom,
.pc-s1.pc-oos--gray .product-card-rating__btns .btn,
.pc-s1.pc-oos--gray-text .product-card-rating__btns .btn{
  background:#B9B9B9!important;background-color:#B9B9B9!important;
  color:#FFFFFF!important;
  pointer-events:none;cursor:default;
}
.pc-s1.pc-oos--gray .product-card-rating__btns .btn .otc-cart-icon-img,
.pc-s1.pc-oos--gray-text .product-card-rating__btns .btn .otc-cart-icon-img{filter:grayscale(1) brightness(4);}
/* Доп. hover ефект — «Слабка тінь на зображенні»: рівномірна м'яка тінь по периметру,
   1:1 як в Etsy (.v2-listing-card__img:hover → box-shadow:0 0 8px #0003,
   transition box-shadow .2s ease-in-out). #0003 = rgba(0,0,0,.2).
   Тінь на КОНТЕЙНЕРІ .product-card-rating__product-img (не на <img>).
   ВАЖЛИВО: щоб тінь було ВИДНО, її НЕ мають обрізати батьківські контейнери картки.
   `.product-card-rating` має ГЛОБАЛЬНИЙ overflow:hidden (cards.css) + `__image-area`
   теж буває overflow:hidden — вони кліпали 8px-тінь (не було видно на головній/в попапі
   кошика). Тому scoped-розкліпуємо ЦІ два контейнери саме для карток з shadow-ефектом
   (скоуп `.{_pcScope}` + гейт `_ot_hover_extra=='shadow'` → безпечно, лише shadow-картки).
   Сама картинка лишає власний overflow:hidden (скруглення/зум) → нічого не тече. */
.pc-s1 .product-card-rating,
.pc-s1 .product-card-rating__image-area{overflow:visible !important;}
.pc-s1 .product-card-rating__product-img{transition:box-shadow .2s ease-in-out;}
.pc-s1.product-card-wrapper:hover .product-card-rating__product-img{box-shadow:0 0 8px rgba(0,0,0,.2);}
/* Out-of-stock visual effect (admin "Картка товара → Дизайн та стилі → Ефект Stock status").
   .pc-oos          = base marker (out of stock)
   .pc-oos--gray    = image grayscale only
   .pc-oos--gray-text = image grayscale + text/price dimmed to gray */
.pc-s1.pc-oos--gray .product-card-rating__product-img img,
.pc-s1.pc-oos--gray-text .product-card-rating__product-img img,
.pc-s1.pc-oos--gray .product-card-rating .pc-gallery__img,
.pc-s1.pc-oos--gray-text .product-card-rating .pc-gallery__img{
  filter:grayscale(100%);
  -webkit-filter:grayscale(100%);
}
.pc-s1.pc-oos--gray-text .product-card-rating__name,
.pc-s1.pc-oos--gray-text .product-card-rating__price,
.pc-s1.pc-oos--gray-text .product-card-rating__price .price-new,
.pc-s1.pc-oos--gray-text .product-card-rating__price .price-old,
.pc-s1.pc-oos--gray-text .product-card-rating__sku,
.pc-s1.pc-oos--gray-text .product-card-rating__rating-value,
.pc-s1.pc-oos--gray-text .product-card-rating__review-count,
.pc-s1.pc-oos--gray-text .product-card-rating__stars{
  color:#9a9a9a !important;
}
.pc-s1.pc-oos--gray-text .product-card-rating__stars i,
.pc-s1.pc-oos--gray-text .product-card-rating__star{
  color:#c4c4c4 !important;
}


  /* You may also like — full-width section above "Inspired by your interests".
     Uses the universal card renderer (.product-card-wrapper) so cards inherit
     all sizing / styling from the global settings_template config. */
  .prod-ymal-section{margin:48px 0 32px;padding:0;}
  .prod-ymal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px;}
  .prod-ymal-title{margin:0;font-weight:600;color:#1a1a1a;}
  .prod-ymal-viewall{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:#392923;text-decoration:none;transition:opacity .15s;}
  .prod-ymal-viewall:hover{opacity:.7;text-decoration:none;color:#392923;}
  .prod-ymal-viewall svg{transition:transform .15s;}
  .prod-ymal-viewall:hover svg{transform:translateX(2px);}

  /* 4-up grid mirroring featured_plus / "Inspired" layout. Cards fill cells. */
  .prod-ymal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--otc-grid-gap,20px);align-items:stretch;}
  .prod-ymal-grid .product-card-wrapper{width:100%!important;max-width:100%!important;margin:0!important;}

  /* object-fit НЕ переопределяем. Раньше здесь стоял cover — он прятал серые полосы
     вокруг фото, но ради этого обрезал кадр. Полосы теперь цвета карточки (фон области
     картинки наследуется), а превью генерируются без обрезки, поэтому глобального
     contain достаточно. */

  /* Onetap breakpoints: 1367 / 992 / 501 / 500 */
  @media (max-width:1366px){
    .prod-ymal-grid{grid-template-columns:repeat(4,1fr);}
  }
  @media (max-width:991px){
    .prod-ymal-section{margin:36px 0 24px;}
    .prod-ymal-grid{grid-template-columns:repeat(3,1fr);}
  }
  @media (max-width:600px){
    .prod-ymal-grid{grid-template-columns:repeat(2,1fr);gap:12px;}
    .prod-ymal-head{margin-bottom:16px;}
  }
  @media (max-width:500px){
    .prod-ymal-section{margin:28px 0 20px;}
    .prod-ymal-grid{grid-template-columns:repeat(2,1fr);}
  }


.pc-37550.product-card-wrapper{
  --otc-card-w:330px;    --otc-img-w:446px;  --otc-img-h:446px;}.pc-37550.product-card-wrapper{width:330px;max-width:100%;}@media (min-width:1367px){
  .pc-37550.product-card-wrapper{
    --otc-card-w:330px;    --otc-card-h:510px;          }  .pc-37550.product-card-wrapper{width:330px;max-width:100%;}      }
@media (min-width:992px) and (max-width:1366px){
  .pc-37550.product-card-wrapper{
    --otc-card-w:403px;        --otc-img-w:403px;    --otc-img-h:403px;  }  .pc-37550.product-card-wrapper{width:403px;max-width:100%;}        .pc-37550 .product-card-rating__product-img{aspect-ratio:403 / 403;}
  }
@media (min-width:501px) and (max-width:991px){
  .pc-37550.product-card-wrapper{
    --otc-card-w:446px;        --otc-img-w:446px;    --otc-img-h:446px;  }  .pc-37550.product-card-wrapper{width:446px;max-width:100%;}        .pc-37550 .product-card-rating__product-img{aspect-ratio:446 / 446;}
  }
@media (max-width:500px){
  .pc-37550.product-card-wrapper{
    --otc-card-w:172px;    --otc-card-h:303px;    --otc-img-w:172px;    --otc-img-h:200px;  }  .pc-37550.product-card-wrapper{width:172px;max-width:100%;}        .pc-37550 .product-card-rating__product-img{aspect-ratio:172 / 200;}
  }
.pc-37550.product-card-wrapper{background:#FFFFFF;}.pc-37550.product-card-wrapper{border-radius:10px;}.pc-37550 .product-card-rating__product-img{border-radius:var(--otc-card-radius,10px) !important;overflow:hidden;}.pc-37550 .product-card-rating__descr{padding:0px;}.pc-37550 .product-card-rating__descr{gap:10px;display:flex;flex-direction:column;}.pc-37550.product-card-wrapper{gap:10px;display:flex;flex-direction:column;}.pc-37550 .product-card-rating__title{color:#252525;}.pc-37550 .product-card-rating__title{font-size:14px;}.pc-37550 .price-new{color:#222222;}.pc-37550 .price-new.price-new--actual-special{color:#577B28 !important;}.pc-37550 .price-new{font-size:20px;}.pc-37550 .price-old{color:#7D7D7D;}.pc-37550 .price-old{font-size:14px;}.pc-37550 .product-card-rating__sku{color:#717171;}.pc-37550 .product-card-rating__stock{color:#0FA379;}.pc-37550 .product-card-rating__stock,.pc-37550 .product-card-rating__restock{font-size:12px;}.pc-37550 .product-card-rating__restock{color:#961885;}.pc-37550 .product-card-rating__freeship{color:#0FA379;}.pc-37550 .product-card-rating__review-count,.pc-37550 .product-card-rating__review-icon{color:#999999;}.pc-37550 .product-card-rating__btns .btn{background:#332723;}.pc-37550 .product-card-rating__btns .btn{color:#FFFFFF;}.pc-37550 .product-card-rating__btns .btn:hover{background:#4A3A33;}.pc-37550 .product-card-rating__btns .btn{border-radius:8px;}.pc-37550 .product-card-rating__product-img img{border-radius:inherit;}
.pc-37550 .product-card-rating__product-img{aspect-ratio:446 / 446;}
.pc-37550 .product-card-rating__product-img{background:#FFFFFF;--otc-card-img-bg:#FFFFFF;}.pc-37550 .product-card-rating__icons-btns .stats-btn{display:none!important;}.pc-37550 .product-card-rating__icons-btns{
top:8px;right:12px;left:auto;bottom:auto;
}
.pc-37550 .product-card-rating__icons-btns .icon-btn,
.pc-37550 .product-card-rating__icons-btns button{width:30px;height:30px;}
.pc-37550 .product-card-rating__icons-btns .icon-btn svg{width:30px;height:30px;}
.pc-37550 .product-card-rating__icons-btns .icon-btn,
.pc-37550 .product-card-rating__icons-btns button{border:1px solid #DDDDDD;}
.pc-37550 .product-card-rating__icons-btns .icon-btn,
.pc-37550 .product-card-rating__icons-btns button{box-shadow:0 2px 6px rgba(0,0,0,.08);}
.pc-37550 .product-card-rating__icons-btns .icon-btn,
.pc-37550 .product-card-rating__icons-btns button{background:#FFFFFF;}.pc-37550 .product-card-rating__icons-btns .icon-btn:hover,
.pc-37550 .product-card-rating__icons-btns .like-btn.active-like,
.pc-37550 .product-card-rating__icons-btns .stats-btn.active-like{color:#EC2424!important;}
.pc-37550 .product-card-rating__icons-btns .icon-btn:hover,
.pc-37550 .product-card-rating__icons-btns .like-btn.active-like,
.pc-37550 .product-card-rating__icons-btns .stats-btn.active-like{background:#FFFFFF!important;}
.pc-37550 .product-card-rating__sku{display:none!important;}.pc-37550 .product-card-rating__footer{display:none!important;}.pc-37550 .pc-price-btn-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:0;}
.pc-37550 .pc-price-btn-row .product-card-rating__price{flex:1 1 auto;min-width:0;}
.pc-37550 .pc-price-btn-row .product-card-rating__footer{flex:0 0 auto;width:auto;margin:0;padding:0;}
.pc-37550 .pc-price-btn-row .product-card-rating__btns{width:auto;}
.pc-37550 .pc-price-btn-row .product-card-rating__btns .btn{width:auto!important;height:48px!important;padding:0 16px!important;display:flex!important;align-items:center;justify-content:center;}
@media (max-width:500px){.pc-37550 .pc-price-btn-row .product-card-rating__btns .btn{height:32px!important;padding:0 12px!important;}}
.pc-37550 .product-card-rating__btns .btn .otc-cart-icon-img{filter:brightness(0) invert(1);}
.pc-37550.pc-oos--gray .product-card-rating__btns,
.pc-37550.pc-oos--gray-text .product-card-rating__btns{
  --otc-cart-btn-bg:#B9B9B9;
  --otc-cart-btn-hover-bg:#B9B9B9;
  --otc-cart-btn-text:#FFFFFF;
}
.pc-37550.pc-oos--gray .product-card-rating__btns .btn.btn-custom,
.pc-37550.pc-oos--gray-text .product-card-rating__btns .btn.btn-custom,
.pc-37550.pc-oos--gray .product-card-rating__btns .btn,
.pc-37550.pc-oos--gray-text .product-card-rating__btns .btn{
  background:#B9B9B9!important;background-color:#B9B9B9!important;
  color:#FFFFFF!important;
  pointer-events:none;cursor:default;
}
.pc-37550.pc-oos--gray .product-card-rating__btns .btn .otc-cart-icon-img,
.pc-37550.pc-oos--gray-text .product-card-rating__btns .btn .otc-cart-icon-img{filter:grayscale(1) brightness(4);}
/* Доп. hover ефект — «Слабка тінь на зображенні»: рівномірна м'яка тінь по периметру,
   1:1 як в Etsy (.v2-listing-card__img:hover → box-shadow:0 0 8px #0003,
   transition box-shadow .2s ease-in-out). #0003 = rgba(0,0,0,.2).
   Тінь на КОНТЕЙНЕРІ .product-card-rating__product-img (не на <img>).
   ВАЖЛИВО: щоб тінь було ВИДНО, її НЕ мають обрізати батьківські контейнери картки.
   `.product-card-rating` має ГЛОБАЛЬНИЙ overflow:hidden (cards.css) + `__image-area`
   теж буває overflow:hidden — вони кліпали 8px-тінь (не було видно на головній/в попапі
   кошика). Тому scoped-розкліпуємо ЦІ два контейнери саме для карток з shadow-ефектом
   (скоуп `.{_pcScope}` + гейт `_ot_hover_extra=='shadow'` → безпечно, лише shadow-картки).
   Сама картинка лишає власний overflow:hidden (скруглення/зум) → нічого не тече. */
.pc-37550 .product-card-rating,
.pc-37550 .product-card-rating__image-area{overflow:visible !important;}
.pc-37550 .product-card-rating__product-img{transition:box-shadow .2s ease-in-out;}
.pc-37550.product-card-wrapper:hover .product-card-rating__product-img{box-shadow:0 0 8px rgba(0,0,0,.2);}
/* Out-of-stock visual effect (admin "Картка товара → Дизайн та стилі → Ефект Stock status").
   .pc-oos          = base marker (out of stock)
   .pc-oos--gray    = image grayscale only
   .pc-oos--gray-text = image grayscale + text/price dimmed to gray */
.pc-37550.pc-oos--gray .product-card-rating__product-img img,
.pc-37550.pc-oos--gray-text .product-card-rating__product-img img,
.pc-37550.pc-oos--gray .product-card-rating .pc-gallery__img,
.pc-37550.pc-oos--gray-text .product-card-rating .pc-gallery__img{
  filter:grayscale(100%);
  -webkit-filter:grayscale(100%);
}
.pc-37550.pc-oos--gray-text .product-card-rating__name,
.pc-37550.pc-oos--gray-text .product-card-rating__price,
.pc-37550.pc-oos--gray-text .product-card-rating__price .price-new,
.pc-37550.pc-oos--gray-text .product-card-rating__price .price-old,
.pc-37550.pc-oos--gray-text .product-card-rating__sku,
.pc-37550.pc-oos--gray-text .product-card-rating__rating-value,
.pc-37550.pc-oos--gray-text .product-card-rating__review-count,
.pc-37550.pc-oos--gray-text .product-card-rating__stars{
  color:#9a9a9a !important;
}
.pc-37550.pc-oos--gray-text .product-card-rating__stars i,
.pc-37550.pc-oos--gray-text .product-card-rating__star{
  color:#c4c4c4 !important;
}


  /* Shoppers with similar taste loved these — same layout as "You may also like",
     uses the universal card renderer (.product-card-wrapper) so cards inherit
     all sizing / styling from the global settings_template config. */
  .prod-stl-section{margin:48px 0 32px;padding:0;}
  .prod-stl-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px;}
  .prod-stl-title{margin:0;font-weight:600;color:#1a1a1a;}
  .prod-stl-viewall{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;color:#392923;text-decoration:none;transition:opacity .15s;}
  .prod-stl-viewall:hover{opacity:.7;text-decoration:none;color:#392923;}
  .prod-stl-viewall svg{transition:transform .15s;}
  .prod-stl-viewall:hover svg{transform:translateX(2px);}

  /* 4-up grid mirroring featured_plus / "Inspired" layout. Cards fill cells. */
  .prod-stl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--otc-grid-gap,20px);align-items:stretch;}
  .prod-stl-grid .product-card-wrapper{width:100%!important;max-width:100%!important;margin:0!important;}

  /* object-fit НЕ переопределяем. Раньше здесь стоял cover — он прятал серые полосы
     вокруг фото, но ради этого обрезал кадр. Полосы теперь цвета карточки (фон области
     картинки наследуется), а превью генерируются без обрезки, поэтому глобального
     contain достаточно. */

  /* Onetap breakpoints: 1367 / 992 / 501 / 500 */
  @media (max-width:1366px){
    .prod-stl-grid{grid-template-columns:repeat(4,1fr);}
  }
  @media (max-width:991px){
    .prod-stl-section{margin:36px 0 24px;}
    .prod-stl-grid{grid-template-columns:repeat(3,1fr);}
    .prod-stl-head{margin-bottom:16px;}
  }
  @media (max-width:500px){
    .prod-stl-section{margin:28px 0 20px;}
    /* minmax(0,1fr) — колонки сжимаются ниже min-content карточки (иначе 172px×2 вылазят
       за контейнер и обрезаются). Отступы по макету: 6px между колонками, 16px между рядами. */
    /* !important — перебиваем глобальный .home__update-product__wrapper-cards{gap:…!important} из header. */
    .prod-stl-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:6px!important;row-gap:16px!important;gap:16px 6px!important;}
    .prod-stl-grid .product-card-wrapper{min-width:0!important;width:100%!important;max-width:100%!important;}
  }


/* Scope all rules to this render's UID — supports multiple instances on one page. */
#ocf-s1-wrap.ocf-section{padding:0;color:#1a1a1a;font-family:inherit;}

#ocf-s1-wrap .ocf-grid{
  display:grid;grid-template-columns:minmax(220px, 530px) minmax(0, 1fr);gap:80px;align-items:center;
}
#ocf-s1-wrap .ocf-title{font-size:22px;font-weight:700;line-height:1.25;margin:0 0 8px;color:#1a1a1a;max-width:530px;overflow-wrap:break-word;word-break:break-word;}
#ocf-s1-wrap .ocf-sub{font-size:16px;font-weight:400;line-height:1.4;color:#5F6061;margin:0 0 16px;max-width:530px;}
#ocf-s1-wrap .ocf-cta{
  display:inline-block;padding:10px 20px;background:#2b1d18;color:#fff;border-radius:6px;
  font-size:14px;font-weight:500;text-decoration:none;transition:background .15s;
}
#ocf-s1-wrap .ocf-cta:hover{background:#000;}

/* Cards row — desktop = fixed-size image cards in a horizontal row, mobile = swiper.
   Card image is exactly 250x150 with a 40px gap between cards. */
#ocf-s1-wrap .ocf-cards{position:relative;overflow:hidden;min-width:0;}
#ocf-s1-wrap .ocf-cards-wrapper{display:flex;gap:16px;flex-wrap:wrap;}
#ocf-s1-wrap .ocf-card{
  flex:0 0 250px;width:250px;background:transparent;
  text-decoration:none;color:inherit;display:block;
  transition:transform .2s;
}
#ocf-s1-wrap .ocf-card:hover{transform:translateY(-3px);}
#ocf-s1-wrap .ocf-card-image{width:250px;height:150px;overflow:hidden;border-radius:12px;}
#ocf-s1-wrap .ocf-card-image img{width:100%;height:100%;object-fit:cover;display:block;}


/* ═══ Medium (≤1439) — текст/кнопка сверху, ряд сертификатов снизу ═══
   2-колоночная розкладка (текст ліворуч + ряд карток праворуч) вимагає ~1440px
   контейнера для 3 карток у ряд. Нижче — стек: заголовок зверху, картки рядом нижче. */
@media (max-width:1439px){
  #ocf-s1-wrap .ocf-grid{grid-template-columns:1fr;gap:40px;}
  #ocf-s1-wrap .ocf-cards-wrapper{flex-wrap:wrap;justify-content:flex-start;gap:16px;}
}

/* ═══ Slider (≤839) — когда 3 карточки не вмещаются в ряд ═══
   - заголовок/текст/кнопка сверху (стек, наследуется от ≤1439)
   - карточки становятся горизонтальным Swiper-слайдером (slidesPerView:auto)
   - точки пагинации под слайдером; соседняя карточка выглядывает (намёк на свайп) */
@media (max-width:839px){
  #ocf-s1-wrap .ocf-grid{grid-template-columns:minmax(0, 1fr);gap:40px;}
  #ocf-s1-wrap .ocf-text{text-align:left;}
  #ocf-s1-wrap .ocf-title{font-size:20px;margin-bottom:12px;}
  #ocf-s1-wrap .ocf-cta{padding:9px 18px;font-size:13px;}
  /* Mobile slider: cards start flush-left, Swiper handles spacing (spaceBetween) —
     so no CSS gap here (it would double the spacing and break Swiper's math). */
  #ocf-s1-wrap .ocf-cards{overflow:visible;}
  #ocf-s1-wrap .ocf-cards-wrapper{gap:0;flex-wrap:nowrap;justify-content:flex-start;}
  #ocf-s1-wrap .ocf-card{flex:0 0 250px;width:250px;}
  #ocf-s1-wrap .ocf-card-image{width:250px;height:150px;}
}


  #otb-swiper-10{
    max-width:1920px;    margin-left:auto;margin-right:auto;
  }
  /* 1:1 с admin Live Preview: канвас редактора (.otb-canvas) имеет border 3px
     (box-sizing:border-box → внутренняя ширина = canvas−6), и все %-позиции/ширины
     элементов считаются от ЭТОЙ внутренней ширины. На фронте .otb-slide был без
     бордера (%-база = полная ширина) → элементы пропорционально «съезжали» (тем
     заметнее, чем шире плашка / длиннее текст, напр. UK-заголовок). Даём слайду
     тот же прозрачный 3px-инсет — %-база становится идентичной редактору.
     Фон тянется под бордер (background-clip:border-box), рамки не видно. */
  #otb-swiper-10 .otb-slide{border:3px solid transparent;box-sizing:border-box;}
    @media (min-width:577px) and (max-width:991px){
    #otb-swiper-10{ max-width:100%; }
  }
  @media (max-width:576px){
    #otb-swiper-10{ max-width:375px; }
  }
        body { overflow-x: hidden; }
          @media (min-width:993px){
    .onetap-home-section:has(#otb-swiper-10){width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;padding:0!important;}
    .onetap-home-section:has(#otb-swiper-10) > .container,
    .onetap-home-section:has(#otb-swiper-10) > .container-fluid{max-width:100%!important;width:100%!important;padding:0!important;margin:0!important;}
        .onetap-footer .footer-row:has(#otb-swiper-10) > .container{max-width:calc(100vw - var(--otc-sbw, 0px))!important;width:calc(100vw - var(--otc-sbw, 0px))!important;margin-left:calc(50% - (100vw - var(--otc-sbw, 0px)) / 2)!important;margin-right:calc(50% - (100vw - var(--otc-sbw, 0px)) / 2)!important;padding-left:0!important;padding-right:0!important;}
    .onetap-footer .footer-column:has(#otb-swiper-10){max-width:100%!important;padding-left:0!important;padding-right:0!important;}
    #otb-swiper-10{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;}
    #otb-swiper-10 .otb-slide{max-width:100%!important;width:100%!important;margin:0!important;}
    #otb-swiper-10 [class*="otb-extra-text-"]{max-width:92%!important;white-space:normal;word-wrap:break-word;overflow-wrap:break-word;}
    #otb-swiper-10 [class*="otb-extra-btn-"]{max-width:92%!important;word-wrap:break-word;overflow-wrap:break-word;}
  }
      @media (min-width:577px) and (max-width:992px){
    .onetap-home-section:has(#otb-swiper-10){width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;padding:0!important;}
    .onetap-home-section:has(#otb-swiper-10) > .container,
    .onetap-home-section:has(#otb-swiper-10) > .container-fluid{max-width:100%!important;width:100%!important;padding:0!important;margin:0!important;}
        .onetap-footer .footer-row:has(#otb-swiper-10) > .container{max-width:calc(100vw - var(--otc-sbw, 0px))!important;width:calc(100vw - var(--otc-sbw, 0px))!important;margin-left:calc(50% - (100vw - var(--otc-sbw, 0px)) / 2)!important;margin-right:calc(50% - (100vw - var(--otc-sbw, 0px)) / 2)!important;padding-left:0!important;padding-right:0!important;}
    .onetap-footer .footer-column:has(#otb-swiper-10){max-width:100%!important;padding-left:0!important;padding-right:0!important;}
    #otb-swiper-10{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;}
    #otb-swiper-10 .otb-slide{max-width:100%!important;width:100%!important;margin:0!important;}
    #otb-swiper-10 [class*="otb-extra-text-"]{max-width:92%!important;white-space:normal;word-wrap:break-word;overflow-wrap:break-word;}
    #otb-swiper-10 [class*="otb-extra-btn-"]{max-width:92%!important;word-wrap:break-word;overflow-wrap:break-word;}
  }
      @media (max-width:576px){
    .onetap-home-section:has(#otb-swiper-10){width:100%!important;max-width:100%!important;margin-left:0!important;margin-right:0!important;padding:0!important;}
    .onetap-home-section:has(#otb-swiper-10) > .container,
    .onetap-home-section:has(#otb-swiper-10) > .container-fluid{max-width:100%!important;width:100%!important;padding:0!important;margin:0!important;}
        .onetap-footer .footer-row:has(#otb-swiper-10) > .container{max-width:calc(100vw - var(--otc-sbw, 0px))!important;width:calc(100vw - var(--otc-sbw, 0px))!important;margin-left:calc(50% - (100vw - var(--otc-sbw, 0px)) / 2)!important;margin-right:calc(50% - (100vw - var(--otc-sbw, 0px)) / 2)!important;padding-left:0!important;padding-right:0!important;}
    .onetap-footer .footer-column:has(#otb-swiper-10){max-width:100%!important;padding-left:0!important;padding-right:0!important;}
    #otb-swiper-10{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;}
    #otb-swiper-10 .otb-slide{max-width:100%!important;width:100%!important;margin:0!important;}
    #otb-swiper-10 [class*="otb-extra-text-"]{max-width:92%!important;white-space:normal;word-wrap:break-word;overflow-wrap:break-word;}
    #otb-swiper-10 [class*="otb-extra-btn-"]{max-width:92%!important;word-wrap:break-word;overflow-wrap:break-word;}
  }
  
