:root,
[data-bs-theme="light"] {
  --leilani-primary: #00b8af;
  --leilani-primary-hover: #029089;
  --leilani-primary-soft: #d9f6f4;
  --leilani-primary-border-soft: #8ee4de;

  --bs-blue: #00b8af;
  --bs-primary: #00b8af;
  --bs-primary-rgb: 0, 184, 175;

  --bs-link-color: #00b8af;
  --bs-link-color-rgb: 0, 184, 175;
  --bs-link-hover-color: #029089;
  --bs-link-hover-color-rgb: 2, 144, 137;

  --bs-primary-text-emphasis: #02615d;
  --bs-primary-bg-subtle: #d9f6f4;
  --bs-primary-border-subtle: #8ee4de;

  --bs-focus-ring-color: rgba(0, 184, 175, 0.25);
}

/* Forms */
.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--leilani-primary) !important;
  border-color: var(--leilani-primary) !important;
}

.form-check-input:focus {
  border-color: var(--leilani-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(0, 184, 175, 0.25) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--leilani-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(0, 184, 175, 0.25) !important;
}

/* Range sliders */
.form-range::-webkit-slider-thumb {
  background-color: var(--leilani-primary) !important;
}

.form-range::-moz-range-thumb {
  background-color: var(--leilani-primary) !important;
}

.form-range::-webkit-slider-thumb:active {
  background-color: var(--leilani-primary-hover) !important;
}

.form-range::-moz-range-thumb:active {
  background-color: var(--leilani-primary-hover) !important;
}

/* Primary buttons */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--leilani-primary);
  --bs-btn-border-color: var(--leilani-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--leilani-primary-hover);
  --bs-btn-hover-border-color: var(--leilani-primary-hover);
  --bs-btn-focus-shadow-rgb: 0, 184, 175;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--leilani-primary-hover);
  --bs-btn-active-border-color: var(--leilani-primary-hover);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--leilani-primary);
  --bs-btn-disabled-border-color: var(--leilani-primary);
}

/* Outline primary buttons */
.btn-outline-primary {
  --bs-btn-color: var(--leilani-primary);
  --bs-btn-border-color: var(--leilani-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--leilani-primary);
  --bs-btn-hover-border-color: var(--leilani-primary);
  --bs-btn-focus-shadow-rgb: 0, 184, 175;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--leilani-primary-hover);
  --bs-btn-active-border-color: var(--leilani-primary-hover);
  --bs-btn-disabled-color: var(--leilani-primary);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--leilani-primary);
}

/* Background/text/border helpers */
.bg-primary {
  background-color: var(--leilani-primary) !important;
}

.text-primary {
  color: var(--leilani-primary) !important;
}

.border-primary {
  border-color: var(--leilani-primary) !important;
}

/* Badges */
.badge.bg-primary,
.product-flags .badge.new {
  background-color: var(--leilani-primary) !important;
}

/* Dropdowns */
.dropdown-menu-dark {
  --bs-dropdown-link-active-bg: var(--leilani-primary);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--leilani-primary) !important;
}

/* Nav pills */
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--leilani-primary);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--leilani-primary) !important;
}

/* Pagination */
.pagination {
  --bs-pagination-color: var(--leilani-primary);
  --bs-pagination-hover-color: var(--leilani-primary-hover);
  --bs-pagination-focus-color: var(--leilani-primary-hover);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(0, 184, 175, 0.25);
  --bs-pagination-active-bg: var(--leilani-primary);
  --bs-pagination-active-border-color: var(--leilani-primary);
}

.page-item.active .page-link {
  background-color: var(--leilani-primary) !important;
  border-color: var(--leilani-primary) !important;
}

/* Progress */
.progress,
.progress-stacked {
  --bs-progress-bar-bg: var(--leilani-primary);
}

.progress-bar {
  background-color: var(--leilani-primary) !important;
}

/* List groups */
.list-group {
  --bs-list-group-active-bg: var(--leilani-primary);
  --bs-list-group-active-border-color: var(--leilani-primary);
}

.list-group-item.active {
  background-color: var(--leilani-primary) !important;
  border-color: var(--leilani-primary) !important;
}

/* Carousel indicators */
.carousel-indicators [data-bs-target] {
  background-color: var(--leilani-primary) !important;
}

/* Variant colors / custom checkboxes */
.custom-checkbox input[type="checkbox"] + span.color.active,
.custom-checkbox input[type="checkbox"] + span.color:hover,
.variant-links .color.active,
.variant-links .color:hover,
label .color.active,
label .color:hover {
  border-color: var(--leilani-primary) !important;
}

/* Checkout selected address */
.step .address.selected {
  border-color: var(--leilani-primary) !important;
}

/* Product thumbnails */
.thumbnails__container .thumbnail.active img,
.thumbnail.active img {
  border-color: var(--leilani-primary) !important;
}

/* Page loader spinner */
.spinner-border.text-primary {
  color: var(--leilani-primary) !important;
}

/* Button icons inside primary buttons */
.btn-primary i,
.btn-primary i::before,
.all-product-link.btn i,
.all-product-link.btn i::before {
  color: #fff !important;
}

/*all links in Leilani color*/
a {
  color: var(--leilani-primary);
}

a:hover,
a:focus {
  color: var(--leilani-primary-hover);
}

/* Product variants: show Color + Size side-by-side on desktop */
.product__variants.js-product-variants {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
}

/* Each variant block becomes a column */
.product__variants.js-product-variants > .variant {
  flex: 1 1 160px;      /* grows, shrinks, wraps */
  min-width: 140px;
  margin: 16px;            /* override theme margins if any */
}

/* Make the select take full column width */
.product__variants.js-product-variants .form-select {
  width: 100%;
}

/* Keep color swatches tidy within their column */
.product__variants.js-product-variants .color-variants {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}

/* Mobile: stack again for usability */
@media (max-width: 768px) {
  .product__variants.js-product-variants {
    display: block;
  }

  .product__variants.js-product-variants > .variant {
    min-width: 0;
  }
}

/* =========================================================
   Product miniatures (listing cards)
   ========================================================= */

/* 1) Title color (anthracite) */
.product-miniature__title,
.product-miniature__title a{
  color:#222 !important;
}
.product-miniature__title a:hover{
  color:#222 !important; /* or #444 for subtle hover */
}

/* 2) Disable/Hide any remaining quickview triggers (if theme still outputs them) */
.product-miniature .quick-view,
.product-miniature .js-quick-view,
.product-miniature [data-link-action="quickview"]{
  display:none !important;
}

/* 3) Card hover behavior (keep it subtle, premium) */
.product-miniature{
  transition: transform .18s ease, box-shadow .18s ease;
}
.product-miniature:hover{
  transform: translateY(-4px);
}

/* 4) CTA styling (quiet luxury button/link) */
/* Center CTA in miniature card */
.product-miniature__cta-wrap{
  display:flex;
  justify-content:center;
  margin-top:1rem;
}

.product-miniature__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:.55rem .9rem;
  border:1px solid #222;
  border-radius:999px;       /* pill = softer premium */
  color:#222;
  background:transparent;

  font-size:.9rem;
  letter-spacing:.02em;
  text-decoration:none;

  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.product-miniature__cta:hover,
.product-miniature__cta:focus-visible{
  background:#222;
  color:#fff;
  border-color:#222;
  text-decoration:none;
}

/* Optional: show CTA only on hover on desktop, always show on mobile */
@media (min-width: 992px){
  .product-miniature__cta{
    opacity:0;
    transform: translateY(6px);
  }
  .product-miniature:hover .product-miniature__cta{
    opacity:1;
    transform: translateY(0);
  }
}

/* Base swatch styling for color variants */
/* Remove default hover border */
.color-variant label .color:hover {
  border: none !important;
}

.color-variant .color {
  width: 18px;
  height: 18px;
  border-radius: 50%;              /* perfectly round */
  display: inline-block;
  position: relative;
  transition: all 0.2s ease;
}

.color-variant .input-color {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Selected state */
.color-variant .input-color:checked + .color {
  box-shadow:
    0 0 0 2px white,
    0 0 0 3px #222;
}

/* Remove bootstrap radio focus styling */
.color-variant .input-color:focus,
.color-variant .input-color:checked,
.color-variant .input-color:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

.color-variant .color {
  border: none !important;
}

/* Miniature color swatches (product list cards) */
.product-miniature__variants .variant-links .color {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-block;
  border: none !important;
  box-shadow: none;
  transition: all 0.2s ease;
}

/* Kill theme hover border (blue) */
.product-miniature__variants .variant-links .color:hover {
  border: none !important;
  box-shadow:
    0 0 0 2px white,
    0 0 0 3px #222;
}

/* Current/active swatch ring (stronger than hover) */
.product-miniature__variants .variant-links .color.active,
.product-miniature__variants .variant-links .color[aria-current="true"] {
  box-shadow:
    0 0 0 2px white,
    0 0 0 4px #222;
}

.product-miniature__variants .variant-links {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* White color swatches: make visible on white background */
.color-variant .color[style*="#ffffff"],
.color-variant .color[style*="#fff"],
.color-variant .color[style*="white"],
.product-miniature__variants .variant-links .color[style*="#ffffff"],
.product-miniature__variants .variant-links .color[style*="#fff"],
.product-miniature__variants .variant-links .color[style*="white"] {
  border: 1px solid rgba(0, 0, 0, 0.22) !important;
}

/* Keep border for white swatch on hover */
.product-miniature__variants .variant-links .color[style*="#ffffff"]:hover,
.product-miniature__variants .variant-links .color[style*="#fff"]:hover,
.product-miniature__variants .variant-links .color[style*="white"]:hover,
.color-variant .color[style*="#ffffff"]:hover,
.color-variant .color[style*="#fff"]:hover,
.color-variant .color[style*="white"]:hover {
  border: 1px solid rgba(0, 0, 0, 0.22) !important;
}

/* Selected white swatch: keep Leilani/black halo visible */
.color-variant .input-color:checked + .color[style*="#ffffff"],
.color-variant .input-color:checked + .color[style*="#fff"],
.color-variant .input-color:checked + .color[style*="white"],
.product-miniature__variants .variant-links .color.active[style*="#ffffff"],
.product-miniature__variants .variant-links .color.active[style*="#fff"],
.product-miniature__variants .variant-links .color.active[style*="white"],
.product-miniature__variants .variant-links .color[aria-current="true"][style*="#ffffff"],
.product-miniature__variants .variant-links .color[aria-current="true"][style*="#fff"],
.product-miniature__variants .variant-links .color[aria-current="true"][style*="white"] {
  border: 1px solid rgba(0, 0, 0, 0.22) !important;
  box-shadow:
    0 0 0 2px white,
    0 0 0 3px #222;
}


/* Menu icons same size */
.header-block__action-btn {
  min-width: 44px;
  justify-content: center;
}

/* 3-column header: burger | centered logo | icons */
.header-bottom__bar{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

/* Left aligned */
.header-bottom__left{
  justify-self: start;
  display: flex;
  align-items: center;
}

/* Logo truly centered in viewport */
.header-bottom__center{
  justify-self: center;
  display: flex;
  align-items: center;
}

/* Right aligned icons */
.header-bottom__right{
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-block__action-btn.position-relative .header-block__badge {
  background: #44bfad;     /* or your header accent color */
  color: #fff;
  border: 2px solid #fff;  /* crisp like luxury */
  
  position: absolute;
  top: -2px;
  right: 6px;

  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 12px;
  line-height: 1;
}

@media (min-width: 992px) {
  .header-block--active .header-block, .header-block--active .header-block__icon {
  color: #222;
}
}

/*implement Leilani lingerie design colors */
/* === Leilani Footer Brand Color === */
.footer__main {
  background: #017771 !important;   /* brand color */
  color: #fff;
}

/* Footer headings / titles */
.footer__main .footer__block__title,
.footer__main .footer__block__toggle,
.footer__main .footer__block__toggle .material-icons {
  color: #fff !important;
}

/* Footer links */
.footer__main a {
  color: #fff !important;
  text-decoration: none;
}

.footer__main a:hover,
.footer__main a:focus {
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: underline;
}

/* Divider lines / borders if any */
.footer__main hr,
.footer__main .dropdown-divider {
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* Mobile accordion border/top separators (if Hummingbird adds them) */
.footer__main .footer__block__content,
.footer__main .footer__block {
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* style the svg icons in top menu */
.header-icon svg {
  width: 24px;
  height: 24px;
  display: block;
  color: #222;              /* controls stroke via currentColor */
}

.header-block__action-btn:hover .header-icon svg {
  color: #017771;           /* your hover accent */
}

/* Bigger hamburger icon */
.header-block__action-btn .material-icons.header-block__icon {
  font-size: 28px;
  line-height: 1;
  font-size: 30px;
}

/* Increase clickable area of header icons */
.header-block__action-btn {
  padding: 8px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
}

/* prevent shift of header icons */
.header-bottom__left,
.header-bottom__right {
  display: flex;
  align-items: center;
}

/* Full-bleed category banner (break out of container gutters) */
.category-cover--bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Ensure image fills the full-bleed wrapper cleanly */
.category-cover--bleed img {
  display: block;
  width: 100%;
  height: auto;
}

/* Hide breadcrumb bar (keep markup for SEO/structured data) */
.breadcrumb__wrapper {
  display: none !important;
}

/* Leilani: rectangular editorial layout (no rounding) */

/* Product listing cards + images */
.product-miniature .card,
.product-miniature .thumbnail-container,
.product-miniature .product-miniature__image-container,
.product-miniature .product-miniature__image,
.product-miniature .card-img-top,
.product-miniature picture,
.product-miniature picture img,
.product-miniature img{
  border-radius: 0 !important;
}

/* Bootstrap card edge rounding can be applied to first/last child */
.product-miniature .card > *{
  border-radius: 0 !important;
}

/* ================================
   Leilani – Product Page Images
   Remove rounded corners globally
================================ */

/* Main product image */
.product__images img,
.carousel-inner img,
.carousel-item img,
.product__images picture,
.product__images picture img,
.img-fluid {
  border-radius: 0 !important;
}

/* Thumbnail images */
.thumbnails__container img,
.thumbnails__list img,
.thumbnail img,
.js-thumb {
  border-radius: 0 !important;
}

/* Remove rounding from carousel container */
.carousel-inner,
.carousel-item {
  border-radius: 0 !important;
  overflow: visible !important;
}

/* =================================
   Leilani – Remove thumbnail rounding
================================= */

/* Remove rounding on thumbnail container */
.thumbnail,
.js-thumb-container,
.thumbnails__list .thumbnail,
.thumbnails__list li {
  border-radius: 0 !important;
  overflow: visible !important;
}

/* Remove rounding on thumbnail images */
.thumbnail img,
.js-thumb,
.js-thumb-selected,
.thumbnails__list img,
.thumbnails__container img {
  border-radius: 0 !important;
}

/* Remove possible Bootstrap img-fluid rounding */
.img-fluid {
  border-radius: 0 !important;
}

/* ================================
   Leilani – Product carousel: kill clipping + rounding
================================ */

/* The usual culprit: carousel / container with overflow hidden + radius */
.product__images .carousel,
.product__images .js-product-carousel,
#product-images,
#product-images .carousel-inner,
#product-images .carousel-item,
#product-images picture,
#product-images picture > img,
#product-images img.img-fluid {
  border-radius: 0 !important;
}

/* If theme clips with overflow hidden, neutralize it */
.product__images .carousel,
.product__images .js-product-carousel,
#product-images,
#product-images .carousel-inner,
#product-images .carousel-item,
#product-images picture {
  overflow: visible !important;
}

/* Some themes use clip-path/mask for rounded corners */
.product__images .carousel,
#product-images .carousel-inner,
#product-images picture,
#product-images img {
  clip-path: none !important;
  -webkit-clip-path: none !important;
  mask: none !important;
  -webkit-mask-image: none !important;
}

/* make modal without rounded corner*/
.modal .bs-modal-border-radius{
--bs-modal-border-radius: var(--bs-border-radius-none);
}

/* remove sliding transitions from product images*/
#product-images .carousel-item {
  transition: none !important;
}

#product-images .carousel-item-next,
#product-images .carousel-item-prev,
#product-images .carousel-item-start,
#product-images .carousel-item-end {
  transform: none !important;
}

/* style purse svg for cart icon */
.ll-icon {
  display: inline-block;
  vertical-align: -2px;
}

.ll-icon--purse {
  width: 24px;
  height: 24px;
}

/* adjuste spacing for product page*/
.product__left,
.product__col {
  padding-top: 1rem;
}

/* Home custom text section aligned with category tiles */
.page-index #custom-text.ll-home-text {
  margin: 3rem 0 4rem;
}

.page-index .ll-home-text__inner {
  width: 100%;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
}

/* Why grid */
.page-index .ll-why-grid {
  margin-top: 1.5rem;
  margin-bottom: 3rem;
}

.page-index .ll-why-grid.row {
  margin-left: 0;
  margin-right: 0;
}

.page-index .ll-why-grid > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 768px) {
  .page-index .ll-why-grid {
    column-gap: 2rem;
  }

  .page-index .ll-why-grid > .col-md-4 {
    width: calc((100% - 4rem) / 3);
  }
}

/* Text block styling */
.page-index .ll-why-item {
  height: 100%;
  padding: 1.5rem;
}

.page-index .ll-why-item h3 {
  display: block;
  font-size: 1.25rem;
  line-height: 1.35;
  font-weight: 600;
  margin: 0 0 0.75rem;
  color: inherit;
}

.page-index .ll-why-item p {
  margin-bottom: 0;
  line-height: 1.65;
}

/* Mobile spacing between blocks */
@media (max-width: 768px) {
  .page-index .ll-why-item h3 {
    font-size: 1.3rem;
  }
  .page-index .ll-why-grid {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .page-index .ll-why-grid > [class*="col-"] {
    margin-bottom: 2rem;
  }

  /* letzter Block ohne extra Abstand */
  .page-index .ll-why-grid > [class*="col-"]:last-child {
    margin-bottom: 0;
  }
}