/* ==========================================================================
   House of Serene — Kalles site chrome
   Loaded after styles.min.css and libaas-kalles.css (see Views/Shared/_Layout.cshtml).

   Header, mega-menu, mobile push menu, search popup, cart / wishlist / recently-viewed
   drawers, announcement bar, footer and back-to-top — modelled on the Kalles
   "Home Fashion Simple" demo (Theme/kalles-template). Plain CSS, no Kalles custom
   elements: the behaviour stays with theme/layout.js, theme/wishlist.js and the inline
   scripts in the partials, which rely on the ids kept in the markup.

   Breakpoints follow Kalles: desktop header >= 1150px, tablet/mobile header below
   (burger + centred logo), phone <= 767px (bottom toolbar, fewer header icons).
   ========================================================================== */

:root {
  --lk-hd-h: 90px;
  --lk-line: #ebebeb;
  --lk-text-2: #878787;
  --lk-ease: cubic-bezier(.19, 1, .22, 1);
}

/* ── Announcement bar — Kalles marquee (Theme\kalles-template\index.html) ─────── */
.announcement-bar.hdt-announcement-bar {
  position: relative; display: flex; align-items: center; min-height: 70px; padding: 0;
  background: #222; color: #fff; font: 400 14px/1.3 var(--font-sans); overflow: hidden;
}
.hdt-announcement-bar__link { position: absolute; inset: 0; z-index: 1; }
.hdt-announcement-bar .hdt-marquee { display: block; width: 100%; }
.hdt-announcement-bar .hdt-marquee-item { display: inline-flex; align-items: center; column-gap: var(--space-item, 40px); padding-right: var(--space-item, 40px); }
.hdt-announcement-bar .hdt-marquee__item { display: inline-flex; align-items: center; }
.hdt-announcement-bar__text { white-space: nowrap; color: #fff; }
.hdt-announcement-bar__big { font-size: clamp(18px, 3.6vw, 36px); font-weight: 400; line-height: 1; letter-spacing: 0; }
@media (max-width: 767px) { .announcement-bar.hdt-announcement-bar { min-height: 50px; font-size: 13px; } }

/* ── Top bar ───────────────────────────────────────────────────────────────── */
.lk-topbar { background: #f6f6f8; color: var(--dark-mid); font-size: 12px; border-bottom: 1px solid var(--lk-line); }
.lk-topbar__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; min-height: 40px; padding-inline: 30px; }
.lk-topbar__left, .lk-topbar__right { display: flex; gap: 22px; }
.lk-topbar__right { justify-content: flex-end; }
.lk-topbar a { color: inherit; text-decoration: none; transition: color .2s; }
.lk-topbar a:hover, .lk-topbar .top-bar__signup { color: var(--accent); }
.lk-topbar .top-bar__signup { font-weight: 600; }
@media (max-width: 1149px) { .lk-topbar__inner { grid-template-columns: 1fr; justify-items: center; padding-inline: 15px; } .lk-topbar__left, .lk-topbar__right { display: none; } }
@media (max-width: 767px) { .lk-topbar { display: none; } }

/* ── Header shell — Kalles logo-centre header (Theme\kalles-template, e.g. Audio.html) ── */
.site-header.lk-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: #fff; border-bottom: 0; box-shadow: none;
  transition: transform .45s var(--lk-ease), box-shadow .3s ease;
}
/* layout.js writes an inline box-shadow on scroll; keep Kalles' flat look but a soft one when stuck. */
.site-header.lk-header:not(.is-scrolled) { box-shadow: none !important; }
.site-header.lk-header.is-scrolled { box-shadow: 0 5px 15px rgba(0, 0, 0, .06) !important; }
.site-header.lk-header.is-hidden { transform: translateY(-100%); box-shadow: none !important; }
:root { --lk-hd-h: 80px; }
.lk-hd__row {
  position: relative; display: grid; grid-template-columns: 5fr 2fr 5fr;
  align-items: stretch; min-height: var(--lk-hd-h); padding-inline: 35px;
}
.lk-hd__left { display: flex; align-items: stretch; gap: 12px; min-width: 0; }
.lk-hd__logo { display: flex; align-items: center; justify-content: center; }

/* Text logo (swap for an <img class="hdt-header__logo"> later). */
.lk-logo {
  font-family: var(--font-logo); font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: -.02em;
  color: var(--dark); text-decoration: none; white-space: nowrap;
}
.lk-logo:hover { color: var(--dark); }
/* Checkout's minimal header (Views/Checkout/Index.cshtml) still uses .site-logo-text. */
.site-logo-text { font-family: var(--font-logo); font-weight: 700; letter-spacing: -.01em; color: var(--dark); text-transform: none; }
.site-logo-text span { display: none; }
.hdt-header__logo-wrapper img, .hdt-header__logo { display: block; max-height: 44px; width: auto; }

/* Icons cluster */
.lk-hd__icons { display: flex; align-items: center; justify-content: flex-end; gap: 22px; }
.lk-hd__icon, .site-header .header-action-btn.lk-hd__icon {
  position: relative; display: inline-flex; flex-direction: row; align-items: center; justify-content: center;
  width: auto; height: auto; padding: 4px; margin: 0; border: 0; border-radius: 0; background: none;
  color: var(--dark); font-size: 0; cursor: pointer; transition: color .25s ease;
}
.lk-hd__icon:hover, .site-header .header-action-btn.lk-hd__icon:hover { background: none; color: var(--accent); }
.lk-hd__icon svg { display: block; width: 22px; height: 22px; }
.lk-hd__icon .ui-ico--cart { width: 25px; height: 21px; }
.lk-hd__icon .ui-ico--wish { width: 23px; height: 22px; }
/* Kalles count bubble: small black circle, top-right. */
.lk-hd__icon .count, .hdt-count-bubble {
  position: absolute; top: -4px; right: -8px; left: auto;
  min-width: 16px; width: auto; height: 16px; padding: 0 3px; border-radius: 8px;
  background: var(--dark); color: #fff; font: 500 10px/16px var(--font-sans); text-align: center;
  align-items: center; justify-content: center;
}
.mob-menu-toggle svg { width: 30px; height: 16px; }

/* ── Menu ──────────────────────────────────────────────────────────────────── */
.lk-nav { display: flex; align-items: stretch; justify-content: flex-start; background: none; border: 0; }
.lk-nav .lk-nav__list, .header-inner .nav-inner.lk-nav__list {
  position: static; display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start;
  height: 100%; max-width: none; margin: 0; padding: 0; list-style: none;
}
.lk-nav .nav-item { position: static; display: flex; align-items: stretch; margin: 0; }
.lk-nav .nav-link {
  position: relative; display: inline-flex; align-items: center; height: 100%;
  padding: 0 21px; border: 0; background: none;
  font: 500 17px/1.2 var(--font-sans); color: var(--dark); letter-spacing: 0; text-transform: none; white-space: nowrap;
  transition: color .25s ease;
}
.lk-nav .nav-item:first-child > .nav-link { padding-left: 0; }
.lk-nav .nav-link::after, .lk-nav .nav-link::before { display: none; content: none; }
.lk-nav .nav-link:hover, .lk-nav .nav-item:hover > .nav-link, .lk-nav .nav-item:focus-within > .nav-link, .lk-nav .nav-item.touch-open > .nav-link { background: none; color: var(--accent); border: 0; }
.hdt-menu-link-text { position: relative; display: inline-block; }

/* Kalles menu labels: small pill above the link text ("New" teal, "Sale" orange, "Hot" red). */
.hdt_label_menu { display: inline-flex; line-height: 1; }
.hdt-menu-link-text > .hdt_label_menu { position: absolute; left: 50%; bottom: calc(100% + 1px); transform: translateX(-50%); pointer-events: none; }
.hdt_label_menu > span {
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  padding: 3px 7px; border-radius: 9px; color: #fff; font: 500 10px/1 var(--font-sans); white-space: nowrap;
}
.hdt-menu-link-text > .hdt_label_menu > span::after {
  content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: inherit; border-bottom: 0;
}
.hdt_label_new  { background: #01bad4; border-top-color: #01bad4; }
.hdt_label_sale { background: #ff7f33; border-top-color: #ff7f33; }
.hdt_label_hot  { background: #e24c4c; border-top-color: #e24c4c; }
.hdt-mega-menu-list .hdt_label_menu { margin-left: 8px; }

/* Mega menu — Kalles "Shop": 1200px panel under the row, link columns left, collection tiles right. */
.lk-nav .mega-menu {
  position: absolute; top: 100%; left: 0; z-index: var(--z-mega-menu);
  display: block; width: min(1200px, 100%); min-width: 0; max-width: none; margin: 0; padding: 0;
  background: #fff; border: 0; border-radius: 0;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .08);
  max-height: calc(100vh - 160px); overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(15px); pointer-events: none;
  transition: opacity .35s var(--lk-ease), transform .35s var(--lk-ease), visibility .35s;
}
.lk-nav .nav-item:hover > .mega-menu,
.lk-nav .nav-item:focus-within > .mega-menu,
.lk-nav .nav-item.touch-open > .mega-menu { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
.hdt-mega-shop__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; padding: 20px 35px 30px; }
.hdt-menu-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; align-content: start; }
.lk-nav .mega-col { min-width: 0; padding: 0; }
.lk-nav .hdt-mega-heading {
  display: block; margin: 0 0 14px; padding: 0 0 15px; border-bottom: 1px solid var(--lk-line);
  font: 500 13px/1.4 var(--font-sans); color: var(--dark); text-transform: uppercase; letter-spacing: .02em; text-decoration: none;
}
.lk-nav a.hdt-mega-heading:hover { color: var(--accent); }
.hdt-mega-menu-list { margin: 0; padding: 0; list-style: none; }
.hdt-mega-menu-list li { margin: 0; }
.lk-nav .mega-col a.hdt-menu-link {
  display: inline-flex; align-items: center; padding: 9px 0; margin: 0; border-radius: 0; background: none;
  font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--lk-text-2, #878787); text-decoration: none;
  transition: color .25s ease; transform: none;
}
.lk-nav .mega-col a.hdt-menu-link:hover { color: var(--accent); background: none; transform: none; }
.lk-nav .mega-col a.mega-link--hot { color: var(--dark); }
/* Collection tiles with a white label box, bottom centre (Kalles hdt-collection-style1). */
.hdt-collections-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; align-content: start; }
.hdt-mega-item-collection { position: relative; display: block; overflow: hidden; text-decoration: none; background: var(--bg-subtle); }
.hdt-mega-item-collection .hdt-collection-img { display: block; aspect-ratio: 4 / 5; overflow: hidden; }
.hdt-mega-item-collection img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.hdt-mega-item-collection:hover img { transform: scale(1.08); }
.hdt-mega-item-collection .hdt-collection-title {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  min-width: 150px; padding: 11px 25px; background: #fff; color: var(--dark); text-align: center;
  font: 500 17px/1.3 var(--font-sans); white-space: nowrap; transition: background-color .25s, color .25s;
}
.hdt-mega-item-collection:hover .hdt-collection-title { background: var(--dark); color: #fff; }

@media (max-width: 1400px) {
  .lk-hd__row { padding-inline: 20px; }
  .lk-nav .nav-link { padding: 0 14px; font-size: 15px; }
  .lk-hd__icons { gap: 18px; }
}
@media (max-width: 1250px) { .lk-nav .nav-link { padding: 0 10px; font-size: 14px; } .lk-logo { font-size: 24px; } }

/* ── Tablet / mobile header (Kalles < 1150px) ──────────────────────────────── */
@media (max-width: 1149px) {
  :root { --lk-hd-h: 64px; }
  .lk-hd__row { grid-template-columns: 1fr auto 1fr; padding-inline: 15px; }
  .lk-nav { display: none !important; }
  /* layout.js' checkMob() only shows the burger <=768px; Kalles shows it on tablet too. */
  .mob-menu-toggle { display: inline-flex !important; }
  .lk-hd__left { grid-column: 1; align-items: center; }
  .lk-hd__logo { grid-column: 2; }
  .lk-logo { font-size: 22px; }
  .lk-hd__icons { grid-column: 3; gap: 16px; }
}
@media (max-width: 767px) {
  .lk-logo { font-size: 18px; }
  .lk-hd__icons { gap: 12px; }
  /* Account / wishlist live in the bottom toolbar (_MobileTabBar) on phones. */
  .lk-hd__icon--account, .lk-hd__icon--wish { display: none !important; }
}
@media (max-width: 374px) { .lk-logo { font-size: 16px; } }

/* ── Search popup (Kalles "Search our site") ───────────────────────────────── */
.header-search-drop.lk-search { box-shadow: 0 10px 30px rgba(0, 0, 0, .08); }
.lk-search .header-search-drop-inner { max-width: 1000px; margin: 0 auto; padding: 40px 15px 40px; }
.lk-search .hsd-title { font-size: 20px; font-weight: 500; }
.lk-search .search-bar { border: 0; border-bottom: 2px solid var(--lk-line); border-radius: 0; background: none; transition: border-color .25s; }
.lk-search .search-bar:focus-within { border-bottom-color: var(--dark); }
.lk-search .search-input { border: 0; background: none; font-size: 18px; padding: 14px 0; }
.lk-search .search-btn { border: 0; background: none; color: var(--dark); }
.lk-search .hsd-popular h4 { font-size: 16px; font-weight: 600; }

/* ── Drawers (cart / wishlist / recently viewed) ───────────────────────────── */
.lk-drawer-overlay, .rv-overlay {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: var(--z-drawer);
  transition: opacity .35s ease, visibility .35s ease; cursor: pointer;
}
.mc {
  width: 420px; max-width: calc(100vw - 30px);
  transition: transform .5s var(--lk-ease); box-shadow: 0 0 20px rgba(0, 0, 0, .1);
}
.mc-title { padding: 18px 60px 18px 20px; font-size: 16px; font-weight: 600; color: var(--dark); border-bottom: 1px solid var(--lk-line); }
.mc-close { top: 12px; right: 12px; color: var(--dark); }
.mc-close:hover { color: var(--accent); }
.mc-close svg { width: 20px; height: 20px; }
.mc-ship { padding: 16px 20px; background: #f6f6f8; }
.mc-list { padding: 0 20px; }
.mc-item { gap: 15px; padding: 18px 0; border-bottom: 1px solid var(--lk-line); }
.mc-item__img { width: 75px; flex: 0 0 75px; aspect-ratio: 3 / 4; overflow: hidden; background: #f6f6f8; }
.mc-item__img img { width: 100%; height: 100%; object-fit: cover; }
.mc-item__name { font-size: 14px; font-weight: 500; color: var(--dark); }
.mc-item__price { font-size: 14px; color: var(--lk-text-2); }
.mc-item__now { color: var(--red); }
.mc-item__remove { color: var(--lk-text-2); }
.mc-item__remove:hover { color: var(--red); }
.mc-foot { padding: 18px 20px 22px; border-top: 1px solid var(--lk-line); box-shadow: 0 0 10px rgba(0, 0, 0, .06); background: #fff; }
.mc-row--total { font-size: 16px; font-weight: 600; color: var(--dark); }
.mc-note { font-size: 13px; color: var(--lk-text-2); }
.mc-foot .mc-btn { display: flex; width: 100%; justify-content: center; align-items: center; min-height: 46px; margin-top: 10px; }
.mc-btn--light { background: #fff; color: var(--dark); border: 1px solid var(--dark); }
.mc-btn--light:hover { background: var(--dark); color: #fff; }
.mc-empty h4 { font-size: 16px; font-weight: 500; }
.mc-empty p { font-size: 14px; color: var(--lk-text-2); }
/* wishlist.js renders rows with inline styles — tidy them onto the Kalles drawer rhythm. */
.lk-wish-list { flex: 1; overflow-y: auto; }
.lk-wish-list > div { padding: 18px 0 !important; border-bottom-color: var(--lk-line) !important; }
.lk-wish-list > div > a:first-child { width: 75px !important; height: 100px !important; border-radius: 0 !important; background: #f6f6f8 !important; }
.lk-wish-list > div a { color: var(--dark) !important; }
.lk-wish-list > div a:hover { color: var(--accent) !important; }
.lk-wish-list > p { padding: 60px 0 !important; }
.lk-wish-list .js-wishlist-remove:hover { color: var(--red) !important; }

/* ── Mobile push menu (Kalles left drawer with tabs) ───────────────────────── */
.lk-mm { position: fixed; inset: 0; z-index: var(--z-menu); display: flex; pointer-events: none; }
.lk-mm__overlay {
  position: absolute; inset: 0; background: rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s ease, visibility .35s ease;
}
.lk-mm__panel {
  position: relative; z-index: 1; display: flex; flex-direction: column;
  width: 340px; max-width: calc(100vw - 50px); height: 100%; height: 100dvh;
  background: #fff; pointer-events: auto; overflow: hidden;
  transition: transform .5s var(--lk-ease); box-shadow: 0 0 20px rgba(0, 0, 0, .1);
}
.lk-mm__tabs { display: flex; align-items: stretch; flex: 0 0 auto; border-bottom: 1px solid var(--lk-line); background: #f6f6f8; }
.lk-mm__tab {
  position: relative; flex: 1; min-height: 52px; padding: 0 10px; border: 0; background: none;
  font: 600 14px var(--font-sans); color: var(--lk-text-2); cursor: pointer; transition: color .25s;
}
.lk-mm__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--dark); transform: scaleX(0); transition: transform .3s ease; }
.lk-mm__tab.is-active { color: var(--dark); background: #fff; }
.lk-mm__tab.is-active::after { transform: scaleX(1); }
.lk-mm__close { flex: 0 0 52px; display: grid; place-items: center; border: 0; border-left: 1px solid var(--lk-line); background: #fff; color: var(--dark); cursor: pointer; }
.lk-mm__close:hover { color: var(--accent); }
.lk-mm__body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.lk-mm__pane[hidden] { display: none; }

.hdt-mb-menu, .hdt-mb-menu__sub { margin: 0; padding: 0; list-style: none; }
.hdt-mb-menu__item { border-bottom: 1px solid var(--lk-line); }
.hdt-mb-menu__link, .hdt-mb-menu .mobmenu-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 50px; padding: 0 20px; background: none;
  font: 500 14px/1.4 var(--font-sans); color: var(--dark); text-decoration: none; cursor: pointer; list-style: none;
}
.hdt-mb-menu summary::-webkit-details-marker { display: none; }
.hdt-mb-menu__link:hover, .hdt-mb-menu__link.is-sale { color: var(--accent); }
.hdt-mb-menu__link.is-sale { color: var(--red); }
.hdt-mb-menu details[open] > .mobmenu-summary { background: none; color: var(--accent); }
.hdt-btn-open-sub.mobmenu-chevron {
  position: relative; flex: 0 0 30px; width: 30px; height: 30px; border-left: 1px solid var(--lk-line); color: var(--dark); transform: none;
}
.hdt-btn-open-sub.mobmenu-chevron::before, .hdt-btn-open-sub.mobmenu-chevron::after {
  content: ""; position: absolute; top: 50%; left: 60%; width: 11px; height: 1px; background: currentColor; transform: translate(-50%, -50%); transition: transform .3s ease;
}
.hdt-btn-open-sub.mobmenu-chevron::after { transform: translate(-50%, -50%) rotate(90deg); }
.hdt-mb-menu details[open] > summary .hdt-btn-open-sub.mobmenu-chevron { transform: none; color: var(--accent); }
.hdt-mb-menu details[open] > summary .hdt-btn-open-sub.mobmenu-chevron::after { transform: translate(-50%, -50%) rotate(0); }
.hdt-mb-menu__sub { padding: 0 0 10px 20px; }
.hdt-mb-menu__sublink, .hdt-mb-menu__sub .mobmenu-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 38px; padding: 0 20px 0 0;
  font-size: 13px; font-weight: 400; color: var(--lk-text-2); text-decoration: none; background: none;
}
.hdt-mb-menu__sublink:hover { color: var(--accent); }
.hdt-mb-menu__all { color: var(--dark); font-weight: 600; }
.hdt-mb-menu__group { color: var(--dark); font-weight: 600; }
.hdt-mb-menu__sub .hdt-btn-open-sub.mobmenu-chevron { flex-basis: 24px; width: 24px; height: 24px; border-left: 0; }
.hdt-mb-menu__sublink.is-hot { color: var(--red); font-weight: 500; justify-content: flex-start; }
.hdt-mb-menu__sublink .badge { padding: 1px 6px; border-radius: 2px; background: var(--red); color: #fff; font-size: 9px; line-height: 14px; }

.lk-mm__extra { margin: 0; padding: 12px 0; list-style: none; border-bottom: 1px solid var(--lk-line); }
.lk-mm__extra a { display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 20px; font-size: 14px; color: var(--dark); text-decoration: none; }
.lk-mm__extra a:hover { color: var(--accent); }
.lk-mm__contact { padding: 18px 20px 30px; font-size: 13px; color: var(--lk-text-2); }
.lk-mm__contact p { margin: 0 0 6px; color: var(--dark); font-weight: 600; }
.lk-mm__contact a { display: block; padding: 3px 0; color: var(--lk-text-2); text-decoration: none; }
.lk-mm__contact a:hover { color: var(--accent); }

/* ── Footer ────────────────────────────────────────────────────────────────── */
.site-footer.lk-footer { background: #f6f6f8; color: var(--lk-text-2); font-size: 14px; line-height: 1.7; border-top: 0; padding: 0; margin-top: 0; }
.lk-footer__main { padding-block: 60px 45px; }
.lk-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1.4fr; gap: 30px; }
.lk-footer .lk-logo { display: inline-block; margin-bottom: 28px; font-size: 24px; }
.lk-footer__contact { display: grid; gap: 16px; margin: 0 0 24px; padding: 0; list-style: none; }
.lk-footer__contact li { display: flex; align-items: flex-start; gap: 8px; }
.lk-footer__contact svg { flex: 0 0 auto; margin-top: 1px; color: var(--dark); }
.lk-footer a { color: var(--lk-text-2); text-decoration: none; transition: color .25s ease; }
.lk-footer a:hover { color: var(--accent); }
.lk-footer__social { display: flex; gap: 22px; margin: 0; padding: 0; list-style: none; }
.lk-footer__social a { display: grid; place-items: center; width: 22px; height: 22px; color: var(--dark); background: none; border: 0; border-radius: 0; }
.lk-footer__social a:hover { color: var(--accent); background: none; }
.lk-footer__social svg { width: 16px; height: 16px; }
.lk-footer__heading, .lk-footer .footer-col h5 { margin: 0 0 22px; font: 500 18px/1.3 var(--font-sans); color: var(--dark); text-transform: none; letter-spacing: 0; }
.lk-footer .footer-col-toggle {
  display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; text-align: inherit; cursor: default;
  font: inherit; color: inherit; text-transform: none; letter-spacing: 0;
}
.lk-footer .footer-links { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lk-footer .footer-links li { margin: 0; }
.lk-footer .footer-links a { font-size: 14px; color: var(--lk-text-2); }
.lk-footer .footer-links a:hover { color: var(--accent); }
.lk-footer__news p { margin: 0 0 20px; font-size: 14px; line-height: 1.7; color: var(--lk-text-2); }
.lk-news-form { position: relative; display: flex; gap: 0; border: 1px solid #d7d7d7; background: #fff; }
.lk-news-form input[type=email] {
  flex: 1; min-width: 0; height: 46px; padding: 0 16px; border: 0; border-radius: 0; background: transparent;
  font: 400 14px var(--font-sans); color: var(--dark); outline: none;
}
.lk-news-form button[type=submit] {
  flex: 0 0 auto; height: 46px; padding: 0 22px; border: 0; border-radius: 0; background: var(--dark); color: #fff;
  font: 600 13px var(--font-sans); text-transform: none; letter-spacing: 0; cursor: pointer; transition: background-color .25s ease;
}
.lk-news-form button[type=submit]:hover { background: var(--accent); }
.lk-footer .pf-err { color: var(--red); }
.lk-footer .pf-code { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding: 12px 16px; border: 1px dashed var(--dark); background: #fff; }
.lk-footer .pf-code strong { color: var(--dark); letter-spacing: .08em; }
.lk-footer .pf-code button { margin-left: auto; padding: 4px 14px; border: 1px solid var(--dark); border-radius: 30px; background: none; font-size: 12px; cursor: pointer; }

.lk-footer__bottom, .site-footer .lk-footer__bottom { background: #f6f6f8; border-top: 1px solid #e3e3e3; }
.lk-footer__bottom-inner, .site-footer .lk-footer__bottom-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 30px;
  padding-block: 22px; font-size: 13px; color: var(--lk-text-2);
}
.lk-footer__copy b { color: var(--accent); font-weight: 500; }
.lk-footer__bottom-links { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 0; padding: 0; list-style: none; }
.lk-footer__payment { display: flex; flex-wrap: wrap; gap: 6px; }
.lk-footer__payment .payment-icon { padding: 3px 7px; border: 1px solid #e0e0e0; border-radius: 3px; background: #fff; font-size: 10px; font-weight: 700; line-height: 1.3; }

@media (max-width: 1149px) {
  .lk-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lk-footer__brand, .lk-footer__news { grid-column: span 3; }
  .lk-footer__news { max-width: 520px; }
}
/* Mobile: Kalles collapsible link columns (layout.js toggles .footer-col.open <=768px). */
@media (max-width: 768px) {
  .lk-footer__main { padding-block: 40px 20px; }
  .lk-footer__grid { grid-template-columns: 1fr; gap: 0; }
  .lk-footer__brand, .lk-footer__news { grid-column: auto; }
  .lk-footer__brand { padding-bottom: 25px; }
  .lk-footer .footer-col { border-top: 1px solid #e3e3e3; }
  .lk-footer .footer-col h5 { margin: 0; }
  .lk-footer .footer-col-toggle { position: relative; padding: 16px 30px 16px 0; cursor: pointer; font-size: 16px; }
  .lk-footer .footer-col-toggle::after {
    content: ""; position: absolute; right: 4px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .3s ease;
  }
  .lk-footer .footer-col.open .footer-col-toggle::after { transform: rotate(-135deg); margin-top: -2px; }
  .lk-footer .footer-col .footer-links { max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .35s ease; padding: 0; }
  .lk-footer .footer-col.open .footer-links { max-height: 480px; padding: 0 0 18px; }
  .lk-footer__news { padding-top: 25px; border-top: 1px solid #e3e3e3; }
  .lk-footer__news .lk-footer__heading { font-size: 16px; margin-bottom: 12px; }
  .lk-footer__bottom-inner { flex-direction: column; justify-content: center; text-align: center; }
  .lk-footer__bottom-links, .lk-footer__payment { justify-content: center; }
}
@media (max-width: 767px) {
  /* room for the fixed bottom toolbar */
  .lk-footer__bottom-inner { padding-bottom: 22px; }
}

/* Back to top — Kalles round button, bottom-right */
.pf-top.lk-top {
  right: 30px; bottom: 30px; width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: #fff; color: var(--dark); box-shadow: 0 2px 10px rgba(0, 0, 0, .12); cursor: pointer;
}
.pf-top.lk-top:hover { background: var(--dark); color: #fff; }
.pf-top.lk-top svg { width: 18px; height: 18px; }
@media (max-width: 767px) { .pf-top.lk-top { right: 15px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); width: 38px; height: 38px; } }

/* ── Phone bottom toolbar (Kalles mobile toolbar) ──────────────────────────── */
@media (max-width: 767px) {
  .mobile-tabbar { border-top: 1px solid var(--lk-line); box-shadow: 0 0 9px rgba(0, 0, 0, .12); }
  .mtb-item { font-size: 11px; color: var(--dark); }
  .mtb-item svg { width: 21px; height: 21px; stroke-width: 1.4; }
  .mtb-item.active { color: var(--accent); }
  .mtb-badge { background: var(--accent); font-weight: 500; }
}

/* Never let chrome cause horizontal scroll */
html, body { overflow-x: clip; }

/* Checkout mode: nothing from the site chrome renders (partials are skipped), but guard anyway. */
body.checkout-mode .lk-topbar, body.checkout-mode .lk-header, body.checkout-mode .lk-footer, body.checkout-mode .mobile-tabbar { display: none !important; }

/* ==========================================================================
   Footer — Kalles footer (light grey main area + white bottom bar).
   ========================================================================== */
.site-footer.lk-footer { background: #f6f6f8; color: var(--mid, #696969); font-size: 14px; border: 0; }
.lk-footer__main { max-width: 1170px; margin: 0 auto; padding: 75px 15px 70px; }
.lk-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1.35fr; gap: 30px; align-items: start; }
.lk-footer .lk-logo { display: inline-block; margin-bottom: 30px; font-size: 26px; color: var(--dark); }
.lk-footer__heading { margin: 0 0 30px; font-size: 16px; font-weight: 500; color: var(--dark); text-transform: none; letter-spacing: 0; }
.lk-footer__heading .footer-col-toggle { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: default; }
.lk-footer__contact { margin: 0 0 22px; padding: 0; list-style: none; }
.lk-footer__contact li { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 20px; line-height: 1.7; }
.lk-footer__contact svg { flex: 0 0 20px; margin-top: 2px; color: var(--mid, #696969); }
.lk-footer a { color: var(--mid, #696969); text-decoration: none; transition: color .25s; }
.lk-footer a:hover { color: var(--accent); }
.lk-footer__social { display: flex; gap: 22px; margin: 0; padding: 0; list-style: none; }
.lk-footer__social a { display: inline-grid; place-items: center; width: auto; height: auto; border: 0; border-radius: 0; background: none; color: var(--mid, #696969); }
.lk-footer__social a:hover { background: none; color: var(--accent); }
.lk-footer__social svg { width: 17px; height: 17px; }
.lk-footer .footer-links { margin: 0; padding: 0; list-style: none; }
.lk-footer .footer-links li { margin-bottom: 14px; line-height: 1.5; }
.lk-footer__news p { margin: 0 0 20px; line-height: 1.7; }
/* Newsletter: bordered pill containing the input and a dark pill button. */
.lk-news-form { display: flex; align-items: center; height: 48px; padding: 3px; border: 1px solid var(--dark); border-radius: 40px; background: #fff; }
.lk-news-form input[type=email] { flex: 1; min-width: 0; height: 100%; padding: 0 12px; border: 0 !important; border-radius: 40px; background: none; font-size: 14px; color: var(--dark); outline: none; box-shadow: none; }
.lk-news-form button[type=submit] { height: 100%; padding: 0 22px; border: 0; border-radius: 40px; background: #222; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.lk-news-form button[type=submit]:hover { background: var(--accent); }
/* Payment marks as muted text logos under the form. */
.lk-footer__payment { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 22px; }
.lk-footer__payment .payment-icon { padding: 0; border: 0; background: none; font: italic 700 13px/1 var(--font-sans); letter-spacing: -.01em; color: #9b9b9b; }
/* Bottom bar: white, copyright left, links right. */
.lk-footer__bottom { background: #fff; border: 0; }
.lk-footer__bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 15px; max-width: 1170px; margin: 0 auto; min-height: 64px; padding: 15px; font-size: 14px; }
.lk-footer__copy a { color: var(--accent); }
.lk-footer__bottom-links { display: flex; gap: 22px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 1149px) { .lk-footer__grid { grid-template-columns: repeat(3, 1fr); } .lk-footer__brand, .lk-footer__news { grid-column: span 3; } }
@media (max-width: 767px) {
  .lk-footer__main { padding: 45px 15px 30px; }
  .lk-footer__grid { grid-template-columns: 1fr; gap: 0; }
  .lk-footer__brand, .lk-footer__news { grid-column: auto; }
  .lk-footer__brand { margin-bottom: 20px; }
  .lk-footer .footer-col { border-top: 1px solid #e6e6e6; }
  .lk-footer__heading { margin: 0; padding: 16px 0; }
  .lk-footer__heading .footer-col-toggle { cursor: pointer; width: 100%; text-align: left; }
  .lk-footer__news { padding-top: 20px; border-top: 1px solid #e6e6e6; }
  .lk-footer__bottom-inner { flex-direction: column; text-align: center; }
}
/* ==========================================================================
   Cart drawer — Kalles (Views/Shared/_CartDrawer.cshtml + Views/Cart/_MiniCart.cshtml).
   ========================================================================== */
#cartDrawer.mc { width: 340px; display: flex; flex-direction: column; background: #fff; }
#cartDrawer .mc-body { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
#cartDrawer .mc-close { top: 12px; right: 14px; width: 28px; height: 28px; }
#cartDrawer .mc-title { flex: 0 0 auto; padding: 14px 50px 14px 20px; border-bottom: 1px solid #eee; font-size: 16px; font-weight: 500; }
/* Free-shipping band: message + striped red track with the truck marker. */
#cartDrawer .mc-ship { flex: 0 0 auto; padding: 14px 20px 18px; background: #fff; border-bottom: 1px solid #eee; box-shadow: 0 2px 6px rgba(0, 0, 0, .04); }
#cartDrawer .fsb { font-size: 13px; color: var(--mid, #696969); }
#cartDrawer .fsb__track { position: relative; height: 10px; margin-top: 12px; border-radius: 10px; background: #eee; overflow: visible; order: 2; }
#cartDrawer .fsb__fill {
  height: 100%; border-radius: 10px;
  background: repeating-linear-gradient(-45deg, #e8153d 0 8px, #f2566e 8px 16px);
  background-size: 22px 22px; animation: lk-fsb-stripes 1s linear infinite;
}
@keyframes lk-fsb-stripes { to { background-position: 22px 0; } }
#cartDrawer .fsb__truck { position: absolute; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 26px; height: 20px; border-radius: 4px; background: #e8153d; color: #fff; }
#cartDrawer .fsb__truck svg { width: 16px; height: 12px; fill: currentColor; }
#cartDrawer .fsb--done .fsb__fill { background: #428445; animation: none; }
#cartDrawer .fsb--done .fsb__truck { background: #428445; }
/* Items. */
#cartDrawer .mc-list { flex: 1 1 auto; overflow-y: auto; padding: 0 20px; }
#cartDrawer .mc-item { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid #eee; }
#cartDrawer .mc-item__img { flex: 0 0 120px; width: 120px; aspect-ratio: 4 / 5; background: #f6f6f8; }
#cartDrawer .mc-item__info { flex: 1; min-width: 0; }
#cartDrawer .mc-item__name { font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--dark); }
#cartDrawer .mc-item__price { margin: 2px 0 10px; font-size: 14px; color: var(--mid, #696969); }
#cartDrawer .mc-item__actions { display: flex; align-items: center; gap: 10px; }
#cartDrawer .mc-qty { display: inline-flex; align-items: center; justify-content: space-between; width: 106px; height: 36px; padding: 0 8px; border: 1px solid #222; border-radius: 40px; }
#cartDrawer .mc-qty__btn { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; background: none; color: #222; font-size: 18px; line-height: 1; cursor: pointer; }
#cartDrawer .mc-qty__btn[disabled] { opacity: .4; cursor: default; }
#cartDrawer .mc-qty__val { font-size: 15px; font-weight: 600; }
#cartDrawer .mc-item__remove { position: static; width: 24px; height: 24px; padding: 0; border: 0; background: none; color: #222; cursor: pointer; }
#cartDrawer .mc-item__remove svg { width: 18px; height: 18px; }
#cartDrawer .mc-item__remove:hover { color: var(--red, #ec0101); }
/* Footer. */
#cartDrawer .mc-foot { flex: 0 0 auto; padding: 20px; border-top: 1px solid #eee; box-shadow: 0 -4px 10px rgba(0, 0, 0, .04); background: #fff; }
#cartDrawer .mc-row--total { display: flex; justify-content: space-between; font-size: 18px; font-weight: 600; color: var(--dark); }
#cartDrawer .mc-note { margin: 8px 0 12px; font-size: 14px; color: var(--mid, #696969); }
#cartDrawer .mc-note a { color: inherit; text-decoration: underline; }
#cartDrawer .mc-terms { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 14px; color: var(--mid, #696969); cursor: pointer; }
#cartDrawer .mc-terms input { width: 16px; height: 16px; margin: 0; accent-color: #222; }
#cartDrawer .mc-terms a { color: inherit; text-decoration: underline; }
#cartDrawer .mc-terms.is-error { color: var(--red, #ec0101); animation: lk-shake .35s; }
@keyframes lk-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
#cartDrawer .mc-foot .mc-btn {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 40px; margin-top: 10px; border: 0; border-radius: 40px;
  font-size: 12px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; text-decoration: none;
}
#cartDrawer .mc-foot .mc-btn--light { margin-top: 0; background: var(--accent); color: #fff; }
#cartDrawer .mc-foot .mc-btn--light:hover { background: #222; color: #fff; }
#cartDrawer .mc-foot .mc-btn--dark { background: #222; color: #fff; }
#cartDrawer .mc-foot .mc-btn--dark:hover { background: var(--accent); }
#cartDrawer .mc-pay { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
#cartDrawer .mc-pay__i { display: inline-grid; place-items: center; width: 40px; height: 25px; border: 1px solid #e5e5e5; border-radius: 3px; background: #fff; font: italic 800 9px/1 var(--font-sans); }
#cartDrawer .mc-pay__i--visa { background: #1434cb; border-color: #1434cb; color: #fff; }
#cartDrawer .mc-pay__i--pp { color: #003087; }
#cartDrawer .mc-pay__i--mc { position: relative; background: #252525; border-color: #252525; }
#cartDrawer .mc-pay__i--mc i { position: absolute; top: 5px; width: 14px; height: 14px; border-radius: 50%; background: #eb001b; }
#cartDrawer .mc-pay__i--mc i:first-child { left: 8px; }
#cartDrawer .mc-pay__i--mc i:last-child { left: 16px; background: #f79e1b; mix-blend-mode: screen; }
#cartDrawer .mc-pay__i--amex { background: #2e77bc; border-color: #2e77bc; color: #fff; }
#cartDrawer .mc-empty { padding: 60px 20px; text-align: center; }
@media (max-width: 767px) { #cartDrawer.mc { width: 100%; max-width: 340px; } #cartDrawer .mc-item__img { flex-basis: 96px; width: 96px; } }
#cartDrawer .fsb { display: flex; flex-direction: column; }
#cartDrawer .fsb > :not(.fsb__track) { order: 1; }
#cartDrawer .fsb__track { order: 2; }

.site-footer.lk-footer .lk-footer__bottom.footer-bottom { background: #fff !important; border-top: 0; }

/* ==========================================================================
   Inner-page header (Theme\kalles-template\Pagination default Hot.html):
   logo left · menu centred · icons right; mega = 1200px panel centred under the
   header with up to four link columns (no collection tiles).
   ========================================================================== */
.lk-hd__row--left { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); min-height: 70px; padding-inline: 30px; border-bottom: 1px solid #eee; }
.lk-hd__row--left .lk-hd__left { display: contents; }
.lk-hd__row--left .mob-menu-toggle { grid-column: 1; grid-row: 1; justify-self: start; align-self: center; }
.lk-hd__row--left .lk-hd__logo { grid-column: 1; grid-row: 1; justify-content: flex-start; }
.lk-hd__row--left .lk-nav { grid-column: 2; grid-row: 1; justify-content: center; }
.lk-hd__row--left .lk-hd__icons { grid-column: 3; grid-row: 1; }
.lk-hd__row--left .lk-nav .nav-link { padding: 0 15px; font-size: 15px; }
.lk-hd__row--left .lk-nav .nav-item:first-child > .nav-link { padding-left: 15px; }
.lk-hd__row--left .lk-logo { font-size: 26px; }
/* Centred mega panel. */
.lk-hd__row--left .lk-nav .mega-menu { left: 50%; width: min(1200px, calc(100vw - 40px)); transform: translate(-50%, 15px); }
.lk-hd__row--left .lk-nav .nav-item:hover > .mega-menu,
.lk-hd__row--left .lk-nav .nav-item:focus-within > .mega-menu,
.lk-hd__row--left .lk-nav .nav-item.touch-open > .mega-menu { transform: translate(-50%, 0); }
.lk-hd__row--left .hdt-mega-shop__inner { grid-template-columns: minmax(0, 1fr); padding: 20px 20px 40px; }
.lk-hd__row--left .hdt-collections-col { display: none; }
.lk-hd__row--left .hdt-menu-col { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.lk-hd__row--left .lk-nav .hdt-mega-heading { padding-bottom: 20px; margin-bottom: 10px; font-size: 13px; }
.lk-hd__row--left .lk-nav .mega-col a.hdt-menu-link { padding: 10px 0; }

/* Tablet / phone: burger left, logo centred, icons right (as the template below 1150px). */
@media (max-width: 1149px) {
  .lk-hd__row--left { grid-template-columns: 1fr auto 1fr; padding-inline: 15px; min-height: 64px; }
  .lk-hd__row--left .mob-menu-toggle { grid-column: 1; }
  .lk-hd__row--left .lk-hd__logo { grid-column: 2; justify-content: center; }
  .lk-hd__row--left .lk-logo { font-size: 22px; }
}
@media (max-width: 767px) { .lk-hd__row--left .lk-logo { font-size: 18px; } .lk-hd__row--left { min-height: 60px; } }
/* Phones: `1fr` columns can't shrink below their content (newsletter row, payment icons), so the whole footer
   ran past the right edge on ~360px screens. minmax(0,1fr) + min-width:0 lets the column match the screen. */
@media (max-width: 767px) {
  .lk-footer__grid { grid-template-columns: minmax(0, 1fr); }
  .lk-footer__grid > * { min-width: 0; }
  .lk-news-form, .lk-footer__payment { max-width: 100%; }
}

/* Desktop header (home page variant: menu left, logo centred, icons right): the old 5fr 2fr 5fr columns gave the
   menu a fixed share, so at ~1100-1700px the last items (Blog) slid under the logo. Each side column now grows to
   at least its own content, so the logo can only be pushed aside, never overlap the menu or icons. */
@media (min-width: 1150px) {
  .lk-hd__row--center { grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); column-gap: 24px; }
  .lk-hd__row--center .lk-hd__logo { padding-inline: 0; }
}
@media (min-width: 1150px) and (max-width: 1700px) {
  .lk-hd__row--center .lk-nav .nav-link { padding: 0 11px; }
}