/* ==========================================================================
   Jewelkin theme layer
   Visual restyle only — no markup behaviour, routes or JS hooks depend on
   anything in this file. Loaded last so it overrides common.css / product.css.
   ========================================================================== */

:root {
  --jk-gold: #daa14c;
  --jk-gold-dark: #c48c39;
  --jk-cream: #fcf8f5;
  --jk-white: #ffffff;
  --jk-ink: #30373e;
  --jk-ink-strong: #231f20;
  --jk-body: #777777;
  --jk-border: #e5e5e5;
  --jk-star: #f2b600;
  --jk-muted: #9a9a9a;

  --jk-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --jk-section-gap: 70px;
}

/* --------------------------------------------------------------------------
   1. Foundations
   -------------------------------------------------------------------------- */

body {
  font-family: var(--jk-font) !important;
  background: var(--jk-cream) !important;
  color: var(--jk-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

body.bg-white {
  background: var(--jk-cream) !important;
}

h1, h2, h3, h4, h5, h6,
.heading-lg, .heading-md, .heading-sm,
.prod-title, .footer-heading, .chat-section-title {
  font-family: var(--jk-font) !important;
  color: var(--jk-ink);
  font-weight: 500;
}

a {
  color: var(--jk-ink);
  text-decoration: none;
  transition: color .25s ease;
}

a:hover {
  color: var(--jk-gold) !important;
}

/* Flat, square, shadowless — the defining trait of the reference design. */
.product-box, .catebox, .brandbox, .blog-box, .blog-right-box, .panel-box,
.card, .form-control, .btn, .button-block, .latest-badge, .quickview,
.banner-slide, .img-round, .order-box, .checkout-box, .shopping-box,
input, select, textarea, .modal-content {
  border-radius: 0 !important;
  box-shadow: none !important;
}

@media (min-width: 1200px) {
  /* common.css pins these to a fixed pixel width; the reference layout is wider. */
  .otrixcontainer {
    width: 100% !important;
    max-width: 1320px !important;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* --------------------------------------------------------------------------
   2. Buttons
   -------------------------------------------------------------------------- */

.button-block, [class*="button-"], .btn-subscribe, .submitbtn,
.quantity-wrap .add-to-cart, .btn-add-address {
  background: var(--jk-gold) !important;
  border: 1px solid var(--jk-gold) !important;
  color: #fff !important;
  font-family: var(--jk-font) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 13px 32px !important;
  border-radius: 0 !important;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.button-block:hover, [class*="button-"]:hover, .btn-subscribe:hover,
.submitbtn:hover, .quantity-wrap .add-to-cart:hover {
  background: var(--jk-ink) !important;
  border-color: var(--jk-ink) !important;
  color: #fff !important;
}

/* The hero CTA in the reference is solid dark, not gold. */
.banner-contain .button-block {
  background: var(--jk-ink) !important;
  border-color: var(--jk-ink) !important;
}

.banner-contain .button-block:hover {
  background: var(--jk-gold) !important;
  border-color: var(--jk-gold) !important;
}

.button-gray {
  background: var(--jk-white) !important;
  border: 1px solid var(--jk-border) !important;
  color: var(--jk-ink) !important;
}

.button-gray:hover {
  background: var(--jk-gold) !important;
  border-color: var(--jk-gold) !important;
  color: #fff !important;
}

/* Kill the legacy sweep-in pseudo element so flat colours stay flat. */
[class*="button-"]:before,
.add-to-cart:before {
  display: none !important;
}

/* --------------------------------------------------------------------------
   3. Announcement bar
   -------------------------------------------------------------------------- */

.signup_discount {
  background: var(--jk-cream) !important;
  border-bottom: 1px solid var(--jk-border);
  padding: 11px 15px;
  text-align: center;
}

.signup_discount .signupoffertxt,
.signup_discount .signupoffertxt a,
.signup_discount .text-white {
  color: var(--jk-ink) !important;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .01em;
}

.signup_discount .signupoffertxt a {
  text-decoration: underline;
}

.signup_discount .signupoffertxt a:hover {
  color: var(--jk-gold) !important;
}

/* --------------------------------------------------------------------------
   4. Header
   -------------------------------------------------------------------------- */

.mainheader {
  background: var(--jk-cream);
  border-bottom: 1px solid var(--jk-border);
}

#header_sticky {
  background: var(--jk-cream);
}

.desktop-header .head-center {
  display: flex;
  align-items: center;
  flex-wrap: nowrap; /* keep logo | nav | actions on one line */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  min-height: 92px;
}

.desktop-header .head-center > .logo-left {
  flex: 0 0 auto;
  width: auto;
  max-width: 230px;
}

.desktop-header .head-center > .jk-nav {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.desktop-header .head-center > div:last-child {
  flex: 0 0 auto;
  width: auto;
  white-space: nowrap;
}

.logo-left .logo {
  max-height: 110px;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

/* Header action icons — the reference drops the text labels. */
.desktop-header .menu-icon-text {
  display: none !important;
}

.desktop-header .e-cart {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 22px;
  color: var(--jk-ink);
}

.desktop-header .e-cart .cart-bar {
  position: relative;
}

.desktop-header .e-cart img {
  height: 21px;
  width: 21px;
  opacity: .85;
}

.cart-count {
  background: var(--jk-gold) !important;
  color: #fff !important;
  font-size: 10px;
  font-weight: 500;
  line-height: 17px;
  height: 17px;
  min-width: 17px;
  border-radius: 50%;
  text-align: center;
  position: absolute;
  top: -9px;
  right: -10px;
  display: inline-block;
}

/* Search trigger sits inline with the other header icons. */
.jk-search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  color: var(--jk-ink);
  font-size: 18px;
  cursor: pointer;
}

.jk-search-toggle:hover {
  color: var(--jk-gold);
}

/* Search overlay revealed by the icon */
.jk-search-panel {
  display: none;
  background: var(--jk-cream);
  border-top: 1px solid var(--jk-border);
  padding: 26px 0;
}

.jk-search-panel.is-open {
  display: block;
}

.jk-search-panel .expanding-search-form {
  position: relative;
  display: flex;
  align-items: stretch;
  max-width: 780px;
  margin: 0 auto;
  width: 100%;
  background: #fff;
  border: 1px solid var(--jk-border);
}

.jk-search-panel .search-input {
  flex: 1 1 auto;
  border: 0 !important;
  background: transparent !important;
  height: 52px;
  padding: 0 18px !important;
  font-family: var(--jk-font);
  font-size: 14px;
  color: var(--jk-ink);
  outline: none;
  border-radius: 0 !important;
  width: auto !important;
}

.jk-search-panel .search-input::placeholder {
  color: var(--jk-muted);
}

.jk-search-panel .search-dropdown {
  display: flex;
  align-items: center;
  border-left: 1px solid var(--jk-border);
  padding: 0 16px;
  position: relative;
  font-size: 13px;
  white-space: nowrap;
}

.jk-search-panel .search-button {
  background: var(--jk-gold) !important;
  border: 0 !important;
  color: #fff !important;
  width: 58px;
  border-radius: 0 !important;
  cursor: pointer;
}

.jk-search-panel .search-button:hover {
  background: var(--jk-ink) !important;
}

.jk-search-panel .search-label {
  display: none;
}

/* --------------------------------------------------------------------------
   5. Primary navigation
   -------------------------------------------------------------------------- */

.head-menu {
  background: transparent;
  border: 0;
}

.jk-nav {
  min-width: 0; /* let the flex child shrink instead of forcing a wrap */
}

.jk-nav .bottom_head,
.jk-nav .menu_link,
.jk-nav .menu_link nav {
  width: 100%;
}

/* menu.css sets flex-wrap:wrap on this list, which stacks the items into
   several rows once there are more than a handful of categories. */
.jk-nav .menu_link > nav > ul,
.jk-nav .menu_link nav > ul {
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap !important;
  gap: clamp(10px, 1.7vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px; /* menu.css zeroes this to kill inline-block gaps */
}

.jk-nav .menu_link nav > ul > li {
  position: relative;
  margin: 0 !important;
  flex: 0 0 auto;
}

.jk-nav .menu_link nav > ul > li > a {
  display: block;
  font-family: var(--jk-font) !important;
  font-size: clamp(11px, 0.92vw, 13px) !important;
  font-weight: 500 !important;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--jk-ink) !important;
  padding: 34px 0 !important;
  white-space: nowrap;
}

.jk-nav .menu_link nav > ul > li > a:hover,
.jk-nav .menu_link nav > ul > li.active > a {
  color: var(--jk-gold) !important;
}

/* Mega menu panel */
.jk-nav .submenu,
.head-menu .submenu {
  background: #fff;
  border: 1px solid var(--jk-border);
  border-radius: 0;
  box-shadow: none;
}

.jk-nav .submenu-link li a,
.head-menu .submenu-link li a {
  font-family: var(--jk-font);
  font-size: 13px;
  font-weight: 400;
  color: var(--jk-body);
  text-transform: capitalize;
  letter-spacing: 0;
}

.jk-nav .submenu-link li a:hover,
.head-menu .submenu-link li a:hover {
  color: var(--jk-gold) !important;
}

/* Language switcher */
.language-box {
  display: flex;
  align-items: center;
}

.language-txt {
  font-family: var(--jk-font);
  font-size: 13px;
  color: var(--jk-ink);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.language-menu {
  background: #fff;
  border: 1px solid var(--jk-border);
  border-radius: 0;
  box-shadow: none;
  list-style: none;
  padding: 8px 0;
}

.language-menu li a {
  font-family: var(--jk-font);
  font-size: 13px;
  padding: 6px 16px;
  display: block;
  color: var(--jk-body);
}

/* --------------------------------------------------------------------------
   6. Section headings — centred, with the gold rule underneath
   -------------------------------------------------------------------------- */

.title-row,
.flex-wrapper.title-row {
  display: block !important;
  text-align: center;
  margin-bottom: 38px !important;
  position: relative;
}

.title-row .cust_left,
.title-row .cust_right {
  width: 100% !important;
  float: none !important;
  text-align: center;
}

/* `heading-lg` is used only for section titles across the storefront, so it
   is centred globally to match the reference rather than per-section. */
.heading-lg {
  font-family: var(--jk-font) !important;
  font-size: 32px !important;
  font-weight: 500 !important;
  line-height: 1.3;
  color: var(--jk-ink) !important;
  text-transform: capitalize;
  margin: 0 auto 38px;
  position: relative;
  padding-bottom: 16px;
  display: block;
  width: 100%;
  text-align: center;
}

.heading-lg:after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 56px;
  height: 2px;
  background: var(--jk-gold);
}

.short-intro p {
  color: var(--jk-body);
  font-size: 14px;
}

.view_all {
  display: inline-block;
  margin-top: 14px;
  color: var(--jk-gold) !important;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.view_all:hover {
  color: var(--jk-ink) !important;
}

section {
  margin-bottom: var(--jk-section-gap);
}

/* --------------------------------------------------------------------------
   7. Product cards
   -------------------------------------------------------------------------- */

.product-box {
  background: var(--jk-white) !important;
  border: 0 !important;
  position: relative;
  overflow: hidden;
  transition: none;
}

/* Square media tile, matching the reference grid. common.css pins a fixed
   pixel height at small breakpoints, so the height reset needs !important. */
.product-box .prod-img {
  display: block;
  position: relative;
  background: #fff;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  height: auto !important;
  min-height: 0 !important;
  width: 100%;
}

.product-box .prod-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 18px;
  mix-blend-mode: multiply;
  transition: transform .6s ease;
}

.product-box:hover .prod-img img {
  transform: scale(1.06);
}

.product-detail {
  background: var(--jk-cream);
  padding-top: 14px;
}

.product-box .modeltext {
  font-size: 12px;
  color: var(--jk-muted);
  text-transform: capitalize;
  letter-spacing: .02em;
  margin-bottom: 4px !important;
}

.product-box .prod-title {
  display: block;
  font-family: var(--jk-font);
  font-size: 14px;
  font-weight: 400;
  color: var(--jk-ink) !important;
  line-height: 1.5;
  margin-bottom: 8px !important;
}

.product-box .prod-title:hover {
  color: var(--jk-gold) !important;
}

.product-box .price,
.product-box .price span {
  font-family: var(--jk-font);
  font-size: 15px;
  font-weight: 600;
  color: var(--jk-ink-strong) !important;
}

.product-box .price .originalPrice {
  color: var(--jk-muted) !important;
  font-weight: 400;
  font-size: 14px;
  text-decoration: line-through;
  margin-right: 6px;
}

.product-box .price .specialPrice {
  color: var(--jk-ink-strong) !important;
  font-weight: 600;
}

.product-box .price .offer {
  color: var(--jk-gold) !important;
  font-size: 13px;
  font-weight: 500;
}

.product-box .rating {
  list-style: none;
  padding: 0;
  margin: 6px 0 0 !important;
  display: flex;
  gap: 2px;
}

.rating .fa-star,
.rating .fa-star-half-o {
  color: var(--jk-star) !important;
  font-size: 13px;
}

/* Badges — gold chip, top left */
.latest-badge {
  background: var(--jk-gold) !important;
  color: #fff !important;
  font-family: var(--jk-font);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  padding: 4px 10px;
  border-radius: 0 !important;
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  text-transform: uppercase;
}

.latest-badge.out-stock {
  background: #fff !important;
  color: #e03a3a !important;
  text-decoration: underline;
}

.latest-badge.trending-badge {
  background: var(--jk-ink) !important;
}

/* Quick view + floating actions */
.quickview {
  background: var(--jk-ink) !important;
  border-radius: 0 !important;
}

.quickview .quickviewtext {
  color: #fff !important;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
}

.floating-bar .floating-add-to-cart,
.floating-bar .floating-wishlist {
  background: #fff;
  border: 1px solid var(--jk-border);
  border-radius: 0;
  transition: background .25s ease, border-color .25s ease;
}

.floating-bar .floating-add-to-cart:hover,
.floating-bar .floating-wishlist:hover {
  background: var(--jk-gold);
  border-color: var(--jk-gold);
}

.floating-wishlist .fa-heart {
  color: var(--jk-gold);
}

/* Tabs (category-wise products) */
.nav-tabs {
  border: 0 !important;
  justify-content: center;
  gap: 8px;
  margin-bottom: 34px;
}

.nav-tabs li a,
.nav-tabs .nav-link {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--jk-ink) !important;
  font-family: var(--jk-font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 11px 26px !important;
}

.nav-tabs li a.active,
.nav-tabs .nav-link.active {
  background: var(--jk-gold) !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   8. Banners / hero
   -------------------------------------------------------------------------- */

.banner-slide {
  border-radius: 0 !important;
  overflow: hidden;
}

.sub-slider {
  border-radius: 0 !important;
}

/* --- Hero -----------------------------------------------------------------
   Full-bleed band with the copy sitting on the right, as per the reference.
   Recommended artwork: ~1920x760 (2.5:1). Anything squarer is centre-cropped
   to the band height, so keep the subject away from the top/bottom edges.
   -------------------------------------------------------------------------- */

.jk-hero {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-bottom: 0;
  background: var(--jk-cream);
}

/* The slide is floated by slick, so the wrappers need an explicit height or
   the section collapses and clips the bottom of the artwork. */
.jk-hero .banner_js,
.jk-hero .slick-list,
.jk-hero .slick-track,
.jk-hero .slick-slide,
.jk-hero .slick-slide > div,
.jk-hero .banner-slide {
  height: clamp(360px, 42vw, 610px);
}

.jk-hero .banner-slide {
  position: relative;
}

/* The button is a <span> inside the slide-wide link; make it look and sit
   like the block-level CTA it replaces. */
.jk-hero .banner-contain .button-block {
  display: inline-block;
  cursor: pointer;
}

.jk-hero .banner-slide img {
  display: block;
  width: 100%;
  height: clamp(360px, 42vw, 610px);
  object-fit: cover;
  object-position: center;
}

.jk-hero .banner-overlay {
  z-index: 2;
}

.jk-hero .banner-wrapper {
  display: flex;
  align-items: center;
  height: 100%;
}

.jk-hero .banner-contain {
  max-width: 560px;
  margin-left: auto;
  margin-right: 0;
  text-align: left;
}

.jk-hero .ban-offer {
  font-family: var(--jk-font);
  font-size: clamp(19px, 2.2vw, 32px);
  font-weight: 400;
  line-height: 1.25;
  color: var(--jk-gold);
  margin-bottom: 10px;
}

.jk-hero .ban-main-title {
  font-family: var(--jk-font);
  font-size: clamp(28px, 4.1vw, 58px);
  font-weight: 600;
  line-height: 1.13;
  color: var(--jk-ink);
  margin-bottom: 18px;
}

.jk-hero .banner-contain p {
  font-family: var(--jk-font);
  font-size: 15px;
  line-height: 1.7;
  color: var(--jk-body);
  margin-bottom: 28px;
}

.jk-hero .banner_js .slick-dots li button:before {
  color: var(--jk-ink);
  opacity: .35;
  font-size: 10px;
}

.jk-hero .banner_js .slick-dots li.slick-active button:before {
  color: var(--jk-gold);
  opacity: 1;
}

/* Sub-banner row sits directly under the hero */
.jk-subbanners {
  margin-top: var(--jk-section-gap);
}

.jk-subbanners .sub-slider {
  padding: 0 !important;
  background: transparent !important;
}

.jk-subbanners .sub-slider img {
  width: 100%;
  height: auto;
  display: block;
}

/* The hero butts straight up against the header in the reference. */
.divider-xl {
  height: 0;
}

@media (max-width: 767px) {
  .jk-hero .banner-contain {
    margin-left: 0;
    margin-right: auto;
    max-width: 100%;
  }
}

/* --- Slick carousels ---------------------------------------------------- */

/* Slides default to a fixed height, which clips cards whose title wraps to a
   second line now that the media tile is a fixed square. Height only — making
   the track a flex container breaks slick's per-slide width calculation. */
.slick-slide {
  height: auto !important;
}

.slick-arrow .slick-prev,
.slick-arrow .slick-next {
  background: transparent !important;
  border: 1px solid var(--jk-border) !important;
  border-radius: 0 !important;
  width: 42px !important;
  height: 42px !important;
  transition: background .25s ease, border-color .25s ease;
}

.slick-arrow .slick-prev:hover,
.slick-arrow .slick-next:hover {
  background: var(--jk-gold) !important;
  border-color: var(--jk-gold) !important;
}

.slick-arrow .slick-prev:before,
.slick-arrow .slick-next:before {
  color: var(--jk-ink) !important;
  font-size: 22px !important;
}

.slick-arrow .slick-prev:hover:before,
.slick-arrow .slick-next:hover:before {
  color: #fff !important;
}

/* Keep product titles on a consistent baseline across a row, and stop long
   names from spilling out of a fixed-height carousel slide. */
.product-box .prod-title {
  min-height: 42px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Category tiles — circular media, matching the reference.
   style.blade.php emits an inline `.catebox{background:…!important}` after
   this file, so these need the extra selector weight to win. */
.top-categories a.catebox,
li > a.catebox,
.catebox {
  background: transparent !important;
  border: 0 !important;
  text-align: center;
  display: block;
}

.catebox .cate-img,
.catebox .gray-circle {
  border-radius: 50% !important;
  background: #fff !important;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  max-width: 230px;
}

.catebox .cate-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 22px;
  mix-blend-mode: multiply;
}

.catebox .cate-info a,
.catebox .cate-info {
  font-family: var(--jk-font);
  font-size: 15px;
  font-weight: 500;
  color: var(--jk-ink) !important;
  text-transform: capitalize;
}

.catebox .cate-info a:hover {
  color: var(--jk-gold) !important;
}

/* Brands strip — plain marks on cream (same inline-style override as above) */
.top-categories .brandbox,
li > .brandbox,
.brandbox {
  background: transparent !important;
  border: 0 !important;
  text-align: center;
}

.brandbox img {
  mix-blend-mode: multiply;
  max-width: 100%;
  height: auto;
}

/* Blog cards */
.blog-box,
.blog-right-box {
  background: var(--jk-white) !important;
  border: 1px solid var(--jk-border) !important;
  border-radius: 0 !important;
}

.blog-box .blog-img,
.blog-right-box .blog-img {
  overflow: hidden;
}

.blog-box img,
.blog-right-box img {
  border-radius: 0 !important;
  width: 100%;
  transition: transform .6s ease;
}

.blog-box:hover img {
  transform: scale(1.05);
}

.blog-heading {
  font-family: var(--jk-font) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  color: var(--jk-ink) !important;
  line-height: 1.45;
}

.blog-heading:hover {
  color: var(--jk-gold) !important;
}

.blog-shortdesc {
  font-family: var(--jk-font);
  font-size: 14px;
  color: var(--jk-body);
  line-height: 1.7;
}

.blog-bottom-box {
  border-top: 1px solid var(--jk-border);
}

.blog-bottom-text,
.blog-bottom-link {
  font-family: var(--jk-font);
  font-size: 13px;
  color: var(--jk-body);
}

.blog-bottom-text .fas,
.blog-bottom-link .fas {
  color: var(--jk-gold);
  margin-right: 6px;
}

/* Blog listing "Read Post" — the arrow carries an inline colour in the
   template, so it needs !important to pick up the theme accent. */
.blog-bottom-link-right {
  font-family: var(--jk-font);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--jk-gold) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.blog-bottom-link-right:hover {
  color: var(--jk-ink) !important;
}

.blog-bottom-link-right .fas {
  color: var(--jk-gold) !important;
  margin-left: 6px;
}

.blog-bottom-link-right:hover .fas {
  color: var(--jk-ink) !important;
}

.blog-box .blog-date,
.blog-date {
  background: var(--jk-gold);
  color: #fff;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */

#footer {
  background: var(--jk-cream) !important;
}

.chat-section {
  background: var(--jk-cream);
  border-top: 1px solid var(--jk-border);
  padding: 46px 0;
}

.chat-section-title {
  font-family: var(--jk-font);
  font-size: 24px;
  font-weight: 500;
  color: var(--jk-ink);
}

.chat-subtext {
  color: var(--jk-body);
  font-size: 14px;
}

.footer-bottom {
  background: var(--jk-ink) !important;
  color: #bfc4c9;
  padding: 66px 0 40px;
}

.footer-bottom .chat-section {
  background: transparent;
  border-top: 0;
}

.footer-bottom .chat-section-title,
.footer-bottom .chat-subtext {
  color: #fff;
}

.footer-heading {
  font-family: var(--jk-font) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #fff !important;
  text-transform: capitalize;
  display: inline-block;
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.footer-heading:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 38px;
  height: 2px;
  background: var(--jk-gold);
}

.ft-navigation-fr-link {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ft-navigation-fr-link li {
  margin-bottom: 9px;
}

.ft-navigation-fr-link li a,
.ft-navigation-fr-link li font,
.footer-bottom p {
  color: #bfc4c9 !important;
  font-family: var(--jk-font);
  font-size: 14px;
}

.ft-navigation-fr-link li a:hover {
  color: var(--jk-gold) !important;
}

.ft-navigation-fr-link .fa {
  color: var(--jk-gold);
  margin-right: 9px;
}

.social-link-otrix {
  list-style: none;
  display: flex;
  gap: 10px;
  padding: 0;
  margin-top: 18px;
}

.social-link-otrix li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff !important;
  font-size: 14px;
}

.social-link-otrix li a:hover {
  background: var(--jk-gold);
  border-color: var(--jk-gold);
  color: #fff !important;
}

.subscirbe_news {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 340px;
}

.subscirbe_news .form-control {
  background: #fff !important;
  border: 0 !important;
  border-radius: 0 !important;
  height: 48px;
  padding: 0 16px;
  font-family: var(--jk-font);
  font-size: 14px;
}

/* common.css locks this to width:142px/height:48px, which clips the label
   once the type is uppercased and letter-spaced. */
.subscirbe_news .btn-subscribe {
  align-self: flex-start;
  cursor: pointer;
  width: auto !important;
  height: auto !important;
  min-width: 150px;
  text-align: center;
  justify-content: center !important;
}

/* "Chat with expert" CTA in the footer band */
.chat-section .button-block {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  width: auto;
}

.copyright {
  background: var(--jk-ink) !important;
  border-top: 1px solid rgba(255, 255, 255, .12);
  padding: 20px 0;
}

.copyright p {
  color: #bfc4c9 !important;
  font-size: 13px;
  margin: 0;
  font-family: var(--jk-font);
}

/* --------------------------------------------------------------------------
   10. Forms, pagination, misc
   -------------------------------------------------------------------------- */

.form-control {
  border: 1px solid var(--jk-border) !important;
  border-radius: 0 !important;
  font-family: var(--jk-font);
  font-size: 14px;
  padding: 11px 14px;
  color: var(--jk-ink);
}

.form-control:focus {
  border-color: var(--jk-gold) !important;
  box-shadow: none !important;
  outline: none;
}

.page-item.active .page-link,
.pagination li a:hover,
.pagination li a.current-page {
  background: var(--jk-gold) !important;
  border-color: var(--jk-gold) !important;
  color: #fff !important;
  border-radius: 0 !important;
}

.pagination li a {
  border-radius: 0 !important;
  color: var(--jk-ink);
  font-family: var(--jk-font);
}

.scrollTop {
  background: var(--jk-gold) !important;
  border-radius: 0 !important;
  color: #fff;
}

.cookie-overlay {
  background: #fff;
  border: 1px solid var(--jk-border);
  border-radius: 0 !important;
  font-family: var(--jk-font);
}

.fa-home,
.fa-star,
.fa-star-half-o {
  color: var(--jk-gold);
}

/* Breadcrumbs / inner page headers */
.breadcrumb,
.cd-breadcrumb {
  background: transparent !important;
  font-family: var(--jk-font);
  font-size: 13px;
}

.breadcrumb a,
.cd-breadcrumb li,
.cd-breadcrumb li a {
  color: var(--jk-body) !important;
  font-family: var(--jk-font);
}

.cd-breadcrumb li a:hover {
  color: var(--jk-gold) !important;
}

.cd-breadcrumb li:last-child,
.cd-breadcrumb li.current {
  color: var(--jk-ink) !important;
}

/* --------------------------------------------------------------------------
   12. Inner pages — remap the old navy/purple accents
   -------------------------------------------------------------------------- */

.heading-md,
.heading-xs,
.heading-sm,
.recent-blog-heading,
.product-count-text,
.summary-title,
.paymentTitle,
.shipping-text,
.form-label,
.attribute_name,
.prod-head,
.stock-title,
.product-name,
.blog-heading {
  font-family: var(--jk-font) !important;
  color: var(--jk-ink) !important;
}

/* Sidebar panel headings get the same gold rule as section titles. */
.heading-line {
  position: relative;
  padding-bottom: 12px;
  display: inline-block;
  border-bottom: 0 !important;
}

.heading-line:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 44px;
  height: 2px;
  background: var(--jk-gold);
}

.panel-box {
  background: var(--jk-white) !important;
  border: 1px solid var(--jk-border) !important;
}

.panel-box li a,
.panel-box label {
  font-family: var(--jk-font);
  font-size: 14px;
  color: var(--jk-body) !important;
}

.panel-box li a:hover {
  color: var(--jk-gold) !important;
}

/* Product detail: metadata values and the wishlist / share buttons */
.prod-info,
.prod-info a,
.themeTxt,
.stock-status .info,
.stockbox .info {
  color: var(--jk-gold) !important;
  font-family: var(--jk-font);
}

.btn-add-to-wishlist {
  background: var(--jk-ink) !important;
  border: 1px solid var(--jk-ink) !important;
  color: #fff !important;
  border-radius: 0 !important;
  font-family: var(--jk-font);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 12px 24px;
}

.btn-add-to-wishlist:hover {
  background: var(--jk-gold) !important;
  border-color: var(--jk-gold) !important;
  color: #fff !important;
}

.btn-share {
  background: var(--jk-white) !important;
  border: 1px solid var(--jk-border) !important;
  color: var(--jk-ink) !important;
  border-radius: 0 !important;
  font-family: var(--jk-font);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 12px 24px;
}

.btn-share:hover {
  border-color: var(--jk-gold) !important;
  color: var(--jk-gold) !important;
}

/* Cart / order tables */
.shop-table th,
.orderlist table thead th,
.column-labels {
  background: var(--jk-cream) !important;
  color: var(--jk-ink) !important;
  font-family: var(--jk-font);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .06em;
}

.orderlist table tbody td,
.shop-table td,
.order-box p,
.order-detail-box .title p,
.order-detail-box .o-details p,
.address-box p {
  font-family: var(--jk-font);
  color: var(--jk-body) !important;
}

/* Social sign-in buttons keep their brand colours, just square them off. */
.facebook-login,
.google-login {
  border-radius: 0 !important;
  font-family: var(--jk-font);
}

/* --------------------------------------------------------------------------
   11. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
  .heading-lg {
    font-size: 24px !important;
  }

  :root {
    --jk-section-gap: 44px;
  }

  .footer-bottom {
    padding: 44px 0 28px;
  }

  .jk-nav {
    display: none;
  }
}

@media (min-width: 992px) {
  /* The stacked category row is mobile-only once nav moves into the header. */
  .head-menu {
    display: none;
  }
}