/* KenanBey 1.0.0 — Journal 3.1.8 appearance layer.
 * No filter is applied to photographs, banners, logos or icons.
 * Light mode falls back to the original Journal design and stored settings.
 */
html.kb-dark {
  color-scheme: dark;
  --kb-bg: #0c1018;
  --kb-surface: #151b26;
  --kb-raised: #1c2533;
  --kb-border: #344155;
  --kb-text: #f3f6fc;
  --kb-muted: #b7c0cf;
  --kb-accent: #f68428;
  --kb-gold: #fdc22d;
  background-color: var(--kb-bg) !important;
}
html.kb-dark body, html.kb-dark .site-wrapper, html.kb-dark #content {
  background-color: var(--kb-bg) !important;
  color: var(--kb-text) !important;
}
html.kb-dark .site-wrapper > .container,
html.kb-dark .site-wrapper .container,
html.kb-dark .site-wrapper .top-row,
html.kb-dark .site-wrapper .bottom-row,
html.kb-dark .site-wrapper .module-body,
html.kb-dark .site-wrapper .grid-row,
html.kb-dark .site-wrapper .grid-col,
html.kb-dark .site-wrapper .grid-items,
html.kb-dark .site-wrapper .grid-item,
html.kb-dark .site-wrapper .main-content,
html.kb-dark .site-wrapper .main-column,
html.kb-dark .site-wrapper .main-wrapper,
html.kb-dark #common-home {
  background-color: var(--kb-bg) !important;
  color: var(--kb-text) !important;
}
html.kb-dark .site-wrapper .banner-caption,
html.kb-dark .site-wrapper .banner-text,
html.kb-dark .site-wrapper [class^="banner-caption-"],
html.kb-dark .site-wrapper [class^="banner-caption-"] > span,
html.kb-dark .site-wrapper .info-block-title,
html.kb-dark .site-wrapper .info-block-text,
html.kb-dark .site-wrapper .title-text { color: var(--kb-text) !important; }
html.kb-dark .site-wrapper .mobile-bar,
html.kb-dark .site-wrapper .mobile-logo-wrapper,
html.kb-dark .site-wrapper .mobile-search-group,
html.kb-dark .site-wrapper .search-button {
  background-color: var(--kb-surface) !important;
  color: var(--kb-text) !important;
}
html.kb-dark .site-wrapper .menu-trigger button,
html.kb-dark .site-wrapper .mini-cart > .cart-heading,
html.kb-dark .site-wrapper .mini-cart > .cart-heading .cart-total,
html.kb-dark .site-wrapper .mini-cart > .cart-heading .cart-icon,
html.kb-dark .site-wrapper .mini-cart > .cart-heading .cart-text,
html.kb-dark .site-wrapper .mini-cart > .cart-heading::before,
html.kb-dark .site-wrapper .mobile-cart-wrapper button { color: var(--kb-text) !important; }
html.kb-dark .site-wrapper #cart-total,
html.kb-dark .site-wrapper .cart-heading > i,
html.kb-dark .site-wrapper .cart-heading > i::before,
html.kb-dark .site-wrapper .mini-cart .cart-heading::before,
html.kb-dark .site-wrapper .menu-trigger::before,
html.kb-dark .site-wrapper .menu-trigger > a::before,
html.kb-dark .site-wrapper .menu-trigger button::before,
html.kb-dark .site-wrapper .menu-trigger button::after,
html.kb-dark .site-wrapper .mobile-custom-menu::before { color: var(--kb-text) !important; }
html.kb-dark .site-wrapper header,
html.kb-dark .site-wrapper .header-top,
html.kb-dark .site-wrapper .header-mid,
html.kb-dark .site-wrapper .header-bottom,
html.kb-dark .site-wrapper .top-bar,
html.kb-dark .site-wrapper .top-menu,
html.kb-dark .site-wrapper .desktop-main-menu-wrapper,
html.kb-dark .site-wrapper .mobile-header,
html.kb-dark .site-wrapper .mobile-top-bar,
html.kb-dark .site-wrapper .mobile-main-menu-wrapper,
html.kb-dark .site-wrapper .mobile-bottom-bar,
html.kb-dark .site-wrapper .main-menu,
html.kb-dark .site-wrapper .main-menu > ul,
html.kb-dark .site-wrapper .main-menu > ul > li > a,
html.kb-dark .site-wrapper .mega-menu,
html.kb-dark .site-wrapper .mega-menu-content,
html.kb-dark .site-wrapper .dropdown-menu,
html.kb-dark .mobile-container,
html.kb-dark .mobile-wrapper-header,
html.kb-dark .mobile-filter-wrapper,
html.kb-dark .mobile-cart-content-wrapper,
html.kb-dark .mobile-main-menu-wrapper,
html.kb-dark .mobile-container .main-menu,
html.kb-dark .mobile-container .main-menu ul,
html.kb-dark .mobile-container .main-menu li > a,
html.kb-dark .cart-content,
html.kb-dark .site-wrapper .cart-content,
html.kb-dark .site-wrapper .search-result {
  background-color: var(--kb-surface) !important;
  color: var(--kb-text) !important;
  border-color: var(--kb-border) !important;
}
html.kb-dark .site-wrapper header a,
html.kb-dark .site-wrapper header .links-text,
html.kb-dark .site-wrapper header .cart-total,
html.kb-dark .site-wrapper header .cart-text,
html.kb-dark .site-wrapper .main-menu a,
html.kb-dark .mobile-container a,
html.kb-dark .mobile-container .links-text,
html.kb-dark .dropdown-menu a,
html.kb-dark .cart-content a,
html.kb-dark .cart-content td,
html.kb-dark .search-result a,
html.kb-dark .language-currency button { color: var(--kb-text) !important; }
html.kb-dark .site-wrapper .main-menu a:hover,
html.kb-dark .site-wrapper .dropdown-menu a:hover,
html.kb-dark .mobile-container .main-menu a:hover { background-color: var(--kb-raised) !important; color: var(--kb-gold) !important; }
html.kb-dark .site-wrapper .breadcrumbs,
html.kb-dark .site-wrapper .breadcrumb {
  background-color: var(--kb-bg) !important;
  border-color: var(--kb-border) !important;
  color: var(--kb-muted) !important;
}
html.kb-dark .site-wrapper .breadcrumb a { color: var(--kb-muted) !important; }
html.kb-dark .site-wrapper .title,
html.kb-dark .site-wrapper .page-title,
html.kb-dark #content h1,
html.kb-dark #content h2,
html.kb-dark #content h3,
html.kb-dark #content h4,
html.kb-dark #content legend,
html.kb-dark #content label,
html.kb-dark #content .control-label { color: var(--kb-text) !important; border-color: var(--kb-border) !important; }
html.kb-dark .site-wrapper .product-thumb,
html.kb-dark .site-wrapper .product-thumb .caption,
html.kb-dark .site-wrapper .product-thumb .buttons-wrapper,
html.kb-dark .site-wrapper .product-info .product-details,
html.kb-dark .site-wrapper .product-info .product-options,
html.kb-dark .site-wrapper .side-column,
html.kb-dark .site-wrapper .module-filter,
html.kb-dark .site-wrapper .filter-panel,
html.kb-dark .site-wrapper .filter-panel .panel-body,
html.kb-dark .site-wrapper .panel,
html.kb-dark .site-wrapper .panel-heading,
html.kb-dark .site-wrapper .panel-body,
html.kb-dark .site-wrapper .well,
html.kb-dark .site-wrapper .list-group-item,
html.kb-dark .site-wrapper .refine-categories,
html.kb-dark .site-wrapper .products-filter,
html.kb-dark .site-wrapper .pagination-results,
html.kb-dark .site-wrapper .quick-checkout-wrapper,
html.kb-dark .site-wrapper .quick-checkout .section,
html.kb-dark .site-wrapper .quick-checkout .section-body,
html.kb-dark .site-wrapper .quick-checkout .section-title,
html.kb-dark .site-wrapper .blog-post,
html.kb-dark .site-wrapper .post-details,
html.kb-dark .site-wrapper .post-comments {
  background-color: var(--kb-surface) !important;
  color: var(--kb-text) !important;
  border-color: var(--kb-border) !important;
}
html.kb-dark .site-wrapper .product-thumb .name a,
html.kb-dark .site-wrapper .product-thumb .description,
html.kb-dark .site-wrapper .product-info .description,
html.kb-dark .site-wrapper .product-info .product-stats,
html.kb-dark .site-wrapper .product-info .product-stats a,
html.kb-dark .site-wrapper .product-info .rating a,
html.kb-dark .site-wrapper .product-info .price,
html.kb-dark .site-wrapper .product-thumb .price,
html.kb-dark .site-wrapper .product-thumb .price-new,
html.kb-dark .site-wrapper .product-info .price-new,
html.kb-dark .site-wrapper .filter-panel,
html.kb-dark .site-wrapper .list-group-item,
html.kb-dark .site-wrapper .well a,
html.kb-dark .site-wrapper .panel-title a { color: var(--kb-text) !important; }
html.kb-dark .site-wrapper .price-old,
html.kb-dark .site-wrapper .price-tax,
html.kb-dark .site-wrapper .product-info .product-stats b,
html.kb-dark .site-wrapper .product-thumb .stats,
html.kb-dark #content .help-block,
html.kb-dark #content small { color: var(--kb-muted) !important; }
html.kb-dark #content a:not(.btn):not(.btn-primary):not(.btn-cart):not(.button):not(.list-group-item):not(.product-img),
html.kb-dark .site-wrapper .post-details a { color: var(--kb-gold); }
html.kb-dark .site-wrapper .form-control,
html.kb-dark .site-wrapper input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
html.kb-dark .site-wrapper select,
html.kb-dark .site-wrapper textarea,
html.kb-dark .mobile-container .form-control,
html.kb-dark .popup-container .form-control,
html.kb-dark .modal .form-control {
  background-color: var(--kb-bg) !important;
  color: var(--kb-text) !important;
  border-color: var(--kb-border) !important;
}
html.kb-dark input::placeholder, html.kb-dark textarea::placeholder { color: var(--kb-muted) !important; opacity: 1; }
html.kb-dark input[type=checkbox], html.kb-dark input[type=radio] { accent-color: var(--kb-accent); }
html.kb-dark .site-wrapper .btn-primary,
html.kb-dark .site-wrapper .btn-cart,
html.kb-dark .site-wrapper #button-cart,
html.kb-dark .site-wrapper .btn-checkout,
html.kb-dark .site-wrapper #button-confirm {
  background: var(--kb-accent) !important;
  color: #131820 !important;
  border-color: var(--kb-accent) !important;
}
html.kb-dark .site-wrapper .btn-primary:hover,
html.kb-dark .site-wrapper .btn-cart:hover,
html.kb-dark .site-wrapper #button-cart:hover { background: #ffae66 !important; border-color: #ffae66 !important; }
html.kb-dark .site-wrapper .btn-default,
html.kb-dark .site-wrapper .btn-wishlist,
html.kb-dark .site-wrapper .btn-compare,
html.kb-dark .site-wrapper .input-group-addon {
  background-color: var(--kb-raised) !important;
  border-color: var(--kb-border) !important;
  color: var(--kb-text) !important;
}
html.kb-dark .site-wrapper .table,
html.kb-dark .site-wrapper .table > tbody > tr > td,
html.kb-dark .site-wrapper .table > thead > tr > td,
html.kb-dark .site-wrapper .table > thead > tr > th,
html.kb-dark .site-wrapper .table > tfoot > tr > td,
html.kb-dark .site-wrapper .table-responsive {
  background-color: var(--kb-surface) !important;
  color: var(--kb-text) !important;
  border-color: var(--kb-border) !important;
}
html.kb-dark .site-wrapper .table-striped > tbody > tr:nth-of-type(odd) > td,
html.kb-dark .site-wrapper .table > thead > tr > th { background-color: var(--kb-raised) !important; }
html.kb-dark .site-wrapper .table a { color: var(--kb-gold) !important; }
html.kb-dark .site-wrapper .pagination > li > a,
html.kb-dark .site-wrapper .pagination > li > span,
html.kb-dark .site-wrapper .nav-tabs > li > a {
  background-color: var(--kb-surface) !important;
  border-color: var(--kb-border) !important;
  color: var(--kb-text) !important;
}
html.kb-dark .site-wrapper .pagination > .active > span,
html.kb-dark .site-wrapper .nav-tabs > li.active > a { color: var(--kb-gold) !important; background-color: var(--kb-raised) !important; }
html.kb-dark .site-wrapper .tab-content { background-color: var(--kb-surface) !important; color: var(--kb-text) !important; border-color: var(--kb-border) !important; }
html.kb-dark .site-wrapper footer,
html.kb-dark .site-wrapper footer .grid-row,
html.kb-dark .site-wrapper footer .grid-col,
html.kb-dark .site-wrapper footer .grid-items,
html.kb-dark .site-wrapper footer .grid-item,
html.kb-dark .site-wrapper .bottom-menu,
html.kb-dark .site-wrapper .footer-bottom {
  background-color: var(--kb-surface) !important;
  border-color: var(--kb-border) !important;
  color: var(--kb-text) !important;
}
html.kb-dark .site-wrapper footer a,
html.kb-dark .site-wrapper footer p,
html.kb-dark .site-wrapper footer .links-text,
html.kb-dark .site-wrapper footer .title { color: var(--kb-text) !important; }
html.kb-dark .site-wrapper footer a:hover { color: var(--kb-gold) !important; }
html.kb-dark .modal-content,
html.kb-dark .modal-header,
html.kb-dark .modal-footer,
html.kb-dark .popup-container,
html.kb-dark .popup-content,
html.kb-dark .notification,
html.kb-dark .notification-content,
html.kb-dark .notification-text,
html.kb-dark .notification-title {
  background-color: var(--kb-raised) !important;
  border-color: var(--kb-border) !important;
  color: var(--kb-text) !important;
}
html.kb-dark .close { color: var(--kb-text) !important; text-shadow: none !important; opacity: .9; }
html.kb-dark .alert-success { background: #183626 !important; color: #b6f0c9 !important; border-color: #356848 !important; }
html.kb-dark .alert-danger, html.kb-dark .text-danger { color: #ffb6b6 !important; }
html.kb-dark .alert-danger { background: #402429 !important; border-color: #875059 !important; }
html.kb-dark .alert-info { background: #1b3146 !important; color: #c4e6ff !important; border-color: #375d80 !important; }
html.kb-dark .alert-warning { background: #3e321b !important; color: #ffe0a3 !important; border-color: #806731 !important; }
html.kb-dark :focus-visible { outline: 2px solid var(--kb-gold) !important; outline-offset: 3px; }
#kb-appearance {
  position: fixed;
  right: 14px;
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 950;
  display: flex;
  gap: 3px;
  padding: 5px;
  background: #ffffff;
  color: #1b2433;
  border: 1px solid #c4ccd8;
  border-radius: 28px;
  box-shadow: 0 5px 22px #00000026;
  font: 12px/1.2 Arial, sans-serif;
}
#kb-appearance .kb-theme-option {
  appearance: none;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: inherit;
  min-height: 44px;
  padding: 8px 12px;
  font: inherit;
  cursor: pointer;
}
#kb-appearance .kb-theme-option[aria-pressed=true] { background: #202a3b; color: #ffffff; }
html.kb-dark #kb-appearance { background: var(--kb-raised); color: var(--kb-text); border-color: var(--kb-border); }
html.kb-dark #kb-appearance .kb-theme-option[aria-pressed=true] { background: var(--kb-gold); color: #131820; }
#kb-appearance .kb-theme-option:focus-visible { outline: 2px solid #a66800; outline-offset: 1px; }
html.kb-native-app #kb-appearance { display: none; }
@media (max-width: 767px) {
  #kb-appearance { right: 8px; bottom: calc(70px + env(safe-area-inset-bottom)); font-size: 11px; }
  #kb-appearance .kb-theme-option { padding-inline: 10px; }
  html.kb-dark .site-wrapper .swiper-slide [class^="banner-caption-"],
  html.kb-dark .site-wrapper .swiper-slide [class^="banner-caption-"] > span { white-space: normal !important; overflow-wrap: break-word; font-size: 12px !important; line-height: 1.35 !important; }
}
@media (prefers-reduced-motion: reduce) { #kb-appearance, #kb-appearance * { transition: none !important; } }
@media print {
  #kb-appearance { display: none !important; }
  html.kb-dark, html.kb-dark body, html.kb-dark .site-wrapper, html.kb-dark #content { background: #ffffff !important; color: #000000 !important; }
}
