/* ===== 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){
  /* top utility strip (language/currency) -> merge visually into header, light */
  body.jo-rd .top-panel{background:#fff!important;border-bottom:0;min-height:0;}
  body.jo-rd .top-panel .container{max-width:1320px;}
  body.jo-rd .top-panel .settings,body.jo-rd .top-panel .settings span,body.jo-rd .top-panel a{color:var(--jo-black)!important;font-family:var(--jo-sans);}
  body.jo-rd .top-panel .icon-bar{display:none;}

  /* header row: logo | phones | schedule | cart */
  body.jo-rd header.row{background:#fff;}
  body.jo-rd header.row .container{max-width:1320px;display:flex;align-items:center;padding-top:14px;padding-bottom:14px;}
  body.jo-rd header.row .container>div{float:none!important;width:auto!important;padding:0;}
  body.jo-rd .header_logo img{max-height:38px;width:auto;}
  body.jo-rd #contacts{margin-left:40px;}
  body.jo-rd #contacts #phone a{color:var(--jo-black)!important;font-size:15px;font-weight:500;line-height:1.35;}
  body.jo-rd #contacts .contacts-fa{color:var(--jo-black);}
  body.jo-rd #shedule{margin-left:auto;margin-right:24px;color:var(--jo-grey)!important;font-size:14px;}
  body.jo-rd #shedule i{color:var(--jo-black);}
  body.jo-rd #right-block{color:var(--jo-black);}
  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;}
}

/* logo -> black Cormorant wordmark (desktop) */
@media (min-width:992px){
  body.jo-rd .header_logo{line-height:1;}
  body.jo-rd .header_logo img{display:none;}
  body.jo-rd .header_logo{position:relative;}
  body.jo-rd .header_logo:before{content:"JOANNA";font-family:var(--jo-serif);font-weight:700;font-size:34px;letter-spacing:3px;color:var(--jo-ink);text-transform:uppercase;display:block;}
  body.jo-rd .header_logo:after{content:"коллекция для всей семьи";font-family:var(--jo-sans);font-size:9px;letter-spacing:2px;color:var(--jo-grey);text-transform:uppercase;display:block;margin-top:2px;}
  html[lang="uk"] body.jo-rd .header_logo:after{content:"колекція для всієї родини";}
}

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

/* =========================================================
   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;}
  body.jo-rd .jo-hero-ov__inner{position:absolute;left:calc(max(0px,(100% - 1320px)/2) + 43px);top:172px;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:18px;letter-spacing:1.4px;text-transform:uppercase;color:var(--jo-ink);margin:22px 0 0;}
  body.jo-rd .jo-hero-ov__btn{margin-top:34px;}

  /* trust badges (first .container inside .box-main) -> thin bar pinned on hero bottom */
  body.jo-rd #content .box-main>.container:first-child{position:absolute;top:590px;left:0;width:100%;z-index:6;display:flex;justify-content:center;align-items:center;background:transparent!important;padding:0;height:56px;max-width:none;}
  body.jo-rd #content .box-main>.container:first-child .block_ico{width:auto!important;float:none!important;border:0!important;padding:0 20px!important;position:relative;background:transparent!important;font-family:var(--jo-sans);font-size:14px;color:var(--jo-ink)!important;text-transform:none!important;display:flex;align-items:center;min-height:0!important;}
  body.jo-rd #content .box-main>.container:first-child .block_ico:not(:last-child):after{content:"";position:absolute;right:0;top:50%;width:24px;height:1px;background:rgba(57,57,57,.45);transform:translateY(-50%);}
  body.jo-rd #content .box-main>.container:first-child .block_ico i,
  body.jo-rd #content .box-main>.container:first-child .block_ico .fa{display:none;}
  body.jo-rd #content .box-main>.container:first-child .block_ico a,
  body.jo-rd #content .box-main>.container:first-child .block_ico span{color:var(--jo-ink)!important;}
}

/* =========================================================
   MENU BAR
   ========================================================= */
@media (min-width:992px){
  body.jo-rd nav#megamenu-menu.navbar{background:#fff!important;border-top:1px solid var(--jo-border);border-bottom:1px solid var(--jo-border);min-height:0;margin:0;}
  body.jo-rd #megamenu-menu .navbar-collapse>.container{max-width:1320px;}
  body.jo-rd #megamenu-menu .nav.navbar-nav{display:flex;gap:44px;}
  body.jo-rd #megamenu-menu .nav>li>a{color:var(--jo-black)!important;font-family:var(--jo-sans);font-weight:400;font-size:15px;text-transform:none;padding:19px 0;background:transparent!important;}
  body.jo-rd #megamenu-menu .nav>li:hover>a,body.jo-rd #megamenu-menu .nav>li>a:hover{color:var(--jo-teal)!important;}
  /* search on the right */
  body.jo-rd nav#megamenu-menu{position:relative;}
  body.jo-rd #megamenu-menu #search{position:absolute;right:max(15px,calc((100% - 1320px)/2 + 5px));top:12px;}
  body.jo-rd #megamenu-menu .sb-search .sb-icon-search{color:var(--jo-black);}
}

/* =========================================================
   PRODUCT SECTIONS (news-set carousels)
   ========================================================= */
body.jo-rd .news-set{max-width:1320px;margin:0 auto;padding:56px 12px 0;}
body.jo-rd .news-set.center{text-align:left;}
body.jo-rd .news-set .inner{position:relative;border-bottom:1px solid #eaeaea;padding-bottom:18px;margin-bottom:28px;}
body.jo-rd .news-set .inner>span{font-family:var(--jo-serif)!important;font-weight:700;font-size:40px;line-height:1;text-transform:uppercase;color:var(--jo-ink);letter-spacing:.5px;}
body.jo-rd .news-set .owl-nav{position:absolute;right:0;top:6px;display:flex;gap:12px;}
body.jo-rd .news-set .owl-nav>div{width:44px;height:44px;border:1px solid var(--jo-border);border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff!important;color:var(--jo-black);margin:0;}
body.jo-rd .news-set .owl-nav>div:hover{border-color:var(--jo-teal);color:var(--jo-teal);}

/* ---- 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 8px;min-height:34px;}
body.jo-rd .item .name a{color:var(--jo-grey)!important;font-size:13px;font-weight:400;line-height:1.4;text-transform:none;}
body.jo-rd .item .price{font-family:var(--jo-sans);}
body.jo-rd .item .price.product-grid{color:var(--jo-ink)!important;font-size:16px;font-weight:700;line-height:1.5;}
body.jo-rd .item .price.product-grid span{color:var(--jo-teal)!important;}
body.jo-rd .item .price .price-new,body.jo-rd .item .price-new{color:var(--jo-ink)!important;font-size:20px;font-weight:700;}
body.jo-rd .item .price .price-old,body.jo-rd .item .price-old{color:var(--jo-grey)!important;text-decoration:line-through;font-size:14px;font-weight:400;}
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 (dark)
   ========================================================= */
body.jo-rd footer .footer-top,body.jo-rd footer .footer-middle{background:var(--jo-black)!important;}
body.jo-rd footer{background:var(--jo-black);}
body.jo-rd footer .footer-top{padding:56px 0;}
body.jo-rd footer .footer-middle ul>li>a,body.jo-rd footer .footer-middle ul>li>a:visited,
body.jo-rd footer .contacts ul li,body.jo-rd footer .contacts ul li a,
body.jo-rd footer p.subscribe,body.jo-rd footer .socials a,
body.jo-rd .terms-footer-block,body.jo-rd .terms-footer-block a,
body.jo-rd footer .about p,body.jo-rd footer .about p a{color:#e6e6e6!important;font-size:14px;}
body.jo-rd footer .footer-middle ul>li>a:hover{color:var(--jo-teal)!important;}
body.jo-rd footer .oct-footer-h3,body.jo-rd footer .top-f.oct-footer-h3{color:#fff!important;font-family:var(--jo-sans);font-weight:600;font-size:16px;text-transform:none;}
body.jo-rd #powered{background:var(--jo-black)!important;border-top:1px solid rgba(255,255,255,.08);}
body.jo-rd #powered .copyright,body.jo-rd #powered .copyright a{color:#9a9a9a!important;font-size:12px;}

/* =========================================================
   PRODUCT PAGE
   ========================================================= */
body.jo-rd .product-info{padding-top:8px;}
body.jo-rd .product-info .top-info-product h1{font-family:var(--jo-sans);font-weight:600;font-size:26px;line-height:1.25;text-transform:none;color:var(--jo-ink);margin:0 0 12px;}
body.jo-rd .product-info .description{color:var(--jo-black);font-size:14px;}
body.jo-rd .product-info .description .marked{color:var(--jo-grey);}
body.jo-rd .product-info .description font{font-family:var(--jo-sans)!important;}
/* price */
body.jo-rd .product-info .price{margin:18px 0;}
body.jo-rd .product-info .price .price-new{color:var(--jo-ink)!important;font-size:28px;font-weight:700;font-family:var(--jo-sans);}
body.jo-rd .product-info .price .reward-product{color:var(--jo-grey)!important;font-size:15px;margin-top:6px;}
body.jo-rd .product-info .price .reward-product span{color:var(--jo-teal)!important;}
body.jo-rd .product-info .price .discount-help{color:var(--jo-grey)!important;}
body.jo-rd .product-info .availabil{display:none;}
/* size table link */
body.jo-rd .product-right a[href="#size-popup"],body.jo-rd .product-right .size-link{color:var(--jo-ink);border-bottom:1px solid var(--jo-border);}
/* selects */
body.jo-rd .product-right .form-control,body.jo-rd .product-right select.form-control{height:48px;border:1px solid var(--jo-border)!important;border-radius:2px;background:#fff;color:var(--jo-ink);font-size:15px;padding:0 16px;box-shadow:none;}
body.jo-rd .product-right .form-group label,body.jo-rd .product-right .control-label{color:var(--jo-black);font-weight:500;}
/* qty stepper */
body.jo-rd .product-right .cart .number{border:1px solid var(--jo-border);border-radius:2px;overflow:hidden;height:48px;display:inline-flex;align-items:center;}
body.jo-rd .product-right .cart .number .btn-plus button,
body.jo-rd .product-right .cart .number .btn-minus button{background:#fff!important;color:var(--jo-ink)!important;border:0;width:38px;height:46px;box-shadow:none;}
body.jo-rd .product-right .cart .number input[type="text"],
body.jo-rd .product-right .cart .number .form-control{border:0!important;text-align:center;width:44px;height:46px;box-shadow:none;font-weight:600;}
/* buy button */
body.jo-rd .product-right .cart .button,
body.jo-rd .product-right .cart .oct-button,
body.jo-rd .product-right #button-cart,
body.jo-rd .product-right .cart [onclick*="cart"]:not(button){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;}
/* tabs */
body.jo-rd .tabs-box .nav-tabs{border-bottom:1px solid var(--jo-border);}
body.jo-rd .tabs-box .nav-tabs>li>a{color:var(--jo-grey);font-family:var(--jo-sans);text-transform:none;border:0;font-size:15px;}
body.jo-rd .tabs-box .nav-tabs>li.active>a{color:var(--jo-ink);border:0;border-bottom:2px solid var(--jo-teal);background:transparent;}
body.jo-rd .tabs-box #review-title,body.jo-rd .tabs-box h2{font-family:var(--jo-serif);font-weight:700;text-transform:uppercase;color:var(--jo-ink);font-size:24px;}
body.jo-rd .tabs-box .rew-form input.form-control,body.jo-rd .tabs-box .rew-form textarea.form-control{border:1px solid var(--jo-border);border-radius:2px;box-shadow:none;}
body.jo-rd #button-review,body.jo-rd .tabs-box [id*="review"] .button,body.jo-rd .tabs-box button[type="submit"]{background:var(--jo-teal)!important;color:#fff!important;border:0;font-family:var(--jo-cond);text-transform:uppercase;}

/* =========================================================
   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);}
/* 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)
   ========================================================= */
@media (max-width:991px){
  /* 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: clean bg + overlay */
  body.jo-rd #content .box .banner .owl-item,
  body.jo-rd #content .box .image-hover-effect{height:300px!important;}
  body.jo-rd #content .box .image-hover-effect{background:url(../images/joanna-hero.jpg) 72% top/cover no-repeat;}
  body.jo-rd #content .box .owl-item img{opacity:0;height:300px;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:300px;z-index:5;pointer-events:none;}
  body.jo-rd .jo-hero-ov__inner{position:absolute;left:18px;top:44px;pointer-events:auto;}
  body.jo-rd .jo-hero-ov__title{font-family:var(--jo-serif);font-weight:700;font-size:44px;line-height:.88;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:13px;letter-spacing:1px;text-transform:uppercase;color:var(--jo-ink);margin:12px 0 0;}
  body.jo-rd .jo-hero-ov__btn{margin-top:18px;min-width:200px;height:44px;font-size:14px;}

  /* hide lone section titles (carousels are hidden on mobile by theme) + desktop badges dup */
  body.jo-rd #content .box-main .news-set{display:none;}
  body.jo-rd #content .box-main>.container:first-child{display:none;}

  /* hero scrim for text legibility */
  body.jo-rd #content .box .image-hover-effect{position:relative;}
  body.jo-rd #content .box .image-hover-effect:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(247,247,247,.85) 0%,rgba(247,247,247,.35) 42%,rgba(247,247,247,0) 68%);z-index:1;}
  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);}
}