@charset "UTF-8";
/* ===== Joanna redesign (Figma UJ0MaRDcNxnbtznLwo32RB) — override layer, loaded last ===== */
@import url('joanna-fonts.css');

:root{
  --jo-black:#393939;
  --jo-ink:#333;
  --jo-grey:#7f7f7f;
  --jo-bg:#f7f7f7;
  --jo-border:#c8c8c8;
  --jo-teal:#2ec4b6;
  --jo-serif:'Cormorant Garamond',Georgia,serif;
  --jo-sans:'Roboto',Arial,sans-serif;
  --jo-cond:'Roboto Condensed',Arial,sans-serif;
  --jo-container:1296px;
}

body.jo-rd{font-family:var(--jo-sans);color:var(--jo-black);background:#fff;}
body.jo-rd .container{max-width:1440px;}

/* ---- Buttons ---- */
body.jo-rd .jo-btn,
body.jo-rd .jo-btn:hover{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--jo-teal);color:#fff;font-family:var(--jo-cond);font-weight:700;
  font-size:16px;line-height:1;text-transform:uppercase;letter-spacing:.5px;
  padding:16px 24px;min-width:248px;height:48px;border:0;text-decoration:none;transition:.2s;
}
body.jo-rd .jo-btn:hover{filter:brightness(.94);}

/* =========================================================
   HEADER
   ========================================================= */
@media (min-width:992px){
  /* Figma header = ONE top row [logo | phones | schedule | Грн UA Корзина] + gray nav strip.
     Collapse the standalone utility strip and pin currency/language into the header top-right. */
  /* the old absolute utility strip is retired; currency+lang (.settings) are moved by JS
     into the header row (as .jo-hdr-util) so the whole bar is ONE fluid flex line that
     never overlaps at intermediate widths (992-1440). */
  body.jo-rd .top-panel{display:none!important;}

  /* header row: logo | phones | schedule | ...spacer... | Грн UA | cart */
  body.jo-rd header.row{background:#fff;display:block!important;}
  /* Figma 7902:289 @1440: logo x60 w154.93 | phones x283 | schedule x439 | Грн/UA x1177 | Корзина x1304..1382 */
  /* items are top-pinned to their Figma y instead of centred — the design does not centre them
     on a common axis (logo 17, phones 17, schedule 37, currency 24, cart 27 in a 69px row). */
  body.jo-rd header.row .container{width:100%;max-width:1440px;display:flex!important;align-items:flex-start;padding:0 60px;height:69px;min-height:69px;position:relative;flex-wrap:nowrap;}
  body.jo-rd header.row .container>div{float:none!important;width:auto!important;padding:0;}
  /* theme gives these a fixed 70px height, which (plus #shedule's offset) stretched the row to 91px */
  body.jo-rd #contacts,body.jo-rd #shedule,body.jo-rd #contacts #phone{height:auto!important;min-height:0!important;}
  body.jo-rd .header_logo{flex:0 0 auto;margin-top:17px;}
  body.jo-rd .header_logo img{max-height:38px;width:auto;}
  /* theme puts a 48px icon gutter on #contacts and 95px on #shedule — both shift the text off-grid */
  body.jo-rd #contacts{margin-left:68px;margin-top:17px;flex:0 0 auto;padding-left:0!important;}
  body.jo-rd #contacts #phone{line-height:18px;}
  body.jo-rd #contacts #phone a{color:#333!important;font-family:var(--jo-cond);font-size:16px;font-weight:700;line-height:18px;white-space:nowrap;}
  body.jo-rd #contacts .contacts-fa{display:none;}
  body.jo-rd #shedule{margin-left:21px;margin-right:auto;margin-top:37px;padding-left:0!important;color:#000!important;font-family:var(--jo-cond);font-weight:400;font-size:14px;line-height:16px;white-space:nowrap;flex:0 0 auto;}
  body.jo-rd #shedule i{display:none;}

  /* 992-1250: fixed-width flex items don't shrink -> row spilled past right padding */
  @media (max-width:1250px){
    body.jo-rd header.row .container{padding:0 20px;}
    body.jo-rd #contacts{margin-left:24px;}
    body.jo-rd #shedule{margin-left:16px;}
    body.jo-rd header.row .jo-hdr-util{margin-right:12px;}
  }

  /* ---- util cluster (currency + language) moved into the row before the cart ---- */
  /* Figma 7901:16894: [Грн ▾] gap12 [UA ▾], both toggles share one baseline (no flag icon in the design) */
  body.jo-rd header.row .jo-hdr-util{display:flex!important;align-items:center;flex:0 0 auto;margin:24px 24px 0 0;position:static!important;float:none!important;width:auto!important;}
  body.jo-rd .jo-hdr-util .top-panel-div-span>div{display:flex;align-items:center;}
  body.jo-rd .jo-hdr-util .btn-group{display:flex;align-items:center;}
  /* flag image inflated the language toggle to 23px vs the currency's 18px -> they sat at different heights */
  body.jo-rd .jo-hdr-util .dropdown-toggle>img{display:none!important;}
  body.jo-rd .jo-hdr-util .dropdown-toggle{display:flex!important;align-items:center;height:24px;line-height:18px;}
  /* caret = the exported Figma glyph (7901:16897), not fa-caret-down */
  body.jo-rd .jo-hdr-util .btn.dropdown-toggle .fa-caret-down{margin-left:0;width:24px;height:24px;
    background:url(../images/jo-caret.svg) no-repeat 50% 50%/24px 24px;}
  body.jo-rd .jo-hdr-util .btn.dropdown-toggle .fa-caret-down:before{display:none;}
  body.jo-rd header.row .jo-hdr-util .hidden-lg,
  body.jo-rd header.row .jo-hdr-util .icon-bar,
  body.jo-rd header.row .jo-hdr-util .mobile-logo,
  body.jo-rd header.row .jo-hdr-util .mobile-icons-top,
  body.jo-rd header.row .jo-hdr-util>style{display:none!important;}
  body.jo-rd .jo-hdr-util .settings{padding:0;margin:0;background:transparent!important;}
  body.jo-rd .jo-hdr-util .settings>span.settings{display:none!important;}
  body.jo-rd .jo-hdr-util .top-panel-div-span{display:flex;flex-direction:row-reverse;gap:12px;align-items:center;}
  body.jo-rd .jo-hdr-util .btn.dropdown-toggle{padding:0;border:0;background:transparent;font-family:var(--jo-cond);font-weight:400;font-size:16px;color:var(--jo-black)!important;text-transform:capitalize;line-height:18px;box-shadow:none;white-space:nowrap;}
  body.jo-rd .jo-hdr-util .btn.dropdown-toggle span{color:var(--jo-black)!important;font-family:var(--jo-cond);}
  body.jo-rd .jo-hdr-util .btn.dropdown-toggle .fa-caret-down{color:var(--jo-teal);margin-left:6px;}
  /* smooth hover on currency / language toggles */
  body.jo-rd .jo-hdr-util .btn.dropdown-toggle,
  body.jo-rd .jo-hdr-util .btn.dropdown-toggle span,
  body.jo-rd .jo-hdr-util .btn.dropdown-toggle span::after,
  body.jo-rd .jo-hdr-util .btn.dropdown-toggle .fa-caret-down{transition:color .2s ease;}
  body.jo-rd .jo-hdr-util .btn.dropdown-toggle{cursor:pointer;}
  body.jo-rd .jo-hdr-util .btn.dropdown-toggle:hover span,
  body.jo-rd .jo-hdr-util .btn.dropdown-toggle:hover span::after{color:var(--jo-teal)!important;}
  body.jo-rd .jo-hdr-util form.currency{margin:0;}
  /* language toggle -> RU/UA code (its native label is the static word "Язык"/"Мова").
     Both labels must share one baseline. The language span is font-size:0 (to hide "Мова") with
     the code drawn in ::after — as an inline box that sits on a 0px strut, so it rendered ~3px
     higher than the currency's real text. Laying both spans out as fixed-height flex boxes takes
     the strut out of the equation, at any zoom level. */
  body.jo-rd .jo-hdr-util .top-panel-div-span .dropdown-toggle span{display:flex!important;align-items:center;height:18px;line-height:18px;}
  body.jo-rd .jo-hdr-util .top-panel-div-span>div:first-child .dropdown-toggle span{font-size:0;}
  body.jo-rd .jo-hdr-util .top-panel-div-span>div:first-child .dropdown-toggle span::after{font-size:16px;line-height:18px;font-family:var(--jo-cond);color:var(--jo-black);display:block;}
  html[lang^="ru"] body.jo-rd .jo-hdr-util .top-panel-div-span>div:first-child .dropdown-toggle span::after{content:"RU";}
  html[lang^="uk"] body.jo-rd .jo-hdr-util .top-panel-div-span>div:first-child .dropdown-toggle span::after{content:"UA";}
  /* currency label = REAL selected currency (was hardcoded "Грн") */
  body.jo-rd .jo-hdr-util form.currency .dropdown-toggle span{font-size:16px!important;display:inline!important;font-family:var(--jo-cond);color:var(--jo-black)!important;text-transform:capitalize;}
  /* brand dropdowns */
  body.jo-rd .jo-hdr-util .dropdown-menu{background:#fff;border:1px solid var(--jo-border);border-radius:0;box-shadow:0 8px 24px rgba(0,0,0,.10);padding:6px 0;min-width:180px;margin-top:12px;left:auto;right:0;}
  body.jo-rd .jo-hdr-util .dropdown-menu>li>a,body.jo-rd .jo-hdr-util .dropdown-menu>li>button{font-family:var(--jo-cond);font-weight:400;font-size:15px;color:var(--jo-black)!important;text-transform:none;padding:9px 18px;display:flex;align-items:center;gap:10px;line-height:1.2;white-space:nowrap;width:100%;text-align:left;background:transparent;border:0;}
  body.jo-rd .jo-hdr-util .dropdown-menu>li>a:hover,body.jo-rd .jo-hdr-util .dropdown-menu>li>button:hover{background:#f5f5f5;color:var(--jo-teal)!important;}
  body.jo-rd .jo-hdr-util .dropdown-menu img{width:20px;height:14px;object-fit:cover;border-radius:2px;}

  /* cart */
  body.jo-rd [class*="col-"]:has(>#right-block){display:flex;align-items:flex-start;justify-content:flex-end;margin-top:27px;}
  body.jo-rd #right-block{color:var(--jo-black);font-family:var(--jo-cond);flex:0 0 auto;white-space:nowrap;display:flex;align-items:center;padding:0!important;}
  body.jo-rd #right-block #cart{padding-top:0!important;padding-bottom:0!important;margin:0!important;}
  body.jo-rd #right-block #cart,body.jo-rd #right-block #cart a,body.jo-rd #right-block #cart-total{color:var(--jo-black)!important;background:transparent!important;font-family:var(--jo-cond);font-size:16px;text-transform:none;transition:color .2s ease;}
  body.jo-rd #right-block #cart a{cursor:pointer;}
  body.jo-rd #right-block #cart .content{left:auto!important;right:0!important;width:360px!important;max-width:calc(100vw - 30px)!important;box-sizing:border-box;}
  body.jo-rd #right-block #cart .content .mini-cart-info,body.jo-rd #right-block #cart .content .jo-mc,body.jo-rd #right-block #cart .content table{width:100%!important;max-width:100%!important;}
  body.jo-rd #right-block #cart .content,body.jo-rd #right-block #cart .content p,body.jo-rd #right-block #cart .content .jo-mc__name,body.jo-rd #right-block #cart .content .jo-mc__opts span{white-space:normal!important;}
  body.jo-rd #right-block #cart a.jo-cart-checkout{background:var(--jo-teal)!important;color:#fff!important;}
  body.jo-rd #right-block #cart a.jo-cart-checkout:hover{color:#fff!important;}
  body.jo-rd #right-block #cart .jo-cart-btns p{background:transparent!important;padding:0;}
  body.jo-rd #right-block #cart a:hover,body.jo-rd #right-block #cart a:hover #cart-total{color:var(--jo-teal)!important;}
  body.jo-rd #right-block .fa-shopping-cart{display:none;}
}

/* logo -> black Cormorant wordmark (desktop) */
@media (min-width:992px){
  /* Figma 7901:16914: wordmark + flanking rules are the exported vector (exact); the tagline
     stays live text so it can switch RU/UK. Box = 154.929 x 37.953 at x60/y17. */
  /* exact Figma vector (wordmark + tagline + flanking rules baked in), per language */
  body.jo-rd .header_logo{line-height:1;position:relative;width:154.93px;height:37.95px;
    background:url(../images/jo-logo.svg) no-repeat 0 0/154.93px 37.95px;}
  body.jo-rd .header_logo img{display:none;}
  body.jo-rd .header_logo:after{content:none;}
  html[lang="uk"] body.jo-rd .header_logo{background-image:url(../images/jo-logo-uk.svg);}
  /* logo image is hidden (text via :before) -> stretch the home-link over the whole logo so it's clickable on inner pages */
  body.jo-rd .header_logo a{position:absolute;top:0;left:0;right:0;bottom:0;display:block;z-index:2;text-indent:-9999px;overflow:hidden;}
}

body.jo-rd #content{position:relative;}

/* =========================================================
   HOME: same solid header (white top + gray nav strip) ABOVE the hero (Figma)
   ========================================================= */
@media (min-width:992px){
  body.jo-home #oct-wrap{position:relative;}
  /* header stays in normal flow, identical to inner pages; hero sits below it */
}

/* =========================================================
   HERO
   ========================================================= */
@media (min-width:992px){
  body.jo-rd #content .box .banner .owl-item,
  body.jo-rd #content .box .image-hover-effect{height:650px;}
  body.jo-rd #content .box .image-hover-effect{background:url(../images/joanna-hero.jpg) center top/cover no-repeat;}
  body.jo-rd #content .box .owl-item img{opacity:0;height:650px;width:100%;object-fit:cover;}
  body.jo-rd #content .box .owl-nav{display:none;}

  body.jo-rd .jo-hero-ov{position:absolute;top:0;left:0;width:100%;height:650px;z-index:5;pointer-events:none;}
  /* Figma 7901:16906: one centred row, RC Bold 16/18 uppercase white, 40x1 rules between items,
     sitting on the translucent 66px strip at the hero's bottom edge (7901:16857). */
  body.jo-rd .jo-hero-badges{display:flex!important;position:absolute;left:0;right:0;bottom:0;height:66px;
    flex-direction:row;align-items:center;justify-content:center;gap:0;
    background:rgba(20,20,20,.3);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;z-index:6;}
  body.jo-rd .jo-hero-badges__row{display:flex;align-items:center;gap:0;}
  body.jo-rd .jo-hero-badges__row+.jo-hero-badges__row:before{content:"";width:40px;height:1px;background:#fff;flex:0 0 auto;}
  body.jo-rd .jo-hero-badges__row span{font-family:var(--jo-cond);font-weight:700;font-size:16px;line-height:18px;text-transform:uppercase;color:#fff;white-space:nowrap;}
  body.jo-rd .jo-hero-badges__row i{width:40px;height:1px;background:#fff;flex:0 0 auto;}
  body.jo-rd .jo-hero-ov__inner{position:absolute;left:calc(max(0px,(100% - 1320px)/2) + 43px);top:152px;pointer-events:auto;}
  body.jo-rd .jo-hero-ov__title{font-family:var(--jo-serif);font-weight:700;font-size:80px;line-height:70px;text-transform:uppercase;color:var(--jo-ink);margin:0;}
  body.jo-rd .jo-hero-ov__sub{font-family:var(--jo-sans);font-weight:600;font-size:35px;line-height:35px;letter-spacing:1.4px;text-transform:uppercase;color:var(--jo-ink);margin:19px 0 0;}
  /* button is now a sibling of __inner (moved out for mobile centering) -> pin under text on desktop */
  body.jo-rd .jo-hero-ov__btn{position:absolute;left:calc(max(0px,(100% - 1320px)/2) + 43px);top:370px;margin:0;pointer-events:auto;}

  /* Trust badges: desktop used to re-style the theme's old .block_ico row, whose wording comes from
     the legacy language vars ("5 років на ринку", "безкоштовна доставка") — neither is in the Figma.
     Both breakpoints now render the same .jo-hero-badges markup from home.tpl. */
  body.jo-rd #content .box-main>.container:first-child{display:none!important;}
  body.jo-rd #content .container1{display:none!important;}
}

/* =========================================================
   MENU BAR
   ========================================================= */
@media (min-width:992px){
  /* Figma nav strip: solid #f5f5f5, Roboto Condensed Bold uppercase, active = white box + black top border + teal */
  body.jo-rd nav#megamenu-menu.navbar{background:#f5f5f5!important;border:0!important;min-height:0;margin:0;}
  body.jo-rd #megamenu-menu .navbar-collapse{padding:0;}
  body.jo-rd #megamenu-menu .navbar-collapse>.container{width:100%;max-width:1440px;margin:0 auto;padding:0 60px;}
  /* fluid gap + reserve the far-right search-field zone so items never slip under it at narrow widths */
  /* Figma 7901:16885 gap = 44px at the 1440 canvas; still shrinks on narrower desktops */
  body.jo-rd #megamenu-menu .nav.navbar-nav{display:flex;gap:clamp(14px,3.05vw,44px);align-items:stretch;padding-right:96px;}
  body.jo-rd #megamenu-menu .nav.navbar-nav:before,body.jo-rd #megamenu-menu .nav.navbar-nav:after{display:none!important;}
  body.jo-rd #megamenu-menu .nav>li{display:flex;align-items:stretch;}
  /* Figma 7901:16884: strip is 59px tall (text 19px + 20px padding), not the theme's 90px */
  body.jo-rd #megamenu-menu .nav>li>a{display:flex;align-items:center;color:#333!important;font-family:var(--jo-cond);font-weight:700;font-size:16px;letter-spacing:.224px;line-height:19px!important;text-transform:uppercase;padding:20px 0!important;background:transparent!important;border-top:1px solid transparent;transition:none;height:59px;}
  body.jo-rd #megamenu-menu .nav.navbar-nav,body.jo-rd #megamenu-menu .nav>li{height:59px;}
  body.jo-rd nav#megamenu-menu.navbar,body.jo-rd #megamenu-menu .navbar-collapse,body.jo-rd #megamenu-menu .navbar-collapse>.container{height:59px;min-height:59px;}
  /* The white tile (Figma 7901:16889) marks the CURRENT category, not hover. Putting it on :hover
     made the item jump 12px sideways (the tile's padding) every time the cursor crossed it. */
  body.jo-rd #megamenu-menu .nav>li.active>a,body.jo-rd #megamenu-menu .nav>li.current>a,
  body.jo-rd #megamenu-menu .nav>li>a.current-link{background:#fff!important;border-top:1px solid #000;color:var(--jo-teal)!important;padding-left:12px!important;padding-right:12px!important;margin:0 -12px;}
  /* hover = colour only, so nothing reflows */
  body.jo-rd #megamenu-menu .nav>li:hover>a{color:var(--jo-teal)!important;transition:color .2s ease;}
  /* a menu_type=link item (Розпродаж) still gets the template's empty toggle anchor, which
     rendered as a stray white block next to the label */
  body.jo-rd #megamenu-menu .nav>li>a.megamenu-notoggle-a{display:none!important;}
  /* search -> collapsed "Поиск" label; click reveals a white field per Figma 7921:616 (236x40, placeholder "Введите название товара" RC 14px #5e5e5e) */
  body.jo-rd nav#megamenu-menu{position:relative;}
  body.jo-rd #megamenu-menu #search{position:absolute;right:max(60px,calc((100% - 1440px)/2 + 60px));top:0;height:100%;display:flex;align-items:center;justify-content:flex-end;background:transparent!important;}
  /* theme base sets .sb-search{overflow:hidden} — it clipped the collapsed "Поиск/Пошук" label mid-word */
  body.jo-rd #megamenu-menu .sb-search{position:static;width:auto!important;min-width:0!important;height:auto!important;margin:0!important;top:auto!important;background:transparent!important;box-shadow:none!important;display:flex;align-items:center;overflow:visible!important;flex:0 0 auto;}
  body.jo-rd #megamenu-menu .sb-search:not(.open) .sb-icon-search{white-space:nowrap;overflow:visible!important;}
  body.jo-rd #megamenu-menu .sb-search .sb-icon-search{position:static!important;top:auto!important;margin:0!important;width:auto!important;height:auto!important;background:transparent!important;color:var(--jo-ink)!important;font-family:var(--jo-cond);font-weight:400;font-size:16px;line-height:normal;cursor:pointer;display:flex;align-items:center;}
  body.jo-rd #megamenu-menu .sb-search .sb-icon-search i{display:none;}
  body.jo-rd #megamenu-menu .sb-search:not(.open) .sb-icon-search:after{content:"Поиск";}
  html[lang="uk"] body.jo-rd #megamenu-menu .sb-search:not(.open) .sb-icon-search:after{content:"Пошук";}
  body.jo-rd #megamenu-menu .sb-search:not(.open) .sb-search-input{width:0!important;min-width:0!important;padding:0!important;border:0!important;opacity:0;background:transparent!important;}
  /* open: white field per mockup (Figma 7921:616), placeholder "Введите название товара" RC 14px #5e5e5e.
     NB flex container + in-flow input (position:static) — an absolutely-positioned input collapses to width:0 here */
  body.jo-rd #megamenu-menu .sb-search.open{display:flex;align-items:stretch;position:relative;overflow:visible!important;width:236px!important;min-width:236px!important;height:40px!important;background:#fff!important;}
  body.jo-rd #megamenu-menu .sb-search.open .sb-search-input{position:static!important;flex:1 0 236px!important;width:auto!important;min-width:0!important;max-width:none!important;opacity:1!important;height:auto!important;padding:0 12px!important;margin:0!important;border:0!important;border-radius:0;background:#fff!important;font-family:var(--jo-cond)!important;font-weight:400;font-size:14px;line-height:16px;color:var(--jo-ink);transform:none!important;}
  body.jo-rd #megamenu-menu .sb-search.open .sb-search-input::-webkit-input-placeholder{color:#5e5e5e;opacity:1;}
  body.jo-rd #megamenu-menu .sb-search.open .sb-search-input::placeholder{color:#5e5e5e;opacity:1;}
  body.jo-rd #megamenu-menu .sb-search.open .sb-icon-search{display:none!important;}
}

/* header: kill nav strip drop-shadow (Figma = flat) */
body.jo-rd nav#megamenu-menu,body.jo-rd #megamenu-menu.navbar{box-shadow:none!important;border:0!important;}
/* breadcrumb: flat, no shadow/border, clear gap under header */
body.jo-rd .breadcrumb{box-shadow:none!important;border:0!important;background:transparent!important;margin:0!important;padding:18px 0 6px!important;}
body.jo-rd .breadcrumb>li{text-shadow:none;}

/* =========================================================
   PRODUCT SECTIONS (news-set carousels)
   ========================================================= */
body.jo-rd .box-main{background:transparent!important;box-shadow:none!important;border:0!important;margin:0!important;padding-top:0!important;padding-bottom:0!important;}
body.jo-rd .box-main .owl-carousel,body.jo-rd #cat-latest,body.jo-rd .category-slide .owl-carousel{background:transparent!important;}
body.jo-rd #content .container{background:transparent!important;}
body.jo-rd .news-set{max-width:1320px;margin:0 auto;padding:70px 12px 0;position:relative;border:0!important;}
/* first home section: hero/slideshow overflows its flow box, so only a top margin on the heading itself moves it → set hero→heading gap to 70px */
body.jo-rd .container>.box-main:first-child .news-set .inner>span,body.jo-rd .container>.box-main:first-child .news-set .inner>a.jo-set-title>span{margin-top:50px;}
body.jo-rd .box-main:has(#cat-latest) .news-set .inner>a.jo-set-title>span{margin-top:50px;}
/* other sections: theme pulls .inner up by -18px → reset so section-to-section gap = 70px */
body.jo-rd .container>.box-main:not(:first-child) .news-set .inner{margin-top:0!important;}
body.jo-rd .news-set.center{text-align:center;}
body.jo-rd .news-set .inner{position:relative;padding-bottom:0;margin-bottom:60px;text-align:center;}
body.jo-rd .news-set .inner>span,body.jo-rd .news-set .inner>a.jo-set-title>span{font-family:var(--jo-cond)!important;font-weight:700;font-size:32px;line-height:40px;text-transform:uppercase;color:var(--jo-ink);letter-spacing:0;display:inline-block;}

/* nav arrows live in the sibling .category-slide, not inside .news-set */
body.jo-rd .category-slide{position:relative;height:auto!important;max-height:none!important;overflow:visible;}
body.jo-rd .category-slide .owl-carousel{float:none!important;}
body.jo-rd .category-slide .owl-nav{position:absolute;top:-36px;right:0;display:flex;gap:12px;margin:0;z-index:5;}
body.jo-rd .category-slide .owl-item .item{margin:0!important;}
/* Figma 7999:547 — both circles #EFEFEF; next glyph teal, prev glyph gray; solid rounded-triangle pointer */
body.jo-rd .category-slide .owl-nav>div{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0;line-height:0;padding:0;margin:0;background:#efefef;border:0;transition:background .2s;}
body.jo-rd .category-slide .owl-nav>div::before{content:"";width:50px;height:50px;background-color:#2ec4b6;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath d='M19.0007 17.4147C18.9682 16.3492 20.0082 15.6894 20.9001 16.1477C21.1549 16.2791 21.3801 16.4776 21.6053 16.6615C24.4707 19.0231 27.336 21.3818 30.1984 23.7464C31.2592 24.6221 31.2681 25.3782 30.2192 26.2452C27.3153 28.6477 24.3966 31.0356 21.4957 33.4439C20.906 33.9343 20.2927 34.2292 19.5845 33.7738C18.8615 33.3067 18.9652 32.6353 19.1667 31.9084C19.7623 29.7862 20.3253 27.6522 20.8646 25.5154C20.9505 25.1709 20.9268 24.7622 20.8379 24.4119C20.269 22.1904 19.6675 19.9806 19.0808 17.765C19.0422 17.6248 19.0185 17.4818 19.0037 17.4147H19.0007Z'/%3E%3C/svg%3E") center/50px 50px no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath d='M19.0007 17.4147C18.9682 16.3492 20.0082 15.6894 20.9001 16.1477C21.1549 16.2791 21.3801 16.4776 21.6053 16.6615C24.4707 19.0231 27.336 21.3818 30.1984 23.7464C31.2592 24.6221 31.2681 25.3782 30.2192 26.2452C27.3153 28.6477 24.3966 31.0356 21.4957 33.4439C20.906 33.9343 20.2927 34.2292 19.5845 33.7738C18.8615 33.3067 18.9652 32.6353 19.1667 31.9084C19.7623 29.7862 20.3253 27.6522 20.8646 25.5154C20.9505 25.1709 20.9268 24.7622 20.8379 24.4119C20.269 22.1904 19.6675 19.9806 19.0808 17.765C19.0422 17.6248 19.0185 17.4818 19.0037 17.4147H19.0007Z'/%3E%3C/svg%3E") center/50px 50px no-repeat;}
body.jo-rd .category-slide .owl-nav>div.owl-prev::before{transform:rotate(180deg);}
/* active arrow = brand teal glyph; muted (start/end of range, class set by JS) = gray glyph */
body.jo-rd .category-slide .owl-nav>div.jo-muted::before,body.jo-rd .category-slide .owl-nav>div.disabled::before{background-color:#979f9e;}
body.jo-rd .category-slide .owl-nav>div{background:#efefef;}
body.jo-rd .category-slide .owl-nav>div:not(.jo-muted):hover{background:#e4e4e4;}

/* promo banner (image 52) — Figma gap Топ недели→banner = 60px (site had 20px) */
@media (min-width:992px){
  body.jo-rd .banner-box{margin-top:60px!important;margin-bottom:60px!important;}
}

/* clean product cards for the home carousels (Figma 8095:223) */
body.jo-rd .category-slide .sticker{display:none!important;}
body.jo-rd .category-slide .item .image{aspect-ratio:315/420;border-radius:4px;overflow:hidden;}
body.jo-rd .category-slide .item .image>a{display:block;width:100%;height:100%;}
body.jo-rd .category-slide .item .image img{width:100%!important;height:100%!important;max-height:none!important;object-fit:cover;}
body.jo-rd .category-slide .item .name{margin:16px 0 4px!important;min-height:40px;line-height:20px!important;border:0!important;}
body.jo-rd .category-slide .item .name a{display:inline-block;font-family:var(--jo-cond)!important;font-size:16px;font-weight:500;line-height:20px!important;letter-spacing:0;color:var(--jo-black)!important;}
body.jo-rd .category-slide .item .price,body.jo-rd .category-slide .item .price.product-grid{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0!important;font-family:var(--jo-cond);}
body.jo-rd .category-slide .item .price .jo-price-main{display:block;font-family:var(--jo-cond);font-size:20px;font-weight:700;line-height:24px;color:var(--jo-black)!important;flex:0 1 auto;}
body.jo-rd .category-slide .item .price .jo-price-opt{display:block;font-family:var(--jo-cond);font-size:14px;font-weight:400;line-height:18px;color:#1cb0a2!important;text-decoration:underline;white-space:nowrap;margin:0;text-align:right;}

/* Новые поступления: two-row grid (Figma — 2 rows x 4) */
body.jo-rd #cat-latest.jo-2row .jo-col2{display:flex;flex-direction:column;gap:24px;}
body.jo-rd #cat-latest.jo-2row .owl-item .jo-col2 .item{width:100%;margin:0!important;}
body.jo-rd #cat-latest.jo-2row .owl-stage-outer{height:auto!important;max-height:none!important;}

/* ---- product gallery: thumbnails column left (desktop) ---- */
@media (min-width:992px){
  /* Figma column split: gallery ~59% / info ~41% */
  body.jo-rd .product-info>.col-sm-6:not(.product-right),
  body.jo-rd .product-info .col-sm-6:not(.product-right){width:58.8%!important;float:left;display:flex!important;flex-wrap:wrap;align-items:flex-start;gap:20px;}
  body.jo-rd .product-right{width:41.2%!important;float:left;}
  /* thumbnails column (Figma 8121:173 — Rect 32/33/34: 203×200, gap 20, no border/radius) */
  body.jo-rd #owl-additional{order:1;flex:0 0 180px!important;width:180px!important;max-width:180px!important;max-height:567px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;}
  body.jo-rd #owl-additional::-webkit-scrollbar{display:none;}
  body.jo-rd #owl-additional .owl-stage-outer{overflow:visible;width:100%!important;}
  body.jo-rd #owl-additional .owl-stage{width:100%!important;transform:none!important;display:flex;flex-direction:column;gap:18px;}
  body.jo-rd #owl-additional .owl-item,
  body.jo-rd #owl-additional .owl-item .item,
  body.jo-rd #owl-additional .owl-item .item a{width:100%!important;height:auto!important;margin:0!important;padding:0!important;line-height:0!important;font-size:0!important;display:block!important;border:0!important;flex:0 0 auto;}
  body.jo-rd #owl-additional .owl-item img{width:180px!important;height:177px!important;object-fit:cover;object-position:center top;border:0!important;border-radius:0!important;display:block;box-sizing:border-box;cursor:pointer;}
  body.jo-rd #owl-additional .owl-item.synced img,body.jo-rd #owl-additional .owl-item.current img,body.jo-rd #owl-additional .owl-item.jo-thumb-active img{outline:2px solid var(--jo-teal);outline-offset:-2px;}
  body.jo-rd #owl-additional .owl-nav,body.jo-rd #owl-additional .owl-dots{display:none!important;}
  body.jo-rd #owl-additional{scroll-behavior:smooth;}
  /* main image (Figma 8121:173 — Rect 31: 539×640, no arrows/radius).
     owl міряє ширину колонки (676) для item → фото зумиться. Фікс: гасимо transform,
     всі item absolute у stage-outer (реальна ширина 476 через flex), активний — crossfade opacity. */
  body.jo-rd #owl-thumb{order:2;flex:1 1 0;min-width:0;position:relative;}
  body.jo-rd #owl-thumb .owl-stage-outer{position:relative!important;overflow:hidden!important;height:565px!important;}
  body.jo-rd #owl-thumb .owl-stage{transform:none!important;width:100%!important;position:static!important;height:565px!important;}
  body.jo-rd #owl-thumb .owl-item{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:565px!important;margin:0!important;opacity:0;transition:opacity .35s ease;pointer-events:none;display:block!important;}
  body.jo-rd #owl-thumb .owl-item.center{opacity:1;pointer-events:auto;z-index:2;}
  /* Figma's 539x640 placeholder is 0.84 wide, the real catalogue photos are 2:3 — `cover` cropped
     the model's head and feet. `contain` keeps the whole photo inside the same box. */
  body.jo-rd #owl-thumb .owl-item img{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:565px!important;object-fit:contain!important;object-position:center!important;background:#fff;border-radius:0!important;display:block!important;}
  body.jo-rd #owl-thumb .owl-dots{display:none!important;}
  /* nav arrows — circular, over main image bottom corners */
  body.jo-rd #owl-thumb .owl-nav{position:absolute;left:0;right:0;bottom:16px;top:auto;margin:0;display:flex!important;justify-content:space-between;padding:0 16px;pointer-events:none;z-index:5;}
  body.jo-rd #owl-thumb .owl-nav [class*="owl-"]{pointer-events:auto;width:48px!important;height:48px!important;border-radius:50%!important;background:#fff!important;color:transparent!important;font-size:0!important;line-height:0!important;text-indent:-9999px;display:flex!important;align-items:center;justify-content:center;box-shadow:none!important;margin:0!important;position:relative;overflow:hidden;opacity:1!important;}
  body.jo-rd #owl-thumb .owl-nav [class*="owl-"] *{font-size:0!important;color:transparent!important;}
  /* active arrow = teal circle + white glyph; disabled (start/end) = white circle + grey glyph */
  body.jo-rd #owl-thumb .owl-nav [class*="owl-"]:not(.disabled){background:var(--jo-teal)!important;}
  body.jo-rd #owl-thumb .owl-nav [class*="owl-"].disabled{background:#fff!important;cursor:default;}
  body.jo-rd #owl-thumb .owl-nav [class*="owl-"]:before{content:"";position:absolute;top:50%;left:50%;width:14px;height:10px;background-color:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.0569 0.000497818C11.7672 -0.0212317 12.2071 0.672142 11.9015 1.26674C11.8139 1.43663 11.6816 1.58676 11.559 1.7369C9.98458 3.64713 8.41212 5.55736 6.83576 7.46562C6.25192 8.17282 5.74787 8.17875 5.16988 7.47945C3.56822 5.54354 1.97629 3.59774 0.370738 1.6638C0.0437889 1.2707 -0.152769 0.861783 0.150826 0.389657C0.462205 -0.0923462 0.909813 -0.0232067 1.3944 0.111122C2.80923 0.508182 4.23184 0.883512 5.65641 1.24304C5.88605 1.30033 6.15851 1.28452 6.39204 1.22526C7.87304 0.845979 9.34625 0.444968 10.8234 0.0538344C10.9168 0.0281539 11.0121 0.012351 11.0569 0.00247383V0.000497818Z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.0569 0.000497818C11.7672 -0.0212317 12.2071 0.672142 11.9015 1.26674C11.8139 1.43663 11.6816 1.58676 11.559 1.7369C9.98458 3.64713 8.41212 5.55736 6.83576 7.46562C6.25192 8.17282 5.74787 8.17875 5.16988 7.47945C3.56822 5.54354 1.97629 3.59774 0.370738 1.6638C0.0437889 1.2707 -0.152769 0.861783 0.150826 0.389657C0.462205 -0.0923462 0.909813 -0.0232067 1.3944 0.111122C2.80923 0.508182 4.23184 0.883512 5.65641 1.24304C5.88605 1.30033 6.15851 1.28452 6.39204 1.22526C7.87304 0.845979 9.34625 0.444968 10.8234 0.0538344C10.9168 0.0281539 11.0121 0.012351 11.0569 0.00247383V0.000497818Z' fill='%23000'/%3E%3C/svg%3E") center/contain no-repeat;}
  body.jo-rd #owl-thumb .owl-nav [class*="owl-"].disabled:before{background-color:#b4b4b4;}
  body.jo-rd #owl-thumb .owl-nav .owl-prev:before{transform:translate(-50%,-50%) rotate(90deg);}
  body.jo-rd #owl-thumb .owl-nav .owl-next:before{transform:translate(-50%,-50%) rotate(-90deg);}
  body.jo-rd .product-info .col-sm-6:not(.product-right) .youtube-video{order:3;flex:0 0 100%;}
}

/* ---- product card ---- */
body.jo-rd .item{background:#fff;text-align:left;padding:0;border:0;}
body.jo-rd .item .image{border-radius:4px;overflow:hidden;background:var(--jo-bg);}
body.jo-rd .item .image img{width:100%;height:auto;display:block;}
body.jo-rd .item .name{margin:14px 0 6px;min-height:32px;}
body.jo-rd .item .name a{color:var(--jo-ink)!important;font-size:12px;font-weight:500;line-height:1.35;text-transform:uppercase;letter-spacing:.3px;}
body.jo-rd .item .price{font-family:var(--jo-sans);}
body.jo-rd .item .price,body.jo-rd .item .price.product-grid{color:var(--jo-ink)!important;font-size:16px;font-weight:700;line-height:1.3;}
body.jo-rd .item .price .jo-price-main{display:block;font-size:20px;font-weight:700;color:var(--jo-ink)!important;}
body.jo-rd .item .price .jo-price-opt{display:block;font-size:13px;font-weight:400;color:var(--jo-teal)!important;text-align:right;margin-top:2px;}
body.jo-rd .item .price span[style],body.jo-rd .item .price>span{color:inherit!important;}
body.jo-rd .item .price .price-old{color:var(--jo-grey)!important;text-decoration:line-through;font-weight:400;font-size:14px;}
body.jo-rd .item .price .price-new{color:var(--jo-ink)!important;font-size:20px;font-weight:700;}
body.jo-rd .stickers-cat{background:var(--jo-teal)!important;color:#fff!important;font-family:var(--jo-cond);text-transform:uppercase;font-size:11px;padding:4px 10px;border-radius:2px;}

/* =========================================================
   FOOTER (Figma light — node 8070:268)
   ========================================================= */
body.jo-rd footer.jo-ftr{background:#f7f7f7;color:var(--jo-black);font-family:var(--jo-cond);}
body.jo-rd .jo-ftr__nav{background:none!important;box-shadow:none;border:0;}
body.jo-rd .jo-ftr .container{max-width:1440px;margin:0 auto;padding:60px 60px 25px;position:relative;width:100%;}

/* text blocks */
body.jo-rd .jo-ftr__hours{font-family:var(--jo-cond);font-weight:500;font-size:14px;line-height:18px;text-transform:uppercase;color:#393939;margin-bottom:12px;}
body.jo-rd .jo-ftr__phones{display:flex;flex-direction:column;gap:4px;}
body.jo-rd .jo-ftr__phone{font-family:var(--jo-cond);font-weight:700;font-size:16px;line-height:19px;color:#333!important;text-decoration:none;background:none!important;}
body.jo-rd .jo-ftr__mail{font-family:var(--jo-cond);font-weight:400;font-size:14px;line-height:20px;color:#7f7f7f!important;text-decoration:none;background:none!important;}

body.jo-rd .jo-ftr__navtitle{font-family:var(--jo-cond);font-weight:500;font-size:16px;line-height:20px;text-transform:uppercase;color:#393939;margin-bottom:12px;}
body.jo-rd .jo-ftr__navcols{display:flex;gap:48px;}
body.jo-rd .jo-ftr__navlist{list-style:none;margin:0;padding:0;border:0!important;}
body.jo-rd .jo-ftr__navlist li{margin-bottom:8px;padding:0;list-style:none;background:none;border:0!important;}
body.jo-rd .jo-ftr__navlist li:last-child{margin-bottom:0;}
body.jo-rd .jo-ftr__navlist a{font-family:var(--jo-cond);font-weight:400;font-size:14px;line-height:18px;color:#393939!important;text-decoration:none;background:none!important;white-space:nowrap;}
body.jo-rd .jo-ftr__navlist a:hover{color:#2ec4b6!important;}
/* smooth hover on all footer clickables */
body.jo-rd .jo-ftr__navlist a,
body.jo-rd .jo-ftr__phone,
body.jo-rd .jo-ftr__mail,
body.jo-rd .jo-ftr__socicons a,
body.jo-rd .jo-ftr__socicons img,
body.jo-rd .jo-ftr__logo,
body.jo-rd .jo-ftr__logoimg{transition:color .2s ease,opacity .2s ease,transform .2s ease;}
body.jo-rd .jo-ftr__phone:hover{color:#2ec4b6!important;}
body.jo-rd .jo-ftr__mail:hover{color:#2ec4b6!important;}
body.jo-rd .jo-ftr__socicons a:hover img{opacity:.8;transform:translateY(-2px);}
body.jo-rd .jo-ftr__logo:hover .jo-ftr__logoimg{opacity:.8;}

body.jo-rd .jo-ftr__paytext{font-family:var(--jo-cond);font-weight:500;font-size:16px;line-height:20px;text-transform:uppercase;color:#393939;width:309px;}
body.jo-rd .jo-ftr__cards{margin-top:35px;}
body.jo-rd .jo-ftr__cards img{display:block;width:230px;height:52px;}

body.jo-rd .jo-ftr__socicons{display:flex;gap:12px;align-items:center;}
body.jo-rd .jo-ftr__socicons a{display:inline-flex;line-height:0;background:none!important;}
body.jo-rd .jo-ftr__socicons img{height:48px;width:auto;display:block;}
body.jo-rd .jo-ftr__copy{font-family:var(--jo-cond);font-weight:400;font-size:12px;line-height:14px;color:#7f7f7f;margin-top:4px;}

body.jo-rd .jo-ftr__logo{display:inline-flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;}
body.jo-rd .jo-ftr__logoimg{width:155px;height:38px;display:block;}
body.jo-rd .jo-ftr__tagline{font-family:var(--jo-cond);font-weight:400;font-size:14px;line-height:20px;text-transform:uppercase;color:#7f7f7f;text-align:center;white-space:nowrap;}

/* nested bootstrap .container inside .container -> fixed 970px overflows viewport */
body.jo-rd .container .container{width:auto;max-width:100%;}
/* subpixel rounding guard (clip, not hidden — keeps position:sticky alive) */
body.jo-rd{overflow-x:clip;}
html:has(>body.jo-rd){overflow-x:clip;}

/* desktop precise positions (Figma canvas 1440); below 1350px absolute columns overlap */
@media (min-width:1350px){
  body.jo-rd .jo-ftr__top{position:relative;min-height:128px;}
  body.jo-rd .jo-ftr__contact{position:absolute;left:0;top:0;width:265px;}
  body.jo-rd .jo-ftr__nav{position:absolute;left:337px;top:0;margin:0;display:flex;gap:80px;align-items:flex-start;}
  body.jo-rd .jo-ftr__pay{position:absolute;right:0;top:0;width:330px;}
  body.jo-rd .jo-ftr__bottom{position:relative;margin-top:102px;min-height:66px;}
  body.jo-rd .jo-ftr__social{position:absolute;left:0;top:0;width:265px;}
  body.jo-rd .jo-ftr__logo{position:absolute;left:50%;transform:translateX(-50%);top:3px;}
}
/* intermediate 992-1349: flex row footer, no pinned coordinates */
@media (min-width:992px) and (max-width:1349px){
  body.jo-rd .jo-ftr__top{display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between;align-items:flex-start;}
  body.jo-rd .jo-ftr__nav{margin:0;display:flex;gap:50px;align-items:flex-start;}
  body.jo-rd .jo-ftr__pay{width:280px;flex:0 0 auto;}
  body.jo-rd .jo-ftr__paytext{width:auto;}
  body.jo-rd .jo-ftr__bottom{position:relative;margin-top:60px;min-height:66px;}
  body.jo-rd .jo-ftr__social{position:absolute;left:0;top:0;width:265px;}
  body.jo-rd .jo-ftr__logo{position:absolute;left:50%;transform:translateX(-50%);top:3px;}
}

/* tablet / mobile stack */
@media (max-width:991px){
  /* Figma mobile footer order: nav → contact → social+© → pay → logo.
     social sits in .jo-ftr__bottom, contact/pay in .jo-ftr__top → flatten both
     wrappers with display:contents so all 5 blocks order in one column. */
  body.jo-rd .jo-ftr .container{padding:40px 20px 30px;display:flex;flex-direction:column;gap:34px;}
  body.jo-rd .jo-ftr__top,body.jo-rd .jo-ftr__bottom{display:contents;}
  body.jo-rd .jo-ftr__nav{order:1;display:flex;flex-direction:column;gap:26px;margin:0;}
  body.jo-rd .jo-ftr__contact{order:2;width:auto;}
  body.jo-rd .jo-ftr__social{order:3;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:16px;}
  body.jo-rd .jo-ftr__pay{order:4;width:auto;}
  body.jo-rd .jo-ftr__logo{order:5;align-items:flex-start;text-align:left;}
  body.jo-rd .jo-ftr__navcols{gap:40px;}
  body.jo-rd .jo-ftr__paytext{width:auto;}
  body.jo-rd .jo-ftr__cards{margin-top:16px;}
  body.jo-rd .jo-ftr__tagline{white-space:normal;text-align:left!important;}
  body.jo-rd .jo-ftr__logo{align-items:flex-start!important;text-align:left!important;}
  body.jo-rd .jo-ftr__logoimg{margin-left:0!important;}
  /* tidy: theme adds centering + underlines on mobile footer links */
  body.jo-rd .jo-ftr__navlist a,body.jo-rd .jo-ftr__navtitle,body.jo-rd .jo-ftr__hours,body.jo-rd .jo-ftr__phones{text-align:left;border:0!important;}
  body.jo-rd .jo-ftr__navlist li{text-align:left;}
  body.jo-rd .jo-ftr__navlist a{display:inline-block;border-bottom:0!important;}
}

/* =========================================================
   PRODUCT PAGE  (Figma cfIxtF… 7901:16942)
   ========================================================= */
body.jo-rd .product-info{padding-top:8px;border-top:0!important;}
body.jo-rd .product-right{padding-left:24px;background:none!important;}
/* head row: model + reviews link */
body.jo-rd .jo-pr__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0 0 10px;}
body.jo-rd .jo-pr__model{color:var(--jo-ink);font-family:var(--jo-cond);font-size:14px;line-height:14px;text-transform:uppercase;letter-spacing:.2px;}
body.jo-rd .jo-pr__rev-link{color:var(--jo-ink);font-family:var(--jo-cond);font-size:16px;line-height:16px;text-transform:uppercase;text-decoration:underline;white-space:nowrap;cursor:pointer;}
body.jo-rd .jo-pr__rev-link:hover{color:var(--jo-teal);}
/* title */
body.jo-rd .product-info .top-info-product{margin:0;}
body.jo-rd .product-info .top-info-product h1{font-family:var(--jo-sans);font-weight:600;font-size:28px;line-height:1.28;text-transform:none;color:var(--jo-ink);margin:0;}
/* hide old inline description/model (moved to head + accordion) */
body.jo-rd .product-info .description{display:none!important;}
/* price */
body.jo-rd .product-info .price{margin:14px 0 20px;display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;}
body.jo-rd .product-info .price .price-new{color:var(--jo-teal)!important;font-size:36px;font-weight:700;font-family:var(--jo-cond);line-height:36px;order:1;flex:1 0 auto;}
body.jo-rd .product-info .price .jo-pr__opt{background:#f9f9f9;color:var(--jo-ink)!important;font-family:var(--jo-cond);font-weight:700;font-size:16px;line-height:24px;margin:0;order:2;display:flex;align-items:flex-end;gap:12px;padding:12px 16px;}
body.jo-rd .product-info .price .jo-pr__opt .jo-pr__opt-price{color:var(--jo-teal)!important;font-size:28px;line-height:36px;font-weight:700;}
body.jo-rd .product-info .price .reward-product:not(.jo-pr__opt){display:none!important;}
body.jo-rd .product-info .availabil,body.jo-rd .product-info .price .you-save,body.jo-rd .product-info .price br{display:none;}
/* pink hint box */
body.jo-rd .jo-pr__hint{background:#f5f5f5;color:#e230bc;font-family:var(--jo-cond);font-weight:700;font-size:14px;line-height:16px;text-align:center;padding:12px 8px;border-radius:0;margin:16px 0 0;max-width:538px;}
/* selects — full width, no visible label, placeholder inside */
body.jo-rd .product-right .options{max-width:538px;width:100%;display:flex;flex-direction:column;gap:8px;margin:0 0 0;}
body.jo-rd .product-right .options .form-group{margin:0;width:100%;}
body.jo-rd .product-right .options .control-label{display:none!important;}
body.jo-rd .product-right .form-control,body.jo-rd .product-right select.form-control{width:100%!important;max-width:none!important;height:44px;border:1px solid #b4b4b4!important;border-radius:0;background:#fff;color:var(--jo-ink);font-family:var(--jo-cond);font-weight:700;font-size:16px;padding:0 16px;box-shadow:none;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.0569 0.000497818C11.7672 -0.0212317 12.2071 0.672142 11.9015 1.26674C11.8139 1.43663 11.6816 1.58676 11.559 1.7369C9.98458 3.64713 8.41212 5.55736 6.83576 7.46562C6.25192 8.17282 5.74787 8.17875 5.16988 7.47945C3.56822 5.54354 1.97629 3.59774 0.370738 1.6638C0.0437889 1.2707 -0.152769 0.861783 0.150826 0.389657C0.462205 -0.0923462 0.909813 -0.0232067 1.3944 0.111122C2.80923 0.508182 4.23184 0.883512 5.65641 1.24304C5.88605 1.30033 6.15851 1.28452 6.39204 1.22526C7.87304 0.845979 9.34625 0.444968 10.8234 0.0538344C10.9168 0.0281539 11.0121 0.012351 11.0569 0.00247383V0.000497818Z' fill='%232EC4B6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;}
body.jo-rd .product-right select.form-control option{font-weight:400;font-size:14px;color:#333;}
/* placeholder (no value picked) — grey, regular, 14px like Figma */
body.jo-rd .product-right select.form-control:has(option[value=""]:checked){color:#5e5e5e;font-weight:400;font-size:14px;}
body.jo-rd .product-right .options .form-group.required .control-label:before{content:none;}
/* error state (validation) — message BELOW field, red border, greyed button */
body.jo-rd .product-right .options .form-group{display:block!important;}
body.jo-rd .product-right .form-group.jo-err select.form-control{border-color:#e23033!important;}
body.jo-rd .jo-pr__err{box-sizing:border-box;width:auto;max-width:100%;margin:4px 0 0;padding:4px 16px;background:#fff0f0;color:#e23033;font-family:var(--jo-cond);font-weight:400;font-size:14px;line-height:16px;text-align:left;border-radius:0;display:none;clear:both;}
body.jo-rd .product-right .form-group.jo-err .jo-pr__err{display:inline-block;}
body.jo-rd .product-right #button-cart.jo-cart-invalid{background:#9adfd7!important;}
body.jo-rd .product-right .jo-opt-notice{margin:10px 0 0;font-family:var(--jo-cond);font-size:14px;color:#e23033;}
/* custom toast (replaces native alert on review vote etc.) */
.jo-toast{position:fixed;left:50%;top:24px;transform:translateX(-50%) translateY(-14px);z-index:100060;background:var(--jo-teal,#2ec4b6);color:#fff;font-family:var(--jo-cond,'Roboto Condensed',sans-serif);font-weight:700;font-size:15px;line-height:1.35;padding:12px 22px;box-shadow:0 8px 28px rgba(0,0,0,.18);opacity:0;transition:opacity .3s ease,transform .3s ease;max-width:90vw;text-align:center;pointer-events:none;}
.jo-toast--in{opacity:1;transform:translateX(-50%) translateY(0);}
.jo-toast--error{background:#e23033;}
/* review admin answer + front-end reply composer (Figma 7915:318) */
body.jo-rd .review-list .admin_answer{margin:10px 0 0;}
body.jo-rd .review-list .admin_answer_text{color:var(--jo-teal,#2ec4b6);font-family:var(--jo-cond);font-weight:700;font-size:14px;margin:0 0 4px;display:flex;align-items:center;gap:8px;}
body.jo-rd .review-list .admin_answer_text i{color:var(--jo-teal,#2ec4b6);}
body.jo-rd .review-list .admin_answer>p:last-child{background:#f5f5f5;color:#393939;font-family:var(--jo-cond);font-size:14px;line-height:20px;margin:0;padding:10px 12px;}
body.jo-rd .review-list .jo-answer{display:none;margin:8px 0 0;}
body.jo-rd.jo-admin .review-list .jo-answer{display:block;}
body.jo-rd .review-list .jo-answer-toggle{color:var(--jo-teal,#2ec4b6);font-family:var(--jo-cond);font-size:14px;text-decoration:underline;cursor:pointer;}
body.jo-rd .review-list .jo-answer-box{margin:8px 0 0;}
body.jo-rd .review-list .jo-answer-inp{width:100%;min-height:90px;background:#f5f5f5;border:0;border-radius:0;padding:12px;font-family:var(--jo-cond);font-size:14px;color:#393939;resize:vertical;box-shadow:none;}
body.jo-rd .review-list .jo-answer-actions{display:flex;gap:10px;justify-content:flex-end;margin:10px 0 0;}
body.jo-rd .review-list .jo-answer-actions button{width:120px;padding:12px;border:0;border-radius:0;font-family:var(--jo-cond);font-weight:700;font-size:14px;text-transform:uppercase;color:#fff;cursor:pointer;line-height:1;}
body.jo-rd .review-list .jo-answer-cancel{background:#a6a6a6;}
body.jo-rd .review-list .jo-answer-send{background:var(--jo-teal,#2ec4b6);}
body.jo-rd .review-list .jo-answer-send:disabled{background:#e0e0e0;color:#a6a6a6;cursor:default;}
/* qty + buy row */
body.jo-rd .product-right .cart{display:flex!important;flex-wrap:nowrap!important;align-items:center!important;gap:20px;max-width:538px;margin:16px 0 0;}
body.jo-rd .product-right .cart>*{float:none!important;margin-top:0!important;margin-bottom:0!important;}
body.jo-rd .jo-qty{display:inline-flex!important;align-items:center;justify-content:space-between;border:1px solid var(--jo-ink);border-radius:0;height:48px;width:90px;flex:0 0 90px;padding:0 14px;overflow:hidden;background:#fff;}
body.jo-rd .jo-qty>input[type="hidden"]{display:none!important;}
body.jo-rd .jo-qty__btn{background:#fff;border:0;color:var(--jo-ink);font-family:var(--jo-cond);font-weight:700;font-size:16px;line-height:1;width:auto;flex:0 0 auto;height:46px;cursor:pointer;padding:0;box-shadow:none;order:0;position:static!important;}
body.jo-rd .jo-qty__minus{order:1;}
body.jo-rd .jo-qty__inp{border:0!important;text-align:center;width:0!important;min-width:0!important;flex:1 1 0!important;height:46px;box-shadow:none;font-family:var(--jo-cond);font-weight:700;font-size:16px;padding:0;background:transparent;position:static!important;order:2;}
body.jo-rd .jo-qty__plus{order:3;}
body.jo-rd .product-right .cart .button,
body.jo-rd .product-right #button-cart{flex:1 1 auto;background:var(--jo-teal)!important;color:#fff!important;font-family:var(--jo-cond);font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.5px;border:0!important;height:48px;padding:0 40px;border-radius:0;display:inline-flex;align-items:center;justify-content:center;box-shadow:none;cursor:pointer;}
body.jo-rd .product-right #button-cart i,body.jo-rd .product-right #button-cart span{display:none;}
body.jo-rd .product-right #button-cart.jo-disabled{opacity:.45;pointer-events:none;}
body.jo-rd .product-right .additional-buttons,body.jo-rd .product-right .button-one-click{display:none;}
/* accordion */
body.jo-rd .jo-acc{max-width:538px;margin:40px 0 0;border-top:1px solid var(--jo-ink);}
body.jo-rd .jo-acc__item{border-bottom:1px solid var(--jo-ink);}
body.jo-rd .jo-acc__hd{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:0;padding:16px 4px;font-family:var(--jo-cond);font-weight:400;font-size:16px;line-height:16px;text-transform:uppercase;letter-spacing:.2px;color:var(--jo-ink);cursor:pointer;text-align:left;}
body.jo-rd .jo-acc__chev{width:12px;height:8px;flex:0 0 12px;background:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.0569 0.000497818C11.7672 -0.0212317 12.2071 0.672142 11.9015 1.26674C11.8139 1.43663 11.6816 1.58676 11.559 1.7369C9.98458 3.64713 8.41212 5.55736 6.83576 7.46562C6.25192 8.17282 5.74787 8.17875 5.16988 7.47945C3.56822 5.54354 1.97629 3.59774 0.370738 1.6638C0.0437889 1.2707 -0.152769 0.861783 0.150826 0.389657C0.462205 -0.0923462 0.909813 -0.0232067 1.3944 0.111122C2.80923 0.508182 4.23184 0.883512 5.65641 1.24304C5.88605 1.30033 6.15851 1.28452 6.39204 1.22526C7.87304 0.845979 9.34625 0.444968 10.8234 0.0538344C10.9168 0.0281539 11.0121 0.012351 11.0569 0.00247383V0.000497818Z' fill='%232EC4B6'/%3E%3C/svg%3E") no-repeat center;transition:transform .2s;}
body.jo-rd .jo-acc__item.open .jo-acc__chev{transform:rotate(180deg);}
body.jo-rd .jo-acc__pn{display:none;padding:18px 20px 20px;font-size:14px;line-height:1.55;color:var(--jo-black);background:#f7f7f7;}
body.jo-rd .jo-acc__item.open .jo-acc__pn{display:block;}
body.jo-rd .jo-acc__pn ul{margin:0;padding-left:20px;list-style:disc;}
body.jo-rd .jo-acc__pn li{margin:4px 0;}
body.jo-rd .jo-acc__pn ul li::marker{color:var(--jo-ink);}
/* size table inside accordion (Figma 7918:652: dark header, teal head text) */
body.jo-rd .jo-acc__pn table.setka-r{width:100%;border-collapse:collapse;font-size:13px;background:#fff;}
body.jo-rd .jo-acc__pn table.setka-r td,body.jo-rd .jo-acc__pn table.setka-r th{padding:9px 6px!important;font-size:13px!important;text-align:center!important;border:0!important;}
body.jo-rd .jo-acc__pn table.setka-r th{background:var(--jo-ink)!important;color:var(--jo-teal)!important;font-family:var(--jo-cond)!important;font-weight:700!important;text-transform:uppercase;}
body.jo-rd .jo-acc__pn table.setka-r td{background:#fff!important;color:var(--jo-ink)!important;border-bottom:1px solid #ececec!important;}
body.jo-rd .jo-acc__pn table.setka-r tr td:first-child{font-weight:700;color:var(--jo-ink)!important;}
/* reviews inside accordion */
body.jo-rd .jo-acc__pn .rew-form{max-width:none;}
body.jo-rd .jo-acc__pn #review-title,body.jo-rd .jo-acc__pn h2{display:none;}
body.jo-rd .jo-acc__pn .reviewfield{margin:0 0 12px;}
body.jo-rd .jo-acc__pn .reviewfield label{display:none;}
body.jo-rd .jo-acc__pn .reviewfield .col-sm-9,body.jo-rd .jo-acc__pn .reviewfield .col-sm-3{width:100%;float:none;padding:0;}
body.jo-rd .jo-acc__pn .reviewfield input,body.jo-rd .jo-acc__pn .reviewfield textarea{width:100%;border:0!important;border-radius:0;box-shadow:none;padding:14px 16px;font-size:14px;background:#f0f0f0;color:var(--jo-ink);}
body.jo-rd .jo-acc__pn .reviewfield input::placeholder,body.jo-rd .jo-acc__pn .reviewfield textarea::placeholder{color:#8a8a8a;}
body.jo-rd .jo-acc__pn .reviewfield textarea{min-height:96px;resize:vertical;}
body.jo-rd .jo-acc__pn .reviewfield input[name="positive_text"],body.jo-rd .jo-acc__pn .reviewfield .input-positive_text,
body.jo-rd .jo-acc__pn .reviewfield textarea[name="positive_text"],body.jo-rd .jo-acc__pn .reviewfield textarea[name="negative_text"],
body.jo-rd .jo-acc__pn .reviewfield #ratingme,body.jo-rd .jo-acc__pn .reviewfield .fontawesome-stars{display:none!important;}
body.jo-rd .jo-acc__pn .reviewfield:has(#ratingme),body.jo-rd .jo-acc__pn .reviewfield:has([name="positive_text"]),body.jo-rd .jo-acc__pn .reviewfield:has([name="negative_text"]){display:none!important;}
body.jo-rd .jo-acc__pn #button-review,body.jo-rd .jo-acc__pn .jo-rev-open{background:var(--jo-teal)!important;color:#fff!important;border:0!important;font-family:var(--jo-cond);text-transform:uppercase;font-weight:700;font-size:14px;padding:0 26px!important;height:44px;line-height:44px!important;display:inline-block;cursor:pointer;width:auto!important;min-width:0!important;overflow:visible!important;white-space:nowrap;border-radius:2px;text-decoration:none;}
body.jo-rd .jo-acc__pn #button-review span,body.jo-rd .jo-acc__pn #button-review b{display:none;}
body.jo-rd .jo-acc__pn .jo-rev-cancel{display:inline-block;background:#a6a6a6!important;color:#fff!important;border:0!important;font-family:var(--jo-cond);text-transform:uppercase;font-weight:700;font-size:14px;padding:0 26px;height:44px;line-height:44px;cursor:pointer;border-radius:2px;margin-right:10px;text-decoration:none;}
body.jo-rd .jo-acc__pn .buttons{padding:0;text-align:right;}
body.jo-rd .jo-acc__pn #form-review{text-align:right;}
body.jo-rd .jo-acc__pn #form-review .reviewfield{text-align:left;}
body.jo-rd .jo-acc__pn #form-review .reviewfield .buttons{display:flex;justify-content:flex-end;gap:10px;margin:10px 0 0;padding:0;width:100%;float:none;}
body.jo-rd .jo-acc__pn #form-review .reviewfield .buttons .left{float:none;display:flex;gap:10px;align-items:center;}
body.jo-rd .jo-acc__pn #button-review.jo-disabled{background:#e0e0e0!important;color:#a6a6a6!important;pointer-events:none;cursor:default;}
/* size table: hide extra caption (not in Figma) */
body.jo-rd .jo-acc__pn #test-modal>p:first-child{display:none;}
/* reviews panel = white (cards carry their own border), Figma 7915:318 */
body.jo-rd #jo-acc-rev-pn{background:#fff;padding:2px 0 6px;}
body.jo-rd #jo-acc-rev-pn .rew-form{background:transparent;}
/* review list card */
body.jo-rd .jo-acc__pn .review-list{position:relative;border:1px solid #e2e2e2;border-radius:2px;background:#fff;padding:16px 18px;margin:0 0 16px;}
body.jo-rd .jo-acc__pn .review-list .author{font-family:var(--jo-sans);font-weight:700;font-size:15px;color:var(--jo-ink);display:inline-block;}
body.jo-rd .jo-acc__pn .review-list .oct_review_date{color:var(--jo-grey);font-size:13px;margin-top:3px;}
body.jo-rd .jo-acc__pn .reputation-buttons{position:absolute;top:16px;right:18px;display:flex;align-items:center;gap:5px;}
body.jo-rd .jo-acc__pn .reputation-buttons button{background:none;border:0;padding:0;cursor:pointer;font-size:16px;line-height:1;}
body.jo-rd .jo-acc__pn .reputation-buttons .plus-reputation{color:var(--jo-teal);}
body.jo-rd .jo-acc__pn .reputation-buttons .minus-reputation{color:#b9b9b9;margin-left:12px;}
body.jo-rd .jo-acc__pn .reputation-buttons span{color:var(--jo-grey);font-size:14px;font-family:var(--jo-cond);}
body.jo-rd .jo-acc__pn .reputation-buttons span::before{content:"(";}
body.jo-rd .jo-acc__pn .reputation-buttons span::after{content:")";}
body.jo-rd .jo-acc__pn .review-list .text{margin-top:12px;font-size:14px;line-height:1.55;color:var(--jo-black);}
body.jo-rd .jo-acc__pn .review-list .admin_answer p{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--jo-grey);}
body.jo-rd .jo-acc__pn .review-list .admin_answer_text{color:var(--jo-ink)!important;font-weight:600;}
body.jo-rd .jo-acc__pn .review-list .admin_answer .fa-reply{color:var(--jo-teal);}
/* hide stock rating stars line (Figma shows "Ответить" reply link instead) */
body.jo-rd .jo-acc__pn .review-list .rating{display:none;}
/* reply link + collapsible comment box (Figma expanded state) */
body.jo-rd .jo-acc__pn .jo-rev-reply{display:inline-block;margin-top:14px;color:var(--jo-teal);font-family:var(--jo-cond);font-size:14px;text-decoration:underline;cursor:pointer;}
body.jo-rd .jo-acc__pn .jo-rev-replybox{display:none;margin-top:12px;}
body.jo-rd .jo-acc__pn .review-list.jo-open .jo-rev-replybox{display:block;}
body.jo-rd .jo-acc__pn .jo-rev-replybox textarea{width:100%;border:0;background:#f0f0f0;padding:14px 16px;font-size:14px;min-height:96px;resize:vertical;color:var(--jo-ink);}
body.jo-rd .jo-acc__pn .jo-rev-replybox .jo-rev-rbtns{display:flex;justify-content:flex-end;gap:12px;margin-top:12px;}
body.jo-rd .jo-acc__pn .jo-rev-rbtns .jo-rev-rcancel{background:#b6b6b6;color:#fff;font-family:var(--jo-cond);font-weight:700;text-transform:uppercase;font-size:14px;border:0;padding:0 26px;height:44px;cursor:pointer;}
body.jo-rd .jo-acc__pn .jo-rev-rbtns .jo-rev-rsend{background:var(--jo-teal);color:#fff;font-family:var(--jo-cond);font-weight:700;text-transform:uppercase;font-size:14px;border:0;padding:0 26px;height:44px;cursor:pointer;}
/* no-reviews empty state text (Figma 7921:341) */
body.jo-rd .jo-acc__pn .content,body.jo-rd .jo-acc__pn #review>.content{font-family:var(--jo-cond);font-size:16px;color:var(--jo-ink);margin:0 0 16px;padding:0;background:transparent;}
/* validation error: pink bar (Figma 7921:555) */
body.jo-rd .jo-pr__err{box-sizing:border-box;width:auto;max-width:100%;background:#fff0f0;color:#e23033;font-family:var(--jo-cond);font-weight:400;font-size:14px;line-height:16px;text-align:left;margin:4px 0 0;padding:4px 16px;border-radius:0;}

/* hide the old tabs-box shell (content moved into accordion) */
body.jo-rd .tabs-box{display:none!important;}

/* =========================================================
   CART DRAWER (Figma 7918:563 / 7925:632)
   ========================================================= */
/* Figma 7935:53 = wider drawer (~460), full height, #f9f9f9 bg */
body.jo-rd #burger{max-width:512px!important;background:#f9f9f9!important;}
body.jo-rd #partcont{max-height:none!important;height:100%;width:100%!important;max-width:none!important;margin:0!important;float:none!important;background:#f9f9f9!important;padding:32px 24px!important;box-sizing:border-box;}
body.jo-rd #partcont>.content,body.jo-rd #partcont .mini-cart-info.jo-mc,body.jo-rd .jo-mc__row{width:100%!important;box-sizing:border-box;float:none!important;}
/* header block: X (close-popup) centered, then ТОВАРОВ N title, then thin #333 divider */
body.jo-rd #burger .close-popup{display:block;margin:0 auto 26px!important;width:32px!important;height:32px!important;position:relative;background:none!important;background-image:none!important;border:0!important;float:none!important;cursor:pointer;}
body.jo-rd #burger .close-popup:before,body.jo-rd #burger .close-popup:after{content:""!important;position:absolute;top:50%;left:50%;width:28px!important;height:2px!important;background:#888!important;border:0!important;margin:0!important;transform-origin:center;}
body.jo-rd #burger .close-popup:before{transform:translate(-50%,-50%) rotate(45deg);}
body.jo-rd #burger .close-popup:after{transform:translate(-50%,-50%) rotate(-45deg);}
body.jo-rd #partcont .heading{margin:0 0 20px;padding-bottom:20px;border-bottom:1px solid #333;}
body.jo-rd #partcont .heading a{display:block;text-align:center;text-decoration:none;}
body.jo-rd #partcont .heading #cart-total{font-family:var(--jo-cond)!important;font-weight:400;text-transform:uppercase;font-size:18px;letter-spacing:.3px;color:var(--jo-ink);text-align:center;float:none!important;width:100%!important;display:block;}
body.jo-rd #partcont .heading a .fa-shopping-cart{display:none!important;}
/* product rows (Figma 7935:60) */
body.jo-rd #partcont .jo-mc{display:block;}
body.jo-rd .jo-mc__row{display:flex;gap:12px;align-items:flex-start;padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid #000;}
body.jo-rd .jo-mc__img{flex:0 0 100px;width:100px;height:110px;overflow:hidden;}
body.jo-rd .jo-mc__img a{display:block;width:100%;height:100%;}
body.jo-rd .jo-mc__img img{width:100%;height:100%;object-fit:cover;display:block;}
body.jo-rd .jo-mc__info{flex:1 1 auto;display:flex;flex-direction:column;gap:12px;min-width:0;text-align:left;}
body.jo-rd .jo-mc__info,body.jo-rd .jo-mc__name,body.jo-rd .jo-mc__opts,body.jo-rd .jo-mc__opts span,body.jo-rd .jo-mc__price,body.jo-rd .jo-mc__qnum{text-align:left!important;}
body.jo-rd .jo-mc__name{font-family:var(--jo-cond);font-weight:700;font-size:16px;line-height:16px;color:var(--jo-ink)!important;text-decoration:none;overflow-wrap:anywhere;}
body.jo-rd .jo-mc__opts{display:flex;flex-direction:column;gap:4px;}
body.jo-rd .jo-mc__opts span{font-family:var(--jo-cond);font-weight:400;font-size:14px;line-height:16px;color:var(--jo-ink);}
body.jo-rd .jo-mc__price{font-family:var(--jo-cond);font-weight:700;font-size:16px;line-height:16px;color:var(--jo-ink);}
body.jo-rd .jo-mc__qty{flex:0 0 auto;display:flex;gap:10px;align-items:flex-start;}
body.jo-rd .jo-mc__qnum{font-family:var(--jo-cond);font-weight:400;font-size:14px;line-height:16px;color:var(--jo-ink);white-space:nowrap;}
body.jo-rd .jo-mc__del{background:none;border:0;padding:0;cursor:pointer;line-height:0;transition:opacity .2s;}
body.jo-rd .jo-mc__del:hover{opacity:.6;}
body.jo-rd .jo-mc__del svg{display:block;}
/* ИТОГО (Figma 7937:77) */
body.jo-rd .jo-mc__total{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:0 0 20px;color:var(--jo-ink);}
body.jo-rd .jo-mc__total-label{flex:1 1 auto;text-align:left;font-family:var(--jo-cond);font-weight:700;font-size:20px;text-transform:uppercase;}
body.jo-rd .jo-mc__total-val{font-family:var(--jo-cond);font-weight:400;font-size:20px;white-space:nowrap;}
/* warning box (Figma 7937:72: white bg, pink bold, no border) */
body.jo-rd #partcont>.content>p{border:0;background:#fff;color:#e230bc;font-family:var(--jo-cond);font-weight:700;font-size:14px;line-height:16px;text-align:left;padding:12px 16px;margin:0 0 20px;}
body.jo-rd #partcont>.content>p b{font-weight:700;}
/* buttons (Figma 7937:88/91) */
body.jo-rd .jo-cart-btns{overflow:initial;padding:0;margin:0;}
body.jo-rd .jo-cart-btns p{margin:0 0 8px!important;background:none!important;}
body.jo-rd .jo-cart-btns p:last-child{margin-bottom:0!important;}
body.jo-rd .jo-cart-checkout{display:flex;align-items:center;justify-content:center;width:100%;background:var(--jo-teal)!important;color:#fff!important;font-family:var(--jo-cond);font-weight:700;text-transform:uppercase;min-height:48px;padding:14px 16px;border:0!important;font-size:16px;letter-spacing:.3px;text-decoration:none;transition:filter .2s;}
body.jo-rd .jo-cart-checkout:hover{filter:brightness(.94);color:#fff!important;}
body.jo-rd .jo-cart-continue{display:flex;align-items:center;justify-content:center;width:100%;background:#fff!important;color:var(--jo-teal)!important;border:2px solid var(--jo-teal)!important;font-family:var(--jo-cond);font-weight:700;text-transform:uppercase;min-height:48px;padding:14px 16px;font-size:16px;cursor:pointer;transition:background .2s,color .2s;}
body.jo-rd .jo-cart-continue:hover{background:var(--jo-teal)!important;color:#fff!important;}
/* mini-cart: narrow-screen adaptation (smaller image, tighter spacing) */
@media (max-width:560px){
  body.jo-rd #partcont{padding:24px 16px!important;}
  body.jo-rd .jo-mc__row{gap:10px;}
  body.jo-rd .jo-mc__img{flex:0 0 80px;width:80px;height:92px;}
  body.jo-rd .jo-mc__info{gap:8px;}
  body.jo-rd .jo-mc__name{font-size:15px;line-height:16px;}
  body.jo-rd .jo-mc__qty{gap:8px;}
  body.jo-rd .jo-mc__total-label,body.jo-rd .jo-mc__total-val{font-size:18px;}
  body.jo-rd .jo-cart-checkout,body.jo-rd .jo-cart-continue{font-size:14px;min-height:46px;padding:12px;letter-spacing:.2px;}
}

/* =========================================================
   CHECKOUT (standard 6-step, scoped to #accordion)
   ========================================================= */
body.jo-rd #content:has(#accordion) h1{font-family:var(--jo-serif);font-weight:700;text-transform:uppercase;color:var(--jo-ink);font-size:34px;letter-spacing:.5px;}
body.jo-rd #accordion .panel{border:1px solid var(--jo-border);box-shadow:none;border-radius:2px;margin-bottom:14px;}
body.jo-rd #accordion .panel-heading{background:#fff!important;border:0;border-bottom:1px solid transparent;padding:16px 20px;}
body.jo-rd #accordion .panel-title,body.jo-rd #accordion .panel-title a{color:var(--jo-ink)!important;font-family:var(--jo-sans);font-weight:600;font-size:15px;text-transform:uppercase;text-decoration:none;}
body.jo-rd #accordion .panel-body{border-top:1px solid #eee;}
body.jo-rd #accordion h2,body.jo-rd #accordion legend{font-family:var(--jo-sans);font-weight:600;font-size:16px;color:var(--jo-ink);text-transform:none;}
body.jo-rd #accordion .form-control{border:1px solid var(--jo-border)!important;border-radius:2px;height:44px;box-shadow:none;color:var(--jo-ink);}
body.jo-rd #accordion textarea.form-control{height:auto;}
body.jo-rd #accordion .control-label,body.jo-rd #accordion label{color:var(--jo-black);font-weight:500;}
body.jo-rd #accordion .btn-primary,
body.jo-rd #accordion input[type="submit"],
body.jo-rd #accordion .btn.btn-default.btn-lg{background:var(--jo-teal)!important;border:0!important;color:#fff!important;font-family:var(--jo-cond);font-weight:700;text-transform:uppercase;letter-spacing:.5px;border-radius:0;padding:11px 28px;box-shadow:none;}
body.jo-rd #accordion .btn-primary:hover,body.jo-rd #accordion input[type="submit"]:hover{filter:brightness(.94);}
body.jo-rd #accordion .radio label,body.jo-rd #accordion .checkbox label{color:var(--jo-black);}
/* ---- one-page fast order checkout (oct_fastorder) ---- */
body.jo-rd #content:has(.fastorder-panel-group) h1,body.jo-rd #content:has(.oct-fastorder-payment) h1{font-family:var(--jo-serif);font-weight:700;text-transform:uppercase;color:var(--jo-ink);font-size:34px;letter-spacing:.5px;}
body.jo-rd .fastorder-panel-default{border:1px solid var(--jo-border)!important;box-shadow:none!important;border-radius:2px;margin-bottom:16px;}
body.jo-rd .fastorder-panel-default>.panel-heading{background:#fff!important;color:var(--jo-ink)!important;border:0!important;border-bottom:1px solid #eee!important;padding:15px 18px;}
body.jo-rd .fastorder-panel-default>.panel-heading,body.jo-rd .fastorder-panel-default>.panel-heading *{color:var(--jo-ink)!important;font-family:var(--jo-sans);font-weight:600;font-size:15px;text-transform:uppercase;}
body.jo-rd .fastorder-panel-group .form-control{border:1px solid var(--jo-border)!important;border-radius:2px;height:46px;box-shadow:none;color:var(--jo-ink);}
body.jo-rd .fastorder-panel-group textarea.form-control{height:auto;min-height:80px;}
body.jo-rd .fastorder-panel-group .control-label,body.jo-rd .fastorder-panel-group label{color:var(--jo-black);font-weight:500;}
/* cart qty steppers + remove inside fastorder -> neutral/teal */
body.jo-rd .fastorder-panel-group table .btn,body.jo-rd .fastorder-panel-group table button,body.jo-rd .fastorder-panel-group .input-group .btn{background:#fff!important;color:var(--jo-ink)!important;border:1px solid var(--jo-border)!important;box-shadow:none;}
body.jo-rd .fastorder-panel-group table .btn:hover{border-color:var(--jo-teal)!important;color:var(--jo-teal)!important;}
/* radios (delivery/payment) */
body.jo-rd .fastorder-panel-group .radio label,body.jo-rd .oct-fastorder-shipping label,body.jo-rd .oct-fastorder-payment label{color:var(--jo-black);}
/* order button */
body.jo-rd #button-go,body.jo-rd #button-confirm,
body.jo-rd .oct-fastorder-payment .btn-primary,body.jo-rd .oct-fastorder-payment .btn,
body.jo-rd .oct-fastorder-payment button,body.jo-rd .oct-fastorder-payment input[type="button"],
body.jo-rd .oct-fastorder-payment input[type="submit"],body.jo-rd .oct-fastorder-payment .oct-button{background:var(--jo-teal)!important;border:0!important;color:#fff!important;font-family:var(--jo-cond);font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.5px;border-radius:0;padding:14px 44px;box-shadow:none;height:auto;}
body.jo-rd #button-go:hover,body.jo-rd .oct-fastorder-payment button:hover{filter:brightness(.94);}

/* cart page + mini-cart popup buttons -> teal */
body.jo-rd #cart-content a.button,body.jo-rd .oct-popup-cart a[href*="checkout"],
body.jo-rd .popup-cart .button,body.jo-rd .cart-popup a.oct-button,
body.jo-rd a[href*="checkout"].button,body.jo-rd .buttons .btn-primary{background:var(--jo-teal)!important;color:#fff!important;border:0!important;font-family:var(--jo-cond);text-transform:uppercase;}

/* =========================================================
   MOBILE (<=991px)
   ========================================================= */
/* Mobile-only elements: hidden by default (desktop), shown inside the ≤991 block below */
body.jo-rd .jo-topcat{display:none;}
body.jo-rd .jo-hero-badges{display:none;}
@media (max-width:991px){
  body.jo-rd .jo-hero-badges{display:flex;}
  /* prevent stray child overflow (e.g. "Недавно просмотренные" owl) from scrolling the page */
  body.jo-rd #content{overflow-x:clip;}
  body.jo-rd .product-viewed,body.jo-rd #content [class*="viewed"],body.jo-rd #content .owl-carousel{max-width:100%;}
  /* desktop header row redundant on tablet/mobile (mobile top-panel covers it) */
  body.jo-rd header.row{display:none!important;}
  /* logo -> black Cormorant wordmark */
  body.jo-rd .mobile-logo img{display:none;}
  body.jo-rd .mobile-logo{display:inline-block;line-height:1;padding-top:6px;}
  body.jo-rd .mobile-logo:after{content:"JOANNA";font-family:var(--jo-serif);font-weight:700;font-size:24px;letter-spacing:2px;color:var(--jo-ink);text-transform:uppercase;}
  body.jo-rd .top-panel{background:#fff!important;}
  body.jo-rd .top-panel .mobile-icons-top .ti-search,body.jo-rd .top-panel .search-top,
  body.jo-rd .top-panel .settings,body.jo-rd .top-panel a,body.jo-rd .top-panel .fa-bars{color:var(--jo-ink)!important;}

  /* hero: overlay 1:1 with Figma 8005:639 (portrait 335×454 → full-bleed, aspect kept) */
  body.jo-rd #content .box .banner .owl-item,
  body.jo-rd #content .box .image-hover-effect{height:min(calc(100vw * 1.21),454px)!important;width:100%!important;margin:0!important;left:0!important;border-radius:0;overflow:hidden;}
  body.jo-rd #content .box .image-hover-effect{background:url(../images/joanna-hero-mob.jpg) center top/cover no-repeat;position:relative;}
  body.jo-rd #content .box .owl-item img{opacity:0;height:100%;width:100%;object-fit:cover;}
  body.jo-rd #content .box .owl-nav{display:none;}
  body.jo-rd .jo-hero-ov{position:absolute;top:0;left:0;width:100vw;height:min(calc(100vw * 1.21),454px);z-index:5;pointer-events:none;}
  body.jo-rd .jo-hero-ov__inner{position:absolute;left:20px;top:12%;pointer-events:auto;}
  body.jo-rd .jo-hero-ov__title{font-family:var(--jo-serif);font-weight:700;font-size:28px;line-height:24px;text-transform:uppercase;color:var(--jo-ink);margin:0;}
  body.jo-rd .jo-hero-ov__sub{font-family:var(--jo-sans);font-weight:600;font-size:12px;line-height:20px;letter-spacing:.48px;text-transform:uppercase;color:var(--jo-ink);margin:10px 0 0;}
  /* Figma 8005:617: 197x48 centred, label on ONE line (RU "перейти в каталог" = 165px + 2x16 padding).
     The Ukrainian label is longer, so a hard 197px width wrapped it onto two lines — keep the Figma
     size as a minimum and let the box grow with the text instead. */
  body.jo-rd .jo-hero-ov__btn{position:absolute;left:50%;top:66%;transform:translateX(-50%);margin:0;
    display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
    min-width:197px;width:auto;max-width:calc(100vw - 40px);height:48px;padding:0 16px;
    font-size:16px;line-height:16px;pointer-events:auto;}
  /* trust-badges bar at hero bottom */
  body.jo-rd .jo-hero-badges{position:absolute;left:0;right:0;bottom:0;height:50px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:rgba(20,20,20,.3);pointer-events:none;}
  body.jo-rd .jo-hero-badges__row{display:flex;align-items:center;gap:10px;}
  body.jo-rd .jo-hero-badges__row span{font-family:var(--jo-cond);font-weight:700;font-size:12px;line-height:14px;text-transform:uppercase;color:#fff;white-space:nowrap;}
  body.jo-rd .jo-hero-badges__row i{width:20px;height:1px;background:#fff;flex:0 0 auto;}

  /* hide lone section titles (carousels are hidden on mobile by theme) + desktop badges dup + recently-viewed */
  body.jo-rd .box-main .news-set{display:none;}
  body.jo-rd #content .box-main>.container:first-child{display:none;}
  body.jo-rd .box-main:has(#cat-latest) .news-set .inner>a.jo-set-title>span{margin-top:10px;}
  body.jo-rd .news-set .inner>span,body.jo-rd .news-set .inner>a.jo-set-title>span{font-size:20px!important;white-space:normal!important;word-break:break-word;}

  /* Новые поступления: show on mobile as 2-col grid (Figma mobile 8001:574) */
  body.jo-rd #content .box-main:has(#cat-latest){display:block!important;}
  body.jo-rd .box-main:has(#cat-latest) .news-set{display:block!important;}
  body.jo-rd .box-main:has(#cat-latest) .news-set{padding:36px 0 0!important;}
  /* title left-aligned per Figma (was centered); content already inset 20px by wrappers */
  body.jo-rd .box-main:has(#cat-latest) .news-set .inner{margin-bottom:20px!important;text-align:left!important;padding-left:0!important;}
  body.jo-rd .box-main:has(#cat-latest) .news-set .inner>span,body.jo-rd .box-main:has(#cat-latest) .news-set .inner>a.jo-set-title>span{text-align:left!important;padding-left:0!important;}
  body.jo-rd #cat-latest.jo-2row .jo-col2{gap:11px;}
  body.jo-rd #cat-latest .item .name a{font-size:13px;}
  body.jo-rd #cat-latest .item .price,body.jo-rd #cat-latest .item .price.product-grid{flex-direction:column;align-items:flex-start;gap:2px;}
  body.jo-rd #cat-latest .item .price .jo-price-opt{text-align:left;}
  /* carousel: pull to full 20px inset (was ~30px), arrows into the title row (Figma 8005:735) */
  body.jo-rd .box-main:has(#cat-latest){position:relative;}
  body.jo-rd .box-main:has(#cat-latest) .news-set,
  body.jo-rd .box-main:has(#cat-latest) .category-slide{margin-left:-10px!important;margin-right:-10px!important;padding:0!important;}
  body.jo-rd .box-main:has(#cat-latest) #cat-latest{position:static!important;}
  body.jo-rd .box-main:has(#cat-latest) .category-slide{position:relative!important;width:calc(100vw - 40px)!important;max-width:none!important;overflow:visible;}
  body.jo-rd .box-main:has(#cat-latest) #cat-latest,
  body.jo-rd .box-main:has(#cat-latest) .owl-stage-outer{width:100%!important;}
  /* owl hides its controls wrapper on mobile → force visible */
  body.jo-rd .box-main:has(#cat-latest) .owl-controls{display:block!important;}
  /* arrows: 32×32 circular pair pinned top-right, aligned with the title */
  /* owl-nav pinned into the title row (top-right), lifted above the cards (Figma 8005:735) */
  body.jo-rd .box-main:has(#cat-latest) .category-slide .owl-nav{position:absolute!important;top:-55px;right:0;left:auto;bottom:auto;display:flex!important;gap:4px;width:auto;height:32px;margin:0;z-index:6;}
  body.jo-rd .box-main:has(#cat-latest) .owl-nav>div{width:32px!important;height:32px!important;min-width:32px;flex:0 0 32px;border-radius:50%;background:#efefef!important;}
  body.jo-rd .box-main:has(#cat-latest) .owl-nav>div::before{width:32px!important;height:32px!important;-webkit-mask-size:16px 16px!important;mask-size:16px 16px!important;background-color:#333!important;}
  /* active next = teal filled circle w/ white glyph (Figma) */
  body.jo-rd .box-main:has(#cat-latest) .owl-nav>div.owl-next:not(.jo-muted){background:var(--jo-teal)!important;}
  body.jo-rd .box-main:has(#cat-latest) .owl-nav>div.owl-next:not(.jo-muted)::before{background-color:#fff!important;}
  body.jo-rd .box-main:has(#cat-latest) .owl-nav>div.owl-prev:not(.jo-muted){background:var(--jo-teal)!important;}
  body.jo-rd .box-main:has(#cat-latest) .owl-nav>div.owl-prev:not(.jo-muted)::before{background-color:#fff!important;}
  body.jo-rd .box-main:has(#cat-latest) .owl-nav>div.jo-muted::before{background-color:#979f9e!important;}
  body.jo-rd #cat-latest.jo-2row .jo-col2{gap:16px;}

  body.jo-rd .jo-hero-ov{z-index:5;}

  /* messy bootstrap-float badges row -> hide on mobile (CTA already in hero) */
  body.jo-rd .container1{display:none!important;}

  /* showcase category buttons -> teal accent */
  body.jo-rd .sc-main.showcase .item-heading a{font-family:var(--jo-sans);color:var(--jo-ink);}
  body.jo-rd .sc-main.showcase .item-container:hover .item-heading a{color:var(--jo-teal);}

  /* Топ категории / SALE promo banner — mobile only (Figma 8063:556).
     Replaces the category-button showcase in the mockup. */
  body.jo-rd #content .sc-main.showcase{display:none!important;}
  body.jo-rd .jo-topcat{display:block;width:100vw;margin-left:calc(50% - 50vw);padding:36px 0 0;}
  body.jo-rd .jo-topcat__title{margin:0 0 16px;padding:0 20px;font-family:var(--jo-cond);font-weight:700;font-size:20px;line-height:24px;text-transform:uppercase;color:#333;}
  body.jo-rd .jo-topcat__card{position:relative;display:block;width:100%;height:min(524px,139.7vw);background:url(../images/joanna-topcat-mob.jpg) center/cover no-repeat;overflow:hidden;text-decoration:none;}
  body.jo-rd .jo-topcat__card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 48%,rgba(45,42,42,.92) 99%);pointer-events:none;}
  body.jo-rd .jo-topcat__note{position:absolute;top:44%;right:16px;width:140px;z-index:2;margin:0;font-family:var(--jo-cond);font-weight:700;font-size:13px;line-height:16px;text-transform:uppercase;color:#fff;}
  body.jo-rd .jo-topcat__caption{position:absolute;left:0;right:0;bottom:28px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:16px;}
  body.jo-rd .jo-topcat__sale{font-family:var(--jo-cond);font-weight:700;font-size:35px;line-height:32px;text-transform:uppercase;color:#fff;text-align:center;}
  body.jo-rd .jo-topcat__btn{display:flex;align-items:center;justify-content:center;width:270px;max-width:82vw;height:48px;padding:16px;background:var(--jo-teal);color:#fff;font-family:var(--jo-cond);font-weight:700;font-size:16px;line-height:1;letter-spacing:.3px;text-transform:uppercase;text-align:center;border:0;border-radius:0;}
}

/* =========================================================
   MOBILE HEADER  (Figma 8005:640 topbar / 8005:962 search / 8005:852 drawer)
   ========================================================= */
@media (max-width:991px){
  /* ---- TOP BAR: [burger] [JOANNA] ....... [Поиск] [Корзина(N)] ---- */
  /* tablet 768–991: theme shows a grey desktop nav bar + hides the phone top-bar.
     Kill the grey nav and force the phone header across the WHOLE ≤991 range. */
  body.jo-rd .menu-row,body.jo-rd nav.navbar{display:none!important;}
  body.jo-rd .top-panel .mobile-logo{display:inline-block!important;}
  body.jo-rd .top-panel .mobile-icons-top{display:flex!important;}
  body.jo-rd #search-top{display:inline-flex!important;align-items:center;}
  body.jo-rd .top-panel{background:#fff!important;min-height:60px;display:flex;flex-direction:column;justify-content:center;position:relative;z-index:400;}
  body.jo-rd .top-panel .container{padding:0 16px!important;z-index:10000;width:100%;}
  body.jo-rd .top-panel .row{display:flex!important;align-items:center;min-height:60px;margin:0!important;}
  body.jo-rd .top-panel .row:before,body.jo-rd .top-panel .row:after{display:none!important;}
  body.jo-rd .top-panel .icon-bar{order:0;float:none!important;margin:0;}
  body.jo-rd .top-panel{border-bottom:0!important;box-shadow:none!important;}
  body.jo-rd .top-panel .icon-bar a{display:flex;align-items:center;}
  body.jo-rd .top-panel .icon-bar i.fa-bars{padding:0!important;font-size:23px!important;color:var(--jo-ink)!important;}
  /* logo = exact Figma vector scaled to 83x19, per 8001:600 (x75 @375) */
  body.jo-rd .mobile-logo{order:1;float:none!important;margin:0 0 0 21px;line-height:1;padding:0;
    display:block;width:83.19px;height:18.63px;text-indent:-9999px;overflow:hidden;
    background:url(../images/jo-logo.svg) no-repeat 0 0/83.19px 18.63px;}
  body.jo-rd .mobile-logo img{display:none!important;}
  body.jo-rd .mobile-logo:before,body.jo-rd .mobile-logo:after{content:none!important;}
  html[lang="uk"] body.jo-rd .mobile-logo{background-image:url(../images/jo-logo-uk.svg);}
  /* "Поиск" (no themify magnifier) */
  body.jo-rd .mobile-icons-top{order:2;margin-left:auto;padding-left:10px;display:flex;align-items:center;position:static;}
  body.jo-rd .search-top{position:relative!important;font-family:var(--jo-cond)!important;font-weight:400;font-size:14px!important;color:var(--jo-ink)!important;white-space:nowrap;}
  body.jo-rd .search-top .ti-search:before{display:none!important;}
  body.jo-rd .search-top .ti-search{color:var(--jo-ink)!important;font-family:var(--jo-cond)!important;font-size:14px!important;line-height:30px!important;}
  body.jo-rd .search-top{display:inline-flex!important;align-items:center;height:30px;}
  /* native language/settings hidden on the bar -> relocated to the drawer footer */
  body.jo-rd .top-panel .hidden-lg,body.jo-rd .top-panel .right .settings{display:none!important;}
  /* add-to-cart drawer (#burger) = 330px card top-right, like Figma 8017:841 */
  body.jo-rd #burger{left:auto!important;right:0!important;width:330px!important;max-width:calc(100% - 45px)!important;height:auto!important;bottom:auto!important;max-height:100vh;overflow-y:auto;background:#fff!important;}
  body.jo-rd #burger #partcont{height:auto!important;background:#fff!important;padding:20px!important;}
  /* ---- MOBILE MINI-CART overlay (Figma 8017:1002) ---- */
  body.jo-rd .jo-minicart-ov{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:100000;display:none;overflow-y:auto;}
  body.jo-rd .jo-minicart-ov.open{display:block;}
  body.jo-rd .jo-minicart{background:#fff;width:330px;max-width:calc(100% - 30px);margin:0 0 30px auto;min-height:0;padding:20px;position:relative;}
  body.jo-rd .jo-minicart__close{position:absolute;left:50%;transform:translateX(-50%);top:14px;width:30px;height:30px;cursor:pointer;}
  body.jo-rd .jo-minicart__close:before,body.jo-rd .jo-minicart__close:after{content:"";position:absolute;left:50%;top:50%;width:20px;height:1.6px;background:#7f7f7f;}
  body.jo-rd .jo-minicart__close:before{transform:translate(-50%,-50%) rotate(45deg);}
  body.jo-rd .jo-minicart__close:after{transform:translate(-50%,-50%) rotate(-45deg);}
  body.jo-rd .jo-minicart__head{margin:52px 0 14px;padding-bottom:14px;border-bottom:1px solid #000;text-align:center;font-family:var(--jo-cond);font-weight:700;font-size:16px;color:var(--jo-ink);text-transform:uppercase;}
  body.jo-rd .jo-minicart__body .jo-mc__total{display:flex;justify-content:flex-end;gap:8px;font-family:var(--jo-cond);font-size:15px;color:var(--jo-ink);padding-top:0;border-top:0;}
  body.jo-rd .jo-minicart .jo-cart-checkout,body.jo-rd .jo-minicart .jo-cart-continue,body.jo-rd #burger .jo-cart-checkout,body.jo-rd #burger .jo-cart-continue{opacity:1!important;}
  body.jo-rd .jo-minicart__body .jo-mc__total-label{font-weight:400;}
  body.jo-rd .jo-minicart__body .jo-mc__total-val{font-weight:700;}
  body.jo-rd .jo-minicart__body>p{background:#fdeef7;color:#e5097f;font-family:var(--jo-cond);font-size:13px;line-height:1.4;padding:12px 14px;margin:16px 0;text-align:center;}
  body.jo-rd .jo-minicart__body>p b{color:#e5097f;}
  body.jo-rd .jo-minicart__body .jo-cart-btns p{margin:0 0 12px;}
  body.jo-rd .jo-minicart__body .jo-cart-checkout{display:flex;align-items:center;justify-content:center;line-height:1!important;height:48px;width:100%;background:var(--jo-teal)!important;color:#fff!important;font-family:var(--jo-cond);font-weight:700;font-size:14px;text-transform:uppercase;padding:0 10px;text-align:center;text-decoration:none;border:0;}
  body.jo-rd .jo-minicart__body .jo-cart-continue{display:flex;align-items:center;justify-content:center;line-height:1!important;height:48px;width:100%;background:#fff!important;color:var(--jo-teal)!important;border:1px solid var(--jo-teal);font-family:var(--jo-cond);font-weight:700;font-size:14px;text-transform:uppercase;padding:0 10px;text-align:center;}
  body.jo-rd .jo-minicart__body .text-center{padding:0;}
  /* injected cart link */
  body.jo-rd .jo-mcart{order:4;margin-left:16px;font-family:var(--jo-cond);font-weight:400;font-size:14px;color:var(--jo-ink)!important;white-space:nowrap;text-decoration:none;}
  /* ≤360: full bar (burger+logo+search+cart) doesn't fit -> tighten */
  @media (max-width:374px){
    body.jo-rd .top-panel .container{padding:0 12px!important;}
    body.jo-rd .mobile-logo:before{font-size:18px;letter-spacing:1px;}
    body.jo-rd .mobile-logo{margin-left:10px;}
    body.jo-rd .jo-mcart{margin-left:10px;}
  }

  /* ---- OPEN SEARCH: slim light bar under the top bar (Figma 8005:962) ---- */
  body.jo-rd .search-box-top{position:absolute!important;left:0!important;top:58px!important;width:100%!important;height:auto!important;background:#f5f5f5!important;border-bottom:1px solid #333;padding:12px 16px!important;z-index:9999;box-shadow:0 6px 16px rgba(0,0,0,.08);}
  /* keep .m-search-title: its .ti-close is the ONLY close binding in common.js;
     hide the title text, show just the ✕ (Figma 8005:962) */
  body.jo-rd .search-box-top .m-search-title{display:block!important;position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:0;line-height:0;margin:0;padding:0;z-index:3;}
  body.jo-rd .search-box-top .m-search-title .ti-close{font-size:17px;line-height:1;color:#7f7f7f;cursor:pointer;padding:9px;display:inline-block;}
  body.jo-rd .search-box-top .m-search-title .ti-close:hover{color:var(--jo-ink);}
  body.jo-rd .search-box-top .m-search-content{display:flex!important;align-items:center;gap:10px;margin:0!important;padding:0!important;position:relative;}
  body.jo-rd .search-box-top input[type=search]{flex:1 1 auto;width:auto!important;background:#fff!important;border:0!important;border-radius:0;height:38px;padding:0 14px!important;font-family:var(--jo-cond);font-size:13px;color:var(--jo-ink);float:none!important;box-shadow:none;}
  body.jo-rd .search-box-top input[type=search]::-webkit-input-placeholder{color:#5e5e5e;}
  body.jo-rd .search-box-top input[type=search]::placeholder{color:#5e5e5e;}
  /* Figma 8005:962: input + ✕ close only (search fires on Enter) */
  body.jo-rd .search-box-top .top-search-submit{display:none!important;}
  body.jo-rd .search-box-top #close-desktop-search{display:none!important;}
  body.jo-rd .search-box-top .m-search-content{padding-right:44px!important;}
  /* theme adds body.noscroll while search is open — keep the page scrollable */
  body.jo-rd.noscroll{overflow:auto!important;position:static!important;height:auto!important;}
  body.jo-rd .search-box-top .m-search-content{position:static;}
  body.jo-rd .search-box-top .mobile-search-result{position:absolute;top:100%;left:0;width:100%;margin:0!important;background:#fff;z-index:10;box-shadow:0 10px 24px rgba(0,0,0,.12);}
  body.jo-rd .search-box-top .mobile-search-result #msearchresults{list-style:none;margin:0;padding:6px 0;max-height:55vh;overflow-y:auto;}
  body.jo-rd .search-box-top .mobile-search-result #msearchresults li{margin:0!important;padding:8px 14px;display:flex;gap:10px;align-items:flex-start;border-bottom:1px solid #f0f0f0;float:none;}
  body.jo-rd .search-box-top .mobile-search-result #msearchresults li img{width:38px!important;height:50px!important;object-fit:cover;float:none!important;margin:0!important;flex:0 0 auto;}
  body.jo-rd .search-box-top .mobile-search-result #msearchresults li a{font-family:var(--jo-cond);font-size:13px;line-height:1.35;color:var(--jo-ink);}
  body.jo-rd .search-box-top .mobile-search-result #msearchresults li div{font-family:var(--jo-cond);font-size:12px;}

  /* ---- OFF-CANVAS DRAWER (mmenu, source nav#tmenu) -> Figma 8005:852 ---- */
  /* cover mode (zposition:front) — drawer width per Figma 8005:852 (236/375 ≈ 63%) */
  html.mm-opened .mm-menu.mm-offcanvas{width:63%!important;min-width:236px!important;max-width:340px!important;z-index:100000!important;}
  html.mm-opened .mm-slideout{z-index:1!important;transform:none!important;}
  html.mm-opened #mm-blocker,html.mm-opened .mm-blocker{z-index:99999!important;background:rgba(0,0,0,.35)!important;opacity:1!important;}
  /* smooth slide-in: CSS animation fires on display:none→block (mmenu toggles display, so a transition won't run) */
  html.mm-opened .mm-menu.mm-offcanvas.mm-front{animation:joDrawerIn .3s ease both;}
  html.mm-opened .mm-blocker{animation:joDrawerFade .3s ease both;}
  /* smooth close: X adds .jo-closing (mm-opened still on for ~280ms), menu slides out */
  html.mm-opened .mm-menu.mm-offcanvas.mm-front.jo-closing{animation:joDrawerOut .28s ease both!important;}
  .mm-menu{background:#f6f6f6!important;color:var(--jo-ink)!important;}
  .mm-menu .mm-panels,.mm-menu .mm-panel{background:#f6f6f6!important;}
  /* Figma coords are from panel edge: kill mmenu's default 20px panel padding */
  .mm-menu .mm-panels>.mm-panel{padding:0!important;}
  .mm-menu .mm-panels>.mm-panel:first-child:before,.mm-menu .mm-panels>.mm-panel:first-child:after{display:none!important;height:0!important;}
  .mm-menu .mm-navbar{border:0!important;height:auto;padding:20px 24px 10px;position:relative;}
  /* submenu navbars: plain category title (dark) */
  .mm-menu .mm-navbar .mm-title{font-family:var(--jo-cond)!important;font-weight:500;color:var(--jo-ink)!important;text-transform:none;}
  .mm-menu .mm-navbar .mm-btn:before,.mm-menu .mm-navbar .mm-btn:after{border-color:var(--jo-ink)!important;}
  /* ROOT panel navbar only -> JOANNA wordmark + tagline (do NOT leak into submenu navbars) */
  .mm-menu .mm-panels>.mm-panel:first-child>.mm-navbar,
  .mm-menu .mm-panels>.mm-panel.mm-hasnavbar:first-of-type>.mm-navbar{display:flex;align-items:flex-start;justify-content:flex-start;padding:24px 24px 0!important;height:auto!important;}
  .mm-menu .mm-panels>.mm-panel:first-child>.mm-navbar .mm-title{margin:0!important;padding:0!important;}
  .mm-menu .mm-panels>.mm-panel:first-child>.mm-navbar .mm-title{font-size:0!important;position:relative;display:inline-block;text-align:left;line-height:1;}
  .mm-menu .mm-panels>.mm-panel:first-child>.mm-navbar .mm-title:before{content:"";display:block;width:122px;height:30px;
    background:url(../images/jo-logo.svg) no-repeat 0 0/122px 30px;}
  html[lang="uk"] .mm-menu .mm-panels>.mm-panel:first-child>.mm-navbar .mm-title:before{background-image:url(../images/jo-logo-uk.svg);}
  .mm-menu .mm-panels>.mm-panel:first-child>.mm-navbar .mm-title:after{content:none;}
  /* close X */
  .mm-menu .jo-mm-close{position:absolute;right:24px;top:30px;width:16px;height:16px;cursor:pointer;z-index:5;}
  .mm-menu .jo-mm-close:before,.mm-menu .jo-mm-close:after{content:"";position:absolute;left:7px;top:0;width:1.6px;height:16px;background:#b5b5b5;}
  .mm-menu .jo-mm-close:before{transform:rotate(45deg);}
  .mm-menu .jo-mm-close:after{transform:rotate(-45deg);}
  /* category list */
  .mm-menu .mm-listview{border:0!important;}
  .mm-menu .mm-listview>li{border-bottom:1px solid #8f8f8f!important;}
  .mm-menu .mm-listview>li:after{display:none!important;}
  /* Figma 8005:852: list inset 24, row 32px, text 13px at +4, ▶ at right edge */
  .mm-menu .mm-listview{margin:12px 24px 0!important;}
  .mm-menu .mm-listview>li>a:not(.mm-next),.mm-menu .mm-listview>li>a.item-wrapper{padding:8px 30px 8px 4px!important;color:var(--jo-ink)!important;background:transparent!important;}
  .mm-menu .mm-listview .item-title{font-family:var(--jo-cond)!important;font-weight:400;font-size:13px;line-height:16px;color:var(--jo-ink)!important;text-transform:none;}
  /* filled ▶ triangle like the mockup (mmenu's default is a thin chevron) */
  .mm-menu .mm-listview>li>a.mm-next{width:30px;}
  .mm-menu .mm-listview>li>a.mm-next:after{content:""!important;border:0!important;width:0!important;height:0!important;border-top:6px solid transparent!important;border-bottom:6px solid transparent!important;border-left:9px solid var(--jo-teal)!important;transform:none!important;right:0;top:50%;margin-top:-6px;}
  /* rows without a submenu still show the triangle (per mockup) */
  .mm-menu .mm-listview>li:not(:has(.mm-next))>a:not(.mm-next){position:relative;}
  .mm-menu .mm-listview>li:not(:has(.mm-next))>a:not(.mm-next):after{content:"";position:absolute;right:0;top:50%;margin-top:-6px;width:0;height:0;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:9px solid var(--jo-teal);}
  /* injected drawer search (top) */
  .mm-menu .jo-mm-search{padding:21px 24px 0!important;}
  .mm-menu .jo-mm-search form{display:flex;width:100%;background:#fff;border:0;border-radius:0;}
  .mm-menu .jo-mm-search input{flex:1;width:100%!important;height:38px!important;min-height:38px;border:0!important;background:#fff!important;padding:0 12px!important;margin:0!important;font-family:var(--jo-cond);font-size:11px!important;color:var(--jo-ink);outline:none;box-sizing:border-box;text-align:left!important;box-shadow:none!important;border-radius:0!important;}
  .mm-menu .jo-mm-search input::placeholder{color:#5e5e5e;}
  /* ajax hits in the drawer (form wraps input+results -> column) */
  .mm-menu .jo-mm-search form{flex-direction:column;}
  .mm-menu .jo-mm-search form{position:relative;}
  .mm-menu .jo-mm-results{position:absolute;top:100%;left:0;right:0;z-index:20;max-height:46vh;overflow-y:auto;background:#fff;box-shadow:0 10px 24px rgba(0,0,0,.15);}
  .mm-menu .jo-mm-results:not(:empty){border-top:1px solid var(--jo-border);}
  .mm-menu .jo-mm-hit{display:flex;align-items:center;gap:10px;padding:8px 10px;text-decoration:none;border-bottom:1px solid #f0f0f0;}
  .mm-menu .jo-mm-hit img{width:34px;height:45px;object-fit:cover;flex:0 0 auto;}
  .mm-menu .jo-mm-hit span{font-family:var(--jo-cond);font-size:12px;line-height:1.35;color:var(--jo-ink);display:block;}
  .mm-menu .jo-mm-hit em{display:block;font-style:normal;color:var(--jo-teal);margin-top:2px;}
  /* injected drawer footer (currency/lang + phones + schedule) */
  .mm-menu .jo-mm-foot{display:block!important;padding:28px 24px 30px!important;text-align:center;}
  .mm-menu .jo-mm-foot .jo-mm-curlang{display:flex;gap:26px;justify-content:center;align-items:center;margin-bottom:28px;font-family:var(--jo-cond);font-size:15px;}
  /* language button shows the code (UA/RU), not the word */
  .mm-menu .jo-mm-curlang .hidden-lg .btn-link span,.mm-menu .jo-mm-curlang .language-select span,
  .mm-menu .jo-mm-curlang .btn.dropdown-toggle span{font-size:0;}
  .mm-menu .jo-mm-curlang .btn.dropdown-toggle span::after{font-size:15px;font-family:var(--jo-cond);color:var(--jo-ink);}
  html[lang^="ru"] .mm-menu .jo-mm-curlang .btn.dropdown-toggle span::after{content:"RU";}
  html[lang^="uk"] .mm-menu .jo-mm-curlang .btn.dropdown-toggle span::after{content:"UA";}
  .mm-menu .jo-mm-curlang form.currency .dropdown-toggle span{font-size:15px!important;}
  .mm-menu .jo-mm-curlang form.currency .dropdown-toggle span::after{content:none!important;}
  /* position:static made the absolutely-positioned dropdown resolve against a far ancestor, so it
     opened at y~752 — below the viewport. It looked like the switchers "did nothing": they opened
     off-screen. Anchor to the button and open upwards, since this block sits near the drawer's foot. */
  .mm-menu .jo-mm-foot .jo-mm-curlang .btn-group{position:relative;}
  .mm-menu .jo-mm-foot .jo-mm-curlang .dropdown-menu{top:auto!important;bottom:calc(100% + 8px)!important;
    left:50%!important;right:auto!important;transform:translateX(-50%);min-width:150px;margin:0!important;
    border:1px solid var(--jo-border);border-radius:0;box-shadow:0 8px 24px rgba(0,0,0,.12);}
  .mm-menu .jo-mm-foot .jo-mm-curlang .btn-link{padding:0;color:var(--jo-ink)!important;text-transform:none;font-family:var(--jo-cond);font-size:15px;box-shadow:none;}
  .mm-menu .jo-mm-foot .jo-mm-curlang .btn-link span{display:inline!important;color:var(--jo-ink)!important;}
  .mm-menu .jo-mm-foot .jo-mm-curlang .fa-caret-down{color:var(--jo-teal);}
  .mm-menu .jo-mm-foot .jo-mm-curlang .dropdown-menu{position:absolute;background:#fff;border:1px solid var(--jo-border);min-width:150px;}
  .mm-menu .jo-mm-foot .jo-mm-phone{display:block!important;width:100%;font-family:var(--jo-cond);font-weight:700;font-size:14px;color:var(--jo-ink)!important;text-decoration:none;line-height:19px;text-align:center;white-space:nowrap;}
  .mm-menu .jo-mm-foot .jo-mm-sched{font-family:var(--jo-cond);font-weight:400;font-size:13px;color:var(--jo-ink);margin-top:21px;white-space:nowrap;}
}

/* drawer open animation (cover/front mode) */
@keyframes joDrawerIn{from{transform:translate3d(-100%,0,0);}to{transform:translate3d(0,0,0);}}
@keyframes joDrawerFade{from{opacity:0;}to{opacity:1;}}
@keyframes joDrawerOut{from{transform:translate3d(0,0,0);}to{transform:translate3d(-100%,0,0);}}

/* =========================================================
   CHECKOUT REDESIGN — one-page (Figma cfIxtF 7937:102 / 7974-42 / 7974-148 / 7999-408)
   Enhancement layer over oct_fastorder (.jo-checkout added by JS)
   ========================================================= */
body.jo-rd.jo-checkout .top-panel,
body.jo-rd.jo-checkout .mm-page>header,
body.jo-rd.jo-checkout header.row,
body.jo-rd.jo-checkout .menu-row,
body.jo-rd.jo-checkout .m-header,
body.jo-rd.jo-checkout .mobile-header,
body.jo-rd.jo-checkout .box-main,
body.jo-rd.jo-checkout #right-block,
body.jo-rd.jo-checkout .breadcrumb,
body.jo-rd.jo-checkout .check-content .top-menu{display:none!important;}
body.jo-rd.jo-checkout #container.container{width:100%!important;max-width:1440px;margin:0 auto;padding:0 60px 40px;}
/* kill the nested bootstrap .container widths so the 2 columns span the full 1320 (Figma 60px side margins) */
body.jo-rd.jo-checkout #content.container,
body.jo-rd.jo-checkout .checkout_form,
body.jo-rd.jo-checkout .check-content,
body.jo-rd.jo-checkout .jo-co-cols{width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important;}
/* force left-column full-width stacking (kill bootstrap cols/floats) */
body.jo-rd.jo-checkout .jo-co-left>.register_block,
body.jo-rd.jo-checkout .jo-co-left .col-md-6,
body.jo-rd.jo-checkout .jo-co-left .col-md-12,
body.jo-rd.jo-checkout .jo-co-left .col-sm-12,
body.jo-rd.jo-checkout .jo-co-left .col-sm-6{width:100%!important;float:none!important;padding:0!important;}
body.jo-rd.jo-checkout .jo-co-left .panel-body>p{display:none!important;}
/* summary: drop model + per-unit price columns (macket shows name + one price) */
body.jo-rd.jo-checkout .jo-co-right table.fastorder-table-bordered td:nth-child(3),
body.jo-rd.jo-checkout .jo-co-right table.fastorder-table-bordered td:nth-child(5){display:none;}
/* the theme's product table sizes itself from its content (549px), so below ~1300 it punched out
   of the summary column and the qty stepper / remove button fell off the right edge */
body.jo-rd.jo-checkout .jo-co-right table{width:100%!important;max-width:100%!important;}
/* every cell inherits the theme's white-space:nowrap, so the product name (126px cell) ran out of
   its own cell and slid under the qty stepper. Force wrapping on the cells AND their children. */
body.jo-rd.jo-checkout .jo-co-right table.table td,
body.jo-rd.jo-checkout .jo-co-right table.table td a,
body.jo-rd.jo-checkout .jo-co-right table.table td div,
body.jo-rd.jo-checkout .jo-co-right table.table td span,
body.jo-rd.jo-checkout .jo-co-right table.table td b,
body.jo-rd.jo-checkout .jo-co-right table.table td strong{white-space:normal!important;word-break:break-word;overflow-wrap:anywhere;}
/* keep the stepper itself on one line */
body.jo-rd.jo-checkout .jo-co-right table.table td .input-group{white-space:nowrap!important;}
body.jo-rd.jo-checkout .jo-co-head{position:relative;text-align:center;padding:26px 0 6px;margin-bottom:26px;}
/* same wordmark as the header (exported Figma vector); the tagline stays live text so it can
   switch RU/UK — it used to be hardcoded Russian and showed "одежда для всей семьи" on /ua/ */
body.jo-rd.jo-checkout .jo-co-logo{display:block;position:relative;margin:0 auto;width:122px;height:30px;
  background:url(../images/jo-logo.svg) no-repeat 0 0/122px 30px;
  text-decoration:none;font-size:0;line-height:0;}
html[lang="uk"] body.jo-rd.jo-checkout .jo-co-logo{background-image:url(../images/jo-logo-uk.svg);}
body.jo-rd.jo-checkout .jo-co-logo:after{content:none;}
body.jo-rd.jo-checkout .jo-co-title{font-family:var(--jo-sans);font-weight:700;text-transform:uppercase;font-size:20px;letter-spacing:1px;color:var(--jo-ink);margin-top:16px;}
body.jo-rd.jo-checkout .jo-co-back{position:absolute;left:0;top:62px;display:inline-flex;align-items:center;gap:4px;color:#333!important;text-decoration:none;font-family:var(--jo-cond);font-weight:400;font-size:14px;line-height:18px;}
body.jo-rd.jo-checkout .jo-co-back i{margin:0;width:24px;height:24px;font-size:0!important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M8 0 0 6l8 6z' fill='%232ec4b6'/%3E%3C/svg%3E") center/8px 12px no-repeat;}
body.jo-rd.jo-checkout h1.category-header{display:none;}
body.jo-rd.jo-checkout .jo-co-cols{display:flex;gap:0;align-items:stretch;justify-content:space-between;}
/* Figma sizes these 538 + 650 at the 1440 canvas. As `flex:0 0` they could not shrink, so on any
   narrower desktop (and at 125/150% zoom) the summary column ran off the right edge. Same basis,
   but allowed to shrink. */
body.jo-rd.jo-checkout .jo-co-left{flex:1 1 538px;min-width:0;}
body.jo-rd.jo-checkout .jo-co-right{flex:1 1 650px;min-width:0;max-width:650px;background:#f9f9f9;padding:32px 24px;box-sizing:border-box;}
body.jo-rd.jo-checkout .checkout_form>.col-sm-12,
body.jo-rd.jo-checkout .checkout_form>.col-md-6{display:none!important;}
body.jo-rd.jo-checkout .jo-co-left .panel,
body.jo-rd.jo-checkout .jo-co-left .fastorder-panel-default{border:0!important;box-shadow:none!important;background:transparent!important;margin:0!important;}
/* 40px between the 4 sections (Figma 7937:360 gap-40) */
body.jo-rd.jo-checkout .jo-co-left>.register_block,
body.jo-rd.jo-checkout .jo-co-left>.panel,
body.jo-rd.jo-checkout .jo-co-left>.fastorder-panel-default,
body.jo-rd.jo-checkout .jo-co-left>.form-group{margin:0 0 40px!important;}
body.jo-rd.jo-checkout .jo-co-left>*:last-child{margin-bottom:0!important;}
body.jo-rd.jo-checkout .jo-co-left .panel-heading{background:transparent!important;border:0!important;padding:0 0 20px!important;font-family:var(--jo-cond);font-weight:700;text-transform:uppercase;font-size:16px;line-height:20px;letter-spacing:0;color:#393939;}
body.jo-rd.jo-checkout .jo-co-left .panel-heading i{display:none;}
/* fastorder ships the headings with a negative left margin -> the first letter ("О" in ОСОБИСТІ,
   "С" in СПОСІБ) got clipped past the container edge. Pin them to the column. */
body.jo-rd.jo-checkout .panel-heading{margin-left:0!important;margin-right:0!important;}
/* "Усі поля, позначені зірочкою (*)" note: not in the design, and its own asterisk is display:none
   so it renders as an empty "()" - drop it (it was also adding a 25px gap under the heading) */
body.jo-rd.jo-checkout .jo-co-left .row>div[style*="padding-top: 25px"]{display:none!important;}
body.jo-rd.jo-checkout .jo-co-left .panel-body{padding:0!important;}
body.jo-rd.jo-checkout .jo-co-left .panel-body .form-group:last-child,
body.jo-rd.jo-checkout .jo-co-left .jo-co-pd .form-group:last-child{margin-bottom:0;}
body.jo-rd.jo-checkout .jo-co-left .panel-body>p:first-child{display:none;}
body.jo-rd.jo-checkout .jo-co-left .row{margin:0;}
body.jo-rd.jo-checkout .jo-co-left .form-group{padding:0;margin:0 0 8px;}
/* personal-data inputs: 8px between (Figma 7943:112 gap-8) */
body.jo-rd.jo-checkout .jo-co-left .jo-co-pd{display:flex;flex-direction:column;gap:8px;}
body.jo-rd.jo-checkout .jo-co-left .jo-co-pd .form-group{margin:0!important;}
body.jo-rd.jo-checkout .jo-co-left .control-label{display:none!important;}
body.jo-rd.jo-checkout .jo-co-left .form-control{height:48px;border:1px solid #b4b4b4!important;border-radius:0;background:#fff;font-family:var(--jo-cond);font-size:14px;padding:0 16px;box-shadow:none;color:var(--jo-ink);width:100%;}
body.jo-rd.jo-checkout .jo-co-left textarea.form-control{height:auto;min-height:120px;padding:14px 16px;resize:vertical;}
body.jo-rd.jo-checkout .jo-co-left .form-control::placeholder{color:#5e5e5e;}
body.jo-rd.jo-checkout .jo-co-left .form-group.required .form-control{border-color:#e6a6b6!important;}
/* the red * inside the "fields marked with * are required" note was being swallowed */
body.jo-rd.jo-checkout .jo-co-left span[style*="color:red"],
body.jo-rd.jo-checkout .jo-co-pd span[style*="color:red"]{display:inline!important;color:#e2003c!important;font-size:inherit!important;}
/* kill theme required-asterisk pseudo (macket keeps * inside placeholder only) */
body.jo-rd.jo-checkout .jo-co-left .form-group.required:before,
body.jo-rd.jo-checkout .jo-co-left .form-group.required:after,
body.jo-rd.jo-checkout .jo-co-left .required:before,
body.jo-rd.jo-checkout .jo-co-left .control-label:before,
body.jo-rd.jo-checkout .jo-co-pd:before,
body.jo-rd.jo-checkout .register_block .panel-body:before{content:none!important;display:none!important;}
body.jo-rd.jo-checkout .jo-co-left .form-group.error .form-control,
body.jo-rd.jo-checkout .jo-co-left .jo-co-sel.error,
body.jo-rd.jo-checkout .jo-co-left .error .jo-co-sel{border-color:#e23033!important;background:#fff!important;}
/* inline validation message (Figma 7943:206 / 7974:38) */
body.jo-rd.jo-checkout .jo-co-left .jo-co-err{background:#fff0f0;color:#e23033;font-family:var(--jo-cond);font-weight:400;font-size:14px;line-height:16px;padding:4px 16px;margin:8px 0 0;display:inline-block;}
body.jo-rd.jo-checkout .jo-co-sel,
body.jo-rd.jo-checkout .jo-co-left select.form-control{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.0569 0.000497818C11.7672 -0.0212317 12.2071 0.672142 11.9015 1.26674C11.8139 1.43663 11.6816 1.58676 11.559 1.7369C9.98458 3.64713 8.41212 5.55736 6.83576 7.46562C6.25192 8.17282 5.74787 8.17875 5.16988 7.47945C3.56822 5.54354 1.97629 3.59774 0.370738 1.6638C0.0437889 1.2707 -0.152769 0.861783 0.150826 0.389657C0.462205 -0.0923462 0.909813 -0.0232067 1.3944 0.111122C2.80923 0.508182 4.23184 0.883512 5.65641 1.24304C5.88605 1.30033 6.15851 1.28452 6.39204 1.22526C7.87304 0.845979 9.34625 0.444968 10.8234 0.0538344C10.9168 0.0281539 11.0121 0.012351 11.0569 0.00247383V0.000497818Z' fill='%232EC4B6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px;font-weight:700;float:none!important;}
/* selects: value + option list per Figma 7999:506 (RC 16, #333, list bg #f9f9f9) */
body.jo-rd.jo-checkout .jo-co-left select.form-control{font-size:16px;color:#333;}
body.jo-rd.jo-checkout .jo-co-left select.form-control option{font-family:var(--jo-cond);font-weight:400;font-size:16px;color:#333;background:#f9f9f9;padding:12px;}
body.jo-rd.jo-checkout .jo-co-left select.form-control option:checked{font-weight:700;}
body.jo-rd.jo-checkout .jo-co-left select.form-control option[value=""],
body.jo-rd.jo-checkout .jo-co-left select.form-control option:disabled{color:#5e5e5e;}
body.jo-rd.jo-checkout .jo-co-note{background:#ecfbf9;color:#393939;font-family:var(--jo-cond);font-size:14px;line-height:18px;padding:16px;margin-top:8px;}
body.jo-rd.jo-checkout .jo-co-count{text-align:right;color:var(--jo-grey);font-size:12px;margin-top:5px;font-family:var(--jo-cond);}
body.jo-rd.jo-checkout .jo-co-right .panel,
body.jo-rd.jo-checkout .jo-co-right .fastorder-panel-default{border:0!important;background:transparent!important;box-shadow:none!important;margin:0!important;}
body.jo-rd.jo-checkout .jo-co-right .panel-heading{background:transparent!important;border:0!important;text-align:center;font-family:var(--jo-cond);font-weight:400;text-transform:uppercase;font-size:20px;line-height:14px;color:#333;padding:0 0 20px!important;border-bottom:1px solid #333!important;margin-bottom:20px;}
body.jo-rd.jo-checkout .jo-co-right .panel-body{padding:0!important;}
/* 20px between summary blocks (Figma 8017:1224 gap-20) */
body.jo-rd.jo-checkout .jo-co-right>.checkout_form-first-div,
body.jo-rd.jo-checkout .jo-co-right>.jo-co-warn{margin-bottom:20px;}
body.jo-rd.jo-checkout .jo-co-right>*:last-child{margin-bottom:0;}
body.jo-rd.jo-checkout .jo-co-right .table-responsive{overflow:visible;border:0;}
body.jo-rd.jo-checkout .jo-co-right table.fastorder-table-bordered{border:0!important;margin:0;}
body.jo-rd.jo-checkout .jo-co-right table.fastorder-table-bordered thead{display:none;}
body.jo-rd.jo-checkout .jo-co-right table.fastorder-table-bordered tbody{display:block;}
/* product row = flex: [img] [name+model+size/color+price] [stepper] [trash] (Figma 7937:481) */
body.jo-rd.jo-checkout .jo-co-right table.fastorder-table-bordered tbody tr{display:flex;align-items:flex-start;gap:12px;padding:0 0 20px;border-bottom:1px solid #000;}
body.jo-rd.jo-checkout .jo-co-right table.fastorder-table-bordered td{border:0!important;padding:0;font-family:var(--jo-cond);font-size:14px;color:var(--jo-ink);}
body.jo-rd.jo-checkout .jo-co-right table.fastorder-table-bordered td:nth-child(1){order:0;flex:0 0 100px;}      /* image */
body.jo-rd.jo-checkout .jo-co-right table.fastorder-table-bordered td:nth-child(2){order:1;flex:1 1 auto;min-width:0;} /* name block */
body.jo-rd.jo-checkout .jo-co-right table.fastorder-table-bordered td:nth-child(3),
body.jo-rd.jo-checkout .jo-co-right table.fastorder-table-bordered td:nth-child(5),
body.jo-rd.jo-checkout .jo-co-right table.fastorder-table-bordered td:nth-child(6){display:none;}             /* model, unit-price, total (moved into name) */
body.jo-rd.jo-checkout .jo-co-right table.fastorder-table-bordered td:nth-child(4){order:2;flex:0 0 auto;padding-top:2px;} /* stepper */
body.jo-rd.jo-checkout .jo-co-right table.fastorder-table-bordered td:nth-child(7){order:3;flex:0 0 auto;padding-top:6px;margin-left:32px;} /* trash */
body.jo-rd.jo-checkout .jo-co-right .img-thumbnail{width:100px;height:110px;object-fit:cover;border:0!important;padding:0;border-radius:4px;display:block;}
body.jo-rd.jo-checkout .jo-co-right td:nth-child(2) br{display:none;}
body.jo-rd.jo-checkout .jo-co-right td a{color:#333!important;font-weight:700;font-size:16px;line-height:16px;text-decoration:none;display:block;margin-bottom:4px;}
body.jo-rd.jo-checkout .jo-co-right td small{display:block;color:#333;font-weight:400;font-size:14px;line-height:16px;margin-bottom:4px;}
body.jo-rd.jo-checkout .jo-co-right .jo-co-model{color:#333;font-weight:700;font-size:12px;line-height:14px;margin-bottom:12px;}
body.jo-rd.jo-checkout .jo-co-right .jo-co-price{font-weight:700;font-size:16px;line-height:16px;color:#333;margin-top:8px;}
/* 20px rhythm between summary blocks (Figma 7937:477 card gap:20) — product rows + gap before totals */
body.jo-rd.jo-checkout .jo-co-right .table-responsive table.fastorder-table-bordered tbody tr{background:transparent!important;} /* kill theme zebra stripe (.table-bordered tr:nth-child(2n)) */
body.jo-rd.jo-checkout .jo-co-right .table-responsive table.fastorder-table-bordered tbody tr:not(:last-child){margin-bottom:20px;}
body.jo-rd.jo-checkout .jo-co-right .checkout_form-first-div .row{margin-top:20px;}
body.jo-rd.jo-checkout .jo-co-right .input-group{border:1px solid #333;display:inline-flex!important;max-width:none!important;width:auto;height:48px;}
body.jo-rd.jo-checkout .jo-co-right .order-prev,
body.jo-rd.jo-checkout .jo-co-right .order-next{background:#fff!important;border:0!important;color:#333!important;box-shadow:none;width:28px;height:46px;line-height:46px;padding:0;border-radius:0;display:flex;align-items:center;justify-content:center;font-family:var(--jo-cond);font-weight:700;}
body.jo-rd.jo-checkout .jo-co-right .order-prev .fa,
body.jo-rd.jo-checkout .jo-co-right .order-next .fa{display:none;}
body.jo-rd.jo-checkout .jo-co-right .order-prev:after{content:"\2212";font-size:16px;}
body.jo-rd.jo-checkout .jo-co-right .order-next:after{content:"+";font-size:16px;}
body.jo-rd.jo-checkout .jo-co-right .order-quantity{border:0!important;text-align:center;width:34px;height:46px;box-shadow:none;background:transparent;font-weight:700;font-family:var(--jo-cond);font-size:16px;color:#333;padding:0;}
body.jo-rd.jo-checkout .jo-co-right .remove-btn{background:none!important;border:0!important;color:#9a9a9a!important;box-shadow:none;font-size:16px;}
/* totals table (Итого/Скидка/К оплате) — Figma 7999:397; wrapper is .row>.col-sm-4 (not col-lg-4) */
body.jo-rd.jo-checkout .jo-co-right .row [class*="col-"]{width:100%!important;float:none;margin:0;padding:0;}
body.jo-rd.jo-checkout .jo-co-right .row table.fastorder-table-bordered{width:100%;border:0!important;font-family:var(--jo-cond)!important;margin:0;}
body.jo-rd.jo-checkout .jo-co-right .row table.fastorder-table-bordered tbody tr{display:flex;align-items:baseline;justify-content:flex-end;gap:10px;padding:0 0 8px!important;border:0!important;background:transparent!important;} /* kill theme zebra stripe on Скидка row */
body.jo-rd.jo-checkout .jo-co-right .row table.fastorder-table-bordered td{display:block!important;border:0!important;padding:0!important;font-family:var(--jo-cond);font-weight:400;font-size:16px!important;line-height:16px;color:#333;text-align:right;flex:0 0 auto!important;order:0!important;}
body.jo-rd.jo-checkout .jo-co-right .row table.fastorder-table-bordered td:first-child{flex:1 1 auto!important;}
body.jo-rd.jo-checkout .jo-co-right .row table.fastorder-table-bordered tr:last-child td{font-size:20px!important;line-height:20px;color:#333;}
body.jo-rd.jo-checkout .jo-co-right .row table.fastorder-table-bordered tr:last-child td:first-child{text-transform:uppercase;}
body.jo-rd.jo-checkout .jo-co-right .row table.fastorder-table-bordered tr:last-child strong{font-weight:700;}
/* flat gray card — no inner white box / border (macket = only horizontal dividers) */
body.jo-rd.jo-checkout .jo-co-right .panel,
body.jo-rd.jo-checkout .jo-co-right .panel-body,
body.jo-rd.jo-checkout .jo-co-right .panel-collapse,
body.jo-rd.jo-checkout .jo-co-right .panel-default,
body.jo-rd.jo-checkout .jo-co-right .fastorder-panel-default,
body.jo-rd.jo-checkout .jo-co-right .checkout_form-first-div{background:transparent!important;border:0!important;box-shadow:none!important;}
/* trash icon instead of circled-x */
body.jo-rd.jo-checkout .jo-co-right .remove-btn .fa:before,
body.jo-rd.jo-checkout .jo-co-right .remove-btn .fa-times-circle:before{content:"\f1f8"!important;}
/* no disclaimer text under button (not in macket) */
body.jo-rd.jo-checkout .oct-fastorder-payment>p{display:none!important;}
/* city field chevron (match other delivery dropdowns) */
body.jo-rd.jo-checkout .jo-co-city{background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.0569 0.000497818C11.7672 -0.0212317 12.2071 0.672142 11.9015 1.26674C11.8139 1.43663 11.6816 1.58676 11.559 1.7369C9.98458 3.64713 8.41212 5.55736 6.83576 7.46562C6.25192 8.17282 5.74787 8.17875 5.16988 7.47945C3.56822 5.54354 1.97629 3.59774 0.370738 1.6638C0.0437889 1.2707 -0.152769 0.861783 0.150826 0.389657C0.462205 -0.0923462 0.909813 -0.0232067 1.3944 0.111122C2.80923 0.508182 4.23184 0.883512 5.65641 1.24304C5.88605 1.30033 6.15851 1.28452 6.39204 1.22526C7.87304 0.845979 9.34625 0.444968 10.8234 0.0538344C10.9168 0.0281539 11.0121 0.012351 11.0569 0.00247383V0.000497818Z' fill='%232EC4B6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 16px center!important;padding-right:40px!important;}
body.jo-rd.jo-checkout .jo-co-warn{background:#fff;border:0;color:#e230bc;font-family:var(--jo-cond);font-weight:700;font-size:12px;line-height:14px;text-align:left;padding:12px 8px;margin:0;}
body.jo-rd.jo-checkout .oct-fastorder-payment{margin-top:4px;}
body.jo-rd.jo-checkout #button-go{display:block;width:100%;background:var(--jo-teal)!important;color:#fff!important;border:0!important;font-family:var(--jo-cond);font-weight:700;text-transform:uppercase;letter-spacing:.5px;font-size:16px;height:48px;line-height:48px;border-radius:0;padding:0;cursor:pointer;}
body.jo-rd.jo-checkout .oct-fastorder-payment>p{color:var(--jo-grey);font-size:11px;line-height:1.4;margin-top:12px;text-align:center;}
body.jo-rd.jo-checkout .shipping-method p strong,
body.jo-rd.jo-checkout .shipping-method p img{display:none;}
body.jo-rd.jo-checkout .jo-co-sel{margin-bottom:8px;}
@media (max-width:900px){
  body.jo-rd.jo-checkout #container.container{padding-left:16px;padding-right:16px;}
  body.jo-rd.jo-checkout .jo-co-cols{flex-direction:column;gap:32px;}
  body.jo-rd.jo-checkout .jo-co-left{flex:1 1 auto;width:100%;}
  body.jo-rd.jo-checkout .jo-co-right{flex:1 1 auto;max-width:none;width:100%;}
  /* Figma 8017:1057 @375: back x13/y15 (139x24), logo x233/y12 (122.46x30), title y60 (h24),
     first content block starts at y105. Container padding is 16 -> offsets are page-absolute. */
  body.jo-rd.jo-checkout .jo-co-head{position:relative;height:84px;padding:0;margin:0 -16px 21px;text-align:left;}
  body.jo-rd.jo-checkout .jo-co-back{position:absolute;left:13px;top:15px;margin:0;height:24px;
    display:inline-flex;align-items:center;gap:4px;width:139px;font-size:14px;line-height:14px;white-space:nowrap;}
  body.jo-rd.jo-checkout .jo-co-back i{width:24px;height:24px;flex:0 0 24px;background-size:8px 12px;}
  body.jo-rd.jo-checkout .jo-co-logo{position:absolute;left:233px;top:12px;margin:0;width:122.46px;height:30px;
    background-size:122.46px 30px;}
  body.jo-rd.jo-checkout .jo-co-title{position:absolute;left:0;right:0;top:60px;margin:0;
    height:24px;line-height:24px;text-align:center;font-size:20px;}

  /* ---- checkout cart rows -> Figma card 8022:1283 (295x146 @375) ----
     The fastorder cart is a 7-column bootstrap table; at 375 the columns collapse and the
     product name renders one letter per line. Re-lay each <tr> as the Figma card:
     [photo 50x55] gap12 [text 1fr] gap8 [qty 71 / trash]. Mobile only - desktop keeps the table. */
  body.jo-rd.jo-checkout #cart_table,
  body.jo-rd.jo-checkout #cart_table tbody,
  body.jo-rd.jo-checkout #cart_table tr,
  body.jo-rd.jo-checkout #cart_table td{display:block;width:auto!important;border:0!important;padding:0!important;background:none!important;}
  body.jo-rd.jo-checkout #cart_table thead{display:none!important;}
  body.jo-rd.jo-checkout .table-responsive{overflow:visible!important;border:0!important;margin:0!important;}
  body.jo-rd.jo-checkout .panel.fastorder-panel-default{padding-left:0!important;padding-right:0!important;}
  body.jo-rd.jo-checkout .jo-co-right{padding-left:20px!important;padding-right:20px!important;}
  body.jo-rd.jo-checkout #cart_table tr{display:grid!important;
    grid-template-columns:50px minmax(0,1fr) auto;column-gap:12px;align-items:start;
    padding-bottom:20px!important;margin-bottom:20px;border-bottom:1px solid #000!important;}
  /* photo */
  body.jo-rd.jo-checkout #cart_table td:nth-child(1){grid-column:1;grid-row:1/3;}
  body.jo-rd.jo-checkout #cart_table td:nth-child(1) img{width:50px!important;height:55px!important;
    object-fit:cover;border:0!important;padding:0!important;border-radius:0;max-width:none;}
  /* text column */
  body.jo-rd.jo-checkout #cart_table td:nth-child(2){grid-column:2;grid-row:1/3;color:#333;text-align:left;}
  body.jo-rd.jo-checkout #cart_table td:nth-child(2) br{display:none;}
  body.jo-rd.jo-checkout #cart_table td:nth-child(2)>a{display:block;font-family:var(--jo-cond);font-weight:700;
    font-size:14px;line-height:16px;color:#333!important;text-decoration:none;}
  body.jo-rd.jo-checkout #cart_table td:nth-child(2) .jo-co-model{font-family:var(--jo-cond);font-weight:700;
    font-size:12px;line-height:14px;color:#333;margin-top:4px;}
  body.jo-rd.jo-checkout #cart_table td:nth-child(2) small{display:block;font-family:var(--jo-cond);font-weight:400;
    font-size:14px;line-height:16px;color:#333;margin-top:4px;}
  body.jo-rd.jo-checkout #cart_table td:nth-child(2) small:first-of-type{margin-top:12px;}
  body.jo-rd.jo-checkout #cart_table td:nth-child(2) .jo-co-price{font-family:var(--jo-cond);font-weight:700;
    font-size:16px;line-height:16px;color:#333;margin-top:12px;}
  /* model / unit price / total duplicates -> hidden (already in the text column) */
  body.jo-rd.jo-checkout #cart_table td:nth-child(3),
  body.jo-rd.jo-checkout #cart_table td:nth-child(5),
  body.jo-rd.jo-checkout #cart_table td:nth-child(6){display:none!important;}
  /* qty stepper: 1px #333 box, 8px pad, 16px gaps */
  body.jo-rd.jo-checkout #cart_table td:nth-child(4){grid-column:3;grid-row:1;justify-self:end;}
  body.jo-rd.jo-checkout #cart_table td:nth-child(4) .input-group{max-width:none!important;width:auto!important;
    display:inline-flex!important;align-items:center;border:1px solid #333;padding:8px;gap:16px;
    height:32px;box-sizing:border-box;}
  /* bootstrap clearfix pseudos become flex items and force a 2nd line -> kill them */
  body.jo-rd.jo-checkout #cart_table td:nth-child(4) .input-group:before,
  body.jo-rd.jo-checkout #cart_table td:nth-child(4) .input-group:after{display:none!important;content:none!important;}
  body.jo-rd.jo-checkout #cart_table td:nth-child(4) .input-group>*{float:none!important;width:auto!important;
    flex:0 0 auto!important;display:flex!important;align-items:center;}
  body.jo-rd.jo-checkout #cart_table td:nth-child(4) .input-group .btn{background:none!important;border:0!important;
    padding:0!important;margin:0!important;box-shadow:none!important;font-family:var(--jo-cond);font-weight:700;
    line-height:16px;color:#333!important;min-width:0;width:auto!important;height:16px!important;
    display:flex;align-items:center;justify-content:center;}
  body.jo-rd.jo-checkout #cart_table td:nth-child(4) .input-group .btn i{font-size:12px!important;line-height:16px;
    color:#333!important;width:auto;}
  body.jo-rd.jo-checkout #cart_table td:nth-child(4) .input-group input{border:0!important;background:none!important;
    box-shadow:none!important;padding:0!important;height:16px!important;width:14px!important;min-width:9px;max-width:22px;
    text-align:center;font-family:var(--jo-cond);font-weight:700;font-size:16px;line-height:16px;color:#333;}
  /* remove: trash icon bottom-right */
  body.jo-rd.jo-checkout #cart_table td:nth-child(7){grid-column:3;grid-row:2;justify-self:end;align-self:end;margin-top:12px;}
  body.jo-rd.jo-checkout #cart_table td:nth-child(7) .btn,
  body.jo-rd.jo-checkout #cart_table td:nth-child(7) button{background:none!important;border:0!important;padding:0!important;
    box-shadow:none!important;width:24px;height:24px;font-size:0!important;color:transparent!important;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M5 6h14M10 6V4.5A.5.5 0 0 1 10.5 4h3a.5.5 0 0 1 .5.5V6M6.5 6l.8 12.1a.9.9 0 0 0 .9.9h7.6a.9.9 0 0 0 .9-.9L17.5 6M10 10v6M14 10v6'/%3E%3C/svg%3E") center/20px 20px no-repeat!important;}
  body.jo-rd.jo-checkout #cart_table td:nth-child(7) .btn i{display:none!important;}
}

/* =========================================================
   EMPTY CART PAGE (checkout/cart + oct_fastorder/empty_cart)
   .jo-empty-cart added by JS in footer; sticky footer >=100vh
   ========================================================= */
body.jo-rd.jo-empty-cart{display:flex;flex-direction:column;min-height:100vh;}
body.jo-rd.jo-empty-cart #mm-0{flex:1 0 auto;display:flex;flex-direction:column;}
body.jo-rd.jo-empty-cart #oct-wrap{flex:1 0 auto;display:flex;flex-direction:column;}
body.jo-rd.jo-empty-cart #container{flex:1 0 auto;display:flex;flex-direction:column;max-width:calc(var(--jo-container) + 30px);margin-left:auto;margin-right:auto;padding-left:15px;padding-right:15px;box-sizing:border-box;width:100%;}
body.jo-rd.jo-empty-cart #content{flex:1 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 15px 80px;}
body.jo-rd.jo-empty-cart footer{flex:0 0 auto;}
body.jo-rd .jo-ec{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;max-width:460px;}
body.jo-rd .jo-ec__icon{width:88px;height:88px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ec4b6' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 7.5h13l-1.1 11.2a1.5 1.5 0 0 1-1.5 1.35H8.1a1.5 1.5 0 0 1-1.5-1.35L5.5 7.5z'/%3E%3Cpath d='M9 7.5V6a3 3 0 0 1 6 0v1.5'/%3E%3C/svg%3E") center/contain no-repeat;}
body.jo-rd .jo-ec__title{font-family:var(--jo-cond);font-weight:700;font-size:26px;line-height:1.15;text-transform:uppercase;letter-spacing:.5px;color:var(--jo-ink);}
body.jo-rd .jo-ec__sub{font-family:var(--jo-sans);font-weight:400;font-size:15px;line-height:1.5;color:var(--jo-grey);max-width:340px;}
body.jo-rd .jo-ec__btn{margin-top:8px;display:inline-flex;align-items:center;justify-content:center;min-width:248px;height:48px;padding:0 32px;background:var(--jo-teal)!important;color:#fff!important;font-family:var(--jo-cond);font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.5px;text-decoration:none;border:0;transition:filter .2s;}
body.jo-rd .jo-ec__btn:hover{filter:brightness(.94);color:#fff!important;}

/* =========================================================
   CUSTOM SELECT (checkout + product) — Figma 7999:506
   native <select> hidden, .jo-cs widget built by footer JS
   ========================================================= */
body.jo-rd .jo-cs{position:relative;width:100%;}
body.jo-rd .jo-cs>select{display:none!important;}
body.jo-rd .jo-cs__trigger{display:flex;align-items:center;justify-content:space-between;gap:10px;box-sizing:border-box;width:100%;border:1px solid #b4b4b4;background:#fff;padding:0 16px;cursor:pointer;font-family:var(--jo-cond);}
body.jo-rd .jo-cs__val{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-family:var(--jo-cond);font-weight:700;font-size:16px;line-height:1.1;color:#333;}
body.jo-rd .jo-cs__val.is-placeholder{font-weight:400;font-size:14px;color:#5e5e5e;}
body.jo-rd .jo-cs__chev{flex:0 0 12px;width:12px;height:8px;background:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.0569 0.000497818C11.7672 -0.0212317 12.2071 0.672142 11.9015 1.26674C11.8139 1.43663 11.6816 1.58676 11.559 1.7369C9.98458 3.64713 8.41212 5.55736 6.83576 7.46562C6.25192 8.17282 5.74787 8.17875 5.16988 7.47945C3.56822 5.54354 1.97629 3.59774 0.370738 1.6638C0.0437889 1.2707 -0.152769 0.861783 0.150826 0.389657C0.462205 -0.0923462 0.909813 -0.0232067 1.3944 0.111122C2.80923 0.508182 4.23184 0.883512 5.65641 1.24304C5.88605 1.30033 6.15851 1.28452 6.39204 1.22526C7.87304 0.845979 9.34625 0.444968 10.8234 0.0538344C10.9168 0.0281539 11.0121 0.012351 11.0569 0.00247383V0.000497818Z' fill='%232EC4B6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .18s ease;}
body.jo-rd .jo-cs.is-open .jo-cs__chev{transform:rotate(180deg);}
body.jo-rd .jo-cs__panel{position:absolute;left:0;top:calc(100% - 1px);width:100%;background:#f9f9f9;border:1px solid #b4b4b4;z-index:60;max-height:260px;overflow:auto;display:none;border-radius:0 0 4px 4px;box-shadow:0 10px 24px rgba(0,0,0,.10);}
body.jo-rd .jo-cs.is-open .jo-cs__panel{display:block;}
body.jo-rd .jo-cs__opt{padding:12px;font-family:var(--jo-cond);font-weight:400;font-size:16px;line-height:16px;color:#333;cursor:pointer;border-bottom:1px solid #c8c8c8;}
body.jo-rd .jo-cs__opt:last-child{border-bottom:0;}
body.jo-rd .jo-cs__opt:hover,body.jo-rd .jo-cs__opt.is-selected{background:#fb96e5;font-weight:700;color:#333;}
/* keep 8px between delivery fields now that the select is wrapped */
body.jo-rd.jo-checkout .jo-co-left .jo-cs{margin-bottom:8px;}
/* checkout qty stepper: keep -/+ inside the box (spans were collapsing to 1px) */
body.jo-rd.jo-checkout .jo-co-right .input-group{width:90px;justify-content:space-between;}
body.jo-rd.jo-checkout .jo-co-right .input-group-btn{display:flex!important;width:auto!important;flex:0 0 auto;padding:0;}
body.jo-rd.jo-checkout .jo-co-right .order-quantity{flex:1 1 auto;width:auto!important;min-width:0;}

/* =========================================================
   PRODUCT PAGE MOBILE 1:1 (Figma cfIxtF 8009:964)
   ========================================================= */
@media (max-width:991px){
  body.jo-rd.jo-prod-m .breadcrumb{display:none!important;}
  /* gallery: single 335-wide photo (20px inset), no arrows/thumbs, progress line */
  body.jo-rd.jo-prod-m .product-info{width:100vw;margin-left:calc(50% - 50vw);padding:0 20px;box-sizing:border-box;}
  body.jo-rd.jo-prod-m .product-info>.col-sm-6{padding-left:0!important;padding-right:0!important;width:100%!important;float:none;}
  body.jo-rd.jo-prod-m #owl-additional{display:none!important;}
  body.jo-rd.jo-prod-m #owl-thumb .owl-nav,body.jo-rd.jo-prod-m #owl-thumb .owl-dots{display:none!important;}
  body.jo-rd.jo-prod-m #owl-thumb .owl-item img{width:100%!important;height:auto!important;aspect-ratio:335/400;object-fit:cover;object-position:center top;border:0!important;border-radius:0!important;}
  body.jo-rd.jo-prod-m #jo-gal-prog{height:3px;background:#f5f5f5;margin:8px 0 0;overflow:hidden;}
  body.jo-rd.jo-prod-m #jo-gal-prog i{display:block;height:3px;background:#333;width:12%;margin-left:0;transition:margin-left .3s ease,width .3s ease;}
  /* info block */
  body.jo-rd.jo-prod-m .product-right{padding-left:0!important;padding-right:0!important;margin-top:24px;}
  body.jo-rd.jo-prod-m .jo-pr__head{margin:0 0 4px;}
  body.jo-rd.jo-prod-m .jo-pr__model{font-size:12px;line-height:14px;}
  body.jo-rd.jo-prod-m .jo-pr__rev-link{font-size:12px;line-height:14px;}
  body.jo-rd.jo-prod-m .top-info-product h1,body.jo-rd.jo-prod-m .product-right h1{font-family:var(--jo-cond);font-weight:700;font-size:20px;line-height:24px;color:var(--jo-ink);margin:0;text-align:left;}
  /* price row: teal price left + opt box right on ONE row */
  body.jo-rd.jo-prod-m .product-right .price{display:flex;align-items:center;gap:16px;margin:8px 0 0;padding:0;}
  body.jo-rd.jo-prod-m .product-right .price .price-new{flex:1 1 auto;font-family:var(--jo-cond);font-weight:700;font-size:28px;line-height:36px;color:var(--jo-teal);margin:0;padding:0;}
  body.jo-rd.jo-prod-m .product-info .price .jo-pr__opt{flex:0 0 auto;margin:0;padding:4px 12px;gap:12px;align-items:center;font-size:12px;line-height:24px;font-weight:700;}
  body.jo-rd.jo-prod-m .product-info .price .jo-pr__opt .jo-pr__opt-price{font-size:16px;line-height:36px;}
  /* video block moved below price (JS) */
  body.jo-rd.jo-prod-m .product-right .youtube-video{width:100%;height:auto;aspect-ratio:335/183;margin:28px 0 0;background-size:cover;background-position:center;}
  /* selects 40px, hint, stepper+buy */
  body.jo-rd.jo-prod-m .product-right .options{margin:28px 0 0;max-width:none;}
  body.jo-rd.jo-prod-m .product-right .form-control,body.jo-rd.jo-prod-m .product-right select.form-control{height:40px;}
  body.jo-rd.jo-prod-m .product-right .jo-cs,body.jo-rd.jo-prod-m .product-right .jo-cs__trigger{height:40px!important;min-height:40px;}
  body.jo-rd.jo-prod-m .jo-pr__hint{margin:12px 0 0;max-width:none;padding:12px 8px;font-size:12px;line-height:14px;}
  body.jo-rd.jo-prod-m .product-right .cart{margin:8px 0 0;max-width:none;gap:20px;}
  body.jo-rd.jo-prod-m .product-right .cart .jo-qty{flex:0 0 90px;width:90px;height:48px;}
  body.jo-rd.jo-prod-m .product-right .cart #button-cart,body.jo-rd.jo-prod-m .product-right .cart .btn-buy,body.jo-rd.jo-prod-m .product-right .cart>a{flex:1 1 auto;height:48px;}
  /* accordion */
  body.jo-rd.jo-prod-m .jo-acc{margin:36px 0 0;max-width:none;}
  /* hide desktop leftovers */
  body.jo-rd.jo-prod-m .product-info .additional-buttons{display:none;}
}

/* jo: kill mmenu white divider before submenu arrow */
.mm-menu .mm-listview > li > a.mm-next:before,
.mm-menu .mm-listview > li > .mm-next:before { display: none !important; border: 0 !important; }

/* ===== BATCH 2026-07-16 (client feedback) ===================================== */

/* --- (1) clickable "Новые поступления" heading --- */
body.jo-rd .news-set .inner a.jo-set-title{display:inline-block;color:inherit!important;text-decoration:none;transition:color .2s;}
body.jo-rd .news-set .inner a.jo-set-title:hover{color:var(--jo-teal)!important;}
body.jo-rd .news-set .inner a.jo-set-title span{cursor:pointer;}

/* --- (15) breadcrumbs: pull off the screen edge so the home icon is tappable ---
   An earlier rule sets the `padding` SHORTHAND with !important, which beats a plain
   `padding-left` longhand no matter the order — so this needs !important too. */
body.jo-rd .breadcrumb{padding-left:0!important;}
@media (min-width:992px){body.jo-rd .breadcrumb{padding-left:0!important;}}
/* the home glyph was a 17x18 tap target — pad it out to a usable size */
body.jo-rd .breadcrumb>li:first-child a{display:inline-flex;align-items:center;justify-content:center;
  min-width:34px;height:34px;margin:-8px 0;padding:0;}

/* --- (4) information/contact form ---
   Theme ships .form-horizontal .form-group with margin-left/right:-15px but no
   compensating padding on the parent, so labels sit at x=-5 and get clipped; on top
   of that .form-control is hardcoded float:right;width:238px. Broken at EVERY width
   (the client only reported mobile), so this is not media-scoped — just stack the
   fields and cap the form width on desktop. */
body.jo-rd #content .form-horizontal{max-width:640px;}
body.jo-rd #content .form-horizontal .form-group{margin-left:0!important;margin-right:0!important;}
body.jo-rd #content .form-horizontal .form-group>[class*="col-"]{width:100%!important;float:none!important;padding-left:0!important;padding-right:0!important;
  margin-left:0!important;margin-right:0!important;}
body.jo-rd #content .form-horizontal .control-label{width:100%!important;float:none!important;display:block!important;
  text-align:left!important;padding:0 0 6px!important;font-family:var(--jo-cond);font-size:14px;font-weight:500;color:var(--jo-black);}
/* 16px minimum: anything smaller makes iOS Safari zoom the page on focus */
body.jo-rd #content .form-horizontal .form-control{width:100%!important;max-width:none!important;float:none!important;
  font-size:16px!important;}
body.jo-rd #content .form-horizontal textarea.form-control{min-height:160px;}
/* theme sets .buttons{overflow:auto}; with the col-sm-offset-3 margin gone it no
   longer overflows, but keep the scrollbar from ever showing up here */
body.jo-rd #content .form-horizontal .buttons{margin-left:0!important;margin-right:0!important;overflow:visible!important;}
body.jo-rd #content fieldset>legend{font-family:var(--jo-serif);text-transform:uppercase;}
/* field errors sit under their input, not floated beside it */
body.jo-rd #content .form-horizontal .text-danger{display:block;float:none!important;width:100%;margin:4px 0 0;
  font-family:var(--jo-cond);font-size:13px;color:#e23033!important;}
/* contact submit button on brand (theme ships input.button at a fixed 32px line-box) */
body.jo-rd #content .form-horizontal .buttons input[type="submit"],
body.jo-rd #content .form-horizontal .buttons input.button,
body.jo-rd #content .form-horizontal .buttons .btn-primary{background:var(--jo-teal)!important;border:0!important;color:#fff!important;
  font-family:var(--jo-cond)!important;font-size:14px!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.5px;
  height:48px!important;line-height:1!important;padding:0 28px!important;border-radius:0;width:auto!important;overflow:visible!important;
  white-space:nowrap;cursor:pointer;transition:.2s;}
body.jo-rd #content .form-horizontal .buttons input[type="submit"]:hover,
body.jo-rd #content .form-horizontal .buttons input.button:hover{filter:brightness(.94);}
@media (max-width:991px){body.jo-rd #content .form-horizontal .buttons input.button{width:100%!important;}}

/* --- (9) category listing cards = same look as the homepage carousels ---
   Two grids share this markup: product/category.tpl (wrapped in #res-products) and
   product/special.tpl, which /latest/ (Новинки) uses and which has no wrapper — the
   item-1 heading link points there, so it has to match too. */
body.jo-rd #res-products .product-grid .product .description,
body.jo-rd #res-products .product-grid .product .oct-cat-stock,
body.jo-rd #res-products .product-grid .sticker{display:none!important;}
body.jo-rd #res-products .product-grid .product{border:0!important;background:transparent!important;padding:0!important;margin:0 0 28px!important;position:relative;}
body.jo-rd #res-products .product-grid .product .image{position:relative;aspect-ratio:315/420;border-radius:4px;overflow:hidden;background:var(--jo-bg);margin:0!important;border:0!important;}
body.jo-rd #res-products .product-grid .product .image>a{display:block;width:100%;height:100%;}
body.jo-rd #res-products .product-grid .product .image img{width:100%!important;height:100%!important;max-height:none!important;object-fit:cover;display:block;}
body.jo-rd #res-products .product-grid .product .product-about{padding:0!important;border:0!important;background:transparent!important;text-align:left;}
body.jo-rd #res-products .product-grid .product .name{margin:16px 0 4px!important;min-height:40px;border:0!important;background:none!important;padding:0!important;}
body.jo-rd #res-products .product-grid .product .name a{display:inline-block;font-family:var(--jo-cond)!important;font-size:16px!important;font-weight:500!important;
  line-height:20px!important;letter-spacing:0!important;color:var(--jo-black)!important;text-transform:none!important;}
body.jo-rd #res-products .product-grid .product .name a:hover{color:var(--jo-teal)!important;}
body.jo-rd #res-products .product-grid .product .price,
body.jo-rd #res-products .product-grid .product .price.product-grid{display:flex;align-items:center;justify-content:space-between;gap:4px 8px;
  flex-wrap:wrap;min-height:46px;align-content:flex-start;
  margin:0!important;padding:0!important;border:0!important;font-family:var(--jo-cond);}
body.jo-rd #res-products .product-grid .product .price .jo-price-main{display:block;font-family:var(--jo-cond);font-size:20px;font-weight:700;line-height:24px;color:var(--jo-black)!important;flex:0 1 auto;}
body.jo-rd #res-products .product-grid .product .price .jo-price-opt{display:block;font-family:var(--jo-cond);font-size:14px;font-weight:400;line-height:18px;
  color:#1cb0a2!important;text-decoration:underline;white-space:nowrap;margin:0;text-align:right;}
body.jo-rd #res-products .product-grid .product .price .price-old{color:var(--jo-grey)!important;text-decoration:line-through;font-weight:400;font-size:14px;}
body.jo-rd #res-products .product-grid .product .price span[style]{color:inherit!important;font-size:inherit!important;font-weight:inherit!important;}
body.jo-rd #res-products .product-grid{display:flex;flex-wrap:wrap;margin-left:-6px;margin-right:-6px;}
body.jo-rd #res-products .product-grid>.cols{padding-left:6px;padding-right:6px;float:none;}
body.jo-rd #res-products .category-header,body.jo-rd .top-menu .display h1.category-header{font-family:var(--jo-serif);text-transform:uppercase;color:var(--jo-black);}

/* same rules for the wrapper-less /latest/ grid */
body.jo-rd #content .product-grid .product .description,
body.jo-rd #content .product-grid .product .oct-cat-stock,
body.jo-rd #content .product-grid .sticker{display:none!important;}
body.jo-rd #content .product-grid .product{border:0!important;background:transparent!important;padding:0!important;margin:0 0 28px!important;position:relative;}
body.jo-rd #content .product-grid .product .image{position:relative;aspect-ratio:315/420;border-radius:4px;overflow:hidden;background:var(--jo-bg);margin:0!important;border:0!important;}
body.jo-rd #content .product-grid .product .image>a{display:block;width:100%;height:100%;}
body.jo-rd #content .product-grid .product .image img{width:100%!important;height:100%!important;max-height:none!important;object-fit:cover;display:block;}
body.jo-rd #content .product-grid .product .product-about{padding:0!important;border:0!important;background:transparent!important;text-align:left;}
body.jo-rd #content .product-grid .product .name{margin:16px 0 4px!important;min-height:40px;border:0!important;background:none!important;padding:0!important;}
body.jo-rd #content .product-grid .product .name a{display:inline-block;font-family:var(--jo-cond)!important;font-size:16px!important;font-weight:500!important;
  line-height:20px!important;letter-spacing:0!important;color:var(--jo-black)!important;text-transform:none!important;}
body.jo-rd #content .product-grid .product .name a:hover{color:var(--jo-teal)!important;}
body.jo-rd #content .product-grid .product .price,
body.jo-rd #content .product-grid .product .price.product-grid{display:flex;align-items:center;justify-content:space-between;gap:4px 8px;
  flex-wrap:wrap;min-height:46px;align-content:flex-start;
  margin:0!important;padding:0!important;border:0!important;font-family:var(--jo-cond);}
body.jo-rd #content .product-grid .product .price .jo-price-main{display:block;font-family:var(--jo-cond);font-size:20px;font-weight:700;line-height:24px;color:var(--jo-black)!important;flex:0 1 auto;}
body.jo-rd #content .product-grid .product .price .jo-price-opt{display:block;font-family:var(--jo-cond);font-size:14px;font-weight:400;line-height:18px;
  color:#1cb0a2!important;text-decoration:underline;white-space:nowrap;margin:0;text-align:right;}
body.jo-rd #content .product-grid .product .price .price-old{color:var(--jo-grey)!important;text-decoration:line-through;font-weight:400;font-size:14px;}
body.jo-rd #content .product-grid .product .price span[style]{color:inherit!important;font-size:inherit!important;font-weight:inherit!important;}
body.jo-rd #content .product-grid{display:flex;flex-wrap:wrap;margin-left:-6px;margin-right:-6px;}
body.jo-rd #content .product-grid>.cols{padding-left:6px;padding-right:6px;float:none;}
body.jo-rd #res-products .category-header,body.jo-rd .top-menu .display h1.category-header{font-family:var(--jo-serif);text-transform:uppercase;color:var(--jo-black);}


/* Card titles are a 2-line box by design (min-height 40 = 2x20), but the theme also
   sets .name{overflow:hidden} — so a 3-line title was sliced mid-line with no hint
   that it was cut. Clamp to 2 lines with an ellipsis instead, and keep rows even. */
body.jo-rd #res-products .product-grid .product .name a,
body.jo-rd #content .product-grid .product .name a,
body.jo-rd .category-slide .item .name a{
  display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* --- (10) video badge on cards whose product has a YouTube clip --- */
/* the homepage/latest carousels also carry the badge; their .image had no
   positioning context of its own, so anchor it here */
body.jo-rd .category-slide .item .image,body.jo-rd .item .image{position:relative;}
body.jo-rd .jo-vid{position:absolute;right:10px;bottom:10px;z-index:3;width:30px;height:20px;pointer-events:none;
  background-color:var(--jo-teal);
  -webkit-mask:var(--jo-vid-mask) no-repeat center/contain;mask:var(--jo-vid-mask) no-repeat center/contain;}
:root{--jo-vid-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Cpath d='M2 0h14a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2z'/%3E%3Cpath d='M21 7.2 28.4.9A1 1 0 0 1 30 1.7v16.6a1 1 0 0 1-1.6.8L21 12.8z'/%3E%3C/svg%3E");}
@media (max-width:991px){body.jo-rd .jo-vid{right:8px;bottom:8px;width:26px;height:17px;}}

/* --- (9b) collapsible category SEO description --- */
body.jo-rd .jo-cinfo{position:relative;margin-top:24px;}
body.jo-rd .jo-cinfo__body{overflow:hidden;transition:max-height .35s ease;}
body.jo-rd .jo-cinfo.is-collapsed .jo-cinfo__body{max-height:170px;
  -webkit-mask-image:linear-gradient(#000 60%,transparent 100%);mask-image:linear-gradient(#000 60%,transparent 100%);}
body.jo-rd .jo-cinfo.is-open .jo-cinfo__body{max-height:none;-webkit-mask-image:none;mask-image:none;}
body.jo-rd .jo-cinfo__toggle{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:11px 22px;border:1px solid var(--jo-teal);
  background:transparent;color:var(--jo-teal);font-family:var(--jo-cond);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  cursor:pointer;transition:.2s;border-radius:0;}
body.jo-rd .jo-cinfo__toggle:hover{background:var(--jo-teal);color:#fff;}
body.jo-rd .jo-cinfo__toggle::after{content:"";width:9px;height:6px;background-color:currentColor;transition:transform .25s;
  -webkit-mask:var(--jo-chev-mask) no-repeat center/contain;mask:var(--jo-chev-mask) no-repeat center/contain;}
body.jo-rd .jo-cinfo.is-open .jo-cinfo__toggle::after{transform:rotate(180deg);}
:root{--jo-chev-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath d='M0 0h9L4.5 6z'/%3E%3C/svg%3E");}
body.jo-rd .jo-cinfo .jo-cinfo__less{display:none;}
body.jo-rd .jo-cinfo.is-open .jo-cinfo__more{display:none;}
body.jo-rd .jo-cinfo.is-open .jo-cinfo__less{display:inline;}
body.jo-rd .jo-cinfo h1,body.jo-rd .jo-cinfo h2{font-family:var(--jo-serif);text-transform:uppercase;color:var(--jo-black);}
body.jo-rd .jo-cinfo h1{font-size:24px;}
body.jo-rd .jo-cinfo h2{font-size:20px;}
body.jo-rd .jo-cinfo p,body.jo-rd .jo-cinfo li{font-family:var(--jo-sans);font-size:14px;line-height:1.6;color:var(--jo-grey);}
body.jo-rd .jo-cinfo a{color:var(--jo-teal);}
body.jo-rd .jo-cinfo img{max-width:100%;height:auto;}

/* mobile: keep the listing on the same 20px inset as the homepage */
@media (max-width:991px){
  body.jo-rd #content #res-products{padding-left:14px;padding-right:14px;}
  body.jo-rd .jo-cinfo{padding-left:20px;padding-right:20px;}
  body.jo-rd #content #res-products .pagination{padding-left:6px;}
}

/* --- (13) mobile checkout summary: totals + notice + CTA above the item list
       (Figma Project_Joanna.com.ua-2, 7999:531 — mobile frame only; the desktop
       frame 7937:102 keeps items first, so scope this to <=991) --- */
@media (max-width:991px){
  body.jo-checkout .jo-co-right{display:flex;flex-direction:column;}
  body.jo-checkout .jo-co-right .jo-co-totals{order:1;}
  body.jo-checkout .jo-co-right .jo-co-warn{order:2;}
  body.jo-checkout .jo-co-right .oct-fastorder-payment{order:3;}
  body.jo-checkout .jo-co-right .checkout_form-first-div{order:4;margin-top:40px;}
}

/* breadcrumbs flush with content */
body.jo-rd .breadcrumb{padding-left:0!important;}
body.jo-rd .breadcrumb>li:first-child>a{padding-left:0!important;justify-content:flex-start!important;min-width:0!important;}
body.jo-rd #container.container:has(#column-left) .row>.breadcrumb{padding-left:16px!important;}
/* Figma 8017:1258 — totals row: label left, value right */
body.jo-rd.jo-checkout .jo-co-totals table td:first-child,
body.jo-rd.jo-checkout .jo-co-right .col-sm-offset-8 table td:first-child{text-align:left!important;}

/* ================= Картка каталогу: ціна в один рядок + рівні заголовки ================= */
/* Проблема: укр «від 2 одиниць 1330 грн» довший за рос-варіант і не влазив поряд з ціною
   → flex-wrap кидав його на 2-й рядок і збивав лінію ряду.
   Ширина колонки не монотонна по viewport (1920=261px, 1100=173px, 992=234px, 375=174px),
   тому розмір керується шириною самої картки (container query), а не медіа по вікну. */

/* назва — рівно 2 рядки в усіх картках */
body.jo-rd #content .product-grid .product .name{min-height:40px!important;height:40px!important;overflow:hidden;}
body.jo-rd .product-grid .product .name a{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  padding-left:0!important;padding-right:0!important;margin-left:0!important;text-indent:0!important;}

/* без тіні при наведенні на картку */
body.jo-rd #content .product-grid .product:hover,
body.jo-rd #content .product-grid .cols:hover .product,
body.jo-rd .category-slide .item:hover,
body.jo-rd .item:hover,
body.jo-rd .owl-item:hover .item{box-shadow:none!important;}

@supports (container-type: inline-size){
  body.jo-rd #content .product-grid .product .product-about{container-type:inline-size;container-name:jocard;}

  body.jo-rd #content .product-grid .product .price,
  body.jo-rd #content .product-grid .product .price.product-grid{flex-wrap:nowrap!important;align-items:baseline!important;
    gap:8px!important;min-height:24px!important;min-width:0;}
  body.jo-rd #content .product-grid .product .price .jo-price-main{white-space:nowrap!important;flex:0 0 auto;}
  body.jo-rd #content .product-grid .product .price .jo-price-opt{white-space:nowrap!important;flex:0 0 auto;margin-top:0!important;}

  /* колонка ≤240px — тісно для 14px */
  @container jocard (max-width:240px){
    body.jo-rd #content .product-grid .product .price,
    body.jo-rd #content .product-grid .product .price.product-grid{gap:6px!important;}
    body.jo-rd #content .product-grid .product .price .jo-price-opt{font-size:13px;}
  }
  /* колонка ≤212px — типовий desktop 1440 / великий телефон */
  @container jocard (max-width:212px){
    body.jo-rd #content .product-grid .product .price,
    body.jo-rd #content .product-grid .product .price.product-grid{gap:5px!important;}
    body.jo-rd #content .product-grid .product .price .jo-price-main{font-size:18px;line-height:22px;}
    body.jo-rd #content .product-grid .product .price .jo-price-opt{font-size:12px;}
  }
  /* колонка ≤196px — 375px моб і 4-колонковий планшет */
  @container jocard (max-width:196px){
    body.jo-rd #content .product-grid .product .price,
    body.jo-rd #content .product-grid .product .price.product-grid{gap:4px!important;}
    body.jo-rd #content .product-grid .product .price .jo-price-main{font-size:17px;line-height:21px;}
    body.jo-rd #content .product-grid .product .price .jo-price-opt{font-size:11px;}
  }
  /* вужче 166px (320px екран) фізично не вміщає рядок — тоді рівна колонка в усіх картках */
  @container jocard (max-width:166px){
    body.jo-rd #content .product-grid .product .price,
    body.jo-rd #content .product-grid .product .price.product-grid{flex-direction:column!important;align-items:flex-start!important;gap:2px!important;min-height:46px!important;}
    body.jo-rd #content .product-grid .product .price .jo-price-opt{text-align:left!important;font-size:12px;}
  }
}

/* ================= Бейдж NEW на нових товарах ================= */
/* Стікери проставлені клієнтом в адмінці (oc_product.product_stickers), редизайн їх ховав.
   Показуємо лише стікер-новинку; знижковий .sticker (-N%) лишається схованим за макетом. */
body.jo-rd .product-grid .product .sticker-box-cat,
body.jo-rd .item .sticker-box-cat,
body.jo-rd .product-box-item .sticker-box-cat{display:block!important;position:absolute;top:10px;left:10px;z-index:3;pointer-events:none;
  background:none!important;border-radius:0!important;width:auto!important;height:auto!important;min-width:0!important;min-height:0!important;padding:0!important;box-shadow:none!important;text-align:left!important;line-height:normal!important;}

body.jo-rd .product-grid .product .sticker-box-cat .stickers-cat,
body.jo-rd .item .sticker-box-cat .stickers-cat,
body.jo-rd .product-box-item .sticker-box-cat .stickers-cat{display:inline-block!important;background:var(--jo-teal);
  font-family:var(--jo-cond);font-size:11px;font-weight:700;line-height:1;letter-spacing:.6px;text-transform:uppercase;
  padding:5px 9px;border-radius:2px;white-space:nowrap;border:0;box-shadow:none;}

body.jo-rd .item .product-box-item .swiper-slide{position:relative;}