.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ============================================================
   THE ARTISAN'S — shared carousel + story-card styles
   Paste ONCE into Elementor > Site Settings > Custom CSS
   ============================================================ */

:root {
  --gold: #9C7A3C;
  --gold-soft: #C9BBA6;
  --cream: #F1E8DE;
  --dark: #2B2621;
  --muted: #6B6259;
}

/* ---------- carousel track (the Container) ---------- */
#carTrack {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#carTrack::-webkit-scrollbar {
  display: none;
}

/* each HTML widget inside the track = one card slot
   using a descendant .elementor-kit-6 (not direct child) since Elementor
   may wrap children in an extra .e-con-inner layer */
#carTrack .elementor-widget {
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  flex-basis: 18rem !important;
  width: 18rem !important;
  min-width: 18rem !important;
  max-width: 18rem !important;
}

#carTrack .elementor-widget-container {
  width: 100% !important;
  height: 100% !important;
}

/* ---------- header row: eyebrow/title + arrows ---------- */
.carousel-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 2rem;
  font-family: 'Montserrat', sans-serif;
}

.eyebrow {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.carousel-title h2 {
  margin: 0;
  font-size: 3rem;
  font-weight: 300;
  color: var(--dark);
}

.carousel-controls {
  display: flex;
  gap: 0.75rem;
}

.carousel-controls .carousel-btn {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-sizing: border-box;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  max-width: 2.75rem;
  padding: 0;
  margin: 0;
  border-radius: 0;
  background: transparent;
  border: 0.0625rem solid var(--gold-soft) !important;
  color: var(--dark) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.25s ease, background-color 0.25s ease, opacity 0.25s ease;
}

.carousel-controls .carousel-btn .chevron {
  width: 1rem;
  height: 1rem;
  stroke: var(--dark) !important;
  display: block;
  pointer-events: none;
}

.carousel-controls .carousel-btn:hover .chevron,
.carousel-controls .carousel-btn:focus-visible .chevron {
  stroke: var(--gold) !important;
}

.carousel-controls .carousel-btn:hover,
.carousel-controls .carousel-btn:focus-visible {
  border-color: var(--gold) !important;
  background-color: rgba(156, 122, 60, 0.08) !important;
  outline: none;
}

.carousel-controls .carousel-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.carousel-controls .carousel-btn:disabled:hover {
  border-color: var(--gold-soft) !important;
  background-color: transparent !important;
}

/* ---------- individual product card ---------- */
.story-card {
  position: relative;
  font-family: 'Montserrat', sans-serif;
  width: 18rem !important;
  height: 24rem !important;
  overflow: hidden;
  scroll-snap-align: start;
}

.story-card img {
  width: 18rem !important;
  height: 24rem !important;
  object-fit: cover;
  display: block;
  transition: opacity 0.5s ease, transform 0.6s ease;
}

.story-card:hover img {
  transform: scale(1.04);
}

.dark-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 18rem;
  height: 24rem;
  background: linear-gradient(to top,
    rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 35%, rgba(0,0,0,0) 60%);
  z-index: 1;
  transition: opacity 0.5s ease;
}

.story-card:hover .dark-overlay { opacity: 0; }

/* ---------- OPTIONAL: always-on dark overlay (not hover-dependent) ----------
   If you want the image permanently darkened (not fading away on hover),
   delete the ".story-card:hover .dark-overlay { opacity: 0; }" rule above
   and use this stronger static overlay instead: */
/*
.dark-overlay {
  background: linear-gradient(to top,
    rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0.05) 100%);
}
*/

.price-badge {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  color: #FFFFFF;
  font-size: 1.1rem;
  z-index: 2;
  transition: opacity 0.4s ease;
}

.story-card:hover .price-badge { opacity: 0; }

.story-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 18rem;
  height: 24rem;
  background: var(--cream);
  padding: 1.5rem 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  z-index: 3;
}

.story-card:hover .story-overlay {
  opacity: 1;
  transform: translateY(0);
}

.story-eyebrow {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: var(--gold);
  margin-bottom: 0.6rem;
  display: block;
}

.story-text {
  font-style: italic;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 0.9rem;
}

.story-divider {
  width: 2.25rem;
  border: none;
  border-top: 1px solid var(--gold-soft);
  margin: 0 0 0.9rem;
}

.story-link {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--dark);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.story-link .arrow { transition: transform 0.3s ease; }
.story-link:hover .arrow { transform: translateX(3px); }

.card-meta {
  margin-top: 1rem;
}

.meta-line {
  display: block;
  width: 2rem;
  height: 1px;
  background: var(--gold);
  margin-bottom: 0.6rem;
}

.card-meta h4 {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--dark);
  margin: 0 0 0.3rem;
}

.card-meta p {
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 0;
}

@media (max-width: 576px) {
  #carTrack .elementor-widget {
    flex-basis: 14.5rem !important;
    width: 14.5rem !important;
    min-width: 14.5rem !important;
    max-width: 14.5rem !important;
  }
  .story-card,
  .story-card img,
  .dark-overlay,
  .story-overlay {
    width: 14.5rem !important;
    height: 19.3rem !important;
  }
  .carousel-title h2 { font-size: 2rem; }
}

/* ============================================================
   Sticky "Tilaa Woltilla" bar — hidden until user scrolls
   Paste into Site Settings > Custom CSS
   ============================================================ */

#stickyOrderBar {
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
}

#stickyOrderBar.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}/* End custom CSS */