@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Nunito+Sans:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap');

body, button, input, select, textarea { font-family:'Nunito Sans', system-ui, sans-serif; color:#221F1B; }
body { background:#FBF8F4; }
h1,h2,h3,h4,h5,h6 { font-family:'Cormorant Garamond', serif; font-weight:500; color:#221F1B; }
a { color:#2A4635; }
a:hover { color:#1F3427; }

/* Buttons */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
.wp-block-button__link, button[type="submit"] {
  background:#2A4635 !important; color:#F6F1E7 !important; border:0 !important; border-radius:2px !important;
  font-size:12px !important; font-weight:700 !important; letter-spacing:.1em !important; text-transform:uppercase !important;
  padding:13px 22px !important; box-shadow:none !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover {
  background:#1F3427 !important; color:#F6F1E7 !important;
}
.woocommerce a.added_to_cart { color:#2A4635 !important; font-weight:700; }

/* Shop / archive — product cards matching the original design */
.woocommerce ul.products li.product { display:flex; flex-direction:column; }
/* the link wraps the whole card, so it must NOT be the image box */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
  display:flex; flex-direction:column; position:static; aspect-ratio:auto;
  overflow:visible; background:none; text-decoration:none; color:inherit;
}
/* only the media is boxed */
.bkn-card-media {
  position:relative; aspect-ratio:3/4; border-radius:18px; overflow:hidden;
  background:#F1ECE3; display:block;
  transition:box-shadow .4s ease, transform .4s cubic-bezier(.2,.8,.2,1);
}
.woocommerce ul.products li.product:hover .bkn-card-media {
  box-shadow:0 22px 46px rgba(34,31,27,.14); transform:translateY(-4px);
}
/* the whole product stays visible; hover adds a gentle zoom that never crops it */
.bkn-card-media img {
  position:absolute; top:0; left:0;
  /* the theme sets img{height:auto}, which leaves the box taller than the media */
  width:100% !important; height:100% !important;
  object-fit:cover; object-position:center; padding:0; box-sizing:border-box;
  border-radius:0; display:block;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.woocommerce ul.products li.product:hover .bkn-card-media img { transform:scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .bkn-card-media, .bkn-card-media img { transition:none; }
  .woocommerce ul.products li.product:hover .bkn-card-media { transform:none; }
  .woocommerce ul.products li.product:hover .bkn-card-media img { transform:none; }
}
.bkn-card-brand {
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#8A8175; margin:16px 0 6px;
}
.woocommerce ul.products li.product .price { color:#221F1B; font-weight:700; font-size:17px; }
.woocommerce ul.products li.product .price ins { color:#221F1B; text-decoration:none; }
.woocommerce ul.products li.product .price del { color:#A79E90; text-decoration:line-through; font-size:13.5px; }
.woocommerce span.onsale { background:#B4553F; font-weight:700; letter-spacing:.04em; border-radius:999px; top:12px; left:12px; right:auto; margin:0; }
.woocommerce ul.products li.product h2, .woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family:'Cormorant Garamond', serif; font-weight:500; font-size:19px; line-height:1.2; color:#221F1B; margin:0 0 8px;
}
.woocommerce ul.products li.product .star-rating { color:#B4863F; font-size:12.5px; }
.woocommerce ul.products li.product a.button {
  margin-top:auto; background:transparent !important; border:1px solid #2A4635 !important; color:#2A4635 !important;
  border-radius:999px !important; padding:13px !important; font-size:12px !important; font-weight:700 !important;
  letter-spacing:.1em !important; text-transform:uppercase !important; text-align:center;
}
.woocommerce ul.products li.product a.button:hover { background:#2A4635 !important; color:#F6F1E7 !important; }
/* HFE product-grid widget (used on homepage) — same treatment */
.hfe-product-item .hfe-product-image a { border-radius:18px; overflow:hidden; display:block; aspect-ratio:4/5; background:#F1ECE3; transition:box-shadow .4s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
.hfe-product-item .hfe-product-image a:hover { box-shadow:0 22px 46px rgba(34,31,27,.14); transform:translateY(-4px); }
.hfe-product-item .hfe-product-image img { width:100%; height:100%; object-fit:cover; }
.hfe-product-category { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:#8A8175; margin:16px 0 6px; }
.hfe-product-title a { font-family:'Cormorant Garamond', serif; font-weight:500; font-size:19px; color:#221F1B; text-decoration:none; }
.hfe-product-item .star-rating { color:#B4863F; }
.hfe-product-add-to-cart a { background:transparent !important; border:1px solid #2A4635 !important; color:#2A4635 !important; border-radius:999px !important; text-transform:uppercase !important; letter-spacing:.1em !important; font-weight:700 !important; font-size:12px !important; }
.hfe-product-add-to-cart a:hover { background:#2A4635 !important; color:#F6F1E7 !important; }
.woocommerce nav.woocommerce-pagination ul { border-color:#E9E2D6; }
.woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span {
  color:#221F1B; border-color:#E9E2D6;
}
.woocommerce nav.woocommerce-pagination ul li span.current, .woocommerce nav.woocommerce-pagination ul li a:hover {
  background:#2A4635; color:#F6F1E7;
}
.woocommerce-breadcrumb { color:#8A8175; font-size:12.5px; }
.woocommerce-breadcrumb a { color:#8A8175; }
.woocommerce-result-count, .woocommerce-ordering select { font-size:13.5px; }
h1.entry-title, h1.page-title, .woocommerce-products-header__title {
  font-family:'Cormorant Garamond', serif; font-weight:500;
}

/* Single product */
.woocommerce div.product p.price, .woocommerce div.product span.price { color:#221F1B; font-size:22px; font-weight:700; }
.woocommerce div.product span.price ins { color:#B4553F; text-decoration:none; }
.woocommerce div.product .product_title { font-family:'Cormorant Garamond', serif; font-weight:500; }
.woocommerce div.product .woocommerce-product-rating .star-rating { color:#B4553F; }
.woocommerce-tabs ul.tabs li a { font-weight:700; color:#221F1B; }
.woocommerce-tabs ul.tabs li.active { border-bottom:2px solid #2A4635; }

/* Cart / checkout */
.woocommerce-cart table.cart th, .woocommerce-checkout table.cart th { font-family:'Nunito Sans', sans-serif; font-weight:700; text-transform:uppercase; font-size:11px; letter-spacing:.06em; color:#8A8175; }
.woocommerce table.shop_table { border-color:#E9E2D6; }
.woocommerce-checkout #payment { background:#F3EFE6 !important; border-radius:12px; }
.woocommerce-checkout #payment div.payment_box { background:#EAE3D4 !important; }
.woocommerce ul#shipping_method li, .woocommerce-checkout-review-order-table { font-size:14px; }
.woocommerce-info, .woocommerce-message { border-top-color:#2A4635; }
.woocommerce-info::before, .woocommerce-message::before { color:#2A4635; }

/* My account */
.woocommerce-MyAccount-navigation ul { border-color:#E9E2D6; }
.woocommerce-MyAccount-navigation ul li.is-active a { color:#2A4635; font-weight:700; }
.woocommerce-MyAccount-navigation ul li a { color:#4A443C; }

/* Sidebar widgets (price/attribute filters) */
.widget_price_filter .price_slider_amount .button { padding:8px 14px !important; font-size:11px !important; }
.widget_layered_nav ul li a, .widget_product_categories ul li a { color:#4A443C; }

/* WooCommerce Blocks (cart/checkout block templates) */
.wc-block-components-button, .wp-element-button, .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button {
  background:#2A4635 !important; color:#F6F1E7 !important; border:0 !important; border-radius:2px !important;
  font-size:12px !important; font-weight:700 !important; letter-spacing:.1em !important; text-transform:uppercase !important;
  box-shadow:none !important;
}
.wc-block-components-button:hover, .wp-element-button:hover { background:#1F3427 !important; color:#F6F1E7 !important; }
.wc-block-components-product-price, .wc-block-components-totals-item__value { color:#221F1B; font-weight:700; }
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value { color:#2A4635; }
.wc-block-cart-item__product-name, .wc-block-components-product-name { color:#221F1B; font-weight:600; }
.wc-block-components-panel__button, .wc-block-components-radio-control__label { color:#4A443C; }
.wc-block-components-title { font-family:'Cormorant Garamond', serif; font-weight:500; }
.wc-block-components-checkout-step__title { font-family:'Cormorant Garamond', serif; font-weight:500; color:#221F1B; }

/* Header responsive: hide nav/search/account on mobile+tablet, show hamburger instead */
@media (max-width: 1024px) {
  #bkn-hcol-nav, #bkn-hcol-search, #bkn-hcol-account { display: none !important; }
  #bkn-hcol-burger { display: flex !important; }
}
@media (min-width: 1025px) {
  #bkn-hcol-burger { display: none !important; }
}
/* HFE ships `.ehf-header #masthead{position:relative}` - match that selector so
   cascade order decides, rather than losing on specificity.
   NB: no bare `header` here. WooCommerce wraps the shop archive heading in a
   <header> too, and a bare element selector pinned that to the top of the
   viewport along with everything else on the page that uses the tag. */
.ehf-header #masthead, header#masthead, .elementor-location-header {
  position: sticky; top: 0; z-index: 500;
}
/* NOTE: .ehf-header is a BODY class in Header Footer Elementor, not the header
   element. Putting backdrop-filter on it makes <body> the containing block for
   every position:fixed descendant, which breaks the quick-view dialog and the
   mobile drawer. Style the header container instead. */
.ehf-header #masthead, header#masthead, .elementor-location-header {
  background: rgba(251,248,244,.94);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-bottom: 1px solid #E9E2D6;
}
#bkn-announce { max-width: 1440px; margin-left: auto; margin-right: auto; }

/* Header row: one line, ~67px tall like the original */
#bkn-hcol-logo, #bkn-hcol-nav, #bkn-hcol-search,
#bkn-hcol-account, #bkn-hcol-cart, #bkn-hcol-burger { padding: 0 !important; }
/* header row sits at the original 67px (padding comes from the container setting) */
#bkn-header-row .elementor-widget { margin-bottom: 0 !important; }
#bkn-logo-lockup .elementor-widget-site-logo img { display: block; }
#bkn-header-row, #bkn-header-row > .e-con-inner { gap: 28px !important; }
#bkn-header-row { max-width: 1440px; margin-left: auto; margin-right: auto; }
#bkn-hcol-logo { flex: 0 0 auto; width: auto; }
#bkn-hcol-nav { flex: 1 1 0; min-width: 0; }
/* menu items keep their natural width and sit centred in the column */
#bkn-hcol-nav .hfe-nav-menu { justify-content: center; width: 100%; }
#bkn-hcol-nav .hfe-nav-menu li.menu-item { flex: 0 0 auto; }
#bkn-hcol-nav .elementor-widget-navigation-menu { width: 100%; }
#bkn-hcol-nav .hfe-nav-menu { flex-wrap: nowrap !important; justify-content: center; }
#bkn-hcol-nav .menu-item a.hfe-menu-item { white-space: nowrap; }
#bkn-hcol-search, #bkn-hcol-account, #bkn-hcol-cart, #bkn-hcol-burger { flex: 0 0 auto; width: auto; }
#bkn-hcol-cart .hfe-menu-cart__toggle .elementor-button {
  background: #2A4635; color: #F6F1E7; border-radius: 999px; width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center; padding: 0;
}

#bkn-logo-lockup { flex-wrap: nowrap !important; gap: 10px; align-items: center !important; padding: 0 !important; }
#bkn-logo-lockup > .e-con { padding: 0 !important; gap: 0 !important; justify-content: center; }
#bkn-logo-lockup .elementor-widget { margin: 0 !important; }
#bkn-logo-lockup .elementor-heading-title { white-space: nowrap !important; margin: 0 !important; line-height: 1 !important; text-transform: uppercase !important; letter-spacing: .06em !important; font-size: 20px !important; }
#bkn-hcol-logo, #bkn-hcol-nav, #bkn-hcol-search, #bkn-hcol-account, #bkn-hcol-cart { align-self: center; }
#bkn-logo-lockup .hfe-site-tagline, #bkn-logo-lockup .hfe-site-tagline p { white-space: nowrap !important; line-height: 1 !important; margin: 4px 0 0 !important; font-size: 9.5px !important; letter-spacing: .18em !important; text-transform: uppercase !important; color: #8A8175 !important; }
/* The site logo is the full lockup now -- mark, wordmark and tagline in one
   piece of artwork -- where it used to be a 40px square monogram sat beside
   separate heading and tagline widgets. Those 40px !important rules were what
   crushed the new artwork into a smudge; Elementor's own 200px setting never
   stood a chance against them. */
#bkn-logo-lockup .elementor-widget-site-logo,
#bkn-logo-lockup .elementor-widget-theme-site-logo { width: auto !important; flex: 0 0 auto !important; }
#bkn-logo-lockup .elementor-widget-site-logo img,
#bkn-logo-lockup .elementor-widget-theme-site-logo img {
  width: 200px !important; max-width: 200px !important; height: auto !important;
}
@media (max-width: 880px) {
  #bkn-logo-lockup .elementor-widget-site-logo img,
  #bkn-logo-lockup .elementor-widget-theme-site-logo img { width: 150px !important; max-width: 150px !important; }
}

/* The artwork already says "House of BKN" and "Curated Skincare", so the two
   text widgets beside it would say everything twice. They stay in the markup --
   a site name in a heading is worth having for search engines and screen
   readers -- and are taken out of the picture visually. */
#bkn-logo-lockup .elementor-widget-heading,
#bkn-logo-lockup .elementor-widget-hfe-site-tagline {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
#bkn-logo-lockup a { text-decoration: none !important; }

/* On mobile the nav, search and account columns are hidden, so the row packed
   the logo, cart and burger against the left and left about 100px of dead space
   on the right. Pushing the two controls to the far edge gives the header the
   usual shape -- brand on one side, controls on the other -- and uses the width.
   Swap the margin-left onto #bkn-hcol-logo instead to group them all on the left. */
@media (max-width: 880px) {
  #bkn-header-row { justify-content: space-between !important; }
  #bkn-hcol-cart { margin-left: auto !important; }
  #bkn-hcol-cart, #bkn-hcol-burger { flex: 0 0 auto; }
  #bkn-header-row, #bkn-header-row > .e-con-inner { gap: 14px !important; }
}

/* No underlines on navigation, lists, cards or buttons — only inline prose keeps them */
.elementor-location-header a, .elementor-location-footer a,
.hfe-nav-menu a, .elementor-icon-list-item a, .elementor-button,
.elementor-image-box-title a, .elementor-testimonial a,
#bkn-cat-grid a, #bkn-chips a, .bkn-quickview,
.woocommerce ul.products li.product a { text-decoration: none !important; }
.hfe-nav-menu a:hover, .elementor-icon-list-item a:hover { text-decoration: none !important; }

/* Buttons match the original's height (Elementor forces line-height:1) */
#bkn-hero .elementor-button, #bkn-promo-cta .elementor-button { line-height: 1.3 !important; }

/* Keyboard focus stays visible (the underline removal must not hide focus) */
.elementor-location-header a:focus-visible, .elementor-location-footer a:focus-visible,
.elementor-button:focus-visible, #bkn-hero-dots > .e-con:focus-visible,
.bkn-wish:focus-visible {
  outline: 2px solid #2A4635; outline-offset: 3px; border-radius: 4px;
}
.elementor-location-header a:focus-visible { outline-color: #2A4635; }
#bkn-hero-dots > .e-con:focus-visible, #bkn-hero a:focus-visible { outline-color: #F6F1E7; }

/* ============ HOMEPAGE — mirroring the original design ============ */

/* Hero: two crossfading slides filling the viewport below the header */
#bkn-hero { position: relative; min-height: calc(100svh - var(--bkn-header-h, 97px)); overflow: hidden; }
@supports not (height: 100svh) { #bkn-hero { min-height: calc(100vh - var(--bkn-header-h, 97px)); } }
#bkn-hero > [id^="bkn-hero-slide-"] {
  position: absolute; inset: 0; display: flex;
  flex-direction: column; justify-content: center; align-items: stretch;
  opacity: 0; transition: opacity .9s ease; pointer-events: none;
  background-position: 62% 40% !important;
  background-size: cover !important;
}
/* the original's four-stop scrim: dense on the left, clear by 62% */
#bkn-hero > [id^="bkn-hero-slide-"]::before {
  background-image: linear-gradient(90deg,
    rgba(34,31,27,.90) 0%,
    rgba(34,31,27,.78) 24%,
    rgba(34,31,27,.38) 44%,
    rgba(34,31,27,0)   62%) !important;
  opacity: 1 !important;
}
#bkn-hero > [id^="bkn-hero-slide-"].is-active { opacity: 1; pointer-events: auto; z-index: 1; }
/* before the script runs, the first slide is the visible one */
.no-js #bkn-hero-slide-1, #bkn-hero-slide-1:first-child:not(.is-active):last-of-type { opacity: 1; }
#bkn-hero > [id^="bkn-hero-slide-"] > .e-con-inner,
#bkn-hero > [id^="bkn-hero-slide-"] > .e-con-boxed { align-self: center; width: 100%; }
#bkn-hero [id^="bkn-hero-inner-"] { justify-content: center; }
#bkn-hero [id^="bkn-hero-copy-"] {
  max-width: min(40%, 430px); min-width: 260px;
  padding: 0 !important; gap: 0 !important;
}
@media (max-width: 1024px) { #bkn-hero [id^="bkn-hero-copy-"] { max-width: min(62%, 460px); } }
@media (max-width: 767px)  { #bkn-hero [id^="bkn-hero-copy-"] { max-width: 100%; } #bkn-hero { min-height: 78svh; } }
#bkn-hero .elementor-widget-heading, #bkn-hero .elementor-widget-text-editor { width: 100%; }

/* Hero dots */
#bkn-hero-dots {
  position: absolute; bottom: 14px; left: 0; right: 0; z-index: 3;
  display: flex; justify-content: center; align-items: center; gap: 9px;
  width: 100%; padding: 0 !important; pointer-events: auto;
}
#bkn-hero-dots > .e-con {
  width: 6px; height: 5px; min-height: 5px; flex: 0 0 auto; padding: 0 !important;
  border-radius: 999px; background: rgba(246,241,231,.42);
  cursor: pointer; transition: width .3s ease, background .3s ease;
}
#bkn-hero-dots > .e-con.is-active { width: 30px; background: #F6F1E7; }

/* Percentage column widths ignore the flex gap and wrap; let these rows share space instead */
#bkn-trust-row > .e-con, #bkn-cat-grid > .e-con, #bkn-story-row > .e-con,
#bkn-tst-row > .e-con, #bkn-stats > .e-con {
  flex: 1 1 0; min-width: 0; width: auto;
}
#bkn-cat-head > .e-con:first-child { flex: 1 1 auto; width: auto; }
#bkn-cat-head > .e-con:last-child { flex: 0 0 auto; width: auto; }
#bkn-promo-row > .e-con:first-child { flex: 0 0 auto; width: auto; }
#bkn-promo-copy { width: 100%; }
#bkn-promo-copy p { max-width: 340px !important; }
#bkn-promo-copy .elementor-heading-title { max-width: 340px; }
#bkn-promo-actions { width: auto; flex-wrap: nowrap; gap: 14px; }
#bkn-promo-cta { width: auto; flex: 0 0 auto; }
@media (max-width: 880px) {
  #bkn-trust-row > .e-con { flex: 1 1 210px; }
  #bkn-story-row > .e-con, #bkn-tst-row > .e-con { flex: 1 1 100%; }
  /* categories stay two-up on phones, as in the original */
  #bkn-cat-grid { flex-direction: row !important; flex-wrap: wrap !important; }
  #bkn-cat-grid > .e-con { flex: 0 0 calc(50% - 11px) !important; max-width: calc(50% - 11px); }
  #bkn-cat-grid .elementor-image-box-title { font-size: 18px !important; }
}

/* Trust bar: four compact rows, tight like the original */
#bkn-trust .elementor-widget-icon-box { width: 100%; }
#bkn-trust .elementor-icon-box-wrapper { display: flex; align-items: flex-start; gap: 12px; text-align: left; }
#bkn-trust .elementor-icon-box-icon { margin: 6px 0 0 !important; flex: 0 0 auto; }
#bkn-trust .elementor-icon-box-content { text-align: left; }
#bkn-trust .elementor-icon-box-title { margin: 0 0 3px !important; letter-spacing: .02em; }
#bkn-trust .elementor-icon-box-description { margin: 0 !important; line-height: 1.35; }
#bkn-trust .elementor-icon-box-title { line-height: 1.2; }
#bkn-trust .elementor-widget-icon-box .elementor-widget-container { padding: 0; }

/* Promo: keep the headline on one line and let the copy breathe */
#bkn-promo-row > .e-con:nth-child(2) { flex: 1 1 340px; }
#bkn-promo-row > .e-con:last-child { flex: 0 0 auto; max-width: 400px; }
@media (max-width: 1200px) { #bkn-promo-row { padding-right: 180px !important; } }
@media (max-width: 900px)  { #bkn-promo-row { padding-right: 40px !important; } }

/* Newsletter: the form is one row, so nothing reserves vertical space */
#bkn-nl-form .wpforms-container,
#bkn-nl-form form { margin: 0; }
#bkn-nl-form .wpforms-field-label { display: none; }

/* Brand strip: a continuous 78s marquee of 170x70 white cards, as in the original */
#bkn-brands {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
#bkn-logo-track {
  display: flex; flex-wrap: nowrap; align-items: center;
  width: max-content; padding: 0 !important; gap: 0 !important;
  animation: bkn-marquee 78s linear infinite;
  will-change: transform;
}
#bkn-brands:hover #bkn-logo-track { animation-play-state: paused; }
#bkn-logo-track > .elementor-widget-image {
  flex: 0 0 auto; width: 170px; height: 70px; margin: 0 14px;
  background: #fff; border: 1px solid #EFE9DF; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; padding: 0 14px;
}
#bkn-logo-track .elementor-widget-container,
#bkn-logo-track figure { margin: 0; display: flex; align-items: center; justify-content: center; }
#bkn-logo-track img { max-height: 56px; max-width: 100%; width: auto; height: auto; object-fit: contain; display: block; }
@keyframes bkn-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { #bkn-logo-track { animation: none; } }

/* Wide sections (categories, promo, newsletter) cap at 1600 like the original */
#bkn-cats, #bkn-promo-row, #bkn-nl { max-width: 1600px; margin-left: auto; margin-right: auto; }

/* Category tiles: square images, hover lift */
#bkn-cat-grid .elementor-image-box-img { width: 100% !important; margin: 0 0 14px !important; }
#bkn-cat-grid .elementor-image-box-img img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 18px; background: #F1ECE3;
  transition: box-shadow .4s ease, transform .4s cubic-bezier(.2,.8,.2,1);
}
#bkn-cat-grid .elementor-image-box-wrapper:hover .elementor-image-box-img img {
  box-shadow: 0 22px 46px rgba(34,31,27,.14); transform: translateY(-4px);
}
#bkn-cat-grid .elementor-image-box-title { margin-top: 0 !important; }
#bkn-cat-grid .elementor-image-box-title a { color: #221F1B; text-decoration: none; }
#bkn-viewall .elementor-button { border-bottom: 1px solid transparent; transition: border-color .3s ease, letter-spacing .3s ease; }
#bkn-viewall .elementor-button:hover { border-bottom-color: #3F6B52; letter-spacing: .14em; }

/* Filter chips — 12.5px / .06em / 10px 17px pills, as in the original */
#bkn-chips { align-items: center; }
#bkn-chips .elementor-widget-button { width: auto; flex: 0 0 auto; }
#bkn-chips .elementor-button {
  white-space: nowrap; font-size: 12.5px !important; line-height: 1.5 !important;
  letter-spacing: .06em !important; text-transform: uppercase !important;
  font-weight: 400 !important; padding: 10px 17px !important; border-radius: 999px !important;
  transition: all .2s ease;
}
#bkn-chips .elementor-button .elementor-button-text { font-size: inherit; letter-spacing: inherit; }
/*
 * Best sellers tabs. "All" used to be the only chip styled as active, baked
 * into its own Elementor settings; the active state now moves with the click,
 * so both states are declared here. Elementor writes per-widget rules of its
 * own, hence !important on the three properties that actually change.
 */
#bkn-chips .bkn-chip .elementor-button {
  background: transparent !important;
  color: #5C564D !important;
  border: 1px solid #DCD3C6 !important;
  cursor: pointer;
}
#bkn-chips .bkn-chip:hover .elementor-button {
  border-color: var(--bkn-green, #2A4635) !important;
  color: var(--bkn-green, #2A4635) !important;
}
#bkn-chips .bkn-chip.is-active .elementor-button,
#bkn-chips .bkn-chip.is-active:hover .elementor-button {
  background: var(--bkn-green, #2A4635) !important;
  color: #F6F1E7 !important;
  border-color: var(--bkn-green, #2A4635) !important;
}

/* while a tab's products are being fetched */
#bkn-best { transition: opacity .18s ease; }
#bkn-best.is-loading { opacity: .45; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  #bkn-best { transition: none; }
}

/* the sort control sits at the far right of the chip row */
#bkn-sortbox { margin-left: auto; width: auto !important; flex: 0 0 auto; }
#bkn-sortbox .elementor-widget-container { display: flex; }
.bkn-sort {
  border: 1px solid #DCD3C6; background: #fff; border-radius: 999px;
  padding: 10px 34px 10px 16px; font-size: 13px; line-height: 1.3;
  color: #221F1B; cursor: pointer; outline: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%238A8175' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  transition: border-color .2s ease;
}
.bkn-sort:hover { border-color: #2A4635; }
.bkn-sort:focus-visible { outline: 2px solid #2A4635; outline-offset: 2px; }
@media (max-width: 600px) { #bkn-sortbox { margin-left: 0; width: 100% !important; } .bkn-sort { width: 100%; } }

/* Promo band: circular medallion and dashed code chip */
#bkn-promo { position: relative; overflow: hidden; }
/* the photo occupies the right min(62%,940px) at full height, focal point 78% 50% */
#bkn-promo-photo {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(62%, 940px); height: 100%; margin: 0 !important; padding: 0 !important;
  z-index: 0; pointer-events: none;
}
#bkn-promo-photo .elementor-widget-container, #bkn-promo-photo figure { height: 100%; margin: 0; }
#bkn-promo-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; display: block;
}
/* scrim blends the photo into the band, exactly the original's stops */
#bkn-promo::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    #EFDDD8 0%, #EFDDD8 34%,
    rgba(239,221,216,.95) 48%,
    rgba(239,221,216,.78) 62%,
    rgba(239,221,216,.52) 78%,
    rgba(239,221,216,.34) 100%);
}
#bkn-promo-row { position: relative; z-index: 2; }
/* with the narrower copy column, the code + CTA sit beside it on one row */
@media (min-width: 901px) {
  #bkn-promo-row { padding-right: clamp(28px, 26vw, 430px) !important; }
}
@media (max-width: 900px) {
  /* On a narrow band the crop lands on empty backdrop, so aim it at her face
     (~78% across the source) and let her read at close to full strength. */
  #bkn-promo-photo { width: 80%; opacity: .85; }
  #bkn-promo-photo img { object-position: 87% center; }
  /* scrim stays dense under the copy on the left and clears off her on the right */
  #bkn-promo::after {
    background: linear-gradient(100deg, #EFDDD8 0%, rgba(239,221,216,.97) 32%,
      rgba(239,221,216,.84) 52%, rgba(239,221,216,.34) 76%, rgba(239,221,216,.10) 100%);
  }
  /* the copy spans the band and relies on the scrim for contrast; constraining
     it instead pushed the CTA off-screen on a 375px viewport */
  #bkn-promo-row { max-width: 100%; }
  /* the code chip and CTA must be free to wrap on a narrow screen */
  #bkn-promo-actions { flex-wrap: wrap !important; }
  #bkn-promo-cta .elementor-button { white-space: normal; }
}
@media (max-width: 560px) {
  #bkn-promo-photo { width: 88%; opacity: .8; }
  /* she sits high so her face clears the body copy below */
  #bkn-promo-photo img { object-position: 87% 22%; }
}

#bkn-promo-row { align-items: center; }
/* the three columns follow the original's flex spec exactly */
#bkn-promo-row > .e-con { align-self: center; padding: 0 !important; }
#bkn-promo-row > .e-con:nth-child(1) { flex: 0 0 auto !important; width: auto !important; }
#bkn-promo-row > .e-con:nth-child(2) { flex: 0 1 340px !important; min-width: min(100%, 260px); width: auto !important; }
#bkn-promo-row > .e-con:nth-child(3) { flex: 0 1 auto !important; width: auto !important; align-items: center; }

#bkn-medallion {
  position: relative; flex: 0 0 auto;
  width: 152px; height: 152px; border-radius: 50%; margin: 10px;
  background-image: linear-gradient(150deg, #B4553F, #8C3F2E) !important;
  box-shadow: 0 18px 38px rgba(140,63,46,.30);
  display: flex; align-items: center; justify-content: center; padding: 0 !important;
}
#bkn-medallion::after {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 1px solid rgba(180,85,63,.45); pointer-events: none;
  animation: bkn-halo 3.6s ease-in-out infinite;
}
#bkn-code .elementor-widget { width: auto; }
/* the original's chip uses normal line-height, giving it a 71px pill */
#bkn-code .elementor-heading-title { line-height: 1.35 !important; }
#bkn-medallion .elementor-widget-heading { width: auto; }
@media (max-width: 767px) { #bkn-medallion { width: 118px; height: 118px; } }
#bkn-code {
  position: relative; overflow: hidden; cursor: pointer;
  width: max-content; flex: 0 0 auto; align-self: center; gap: 0 !important;
  background: rgba(255,255,255,.62); border: 1.5px dashed #B4553F; border-radius: 14px; flex: 0 0 auto;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
#bkn-code:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(140,63,46,.16); }
/* the subtle travelling glow from the original */
#bkn-code::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.85) 50%, rgba(255,255,255,0) 62%);
  background-size: 220% 100%;
  animation: bkn-shimmer 3.8s linear infinite;
}
#bkn-code > * { position: relative; z-index: 1; }
@keyframes bkn-shimmer { from { background-position: -160% 0; } to { background-position: 260% 0; } }
@keyframes bkn-halo { 0%, 100% { transform: scale(1); opacity: .55; } 50% { transform: scale(1.12); opacity: .18; } }
@media (prefers-reduced-motion: reduce) {
  #bkn-code::before, #bkn-medallion::after { animation: none; }
}
#bkn-promo-cta .elementor-button { box-shadow: 0 12px 26px rgba(42,70,53,.24); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease; }
#bkn-promo-cta .elementor-button:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(42,70,53,.30); }
@media (max-width: 1024px) { #bkn-promo-row { padding-right: 40px !important; } }

/* Story image keeps the original 5:4 crop */
#bkn-story-img img { aspect-ratio: 5 / 4; object-fit: cover; width: 100%; border-radius: 22px; }

/* Testimonial cards */
#bkn-tcard-1, #bkn-tcard-2, #bkn-tcard-3, .bkn-tcard { background: #fff; border: 1px solid #EDE6DA; border-radius: 18px; }
#bkn-tcard-1 .elementor-testimonial-wrapper, #bkn-tcard-2 .elementor-testimonial-wrapper, #bkn-tcard-3 .elementor-testimonial-wrapper { text-align: left; }
#bkn-tcard-1 .elementor-testimonial-content, #bkn-tcard-2 .elementor-testimonial-content, #bkn-tcard-3 .elementor-testimonial-content { margin: 16px 0 22px; }
#bkn-tcard-1 .elementor-testimonial-meta-inner, #bkn-tcard-2 .elementor-testimonial-meta-inner, #bkn-tcard-3 .elementor-testimonial-meta-inner { display: flex; align-items: center; gap: 12px; }
#bkn-tcard-1 .elementor-testimonial-image img, #bkn-tcard-2 .elementor-testimonial-image img, #bkn-tcard-3 .elementor-testimonial-image img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
#bkn-tcard-1 .elementor-star-rating, #bkn-tcard-2 .elementor-star-rating, #bkn-tcard-3 .elementor-star-rating { line-height: 1; }

/* Newsletter form: pill input + mint button, centred */
#bkn-nl-form .wpforms-form {
  display: flex; flex-wrap: wrap; gap: 10px;
  max-width: 470px; margin: 0 auto; align-items: center;
}
#bkn-nl-form .wpforms-field-container { display: contents; }
#bkn-nl-form .wpforms-field { flex: 1 1 190px; min-width: 0; margin: 0; padding: 0; }
#bkn-nl-form .wpforms-submit-container { flex: 0 0 auto; margin: 0; }
#bkn-nl-form input[type="email"] {
  width: 100%; border: 0; border-radius: 999px;
  padding: 16px 22px; font-size: 15px; background: #F6F1E7; color: #221F1B;
  outline: none;
}
/*
 * The sitewide button rule at the top of this file is written with !important
 * (it has to out-rank WooCommerce), and WPForms renders a <button type=submit>,
 * so the newsletter button has to answer in kind. min-height matches the input
 * beside it, which the padding alone would not.
 */
#bkn-nl-form .wpforms-submit {
  background: #C9DCC7 !important; color: #1F3427 !important; border: 0 !important;
  border-radius: 999px !important; padding: 0 26px !important;
  min-height: 55px;
  font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: .1em !important;
  text-transform: uppercase !important; cursor: pointer;
  transition: background-color .2s ease;
}
#bkn-nl-form .wpforms-submit:hover { background: #B7CEB4 !important; }
#bkn-nl-form .wpforms-submit[disabled] { opacity: .6; cursor: default; }
#bkn-nl-form .wpforms-confirmation-container,
#bkn-nl-form .wpforms-error-container {
  flex: 1 1 100%; color: #C9DCC7; border: 1px solid #C9DCC7;
  border-radius: 12px; padding: 12px 16px; font-size: 14px; margin: 6px 0 0;
}
#bkn-nl-form label.wpforms-error,
#bkn-nl-form em.wpforms-error {
  flex: 1 1 100%; color: #F0C3B6; font-size: 12.5px; font-style: normal; margin: 0;
}

/* same anti-spam fields, on the newsletter row */
#bkn-nl-form .wpforms-form { position: relative; }
#bkn-nl-form .wpforms-field:has(> label[aria-hidden="true"]) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/*
 * Floating WhatsApp button. Bottom-right on desktop, and clear of the
 * sticky add-to-cart bar on a phone. The label collapses under 480px so it
 * never crowds the screen.
 */
.bkn-wa {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 480;               /* under the header (500) and any modal */
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 14px;
  border-radius: 999px;
  background: #25D366;
  color: #0B2B17;
  text-decoration: none;
  font: 700 13px/1 "Nunito Sans", system-ui, sans-serif;
  letter-spacing: .02em;
  box-shadow: 0 8px 24px rgba(11, 43, 23, .28);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease;
}
.bkn-wa:hover,
.bkn-wa:focus-visible {
  color: #0B2B17;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(11, 43, 23, .34);
}
.bkn-wa:focus-visible { outline: 3px solid rgba(42, 70, 53, .45); outline-offset: 3px; }
.bkn-wa-icon { display: flex; }
.bkn-wa-icon svg { display: block; }

@media (max-width: 480px) {
  .bkn-wa { right: 14px; bottom: 14px; padding: 13px; gap: 0; }
  .bkn-wa-text {
    /* visually hidden, still read by a screen reader */
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bkn-wa { transition: none; }
  .bkn-wa:hover, .bkn-wa:focus-visible { transform: none; }
}

/* WooCommerce product loops embedded on the homepage: 4-up grid like the original */
#bkn-best ul.products, #bkn-recent ul.products,
.elementor-widget-shortcode ul.products {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 24px 22px; margin: 0 !important; padding: 0 !important; list-style: none;
}
#bkn-best ul.products li.product, #bkn-recent ul.products li.product,
.elementor-widget-shortcode ul.products li.product {
  width: auto !important; margin: 0 !important; float: none !important; clear: none !important;
}
/* the float clearfix would otherwise occupy two grid cells */
#bkn-best ul.products::before, #bkn-best ul.products::after,
#bkn-recent ul.products::before, #bkn-recent ul.products::after,
.elementor-widget-shortcode ul.products::before,
.elementor-widget-shortcode ul.products::after { content: none !important; display: none !important; }
@media (max-width: 767px) {
  #bkn-best ul.products, #bkn-recent ul.products,
  .elementor-widget-shortcode ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  #bkn-best ul.products li.product h2, #bkn-recent ul.products li.product h2 { font-size: 17px; }
}

/* ============ FOOTER — four equal columns, as in the original ============ */
/* five columns: brand a little wider, the four link columns share the rest */
#bkn-foot-cols > .e-con { flex: 1 1 150px; min-width: 0; width: auto; padding: 0 !important; }
#bkn-foot-cols > .e-con:first-child { flex: 1.5 1 230px; }
#bkn-foot-wordmark .elementor-heading-title { white-space: nowrap; }

/* social links render as bordered pills */
#bkn-foot-social .elementor-icon-list-items { gap: 10px; flex-wrap: wrap; margin-top: 20px; }
#bkn-foot-social .elementor-icon-list-item {
  border: 1px solid #453F38; border-radius: 999px; padding: 8px 14px;
  transition: border-color .25s ease, transform .25s cubic-bezier(.2,.8,.2,1), background .25s ease;
}
#bkn-foot-social .elementor-icon-list-item:hover { border-color: #8B8478; background: #2C2822; transform: translateY(-2px); }
#bkn-foot-social .elementor-icon-list-item a { display: inline-flex; align-items: center; gap: 8px; }
#bkn-foot-social .elementor-icon-list-text { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; }

/* link columns */
#bkn-foot-shop .elementor-icon-list-item, #bkn-foot-care .elementor-icon-list-item,
#bkn-foot-pages .elementor-icon-list-item, #bkn-foot-reach .elementor-icon-list-item {
  font-size: 14px; line-height: 1.5;
}
#bkn-foot-shop .elementor-icon-list-icon, #bkn-foot-care .elementor-icon-list-icon,
#bkn-foot-pages .elementor-icon-list-icon, #bkn-foot-reach .elementor-icon-list-icon { display: none; }
#bkn-foot-reach .elementor-icon-list-text { line-height: 1.5; }

/* payment chips */
#bkn-pay-chips .elementor-widget-heading { width: auto; flex: 0 0 auto; }
#bkn-pay-chips .elementor-heading-title {
  display: inline-block; background: #2C2822; border: 1px solid #3E382F;
  border-radius: 7px; padding: 8px 12px; font-size: 11px; letter-spacing: .06em; color: #CFC7B9;
}
#bkn-foot-bottom-row { justify-content: space-between; }
#bkn-foot-bottom-row > .e-con:first-child { flex: 0 1 auto; width: auto; }
#bkn-foot-bottom-row > .e-con:last-child { flex: 0 1 auto; width: auto; margin-left: auto; }
/* below the five-across width the brand takes a full row and the four link
   columns pair up 2x2, so none is left stranded alone */
@media (max-width: 1100px) {
  #bkn-foot-cols > .e-con { flex: 1 1 40%; }
  #bkn-foot-cols > .e-con:first-child { flex: 1 1 100%; }
}
@media (max-width: 880px) {
  #bkn-foot-cols > .e-con { flex: 1 1 45%; }
  #bkn-foot-bottom-row > .e-con { flex: 1 1 100%; margin-left: 0; }
  #bkn-foot-bottom-row .elementor-widget-text-editor p { text-align: left !important; }
}
@media (max-width: 560px) { #bkn-foot-cols > .e-con { flex: 1 1 100%; } }

/* Testimonial avatars */
#bkn-tst-row .elementor-testimonial-image img {
  width: 44px !important; height: 44px !important; border-radius: 50%; object-fit: cover;
}

/* the drawer's inline `inset:0` does not resolve reliably; size it explicitly */
#bkn-mmenu {
  top: 0 !important; left: 0 !important;
  width: 100vw !important; height: 100vh !important; height: 100dvh !important;
  overscroll-behavior: contain;
}

/* visually hidden text stays available to screen readers only */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* WooCommerce's reset.css styles EVERY <button> with a magenta (#cc3366) border,
   and a magenta background on both :hover and :focus. Because :focus persists
   after a click, controls stayed magenta even once the dialog closed.
   Opt every control we render out of all four states, then restate the design. */
.bkn-quickview, .bkn-wish, .bkn-sort, #bkn-qv button,
.bkn-quickview:hover, .bkn-quickview:focus, .bkn-quickview:active,
.bkn-wish:hover, .bkn-wish:focus, .bkn-wish:active,
.bkn-sort:hover, .bkn-sort:focus, .bkn-sort:active,
#bkn-qv button:hover, #bkn-qv button:focus, #bkn-qv button:active {
  background-color: transparent;
  background-image: none;
  border-color: transparent;
  box-shadow: none;
  text-decoration: none;
  color: inherit;
}

/* --- restate each control --- */

/* quick view pill */
.bkn-quickview, .bkn-quickview:focus, .bkn-quickview:active {
  background-color: rgba(251,248,244,.95); color: #221F1B; border: 0;
}
.bkn-quickview:hover { background-color: #fff; color: #221F1B; }

/* wishlist heart */
.bkn-wish, .bkn-wish:focus, .bkn-wish:active {
  background-color: rgba(255,255,255,.92); color: #C6BCAD; border: 0;
}
.bkn-wish:hover { background-color: #fff; color: #C6BCAD; }
.bkn-wish.is-on, .bkn-wish.is-on:hover, .bkn-wish.is-on:focus { color: #B4553F; }

/* dialog close */
#bkn-qv .bkn-qv-close, #bkn-qv .bkn-qv-close:hover, #bkn-qv .bkn-qv-close:focus, #bkn-qv .bkn-qv-close:active {
  background-color: transparent; border: 0; color: #8A8175;
}
#bkn-qv .bkn-qv-close:hover { color: #221F1B; }

/* gallery thumbnails */
#bkn-qv .bkn-qv-thumb, #bkn-qv .bkn-qv-thumb:focus, #bkn-qv .bkn-qv-thumb:active {
  background-color: #F1ECE3; border: 1px solid transparent;
}
#bkn-qv .bkn-qv-thumb:hover { border-color: #C9BFAF; }
#bkn-qv .bkn-qv-thumb.is-active, #bkn-qv .bkn-qv-thumb.is-active:focus { border-color: #2A4635; }

/* tabs */
#bkn-qv .bkn-qv-tab, #bkn-qv .bkn-qv-tab:focus, #bkn-qv .bkn-qv-tab:active {
  background-color: transparent; color: #8A8175;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
}
#bkn-qv .bkn-qv-tab:hover { color: #2A4635; }
#bkn-qv .bkn-qv-tab.is-active, #bkn-qv .bkn-qv-tab.is-active:hover, #bkn-qv .bkn-qv-tab.is-active:focus {
  color: #2A4635; border-bottom-color: #2A4635;
}

/* related tiles */
#bkn-qv .bkn-qv-rel, #bkn-qv .bkn-qv-rel:hover, #bkn-qv .bkn-qv-rel:focus, #bkn-qv .bkn-qv-rel:active {
  background-color: transparent; border: 0; color: #221F1B;
}

/* quantity stepper — the number must not sit in its own box */
#bkn-qv .bkn-qty { border: 1px solid #DCD3C6; border-radius: 999px; background: #fff; }
#bkn-qv .bkn-qty button, #bkn-qv .bkn-qty button:focus, #bkn-qv .bkn-qty button:active {
  background-color: transparent; border: 0; color: #221F1B; border-radius: 999px;
}
#bkn-qv .bkn-qty button:hover { background-color: #F1ECE3; color: #221F1B; }
#bkn-qv .bkn-qty-input, 
#bkn-qv .bkn-qty-input:focus, 
#bkn-qv .bkn-qty-input:hover, 
#bkn-qv .bkn-qty-input:active {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* primary actions */
#bkn-qv .bkn-qv-add, #bkn-qv .bkn-qv-add:focus, #bkn-qv .bkn-qv-add:active {
  background-color: transparent; border: 1px solid #2A4635; color: #2A4635;
}
#bkn-qv .bkn-qv-add:hover:not(:disabled) { background-color: #2A4635; color: #F6F1E7; }
#bkn-qv .bkn-qv-buynow, #bkn-qv .bkn-qv-buynow:focus, #bkn-qv .bkn-qv-buynow:active {
  background-color: #2A4635; border: 0; color: #F6F1E7;
}
#bkn-qv .bkn-qv-buynow:hover:not(:disabled) { background-color: #1F3427; color: #F6F1E7; }

/* sort dropdown */
.bkn-sort, .bkn-sort:focus, .bkn-sort:active {
  background-color: #fff; border: 1px solid #DCD3C6; color: #221F1B;
}
.bkn-sort:hover { border-color: #2A4635; }

/* keyboard users still get a clear ring; mouse clicks do not leave one behind */
.bkn-quickview:focus-visible, .bkn-wish:focus-visible, .bkn-qv-close:focus-visible,
.bkn-qv-tab:focus-visible, .bkn-qv-thumb:focus-visible, .bkn-qv-rel:focus-visible,
.bkn-qv-add:focus-visible, .bkn-qv-buynow:focus-visible, .bkn-sort:focus-visible,
.bkn-qty button:focus-visible {
  outline: 2px solid #2A4635; outline-offset: 2px;
}

/* ============ PRODUCT CARDS — matching the original exactly ============ */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link { position: relative; }

/* badge: "New" in terracotta, or the discount percentage */
.bkn-badge.is-justin { background: #2A4635; color: #F6F1E7; }
.bkn-badge {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  background: #B4553F; color: #FBF3EC;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  padding: 6px 11px; border-radius: 999px; pointer-events: none;
}

/* wishlist heart */
.bkn-wish {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.92); color: #C6BCAD;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; line-height: 1; cursor: pointer; padding: 0;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), background .25s ease, color .2s ease;
}
.bkn-wish:hover { transform: scale(1.16); background: #fff; }
.bkn-wish.is-on { color: #B4553F; }

/* quick view: always visible, as in the original */
.bkn-quickview {
  position: absolute; bottom: 12px; left: 12px; right: 12px; z-index: 4;
  border: 0; border-radius: 999px; padding: 11px;
  background: rgba(251,248,244,.95); color: #221F1B;
  font-family: inherit; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; text-align: center;
  cursor: pointer; transition: background .25s ease;
}
.bkn-quickview:hover, .bkn-quickview:focus-visible { background: #fff; color: #221F1B; }
.woocommerce ul.products li.product a:hover .bkn-quickview,
.woocommerce ul.products li.product:hover .bkn-quickview { color: #221F1B; }

/* rating row: gold text stars + "4.0 (153)" */
.bkn-rating {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: #8A8175; margin: 8px 0 10px;
}
.bkn-stars { color: #B4863F; letter-spacing: .06em; }

/* brand eyebrow, title, price */
.bkn-card-brand { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #8A8175; margin: 16px 0 6px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
  font-family: "Cormorant Garamond", serif; font-weight: 500;
  font-size: 21px; line-height: 1.2; color: #221F1B; margin: 0; padding: 0;
}
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title {
  color: #2A4635; text-decoration: underline; text-decoration-color: #C9BFAF; text-underline-offset: 3px;
}
.woocommerce ul.products li.product .price {
  color: #221F1B; font-weight: 700; font-size: 17px; margin: 0 0 14px;
  display: flex; align-items: baseline; gap: 9px;
}
.woocommerce ul.products li.product .price del { color: #A79E90; font-size: 13.5px; font-weight: 400; opacity: 1; }
.woocommerce ul.products li.product .price ins { color: #221F1B; text-decoration: none; font-weight: 700; }
.woocommerce ul.products li.product a.button { margin-top: auto; }
@media (max-width: 767px) {
  .woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: 17px; }
}

/* ============ QUICK VIEW DIALOG ============ */
.bkn-qv {
  position: fixed; top: 0; left: 0; z-index: 9999;
  width: 100vw; height: 100vh; height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 32px; overscroll-behavior: contain;
}
.bkn-qv[hidden] { display: none; }
.bkn-qv-backdrop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(34,31,27,.46); animation: bkn-fade .2s ease-out; }
.bkn-qv-dialog {
  position: relative; width: 100%; max-width: 1000px;
  max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px);
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  background: #FBF8F4; border-radius: 22px; animation: bkn-pop .24s cubic-bezier(.2,.8,.2,1);
}
@keyframes bkn-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes bkn-pop { from { opacity: 0; transform: translateY(14px) scale(.985) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .bkn-qv-backdrop, .bkn-qv-dialog { animation: none } }
.bkn-qv-close {
  position: absolute; top: 18px; right: 20px; z-index: 2;
  width: 32px; height: 32px; border: 0; background: transparent;
  font-size: 22px; line-height: 1; color: #8A8175; cursor: pointer;
}
.bkn-qv-close:hover { color: #221F1B; background: transparent; }
/* keep global WooCommerce/button styling out of the dialog */
#bkn-qv button { box-shadow: none; }
#bkn-qv .bkn-qv-add:hover { background: #2A4635 !important; color: #F6F1E7 !important; }
#bkn-qv .bkn-qv-buynow:hover { background: #1F3427 !important; color: #F6F1E7 !important; }
.bkn-qv-loading { padding: 60px; text-align: center; color: #8A8175; font-size: 14px; }
.bkn-qv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0; }
.bkn-qv-grid > * { min-width: 0; }

.bkn-qv-media { padding: 30px; display: flex; flex-direction: column; gap: 12px; }
.bkn-qv-main { aspect-ratio: 3/4; border-radius: 16px; overflow: hidden; background: #F1ECE3; }
.bkn-qv-main img {
  width: 100% !important; height: 100% !important;
  object-fit: cover; padding: 0; box-sizing: border-box; display: block;
}
.bkn-qv-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bkn-qv-thumb {
  aspect-ratio: 3/4; border-radius: 11px; overflow: hidden; background: #F1ECE3;
  border: 1px solid transparent; padding: 0; cursor: pointer;
}
.bkn-qv-thumb.is-active { border-color: #2A4635; }
.bkn-qv-thumb:hover { border-color: #C9BFAF; background: #F1ECE3; }
.bkn-qv-thumb img, .bkn-qv-main img, .bkn-qv-rel-img img { filter: none !important; opacity: 1 !important; }
.bkn-qv-thumb img {
  width: 100% !important; height: 100% !important; object-fit: cover; padding: 0;
  box-sizing: border-box; display: block;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.bkn-qv-thumb:hover img { transform: scale(1.08); }

.bkn-qv-info { padding: 14px 34px 34px; max-width: 560px; }
.bkn-qv-eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #8A8175; }
.bkn-qv-title {
  font-family: "Cormorant Garamond", serif; font-weight: 500;
  font-size: clamp(28px, 3.4vw, 36px); line-height: 1.1; margin: 12px 0 10px; color: #221F1B;
}
.bkn-qv-rating { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #8A8175; margin-bottom: 16px; }
.bkn-qv-price { font-family: "Cormorant Garamond", serif; font-size: 34px; color: #221F1B; margin-bottom: 6px; }
.bkn-qv-price del { font-family: "Nunito Sans", sans-serif; font-size: 15px; color: #A79E90; margin-left: 10px; }
.bkn-qv-price ins { text-decoration: none; }
.bkn-qv-stock { font-size: 13px; color: #3F6B52; margin-bottom: 22px; }
.bkn-qv-stock.is-low { color: #8C5344; }

.bkn-qv-buy { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.bkn-qty { display: flex; align-items: center; border: 1px solid #DCD3C6; border-radius: 999px; background: #fff; }
.bkn-qty button { border: 0; background: transparent; padding: 13px 16px; font-size: 15px; cursor: pointer; color: #221F1B; border-radius: 999px; transition: background .2s ease; }
.bkn-qty button:hover { background: #F1ECE3; color: #221F1B; }
.bkn-qty { flex: 0 0 auto; }
.bkn-qty-input {
  width: 44px !important; min-width: 0 !important; max-width: 44px !important;
  padding: 0 !important; margin: 0 !important;
  text-align: center; border: 0; background: transparent; box-shadow: none;
  font-size: 14.5px; font-weight: 700; -moz-appearance: textfield; appearance: textfield;
}
.bkn-qty-input:focus { outline: none; box-shadow: none; }
.bkn-qty-input::-webkit-outer-spin-button, .bkn-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bkn-qv-add {
  flex: 1; min-width: 180px; background: transparent; border: 1px solid #2A4635; color: #2A4635;
  border-radius: 999px; padding: 14px; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer; font-family: inherit;
  transition: background .2s ease, color .2s ease;
}
.bkn-qv-add:hover:not(:disabled) { background: #2A4635; color: #F6F1E7; }
.bkn-qv-buynow {
  width: 100%; background: #2A4635; color: #F6F1E7; border: 0; border-radius: 999px;
  padding: 15px; font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; cursor: pointer; margin-bottom: 24px; font-family: inherit;
  transition: background .2s ease;
}
.bkn-qv-buynow:hover:not(:disabled) { background: #1F3427; }
.bkn-qv-add:disabled, .bkn-qv-buynow:disabled { opacity: .75; cursor: default; }

.bkn-qv-tabs { display: flex; gap: 22px; border-bottom: 1px solid #E9E2D6; margin-bottom: 16px; flex-wrap: wrap; }
.bkn-qv-tab {
  border: 0; background: transparent; cursor: pointer; font-family: inherit;
  font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 0 0 12px; color: #8A8175; border-bottom: 2px solid transparent;
}
.bkn-qv-tab.is-active { color: #2A4635; border-bottom-color: #2A4635; }
.bkn-qv-panel { display: none; }
.bkn-qv-panel.is-active { display: block; }
.bkn-qv-panel p { font-size: 14.5px; line-height: 1.7; color: #5C564D; margin: 0 0 22px; }

.bkn-qv-block { border-top: 1px solid #E9E2D6; padding-top: 20px; }
.bkn-qv-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #8A8175; margin-bottom: 14px; }
.bkn-qv-review { margin-bottom: 16px; }
.bkn-qv-review-head { display: flex; align-items: baseline; gap: 10px; }
.bkn-qv-review-head .bkn-stars { font-size: 12.5px; }
.bkn-qv-review-name { font-size: 13.5px; font-weight: 700; color: #221F1B; }
.bkn-qv-review p { font-size: 13.5px; color: #6C665C; line-height: 1.6; margin: 6px 0 0; }
.bkn-qv-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bkn-qv-rel { min-width: 0; }
.bkn-qv-rel-name { overflow-wrap: anywhere; }
.bkn-qv-rel {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  text-align: left; font-family: inherit; white-space: normal; min-width: 0;
}
.bkn-qv-rel-img { display: block; aspect-ratio: 3/4; border-radius: 11px; overflow: hidden; background: #F1ECE3; }
.bkn-qv-rel-img img {
  width: 100% !important; height: 100% !important;
  object-fit: cover; padding: 0; box-sizing: border-box; display: block;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.bkn-qv-rel:hover .bkn-qv-rel-img img { transform: scale(1.08); }
@media (prefers-reduced-motion: reduce) {
  .bkn-qv-thumb img, .bkn-qv-rel-img img { transition: none; }
  .bkn-qv-thumb:hover img, .bkn-qv-rel:hover .bkn-qv-rel-img img { transform: none; }
}
.bkn-qv-rel, .bkn-qv-rel:hover, .bkn-qv-rel:focus { background: transparent; }
.bkn-qv-rel:hover .bkn-qv-rel-name { color: #2A4635; }
.bkn-qv-related { align-items: start; }
.bkn-qv-rel { display: flex; flex-direction: column; }
.bkn-qv-rel-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: 13px; margin-top: 8px; line-height: 1.3; color: #221F1B;
  white-space: normal; overflow-wrap: anywhere; min-height: calc(2 * 1.3em);
}
.bkn-qv-rel-price {
  display: block; font-size: 13px; font-weight: 700; margin-top: 2px; color: #221F1B;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.3em;
}
/* the original lists only the current price here, which also keeps tiles level */
.bkn-qv-rel-price del { display: none; }
.bkn-qv-rel-price ins { text-decoration: none; font-weight: 700; }
.bkn-qv-rel-price del { font-weight: 400; color: #A79E90; }
.bkn-qv-rel-price ins { text-decoration: none; }

.bkn-quickview:focus-visible, .bkn-wish:focus-visible, .bkn-qv-close:focus-visible,
.bkn-qv-tab:focus-visible, .bkn-qv-thumb:focus-visible, .bkn-qv-rel:focus-visible {
  outline: 2px solid #2A4635; outline-offset: 2px;
}
@media (max-width: 700px) {
  .bkn-qv { padding: 14px; }
  .bkn-qv-dialog { max-height: calc(100vh - 28px); max-height: calc(100dvh - 28px); }
  .bkn-qv-info { padding: 0 22px 26px; }
  .bkn-qv-media { padding: 22px; }
}

/* ===================== MOTION =====================
   Everything here is opacity/transform only (no layout thrash), 150-600ms,
   and every rule is switched off under prefers-reduced-motion.            */

/* the original's pulsing dots */
@keyframes bkn-sparkle {
  0%, 100% { opacity: .15; transform: scale(.7); }
  50%      { opacity: .9;  transform: scale(1); }
}
@keyframes bkn-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bkn-bump {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.18) rotate(-6deg); }
  60%  { transform: scale(.94); }
  100% { transform: scale(1); }
}

/* --- trust bar dots: 3.4s sparkle, staggered 0.45s apart, as in the original --- */
#bkn-trust .elementor-icon-box-icon .elementor-icon {
  display: inline-block;
  animation: bkn-sparkle 3.4s ease-in-out infinite;
}
#bkn-trust-row > .e-con:nth-child(1) .elementor-icon { animation-delay: 0s; }
#bkn-trust-row > .e-con:nth-child(2) .elementor-icon { animation-delay: .45s; }
#bkn-trust-row > .e-con:nth-child(3) .elementor-icon { animation-delay: .9s; }
#bkn-trust-row > .e-con:nth-child(4) .elementor-icon { animation-delay: 1.35s; }

/* --- promo eyebrow keeps its own sparkling dot --- */
#bkn-promo-copy .elementor-widget-heading:first-child .elementor-heading-title {
  display: inline-flex; align-items: center; gap: 9px;
}
#bkn-promo-copy .elementor-widget-heading:first-child .elementor-heading-title::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: #B4553F; flex: 0 0 auto;
  animation: bkn-sparkle 2.4s ease-in-out infinite;
}

/* --- scroll reveal ---------------------------------------------------
   The hiding rule only applies once the script has added .bkn-anim, so
   content stays visible if JavaScript never runs.                      */
.bkn-anim .bkn-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
.bkn-anim .bkn-reveal.is-in { opacity: 1; transform: none; will-change: auto; }

/* small stagger inside a group so rows arrive in sequence, not all at once */
.bkn-anim .bkn-reveal[data-d="1"] { transition-delay: .06s; }
.bkn-anim .bkn-reveal[data-d="2"] { transition-delay: .12s; }
.bkn-anim .bkn-reveal[data-d="3"] { transition-delay: .18s; }
.bkn-anim .bkn-reveal[data-d="4"] { transition-delay: .24s; }
.bkn-anim .bkn-reveal[data-d="5"] { transition-delay: .30s; }

/* --- header nav: the current page is underlined, and nothing else ever is ---

   Two things this has to get right:

   1. The rule belongs to the page you are on and stays there. It is not drawn
      by :hover, and no pseudo-element is left lying around for a stray hover
      rule to expand — non-current items have no ::after at all.

   2. The line matches the label. An absolutely positioned pseudo-element spans
      the anchor's box including its 13px of horizontal padding, which made the
      line overhang the text by 26px. Painting it as a background sized against
      the CONTENT box makes it exactly as wide as the words, and keeps it right
      if the menu padding is ever changed in Elementor. */
#bkn-hcol-nav .menu-item a.hfe-menu-item {
  position: relative;
  transition: color .2s ease;
  padding-bottom: 9px;
  /* the widget sets line-height equal to font-size, so descenders spill past
     the content box and the rule would strike through them; 1.3 gives the box
     enough room for the 3px gap below to be a real gap */
  line-height: 1.3;
  padding-top: 9px;
}
#bkn-hcol-nav .menu-item a.hfe-menu-item::after { content: none; }
#bkn-hcol-nav .menu-item a.hfe-menu-item,
#bkn-hcol-nav .menu-item a.hfe-menu-item:hover { text-decoration: none; }

#bkn-hcol-nav .menu-item.current-menu-item > a.hfe-menu-item,
#bkn-hcol-nav .menu-item.current_page_item > a.hfe-menu-item,
#bkn-hcol-nav .menu-item.current-menu-item > .hfe-has-submenu-container > a.hfe-menu-item,
#bkn-hcol-nav .menu-item.current_page_item > .hfe-has-submenu-container > a.hfe-menu-item {
  background-image: linear-gradient(#2A4635, #2A4635);
  background-repeat: no-repeat;
  background-origin: content-box;
  background-size: 100% 2px;
  /* 3px of air between the label and the rule, as in the original */
  background-position: left calc(100% + 3px);
}

/* hovering a page you are not on changes the colour only */
#bkn-hcol-nav .menu-item a.hfe-menu-item:hover { color: #2A4635; }
#bkn-hcol-nav .menu-item:not(.current-menu-item):not(.current_page_item) > a.hfe-menu-item:hover,
#bkn-hcol-nav .menu-item:not(.current-menu-item):not(.current_page_item) > .hfe-has-submenu-container > a.hfe-menu-item:hover {
  background-image: none;
}
/* --- Categories dropdown: the two things the widget has no control for ---
   The panel's own 10px inset and the 9px radius on each row, so the highlight
   is a rounded pill sitting inside the card rather than a full-bleed band.
   Everything else here (border, radius, shadow, width, row padding, hover
   colours, no dividers) is set on the widget itself and stays editable. */
#bkn-hcol-nav ul.sub-menu {
  padding: 10px;
  overflow: visible;
}
#bkn-hcol-nav ul.sub-menu li.menu-item { border: 0; }
#bkn-hcol-nav ul.sub-menu a.hfe-sub-menu-item {
  border-radius: 9px;
  transition: background-color .18s ease, color .18s ease;
}
/* the widget rounds the first and last rows to the panel radius, which fights
   the 9px pill once the panel has an inset */
#bkn-hcol-nav ul.sub-menu li.menu-item:first-child,
#bkn-hcol-nav ul.sub-menu li.menu-item:last-child {
  border-radius: 0;
  overflow: visible;
}


/* --- cart bumps when something is added --- */
#bkn-hcol-cart.is-bumped .hfe-cart-menu-wrap-custom,
#bkn-hcol-cart.is-bumped .hfe-menu-cart__toggle {
  animation: bkn-bump .45s cubic-bezier(.2,.8,.2,1);
}

/* --- tactile press on the primary actions --- */
.elementor-button, .bkn-quickview, .bkn-qv-add, .bkn-qv-buynow,
.woocommerce ul.products li.product a.button {
  transition: background-color .25s ease, color .25s ease,
              transform .12s ease, box-shadow .25s ease;
}
.elementor-button:active, .bkn-quickview:active, .bkn-qv-add:active,
.bkn-qv-buynow:active, .woocommerce ul.products li.product a.button:active {
  transform: translateY(1px);
}

/* --- category tiles lift a touch more decisively --- */
#bkn-cat-grid .elementor-image-box-wrapper { transition: transform .4s cubic-bezier(.2,.8,.2,1); }
#bkn-cat-grid .elementor-image-box-wrapper:hover { transform: translateY(-4px); }

/* --- testimonial cards settle on hover --- */
#bkn-tcard-1, #bkn-tcard-2, #bkn-tcard-3 {
  transition: box-shadow .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
#bkn-tcard-1:hover, #bkn-tcard-2:hover, #bkn-tcard-3:hover {
  transform: translateY(-3px); box-shadow: 0 18px 38px rgba(34,31,27,.08);
}

/* --- the dialog's own entrance is already defined; keep it honest here --- */
@media (prefers-reduced-motion: reduce) {
  #bkn-trust .elementor-icon-box-icon .elementor-icon,
  #bkn-promo-copy .elementor-widget-heading:first-child .elementor-heading-title::before {
    animation: none;
  }
  .bkn-anim .bkn-reveal { opacity: 1; transform: none; transition: none; }
  #bkn-hcol-nav .menu-item a.hfe-menu-item::after { transition: none; }
  #bkn-hcol-cart.is-bumped .hfe-menu-cart__toggle { animation: none; }
  .elementor-button:active, .bkn-quickview:active { transform: none; }
  #bkn-cat-grid .elementor-image-box-wrapper:hover,
  #bkn-tcard-1:hover, #bkn-tcard-2:hover, #bkn-tcard-3:hover { transform: none; }
}