/* Basilico Coffee — theme overrides. Loaded via registry stylesheets. */

/* ── Hero slider text animation (replays on each slide change) ────── */
.page-title-home .hero-slide-anim {
  opacity: 0;
  transform: translateY(30px);
}
.page-title-home .swiper-slide-active .hero-slide-anim {
  animation: heroSlideIn 0.7s ease forwards;
}
@keyframes heroSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Blog list / related cards — uniform image height ─────────────── */
.wg-news .wg-blog .image,
.wg-news .wg-blog .image > a,
.wg-news .wg-blog .image > span {
  display: block;
  width: 100%;
  height: 260px;
  overflow: hidden;
  border-radius: 10px;
}
.wg-news .wg-blog .image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.wg-news .wg-blog:hover .image img {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ── Legal pages body text (mentions-legales / politique-de-confidentialite) ── */
 .list-bullet,
ul {
  font-size: 1.15rem;
  line-height: 2;
}
.list-bullet li,
 ul li {
  font-size: 1.5rem;
  line-height: 2;
  margin-bottom: 0.5rem;
}
 p {
  font-size: 1.5rem;
  line-height: 1.7;
}
 h3 {
  font-size: 2rem;
  line-height: 3rem !important;
}



/* wg-service — equal height cards (match the tallest item) */
.wg-service .row {
  align-items: stretch;
}
.wg-service .row > [class*="col-"] {
  display: flex;
}
.wg-service .service-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 560px;
}
.wg-service .service-item .content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.wg-service .service-item .content p {
  flex: 1 1 auto;
}

/* ── Service card background image — fill the card ──────────────────── */
.wg-service .service-item > img,
.wg-service .service-item > span > img,
.wg-service .service-item picture img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

/* ── Service card SVG icons (cake / chocolate / tea) ──────────────────── */
.wg-service .service-item .content .svg-cake,
.wg-service .service-item .content .svg-choco-squares,
.wg-service .service-item .content .svg-tea-cup {
  display: block;
  width: 80px;
  height: 80px;
  margin: 3rem auto -1rem auto;
  background-color: #b69267;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}
.wg-service .service-item .content .svg-cake {
  mask-image: url('/assets/themes/basilico-coffee/icon/cake.svg');
  -webkit-mask-image: url('/assets/themes/basilico-coffee/icon/cake.svg');
}
.wg-service .service-item .content .svg-choco-squares {
  mask-image: url('/assets/themes/basilico-coffee/icon/choco-squares.svg');
  -webkit-mask-image: url('/assets/themes/basilico-coffee/icon/choco-squares.svg');
}
.wg-service .service-item .content .svg-tea-cup {
  mask-image: url('/assets/themes/basilico-coffee/icon/tea-cup.svg');
  -webkit-mask-image: url('/assets/themes/basilico-coffee/icon/tea-cup.svg');
}

/* ── Product detail lightbox ─────────────────────────────────────────── */
.wg-shop-detail-lightbox img,
[role="dialog"][aria-modal="true"] img {
  max-width: 90vw;
  max-height: 90vh;
  width: auto !important;
  height: auto !important;
  object-fit: contain;
  display: block;
}

/* ── Product detail main image (clickable to open lightbox) ──────────── */
.wg-shop-detail .image-top.image-top-trigger {
  background: transparent;
  border: 0;
  padding: 0;
  width: 100%;
  cursor: zoom-in;
}

/* ── Product detail main image centering ─────────────────────────────── */
.wg-shop-detail .images .image-top {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 520px;
  height: 100%;
}
.wg-shop-detail .images .image-top img {
  margin: auto;
  max-width: 100%;
  max-height: 520px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ── Shop product card image centering ────────────────────────────────── */
.wg-shop .product-item .image,
.our-product .product-item .image {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto !important;
}
.wg-shop .product-item .image > a,
.our-product .product-item .image > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.wg-shop .product-item .image img,
.our-product .product-item .image img {
  margin: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}
.wg-shop .product-item .image > a,
.our-product .product-item .image > a {
  width: 100%;
  height: 100%;
}

/* ── Product detail quantity selector ──────────────────────────────────── */
/* Overrides theme's default .quantity (shortcodes.css ~L3974) which uses
   absolute plus/minus stacking inside a 66px×50px dark pill. Make it a
   roomy horizontal pill so the input value and both chevron buttons are
   clearly visible. */
.wg-shop-detail .quantity {
  display: inline-flex !important;
  align-items: stretch !important;
  width: auto !important;
  height: 56px !important;
  border-radius: 9999px !important;
  background-color: #1c120d !important;
  position: relative;
  overflow: hidden;
  margin-right: 1rem;
}
.wg-shop-detail .quantity input {
  font-size:1.5rem !important;
  line-height: 1.5 !important;
  width: 30px !important;
  padding: 0 !important;
  text-align: center !important;
  background-color: transparent !important;
  color: #fff !important;
  font-weight: 600;
  border: 0;
  outline: none;
  order: 2;
}
.wg-shop-detail .quantity .btn-quantity {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 48px;
  background: transparent;
  border: 0;
  color: #fff !important;
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.2s;
  height: 100%;
  border-radius: 0px;
}
.wg-shop-detail .quantity .minus-btn {
  order: 1;
}
.wg-shop-detail .quantity .plus-btn {
  order: 3;
}
.wg-shop-detail .quantity .btn-quantity:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
}
.wg-shop-detail .quantity .btn-quantity:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.wg-shop-detail .price p{
  font-size: 2.75rem !important;
  line-height: 1.25 !important;
  font-weight: bold !important;
}

/* ── Product detail gallery thumbnails (clickable) ─────────────────────── */
.wg-shop-detail .image-bottom .thumb-button {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: block;
  width: 100%;
  transition: opacity 0.2s, transform 0.2s;
}
.wg-shop-detail .image-bottom .thumb-button:hover {
  opacity: 0.85;
  transform: scale(1.02);
}
.wg-shop-detail .image-bottom .thumb-button img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── Shop sidebar (categories list) ───────────────────────────────────── */
.wg-shop-sidebar .widget-categories {
  padding: 1.75rem 1.5rem;
  border: 1px solid #ead9c8;
  border-radius: 1rem;
  background: #fff8f1;
}
.dark .wg-shop-sidebar .widget-categories {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}
.wg-shop-sidebar .widget-title {
  font-family: inherit;
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #1c120d;
  margin: 0 0 1.25rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #b69267;
}
.dark .wg-shop-sidebar .widget-title {
  color: #fff;
}
.wg-shop-sidebar .category-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.wg-shop-sidebar .category-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.85rem;
  border-radius: 0.6rem;
  color: #3e2b1f;
  font-size: 1.75rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, padding 0.2s;
}
.wg-shop-sidebar .category-list li a:hover {
  background: rgba(182, 146, 103, 0.15);
  color: #b69267;
  padding-left: 1.1rem;
}
.wg-shop-sidebar .category-list li.active a {
  background: #b69267;
  color: #fff;
}
.dark .wg-shop-sidebar .category-list li a {
  color: rgba(255, 255, 255, 0.8);
}
.dark .wg-shop-sidebar .category-list li a:hover {
  background: rgba(182, 146, 103, 0.2);
  color: #fff;
}

/* ── Auth pages (login, create-account, forgot-password, find-order) ─ */
.coffee-auth-page label,
.coffee-auth-page p,
.coffee-auth-page a,
.coffee-auth-page span:not(.sr-only),
.coffee-auth-page input,
.coffee-auth-page textarea,
.coffee-auth-page select {
  font-size: 1.85rem !important;
  line-height: 1.5 !important;
}
.coffee-auth-page label {
  color: #1c120d !important;
  font-weight: 600 !important;
}
.dark .coffee-auth-page label {
  color: #ffffff !important;
}
.coffee-auth-page a[data-slot="button"],
.coffee-auth-page button[type="submit"],
.coffee-auth-page button[data-slot="button"]:not([role="checkbox"]):not([role="radio"]):not([role="switch"]) {
  background-color: #b69267 !important;
  color: #ffffff !important;
  font-size: 1.85rem !important;
  font-weight: 600 !important;
  padding: 1.85rem 1.85rem !important;
  height: auto !important;
  border-radius: 9999px !important;
  margin-top:15px;
}
.coffee-auth-page button[type="submit"]:hover,
.coffee-auth-page button[data-slot="button"]:hover {
  background-color: #2a1a12 !important;
}


/* ── Checkout page — larger body text ─────────────────────────────────
   On /checkout, enlarge every text element except h2 headings.
   Scoped to the .coffee-checkout-page wrapper set by CheckoutPage.tsx
   when the active variant is basilico-coffee so it applies to both the
   parent theme demo and any child client (e.g. aux-delices-lorraines).
   h1/h3/h4/h5/h6 + labels/inputs/buttons/paragraphs/spans all scale up
   ~1.15rem base. h2 is left untouched. */
.coffee-checkout-page,
.coffee-checkout-page p,
.coffee-checkout-page span:not(.sr-only),
.coffee-checkout-page div,
.coffee-checkout-page li,
.coffee-checkout-page label,
.coffee-checkout-page a,
.coffee-checkout-page button:not([role="checkbox"]):not([role="radio"]):not([role="switch"]),
.coffee-checkout-page input:not([type="checkbox"]):not([type="radio"]),
.coffee-checkout-page textarea,
.coffee-checkout-page select {
  font-size: 1.75rem !important;
  line-height: 1.75 !important;
}

/* Radix Checkbox / Radio / Switch triggers are `<button>` elements but
   should keep their native checkbox appearance — forced explicit 20×20
   box so nothing in the cascade (font-size, line-height, padding,
   border-radius, shadcn button variant styles) can inflate them into
   a pill. */
.coffee-checkout-page button[role="checkbox"],
.coffee-checkout-page button[role="radio"],
.coffee-checkout-page button[role="switch"],
.coffee-checkout-page [data-slot="checkbox"],
.coffee-checkout-page [data-slot="radio-group-item"] {
  width: 1.25rem !important;
  height: 1.25rem !important;
  min-width: 1.25rem !important;
  min-height: 1.25rem !important;
  max-width: 1.25rem !important;
  max-height: 1.25rem !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  border-radius: 4px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 1.25rem !important;
}
.coffee-checkout-page button[role="radio"],
.coffee-checkout-page [data-slot="radio-group-item"] {
  border-radius: 50% !important;
}
.coffee-checkout-page button[role="switch"],
.coffee-checkout-page [data-slot="switch"] {
  width: 2.5rem !important;
  height: 1.25rem !important;
  min-width: 2.5rem !important;
  max-width: 2.5rem !important;
  max-height: 1.25rem !important;
  padding: 2px !important;
  border-radius: 9999px !important;
  flex: 0 0 2.5rem !important;
}
.coffee-checkout-page [data-slot="checkbox-indicator"],
.coffee-checkout-page [data-slot="radio-group-indicator"],
.coffee-checkout-page [data-slot="switch-thumb"],
.coffee-checkout-page button[role="checkbox"] span,
.coffee-checkout-page button[role="radio"] span,
.coffee-checkout-page button[role="switch"] span {
  font-size: 1rem !important;
  line-height: 1 !important;
}
.coffee-checkout-page button[role="checkbox"] svg,
.coffee-checkout-page button[role="radio"] svg,
.coffee-checkout-page button[role="switch"] svg,
.coffee-checkout-page [data-slot="checkbox"] svg {
  width: 0.875rem !important;
  height: 0.875rem !important;
}

.coffee-checkout-page h1,
.coffee-checkout-page h3,
.coffee-checkout-page h4,
.coffee-checkout-page h5,
.coffee-checkout-page h6 {
  font-size: 2.5rem !important;
  line-height: 1.25 !important;
}

/* h2 font-size stays at whatever the theme already defines, but the line
   height is loosened and top/bottom spacing added so the checkout H2s
   don't feel cramped against their surrounding content. */
.coffee-checkout-page h2 {
  line-height: 1.4 !important;
  margin-top: 2.5rem !important;
  margin-bottom: 1.5rem !important;
}

/* The first h2 in each panel shouldn't push its card header down. */
.coffee-checkout-page .coffee-checkout-panel > h2:first-child,
.coffee-checkout-page h2:first-child {
  margin-top: 0 !important;
}

/* Even utility "small" classes get bumped up to the same body size
   on this page so Tailwind `text-xs` / `text-sm` utilities don't make
   some rows visually smaller than the rest. */
.coffee-checkout-page .text-xs,
.coffee-checkout-page .text-sm,
.coffee-checkout-page .text-base,
.coffee-checkout-page [class*="text-xs"],
.coffee-checkout-page [class*="text-sm"],
.coffee-checkout-page [class*="text-base"] {
  font-size: 1.5rem !important;
  line-height: 1.5 !important;
}

/* Primary full-width CTA buttons (e.g. "Continuer en tant qu'invité",
   "Passer la commande") stand out with a larger size + guaranteed white
   text even when `disabled` (disabled:opacity-50 otherwise dims them). */
.coffee-checkout-page button.w-full.bg-primary,
.coffee-checkout-page button.bg-primary[class*="rounded-xl"],
.coffee-checkout-page [data-slot="button"].bg-primary[class*="text-base"] {
  font-size: 1.75rem !important;
  color: #ffffff !important;
}
.coffee-checkout-page button.bg-primary[disabled],
.coffee-checkout-page button.bg-primary:disabled,
.coffee-checkout-page [data-slot="button"].bg-primary[disabled] {
  color: #ffffff !important;
  opacity: 0.75 !important;
}


.theme-basilico.theme-basilico-coffee .special-menu-item .image .coffee-menu-showcase-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  display: block;
}

.theme-basilico.theme-basilico-coffee .special-menu-item {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: nowrap;
}

.theme-basilico.theme-basilico-coffee .special-menu-item .image {
  flex: 0 0 100px;
  width: 100px;
  min-width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-basilico.theme-basilico-coffee .special-menu-item .image > div {
  width: 100%;
  height: 100%;
}

.theme-basilico.theme-basilico-coffee .special-menu-item .content {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

.theme-basilico.theme-basilico-coffee .special-menu-shop-data .row > [class*='col-'] {
  display: flex;
}

.theme-basilico.theme-basilico-coffee .special-menu-shop-data .special-menu-item {
  width: 100%;
  min-height: 126px;
}

.theme-basilico.theme-basilico-coffee .special-menu-shop-data .special-menu-item.season {
  margin-top: 0;
}

.theme-basilico.theme-basilico-coffee .special-menu-shop-data .special-menu-item.new::after,
.theme-basilico.theme-basilico-coffee .special-menu-shop-data .special-menu-item.season::after {
  content: attr(data-badge-label);
}

.theme-basilico.theme-basilico-coffee .coffee-add-to-basket-button {
  color: #fff !important;
  width: 49px !important;
  min-width: 49px !important;
  height: 49px !important;
  box-shadow: none !important;
  background: #c3a27c !important;
  border: 0 !important;
  border-radius: 50% !important;
  padding: 0 !important;
}

.theme-basilico.theme-basilico-coffee .coffee-add-to-basket-button:hover {
  background: #b69267;
}

.theme-basilico.theme-basilico-coffee .coffee-menu-showcase-actions,
.theme-basilico.theme-basilico-coffee .coffee-product-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

.theme-basilico.theme-basilico-coffee .coffee-menu-showcase-actions {
  margin-top: 0;
  flex: 0 0 49px;
  width: 49px;
  min-width: 49px;
  align-self: center;
}

.theme-basilico.theme-basilico-coffee .coffee-product-icon-button {
  width: 100%;
  height: 100%;
  color: inherit;
}

.theme-basilico.theme-basilico-coffee .coffee-product-icon {
  width: 18px;
  height: 18px;
}

.theme-basilico.theme-basilico-coffee .coffee-contact-section {
  position: relative;
  padding: 120px 0 130px;
}

.theme-basilico.theme-basilico-coffee .coffee-contact-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 251, 246, 0.96), rgba(246, 236, 223, 0.88)),
    url('/assets/themes/basilico-coffee/images/bg-section/bg-contact.jpg') center/cover no-repeat;
  opacity: 0.45;
  pointer-events: none;
}

.theme-basilico.theme-basilico-coffee .coffee-contact-grid {
  position: relative;
  z-index: 1;
  row-gap: 30px;
  align-items: stretch;
}

.theme-basilico.theme-basilico-coffee .coffee-contact-grid > [class*='col-'] {
  display: flex;
}

.theme-basilico.theme-basilico-coffee .coffee-contact-panel {
  width: 100%;
  border: 1px solid rgba(195, 162, 124, 0.22);
  border-radius: 28px;
  background: rgba(255, 252, 247, 0.94);
  box-shadow: 0 24px 60px rgba(23, 20, 18, 0.08);
}

.theme-basilico.theme-basilico-coffee .coffee-contact-form-panel {
  padding: 42px;
}

.theme-basilico.theme-basilico-coffee .coffee-contact-info-panel {
  padding: 42px 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
}

.theme-basilico.theme-basilico-coffee .coffee-contact-description {
  margin: 20px 0 0;
  max-width: 620px;
}

.theme-basilico.theme-basilico-coffee .coffee-contact-form {
  margin-top: 32px;
}

.theme-basilico.theme-basilico-coffee .coffee-contact-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 28px;
}

.theme-basilico.theme-basilico-coffee .coffee-contact-field {
  margin: 0;
}

.theme-basilico.theme-basilico-coffee .coffee-contact-field-full {
  grid-column: 1 / -1;
}

.theme-basilico.theme-basilico-coffee .coffee-contact-field textarea.style-3 {
  height: 190px !important;
  border-radius: 20px;
  padding-top: 18px;
}

.theme-basilico.theme-basilico-coffee .coffee-contact-info-block + .coffee-contact-info-block {
  padding-top: 28px;
  border-top: 1px solid rgba(195, 162, 124, 0.2);
}

.theme-basilico.theme-basilico-coffee .coffee-contact-info-label {
  margin-bottom: 12px;
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8c6948;
}

.theme-basilico.theme-basilico-coffee .coffee-contact-info-lines p {
  margin: 0;
  font-size: 18px;
  line-height: 1.7;
  color: #171412;
}

.theme-basilico.theme-basilico-coffee .coffee-contact-info-lines p + p {
  margin-top: 4px;
}

.theme-basilico.theme-basilico-coffee .coffee-contact-info-panel .widget-social.style-4 ul {
  justify-content: flex-start;
  gap: 14px;
}

@media (max-width: 991.98px) {
  .theme-basilico.theme-basilico-coffee .coffee-contact-section {
    padding: 96px 0 108px;
  }

  .theme-basilico.theme-basilico-coffee .coffee-contact-form-panel,
  .theme-basilico.theme-basilico-coffee .coffee-contact-info-panel {
    padding: 32px 26px;
  }
}

@media (max-width: 767.98px) {
  .theme-basilico.theme-basilico-coffee .coffee-contact-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

.theme-basilico-content-coffee .wg-shop .product-item .icon a,
.theme-basilico-content-coffee .wg-shop .product-item .icon button,
.theme-basilico-content-coffee .our-product .product-item .icon a,
.theme-basilico-content-coffee .our-product .product-item .icon button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  background: #c3a27c !important;
  color: #fff !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

.theme-basilico-content-coffee .wg-shop .product-item .icon a,
.theme-basilico-content-coffee .our-product .product-item .icon a {
  font-size: 20px !important;
  line-height: 1 !important;
}

.theme-basilico-content-coffee .wg-shop .product-item .icon a:hover,
.theme-basilico-content-coffee .wg-shop .product-item .icon button:hover,
.theme-basilico-content-coffee .our-product .product-item .icon a:hover,
.theme-basilico-content-coffee .our-product .product-item .icon button:hover {
  background: #b69267 !important;
  color: #fff !important;
}

.theme-basilico-content-coffee .wg-shop .product-item .icon button svg,
.theme-basilico-content-coffee .wg-shop .product-item .icon a i,
.theme-basilico-content-coffee .our-product .product-item .icon button svg,
.theme-basilico-content-coffee .our-product .product-item .icon a i {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  font-size: 20px !important;
  line-height: 1 !important;
}

.theme-basilico-header-coffee .menu-primary-menu > li > a {
  color: #fff !important;
}

.theme-basilico-header-coffee .menu-primary-menu > li > a:hover,
.theme-basilico-header-coffee .menu-primary-menu li.current-menu-item > a {
  color: #c3a27c !important;
}

/* Sub-menu links must be dark (white card background) */
.theme-basilico-header-coffee .menu-primary-menu .sub-menu li a {
  color: #121212 !important;
}
.theme-basilico-header-coffee .menu-primary-menu .sub-menu li a:hover {
  color: #c3a27c !important;
}

.theme-basilico-header-coffee .theme-basilico-header-actions {
  gap: 16px;
  overflow: visible;
}

.theme-basilico-header-coffee .theme-basilico-header-actions > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.theme-basilico-header-coffee .theme-basilico-header-actions button {
  min-width: 49px !important;
  width: 49px !important;
  height: 49px !important;
  border-radius: 50% !important;
  background: #c3a27c !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: none !important;
  overflow: visible !important;
  position: relative;
  z-index: 1;
}

.theme-basilico-header-coffee .theme-basilico-header-actions button:hover {
  background: #d0b18d !important;
  color: #fff !important;
}

.theme-basilico-header-coffee .theme-basilico-header-actions button svg,
.theme-basilico-header-coffee .theme-basilico-header-actions button .text-lg {
  color: inherit !important;
}

.theme-basilico-header-coffee .theme-basilico-header-actions button svg {
  width: 22px !important;
  height: 22px !important;
}

.theme-basilico-header-coffee .theme-basilico-header-actions button .text-lg {
  font-size: 24px !important;
  line-height: 1;
}

.theme-basilico-header-coffee .theme-basilico-header-actions button > .absolute {
  z-index: 20;
}

body:has(.theme-basilico.theme-basilico-coffee) [data-slot='sheet-content'].cart-sheet-content {
  right: 0 !important;
  left: auto !important;
  width: min(90vw, 540px) !important;
  max-width: calc(100vw - 12px) !important;
  height: 100dvh;
  max-height: 100dvh;
  padding-top: 8px;
  background: #f8f2ec;
  border-left: 1px solid rgba(45, 39, 35, 0.12);
  overflow: hidden;
  box-sizing: border-box;
}

body:has(.theme-basilico.theme-basilico-coffee) .cart-sheet-header {
  padding: 28px 28px 20px;
}

body:has(.theme-basilico.theme-basilico-coffee) .cart-sheet-title {
  color: #171412;
  font-size: 30px;
  line-height: 1.2;
}

body:has(.theme-basilico.theme-basilico-coffee) .cart-sheet-description {
  color: #6f655d;
  font-size: 15px;
  line-height: 1.7;
}

body:has(.theme-basilico.theme-basilico-coffee) .cart-sheet-body {
  padding: 0 20px;
  min-height: 0;
}

body:has(.theme-basilico.theme-basilico-coffee) .cart-sheet-items {
  padding: 8px 0 20px;
  min-height: 0;
}

body:has(.theme-basilico.theme-basilico-coffee) .cart-sheet-item {
  border-bottom: 1px solid rgba(45, 39, 35, 0.12);
  padding: 20px 6px;
}

body:has(.theme-basilico.theme-basilico-coffee) .cart-sheet-delete {
  margin-left: 70px;
  margin-top: -8px;
}

body:has(.theme-basilico.theme-basilico-coffee) .cart-sheet-delete {
  margin-left: 68px;
  margin-top: -10px;
  z-index: 60;
}

body:has(.theme-basilico.theme-basilico-coffee) .cart-sheet-delete button {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 1px solid rgba(220, 38, 38, 0.24) !important;
  color: #dc2626 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
}

body:has(.theme-basilico.theme-basilico-coffee) .cart-sheet-delete button svg {
  width: 14px !important;
  height: 14px !important;
  color: #dc2626 !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
}

body:has(.theme-basilico.theme-basilico-coffee) .cart-sheet-delete button:hover {
  background: #fff5f5;
  color: #b91c1c !important;
}

body:has(.theme-basilico.theme-basilico-coffee) .cart-sheet-delete button:hover svg {
  color: #b91c1c !important;
  stroke: currentColor !important;
}

body:has(.theme-basilico.theme-basilico-coffee) .cart-sheet-item-link {
  gap: 18px;
}

body:has(.theme-basilico.theme-basilico-coffee) .cart-sheet-thumb {
  width: 88px;
  height: 88px;
  min-width: 88px;
  border-radius: 14px;
  background: #fff;
}

body:has(.theme-basilico.theme-basilico-coffee) .cart-sheet-item-content {
  padding-top: 4px;
}

body:has(.theme-basilico.theme-basilico-coffee) .cart-sheet-item-title {
  color: #171412;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

body:has(.theme-basilico.theme-basilico-coffee) .cart-sheet-item-variant {
  margin-top: 6px;
  color: #7a7067;
  font-size: 14px;
}

body:has(.theme-basilico.theme-basilico-coffee) .cart-sheet-item-meta {
  height: 88px;
  min-width: 108px;
}

body:has(.theme-basilico.theme-basilico-coffee) .cart-sheet-item-price {
  color: #171412;
  font-size: 17px;
  font-weight: 700;
}

body:has(.theme-basilico.theme-basilico-coffee) .cart-sheet-quantity {
  height: 42px;
  border-radius: 999px;
  border-color: rgba(45, 39, 35, 0.16);
  background: #fff;
}

body:has(.theme-basilico.theme-basilico-coffee) .cart-sheet-footer {
  padding: 0 20px 20px;
  flex-shrink: 0;
}

body:has(.theme-basilico.theme-basilico-coffee) .cart-sheet-total {
  border-bottom-color: rgba(45, 39, 35, 0.12);
  color: #6f655d;
  font-size: 15px;
  padding: 12px 0;
}

body:has(.theme-basilico.theme-basilico-coffee) .cart-sheet-total-price {
  color: #171412;
  font-size: 20px;
  font-weight: 700;
}

body:has(.theme-basilico.theme-basilico-coffee) .cart-sheet-checkout-button {
  min-height: 54px;
  border-radius: 999px;
  background: #c3a27c !important;
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: none !important;
  border: 0 !important;
}

body:has(.theme-basilico.theme-basilico-coffee) .cart-sheet-checkout-button:hover {
  background: #b69267 !important;
  color: #fff !important;
}

body:has(.theme-basilico.theme-basilico-coffee) [data-slot='sheet-content'].cart-sheet-content [data-slot='sheet-close'] {
  top: 20px;
  right: 20px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(220, 38, 38, 0.18);
  color: #dc2626;
  opacity: 1;
  box-shadow: none;
  padding: 0;
}

body:has(.theme-basilico.theme-basilico-coffee) [data-slot='sheet-content'].cart-sheet-content [data-slot='sheet-close'] svg {
  width: 18px;
  height: 18px;
  color: #dc2626;
  stroke: currentColor;
}

body:has(.theme-basilico.theme-basilico-coffee) [data-slot='sheet-content'].cart-sheet-content [data-slot='sheet-close']:hover {
  background: #fff5f5;
  color: #b91c1c;
}

body:has(.theme-basilico.theme-basilico-coffee) [data-sonner-toaster] [data-sonner-toast] {
  padding: 16px 18px;
  border-radius: 16px;
}

body:has(.theme-basilico.theme-basilico-coffee) [data-sonner-toaster] [data-sonner-toast] [data-title] {
  font-size: 16px;
  line-height: 1.45;
  font-weight: 600;
}

body:has(.theme-basilico.theme-basilico-coffee) [data-sonner-toaster] [data-sonner-toast] [data-description] {
  font-size: 14px;
  line-height: 1.5;
}

body:has(.theme-basilico.theme-basilico-coffee) .coffee-checkout-page {
  padding: 8px 0 36px;
}

body:has(.theme-basilico.theme-basilico-coffee) .coffee-checkout-layout {
  max-width: 1180px;
  align-items: stretch;
  gap: 28px;
}

body:has(.theme-basilico.theme-basilico-coffee) .coffee-checkout-grid {
  position: relative;
  margin-top: -28px;
  gap: 28px;
}

body:has(.theme-basilico.theme-basilico-coffee) .coffee-checkout-panel {
  border: 1px solid rgba(195, 162, 124, 0.24) !important;
  background: linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(250, 244, 236, 0.98)) !important;
  border-radius: 28px !important;
  box-shadow: 0 28px 60px rgba(23, 20, 18, 0.08) !important;
  padding: 28px !important;
  backdrop-filter: none !important;
  margin-top:35px;
  
}

body:has(.theme-basilico.theme-basilico-coffee) .coffee-checkout-panel h2 {
  color: #171412 !important;
  font-size: clamp(2rem, 3vw, 2.8rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  line-height: 0.95 !important;
  text-transform: uppercase;
}

body:has(.theme-basilico.theme-basilico-coffee) .coffee-checkout-panel .text-primary,
body:has(.theme-basilico.theme-basilico-coffee) .coffee-checkout-panel .text-primary\/70 {
  color: #8c6948 !important;
}

body:has(.theme-basilico.theme-basilico-coffee) .coffee-checkout-panel input {
  min-height: 52px;
  border-radius: 999px !important;
  border-color: rgba(195, 162, 124, 0.35) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: none !important;
}

body:has(.theme-basilico.theme-basilico-coffee) .coffee-checkout-panel label {
  color: #6f655d !important;
  letter-spacing: 0.03em;
  font-size: 1.3rem !important;
}


body:has(.theme-basilico.theme-basilico-coffee) .coffee-checkout-panel .text-xs {
  font-size: 0.875rem !important;
}

body:has(.theme-basilico.theme-basilico-coffee) .coffee-checkout-panel button:not([role="checkbox"]),
body:has(.theme-basilico.theme-basilico-coffee) .coffee-checkout-panel a[data-slot="button"] {
  box-shadow: none !important;
}

body:has(.theme-basilico.theme-basilico-coffee) .coffee-checkout-panel button.bg-primary,
body:has(.theme-basilico.theme-basilico-coffee) .coffee-checkout-panel button[class*="bg-primary"] {
  background: #c3a27c !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
}

body:has(.theme-basilico.theme-basilico-coffee) .coffee-checkout-panel button.bg-primary:hover,
body:has(.theme-basilico.theme-basilico-coffee) .coffee-checkout-panel button[class*="bg-primary"]:hover {
  background: #b69267 !important;
}

body:has(.theme-basilico.theme-basilico-coffee) .coffee-checkout-panel [class*="border-dashed"] {
  border-style: solid !important;
}

/* Summary panel — dark coffee sidebar treatment */
body:has(.theme-basilico.theme-basilico-coffee) .coffee-checkout-summary.coffee-checkout-panel {
  background: #1c1410 !important;
  border-color: rgba(195, 162, 124, 0.18) !important;
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.22) !important;
}

body:has(.theme-basilico.theme-basilico-coffee) .coffee-checkout-summary h2,
body:has(.theme-basilico.theme-basilico-coffee) .coffee-checkout-summary .text-\[\#1c120d\] {
  color: #f5ede3 !important;
}

body:has(.theme-basilico.theme-basilico-coffee) .coffee-checkout-summary .text-primary\/70 {
  color: rgba(195, 162, 124, 0.75) !important;
}

body:has(.theme-basilico.theme-basilico-coffee) .coffee-checkout-summary [class*="text-\[#9c6549\]"],
body:has(.theme-basilico.theme-basilico-coffee) .coffee-checkout-summary [class*="text-\[#8b5f47\]"] {
  color: rgba(245, 237, 227, 0.55) !important;
}

body:has(.theme-basilico.theme-basilico-coffee) .coffee-checkout-summary .border-t {
  border-color: rgba(195, 162, 124, 0.2) !important;
  border-style: solid !important;
}

body:has(.theme-basilico.theme-basilico-coffee) .coffee-checkout-summary button.bg-primary,
body:has(.theme-basilico.theme-basilico-coffee) .coffee-checkout-summary button[class*="bg-primary"] {
  background: #c3a27c !important;
  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  margin-top:20px;
}

body:has(.theme-basilico.theme-basilico-coffee) .coffee-checkout-summary button.bg-primary:hover,
body:has(.theme-basilico.theme-basilico-coffee) .coffee-checkout-summary button[class*="bg-primary"]:hover {
  background: #d4b48d !important;
}

@media (max-width: 991px) {
  body:has(.theme-basilico.theme-basilico-coffee) .coffee-checkout-grid {
    margin-top: -12px;
  }

  body:has(.theme-basilico.theme-basilico-coffee) .coffee-checkout-panel {
    padding: 22px !important;
    border-radius: 24px !important;
  }

  body:has(.theme-basilico.theme-basilico-coffee) .coffee-checkout-panel h2 {
    font-size: 1.9rem !important;
  }
}

@media (min-width: 992px) {
  .theme-basilico-header-coffee .header-left,
  .theme-basilico-header-coffee .header-right {
    flex: 0 0 180px;
    display: flex;
    align-items: center;
  }

  .theme-basilico-header-coffee .header-right {
    justify-content: flex-end;
  }

  .theme-basilico-header-coffee .main-nav.left,
  .theme-basilico-header-coffee .main-nav.right {
    flex: 1 1 0;
    padding-left: 0;
  }

  .theme-basilico-header-coffee .main-nav.left {
    justify-content: flex-end;
    padding-right: 0px;
  }

  .theme-basilico-header-coffee .main-nav.right {
    justify-content: flex-start;
    padding-left: 204px;
  }

  .theme-basilico-header-coffee #site-logo {
    left: 50%;
    transform: translate(-50%, -84px);
  }
}

.theme-basilico-page[data-page-theme-variant='coffee'] .page-title-home .swiper-container-fade.swiper-initialized .swiper-slide,
.theme-basilico-page[data-page-theme-variant='coffee'] .page-title-home .swiper.swiper-fade.swiper-initialized .swiper-slide {
  opacity: 0 !important;
  visibility: hidden;
}

.theme-basilico-page[data-page-theme-variant='coffee'] .page-title-home .swiper-container-fade.swiper-initialized .swiper-slide.swiper-slide-active,
.theme-basilico-page[data-page-theme-variant='coffee'] .page-title-home .swiper-container-fade.swiper-initialized .swiper-slide.swiper-slide-duplicate-active,
.theme-basilico-page[data-page-theme-variant='coffee'] .page-title-home .swiper.swiper-fade.swiper-initialized .swiper-slide.swiper-slide-active,
.theme-basilico-page[data-page-theme-variant='coffee'] .page-title-home .swiper.swiper-fade.swiper-initialized .swiper-slide.swiper-slide-duplicate-active {
  opacity: 1 !important;
  visibility: visible;
}

/* ─── Basilico Coffee — Admin color bridge ───────────────────────────────── */
/* Maps admin-configured --primary / --secondary onto imported CSS selectors  */
/* that use hardcoded #C3A27C (primary gold) and #2D2723 (dark brown).        */
/* --header-background / --header-link are set by buildThemeCSS from          */
/* branding.headerColors / headerLinkColors in the seed.                      */

body:has(.theme-basilico.theme-basilico-coffee) {
  --bc-primary: hsl(var(--primary));
  --bc-secondary: hsl(var(--secondary));
}

/* Accent text (links, labels, active states) */
body:has(.theme-basilico.theme-basilico-coffee) .tf-color,
body:has(.theme-basilico.theme-basilico-coffee) a.tf-color,
body:has(.theme-basilico.theme-basilico-coffee) .widget-menu-tab .item-title.active,
body:has(.theme-basilico.theme-basilico-coffee) .flat-tabs .menu-tab li.active a,
body:has(.theme-basilico.theme-basilico-coffee) .heading-section .main,
body:has(.theme-basilico.theme-basilico-coffee) .sub.sub-before {
  color: var(--bc-primary) !important;
}

/* Primary buttons */
body:has(.theme-basilico.theme-basilico-coffee) .tf-btn,
body:has(.theme-basilico.theme-basilico-coffee) .tf-btn-primary,
body:has(.theme-basilico.theme-basilico-coffee) button.tf-btn,
body:has(.theme-basilico.theme-basilico-coffee) .btn-primary {
  background-color: var(--bc-primary) !important;
  border-color: var(--bc-primary) !important;
}

/* Dark/secondary buttons */
body:has(.theme-basilico.theme-basilico-coffee) .tf-btn-secondary,
body:has(.theme-basilico.theme-basilico-coffee) .btn-secondary,
body:has(.theme-basilico.theme-basilico-coffee) .nav-btn-dark {
  background-color: var(--bc-secondary) !important;
  border-color: var(--bc-secondary) !important;
}

/* Border accents */
body:has(.theme-basilico.theme-basilico-coffee) .tf-btn:focus,
body:has(.theme-basilico.theme-basilico-coffee) input:focus,
body:has(.theme-basilico.theme-basilico-coffee) .accent-border {
  border-color: var(--bc-primary) !important;
}

/* Icon/SVG fills */
body:has(.theme-basilico.theme-basilico-coffee) svg.fill-primary {
  fill: var(--bc-primary) !important;
}

/* ─── Basilico Coffee — Header color bridge ─────────────────────────────── */
/* --header-background and --header-link come from branding.headerColors /   */
/* headerLinkColors (set in the seed). Falls back to --bc-secondary /        */
/* --bc-primary when those vars are not set.                                  */

/* Nav pill container background */
body:has(.theme-basilico.theme-basilico-coffee) .header-inner-wrap {
  background-color: var(--header-background, var(--bc-secondary)) !important;
}

/* Mobile nav drawer */
body:has(.theme-basilico.theme-basilico-coffee) .mobile-nav-wrap .inner-mobile-nav {
  background-color: var(--header-background, var(--bc-secondary)) !important;
}

/* Header top-bar icon circles */
body:has(.theme-basilico.theme-basilico-coffee) .wg-information .icon {
  background-color: var(--bc-primary) !important;
}

/* Nav link hover and active accent */
body:has(.theme-basilico.theme-basilico-coffee) .menu-primary-menu > li > a:hover,
body:has(.theme-basilico.theme-basilico-coffee) .menu-primary-menu .sub-menu li.current-item a,
body:has(.theme-basilico.theme-basilico-coffee) .menu-primary-menu .sub-menu li a:hover {
  color: var(--header-link, var(--bc-primary)) !important;
}

/* Coffee-specific CTA button styles (button-style-1, button-style-2) */
body:has(.theme-basilico.theme-basilico-coffee) .button-style-1,
body:has(.theme-basilico.theme-basilico-coffee) .button-style-2 {
  background-color: var(--bc-primary) !important;
  border-color: var(--bc-primary) !important;
}

body:has(.theme-basilico.theme-basilico-coffee) .button-style-1:hover {
  background-color: var(--bc-secondary) !important;
  border-color: var(--bc-secondary) !important;
}

/* Secondary/dark reply button */
body:has(.theme-basilico.theme-basilico-coffee) .button-reply {
  background-color: var(--bc-secondary) !important;
}

body:has(.theme-basilico.theme-basilico-coffee) .button-reply:hover {
  background-color: var(--bc-primary) !important;
}

/* ─── Basilico Coffee — Dark mode overrides ─────────────────────────────── */
/* Covers the imported CSS's hardcoded light backgrounds and text colors.     */

html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) {
  background-color: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
}

html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .section-bg,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) section,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .widget,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .flat-toggle {
  
  color: hsl(var(--foreground)) !important;
}

html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) h1,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) h2,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) h3,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) h4,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) p,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) li {
  color: hsl(var(--foreground)) !important;
}



html[data-theme='dark'] html[data-theme] body:has(.theme-basilico.theme-basilico-coffee) .footer-bottom,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) footer {
  background-color: hsl(var(--card)) !important;
  color: hsl(var(--foreground)) !important;
}

html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) input,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) textarea,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) select {
  background-color: hsl(var(--input)) !important;
  color: hsl(var(--foreground)) !important;
  border-color: hsl(var(--border)) !important;
}

/* ── Dark mode toggle button ────────────────────────────────────────── */
.theme-basilico-darkmode-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #ffffff;
  padding: 4px 8px;
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
}
.theme-basilico-darkmode-toggle:hover {
  color: var(--bc-primary, #C3A27C);
}
/* When header is on light/scrolled background, make toggle dark */
.header.is-fixed .theme-basilico-darkmode-toggle,
.header-2 .theme-basilico-darkmode-toggle {
  color: #2D2723;
}
html[data-theme='dark'] .theme-basilico-darkmode-toggle {
  color: #f0c987 !important;
}

/* ── Extended dark mode overrides ───────────────────────────────────── */

/* Page body background */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) {
  background-color: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
}

/* Sections with light backgrounds */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) section {
  
  color: hsl(var(--foreground)) !important;
}
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .bg-1,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .bg-2 {
  background-color: hsl(var(--card)) !important;
}

/* Typography */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .heading-section .main,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) h1,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) h2,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) h3,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) h4,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) h5,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) h6 {
  color: hsl(var(--foreground)) !important;
}
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) p,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .text,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .description,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) span:not(.sub):not(.icon):not(.swiper-pagination-bullet),
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) li,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) label,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) td,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) th,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .meta span{
  color: hsl(var(--muted-foreground)) !important;
}

/* Paragraphs with wow/fadeIn animations — force white text */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) p.wow,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) p[style*="visibility"],
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .col p,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .content p,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .themesflat-container p {
  color: #c8c8c8 !important;
}

/* Nav menu items must stay white/visible */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .header-inner .menu-primary-menu > li > a,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .header .menu-primary-menu > li > a,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) nav a,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .header-inner-wrap a {
  color: #ffffff !important;
}

/* Cart panel dark mode */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .cart-sheet-content,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) [class*="cart-sheet"] {
  background-color: hsl(var(--card)) !important;
  color: hsl(var(--foreground)) !important;
}
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .cart-sheet-title,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .cart-sheet-item-title,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .cart-sheet-item-price,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .cart-sheet-total,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .cart-sheet-total-price {
  color: hsl(var(--foreground)) !important;
}
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .cart-sheet-checkout-button {
  background-color: var(--bc-primary, #C3A27C) !important;
  color: #ffffff !important;
}

/* wg-menu image centering — circular image centered in the slide */
body:has(.theme-basilico.theme-basilico-coffee) .wg-menu-item .image {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}
body:has(.theme-basilico.theme-basilico-coffee) .wg-menu-item .image img {
  width: 270px;
  height: 270px;
  max-width: 100%;
  object-fit: cover;
  border-radius: 50%;
}
body:has(.theme-basilico.theme-basilico-coffee) .wg-menu-item .title,
body:has(.theme-basilico.theme-basilico-coffee) .wg-menu-item .title a,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-menu-item .title,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-menu-item .title a {
  color: #ffffff !important;
}
body:has(.theme-basilico.theme-basilico-coffee) .wg-menu-item .text,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-menu-item .text {
  color: #C3A27C !important;
}

/* Cards and boxes */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-blog .content,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-menu .content,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .box-item,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-testimonial {
  background-color: hsl(var(--card)) !important;
  color: hsl(var(--foreground)) !important;
}

/* Mobile nav */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .mobile-nav-wrap .inner-mobile-nav,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .mobile-nav-wrap {
  background-color: hsl(var(--card)) !important;
}

/* Banner pages */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .banner-page {
  color: #ffffff !important;
}

/* Dividers and borders */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .divider,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) hr {
  border-color: hsl(var(--border)) !important;
}

/* Accent colors stay visible */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .sub,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .tf-btn,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .button-default {
  color: var(--bc-primary, #C3A27C) !important;
}

/* ── Basilico-specific component dark mode ───────────────────────────── */

/* Content boxes and overlays with white/cream backgrounds */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .choose-us .content,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-choose-us .content,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-about .content,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-news .content,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-counter .content,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-testimonial .content,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-update .content {
  background-color: hsl(var(--card)) !important;
  color: hsl(var(--foreground)) !important;
}

/* White background containers */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .bg-white,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) [style*="background-color: #fff"],
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) [style*="background-color: white"],
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) [style*="background: #fff"],
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) [style*="background: white"] {
  background-color: hsl(var(--card)) !important;
}

/* Themesflat container and row backgrounds */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .themesflat-container {
  color: hsl(var(--foreground)) !important;
}

/* Menu item cards */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-menu .box-item,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-menu .menu-item {
  background-color: hsl(var(--card)) !important;
}

/* Testimonial and team cards */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-testimonial,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-team .team-member {
  background-color: hsl(var(--card)) !important;
}

/* Blog cards */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-blog .content {
  background-color: hsl(var(--card)) !important;
}
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-blog .title a {
  color: hsl(var(--foreground)) !important;
}

/* Update/Newsletter section */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-update {
  background-color: hsl(var(--card)) !important;
}

/* Reservation and contact forms */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-reservation,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-contact {
  background-color: hsl(var(--card)) !important;
}

/* Tab menu backgrounds */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .flat-tabs .menu-tab li a,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .widget-menu-tab .item-title {
  color: hsl(var(--foreground)) !important;
}

/* Private event section */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .private-event .content {
  background-color: hsl(var(--card)) !important;
}

/* Portfolio items */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-portfolio .content,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .portfolio-item .content {
  background-color: hsl(var(--card)) !important;
}

/* Offer section */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-offer .content {
  background-color: hsl(var(--card)) !important;
}

/* Counter/stats boxes */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-counter {
  color: hsl(var(--foreground)) !important;
}
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-counter .number {
  color: var(--bc-primary, #C3A27C) !important;
}

/* Header top bar */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .header-top {
  
}

/* Sticky header in dark mode */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) header.header.is-fixed {
  background-color: hsl(var(--card)) !important;
}

/* Page title banners — keep their background images, darken overlay */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .banner-page::after {
  background-color: rgba(0, 0, 0, 0.6) !important;
}

/* Footer */
html[data-theme='dark'] html[data-theme] body:has(.theme-basilico.theme-basilico-coffee) .footer-top {
  background-color: hsl(var(--card)) !important;
}

/* Discovery menu background */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-discovery-menu {
  background-color: hsl(var(--background)) !important;
}

/* Partners section */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-partner {
  background-color: hsl(var(--background)) !important;
}
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-partner img {
  filter: invert(1) brightness(0.8);
}

/* Dark mode toggle icon color */
html[data-theme='dark'] .theme-basilico-darkmode-toggle {
  color: #f0c987 !important;
}

/* ── Hour Opening card — preserve brown card + light typography in both modes ── */
/* The card has its own dark brown background (#2D2723) baked in; broad dark-mode
   overrides for `li` / `div` / `span` above were turning its text near-black on
   brown. Force the original coffee palette for this card only. */
body:has(.theme-basilico.theme-basilico-coffee) .wg-about .hour-opening,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-about .hour-opening {
  background-color: #2D2723 !important;
}
body:has(.theme-basilico.theme-basilico-coffee) .wg-about .hour-opening .title,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-about .hour-opening .title {
  color: #C3A27C !important;
}
body:has(.theme-basilico.theme-basilico-coffee) .wg-about .hour-opening ul li,
body:has(.theme-basilico.theme-basilico-coffee) .wg-about .hour-opening ul li .day,
body:has(.theme-basilico.theme-basilico-coffee) .wg-about .hour-opening ul li .time,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-about .hour-opening ul li,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-about .hour-opening ul li .day,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-about .hour-opening ul li .time {
  color: #FFFFFF !important;
}
body:has(.theme-basilico.theme-basilico-coffee) .wg-about .hour-opening ul li .line,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-about .hour-opening ul li .line {
  border-bottom-color: #57524f !important;
}

/* ── Dark mode toggle — circular button with guaranteed visible icon ──
   The button sits next to the LanguageSelector (which has a brown circle
   background). We normalize the toggle to a matching 40px circle with a
   brown background + white SVG icon in BOTH modes so it's always visible
   regardless of header state. ── */
.theme-basilico-darkmode-toggle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background-color: #2D2723 !important;
  color: #FFFFFF !important;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}
.theme-basilico-darkmode-toggle svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  color: inherit !important;
  stroke: currentColor;
  fill: currentColor;
}
.theme-basilico-darkmode-toggle:hover {
  background-color: #C3A27C !important;
  color: #2D2723 !important;
}
html[data-theme='dark'] .theme-basilico-darkmode-toggle {
  width: 50px !important;
  height: 50px !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: 0 !important;
  color: #FFFFFF !important;
}
html[data-theme='dark'] .theme-basilico-darkmode-toggle svg {
  width: 22px !important;
  height: 22px !important;
}
html[data-theme='dark'] .theme-basilico-darkmode-toggle:hover {
  background-color: rgba(195, 162, 124, 0.25) !important;
  color: #FFFFFF !important;
}

/* ── Language selector button — match cart button style in dark mode ── */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .theme-basilico-header-actions .relative.inline-flex button {
  width: 50px !important;
  height: 50px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: 0 !important;
  color: #FFFFFF !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .theme-basilico-header-actions .relative.inline-flex button:hover {
  background-color: rgba(195, 162, 124, 0.25) !important;
}

/* Force the Cart (OpenCartButton) to the same size so the three header
   buttons render identically in dark mode. */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .theme-basilico-header-cart button,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .theme-basilico-header-actions button[aria-label='Open shopping cart'] {
  width: 50px !important;
  height: 50px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: 0 !important;
  color: #FFFFFF !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .theme-basilico-header-cart button svg,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .theme-basilico-header-actions button[aria-label='Open shopping cart'] svg {
  width: 22px !important;
  height: 22px !important;
}

/* ── Special menu item (trending / new product cards) — dark mode only.
   Light mode keeps the original stock card styling. ── */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .special-menu-item {
  background-color: #2D2723 !important;
}
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .special-menu-item .name a,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .special-menu-item .content p,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .special-menu-item .content span,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .special-menu-item .content {
  color: #FFFFFF !important;
}
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .special-menu-item .price,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .special-menu-item::before {
  color: #C3A27C !important;
}
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .special-menu-item .line {
  border-bottom-color: #57524f !important;
}

/* ── Customer testimonial section — both modes.
   Stock shortcodes.css uses a relative background-image URL that doesn't
   always resolve; force the absolute path + dark overlay + white text. ── */
body:has(.theme-basilico.theme-basilico-coffee) .customer-testimonial,
body:has(.theme-basilico.theme-basilico-coffee) .customer-testimonial.style-1 {
  background-color: #1e1a16 !important;
  background-image: url('/assets/themes/basilico-coffee/images/box-item/testimonial.jpg');
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}
body:has(.theme-basilico.theme-basilico-coffee) .customer-testimonial::before {
  background-color: rgba(30, 26, 22, 0.55) !important;
}
body:has(.theme-basilico.theme-basilico-coffee) .customer-testimonial .heading-section .main,
body:has(.theme-basilico.theme-basilico-coffee) .customer-testimonial .customer-testimonial-item p,
body:has(.theme-basilico.theme-basilico-coffee) .customer-testimonial .customer-testimonial-item .name,
body:has(.theme-basilico.theme-basilico-coffee) .customer-testimonial .customer-testimonial-item .name a {
  color: #FFFFFF !important;
}

/* ── Footer — IDENTICAL in light and dark mode.
   Hardcode every footer color in BOTH modes so neither the broad
   dark-mode overrides nor the site default link color can bleed in. ── */
html[data-theme] body:has(.theme-basilico.theme-basilico-coffee) .footer,
body:has(.theme-basilico.theme-basilico-coffee) footer.footer,
html[data-theme] body:has(.theme-basilico.theme-basilico-coffee) .footer-bottom {
  background-color: #2D2723 !important;
}
/* Column titles + any headings — light brown gold */
html[data-theme] body:has(.theme-basilico.theme-basilico-coffee) .footer .title-wg,
html[data-theme] body:has(.theme-basilico.theme-basilico-coffee) .footer h1,
html[data-theme] body:has(.theme-basilico.theme-basilico-coffee) .footer h2,
html[data-theme] body:has(.theme-basilico.theme-basilico-coffee) .footer h3,
html[data-theme] body:has(.theme-basilico.theme-basilico-coffee) .footer h4,
html[data-theme] body:has(.theme-basilico.theme-basilico-coffee) .footer h5,
html[data-theme] body:has(.theme-basilico.theme-basilico-coffee) .footer h6 {
  color: #C3A27C !important;
}
/* Body text + nav links — grey */
html[data-theme] body:has(.theme-basilico.theme-basilico-coffee) .footer .text,
html[data-theme] body:has(.theme-basilico.theme-basilico-coffee) .footer p,
html[data-theme] body:has(.theme-basilico.theme-basilico-coffee) .footer li,
html[data-theme] body:has(.theme-basilico.theme-basilico-coffee) .footer a,
html[data-theme] body:has(.theme-basilico.theme-basilico-coffee) .footer li a,
html[data-theme] body:has(.theme-basilico.theme-basilico-coffee) .footer ul li a,
html[data-theme] body:has(.theme-basilico.theme-basilico-coffee) .footer .newletters ul li a,
html[data-theme] body:has(.theme-basilico.theme-basilico-coffee) .footer-bottom,
html[data-theme] body:has(.theme-basilico.theme-basilico-coffee) .footer-bottom p {
  color: #dedede !important;
}
/* Inline label spans inside `.text` (LOCATION:, BOOK A TABLE:) — gold */
html[data-theme] body:has(.theme-basilico.theme-basilico-coffee) .footer .text span {
  color: #C3A27C !important;
}
/* Hover state — gold */
html[data-theme] body:has(.theme-basilico.theme-basilico-coffee) .footer a:hover,
html[data-theme] body:has(.theme-basilico.theme-basilico-coffee) .footer li a:hover,
html[data-theme] body:has(.theme-basilico.theme-basilico-coffee) .footer .newletters ul li a:hover {
  color: #C3A27C !important;
}
/* Social / decorative icons — white */
html[data-theme] body:has(.theme-basilico.theme-basilico-coffee) .footer .widget-social a,
html[data-theme] body:has(.theme-basilico.theme-basilico-coffee) .footer i {
  color: #FFFFFF !important;
}
/* Underline accent under `.title-wg` */
html[data-theme] body:has(.theme-basilico.theme-basilico-coffee) .footer .title-wg::after {
  background-color: #C3A27C !important;
}
/* Newletters column nav link typography — match the rest of the footer */
html[data-theme] body:has(.theme-basilico.theme-basilico-coffee) .footer .newletters ul li {
  margin-bottom: 10px;
}
html[data-theme] body:has(.theme-basilico.theme-basilico-coffee) .footer .newletters ul li a {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 25px;
  letter-spacing: 0.3px;
}

/* ── Contact Us form + info panels — dark mode only ── */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-contact-us .coffee-contact-panel,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-contact-us .coffee-contact-form-panel,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-contact-us .coffee-contact-info-panel {
  background-color: #1e1a16 !important;
  color: #FFFFFF !important;
}
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-contact-us .heading-section .main,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-contact-us .coffee-contact-description,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-contact-us .coffee-contact-info-label,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-contact-us .coffee-contact-info-block,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-contact-us .coffee-contact-info-block p,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-contact-us .coffee-contact-info-block a {
  color: #FFFFFF !important;
}
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-contact-us .heading-section .sub,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-contact-us .coffee-contact-info-label {
  color: #C3A27C !important;
}
/* Dividers between info blocks */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-contact-us .coffee-contact-info-block {
  border-color: rgba(195, 162, 124, 0.25) !important;
}
/* Social icon circles */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-contact-us .widget-social a,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-contact-us .coffee-contact-info-panel .widget-social a {
  border-color: #C3A27C !important;
  color: #FFFFFF !important;
}

/* ── Coffee Time "How to find us" panel — dark mode only.
   Light mode keeps the cream/light background; dark mode gets a dark card
   and light typography. ── */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-coffee-time,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-coffee-time .center {
  background-color: #1e1a16 !important;
  color: #FFFFFF !important;
}
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-coffee-time .center .text,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-coffee-time .center p {
  color: #FFFFFF !important;
}
/* Title and phone number keep the brand gold (like the "brown" accent in light mode) */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-coffee-time .center .heading-section .main,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-coffee-time .center .heading-section .sub,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-coffee-time .center .number-phone,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-coffee-time .center .number-phone a {
  color: #C3A27C !important;
}

/* ── News / blog cards (wg-news → wg-blog) — dark mode only ── */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-news .wg-blog .content .title,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-news .wg-blog .content .title a,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-news .wg-blog .content .text,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-news .wg-blog .content .meta span,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-news .wg-blog .content .bottom a,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-news .wg-blog .content .bottom .button-default,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-news .wg-blog .content .bottom i {
  color: #FFFFFF !important;
}

/* ── Our Product grid — dark mode only ── */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .our-product .product-item .content .name,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .our-product .product-item .content .name a,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .our-product .product-item .content .price,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .our-product .product-item .content .price span {
  color: #FFFFFF !important;
}
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .our-product .product-item .content .price span {
  color: #C3A27C !important;
  opacity: 0.6;
}

/* ── Accordion / flat-toggle (Private event, FAQ) — dark mode only ── */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .flat-accordion .flat-toggle .toggle-title,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .flat-accordion .flat-toggle .toggle-content,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .flat-accordion .flat-toggle .toggle-content p {
  color: #FFFFFF !important;
}
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .flat-accordion .flat-toggle .toggle-title.active {
  color: #C3A27C !important;
}

/* ── Counter stats — dark mode only (numbers + label).
   Specificity has to beat the broad `span:not(.sub):not(.icon):...` rule above,
   so we nest all the real ancestor classes and target `span.number` directly. ── */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-counter .counter-item .counter .number-counter,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-counter .counter-item .counter .number-counter span.number,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-counter .counter-item.style-1 .text,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .wg-counter .counter-item .counter {
  color: #FFFFFF !important;
}

/* ── Choose-us feature checklist — dark mode only ── */
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .choose-us ul li {
  color: #FFFFFF !important;
}
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .choose-us ul li i {
  color: #C3A27C !important;
}

/* ── Hero — all typography stays white in both modes (background is a dark photo) ── */
body:has(.theme-basilico.theme-basilico-coffee) .page-title-home .text,
body:has(.theme-basilico.theme-basilico-coffee) .page-title-home .sub-title,
body:has(.theme-basilico.theme-basilico-coffee) .page-title-home .title,
body:has(.theme-basilico.theme-basilico-coffee) .page-title-home h1,
body:has(.theme-basilico.theme-basilico-coffee) .page-title-home h2,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .page-title-home .text,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .page-title-home .sub-title,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .page-title-home .title,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .page-title-home h1,
html[data-theme='dark'] body:has(.theme-basilico.theme-basilico-coffee) .page-title-home h2 {
  color: #ffffff !important;
}


/* ── Checkout — login / create-account action buttons ─────────────── */
.checkout-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  height: 3rem;
  padding: 2rem 2rem;
  border-radius: 9999px;
  background: var(--ad-brand-primary, #C3A27C);
  color: #fff !important;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.checkout-action-btn:hover {
  background: #b69267 !important;
  color: #fff;
  text-decoration: none;
}

/* ── Checkout — email input spacing ────────────────────────────────── */
.coffee-checkout-panel [data-slot="input"]#email {
  margin-bottom: 1rem;
}


/* ── Latest news — two-column layout (urgent message + news card) ──── */
.basilico-latest-news-row {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
}
.basilico-latest-news-urgent {
  flex: 1 1 0;
  min-width: 0;
  padding: 2rem 0;
}
.basilico-latest-news-urgent__title {
  font-size: 2.25rem;
  font-weight: 700;
  margin: 0 0 1rem;
  color: var(--ad-brand-dark, #2D2723);
  line-height: 1.2;
}
.basilico-latest-news-urgent .prose,
.basilico-latest-news-urgent p,
.basilico-latest-news-urgent h2,
.basilico-latest-news-urgent h3,
.basilico-latest-news-urgent li,
.basilico-latest-news-urgent strong,
.basilico-latest-news-urgent em,
.basilico-latest-news-urgent a {
  color: var(--ad-brand-dark, #2D2723) !important;
  max-width: none !important;
}
.basilico-latest-news-urgent .prose {
  font-size: 1.15rem !important;
  line-height: 1.6 !important;
}
.basilico-latest-news-urgent .prose h2 {
  font-size: 2rem !important;
  font-weight: 700 !important;
  margin: 0 0 0.75rem !important;
}
.basilico-latest-news-urgent .prose h3 {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  margin: 0 0 0.5rem !important;
}
.basilico-latest-news-row .basilico-latest-news-card {
  flex: 0 0 380px;
  margin-left: 0;
}

.basilico-latest-news-urgent{
  margin-top:200px;
}

@media (max-width: 991px) {
  .basilico-latest-news-row {
    flex-direction: column;
  }
  .basilico-latest-news-row .basilico-latest-news-card {
    flex: none;
    width: 100%;
    max-width: 100%;
  }
}

/* ── Checkout — coffee-themed summary card with white text ──────────── */
.coffee-checkout-summary,
.coffee-checkout-summary .text-foreground,
.coffee-checkout-summary .text-muted-foreground,
.coffee-checkout-summary p,
.coffee-checkout-summary h2,
.coffee-checkout-summary span {
  color: #fff !important;
}
.coffee-checkout-summary .text-primary\/70 {
  color: rgba(255, 255, 255, 0.7) !important;
}
.coffee-checkout-summary .border-border,
.coffee-checkout-summary .border-dashed {
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* ── Checkout — visible input borders ──────────────────────────────── */
.coffee-checkout-panel input[type="email"],
.coffee-checkout-panel input[type="text"],
.coffee-checkout-panel input[type="tel"],
.coffee-checkout-panel input[type="date"],
.coffee-checkout-panel input[type="time"],
.coffee-checkout-panel input[type="number"],
.coffee-checkout-panel textarea,
.coffee-checkout-panel select,
.coffee-checkout-panel [data-slot="input"] {
  border: 1px solid var(--ad-brand-primary, #C3A27C) !important;
}
.coffee-checkout-panel input:focus,
.coffee-checkout-panel textarea:focus,
.coffee-checkout-panel select:focus,
.coffee-checkout-panel [data-slot="input"]:focus {
  border-color: var(--ad-brand-dark, #2D2723) !important;
}

/* ── BasilicoClassicGallery — tabs ──────────────────────────────────── */
.gallery-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 48px;
}
.gallery-tab {
  background: transparent;
  color: var(--ad-brand-dark, #2D2723);
  border: 1px solid rgba(45, 39, 35, 0.25);
  padding: 12px 26px;
  font-size: 13px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}
.gallery-tab:hover {
  border-color: var(--ad-brand-primary, #C3A27C);
  color: var(--ad-brand-primary, #C3A27C);
  background: var(--ad-brand-cream, #b8a58f);
  border: 1px solid rgba(45, 39, 35, 0.25);
}
.gallery-tab.is-active {
  background: var(--ad-brand-primary, #C3A27C);
  color: #fff;
  border-color: var(--ad-brand-primary, #C3A27C);
  border: 1px solid rgba(45, 39, 35, 0.25);
}

/* ── BasilicoClassicGallery — ported from basilicohtml demo ─────────── */
section.gallery {
  padding: 30px 0;
}
.gallery .gallery-main {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -8px;
}
.gallery-box {
  width: 25%;
  padding: 0 8px;
  margin-bottom: 16px;
  position: relative;
}
.gallery-box .image {
  height: 558px;
  overflow: hidden;
}
.gallery-box .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.gallery-box:hover .image img {
  transform: scale(1.05);
}
.gallery-box .content {
  background: rgba(45, 39, 35, 0.3);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  position: absolute;
  top: 40px;
  left: 33px;
  right: 45px;
  bottom: 38px;
  padding: 60px 30px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.5);
  transition: all 0.3s ease;
}
.gallery-box .content .name {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  margin-bottom: 6px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.6);
}
.gallery-box .content .cate {
  color: var(--ad-brand-primary, #C3A27C);
  margin-bottom: 18px;
  letter-spacing: 1px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.gallery-box .content .line {
  width: 1px;
  height: 31px;
  background: var(--ad-brand-primary, #C3A27C);
  margin: 0 auto 18px;
}
.gallery-box .content .text {
  color: #fff;
  margin-bottom: 28px;
  letter-spacing: 0.3px;
  font-size: 14px;
  line-height: 1.5;
}
.gallery-box .content .action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ad-brand-primary, #C3A27C);
  color: var(--ad-brand-primary, #C3A27C);
  text-decoration: none;
  transition: all 0.3s ease;
}
.gallery-box .content .action:hover {
  background: var(--ad-brand-primary, #C3A27C);
  color: var(--ad-brand-dark, #2D2723);
}
.gallery-box:hover .content {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
@media (max-width: 991px) {
  .gallery-box {
    width: 50%;
  }
  .gallery-box .image {
    height: 420px;
  }
}
@media (max-width: 575px) {
  .gallery-box {
    width: 100%;
  }
  .gallery-box .image {
    height: 360px;
  }
}

.gallery-box .image.gallery-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.gallery-box .content {
  cursor: zoom-in;
}

/* ── Gallery lightbox modal ─────────────────────────────────────────── */
.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 60px;
  animation: gallery-lightbox-fade 0.2s ease-out;
}
@keyframes gallery-lightbox-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.gallery-lightbox__figure {
  margin: 0;
  max-width: min(1200px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.gallery-lightbox__image {
  max-width: 100%;
  max-height: calc(100vh - 180px);
  object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.gallery-lightbox__caption {
  color: #fff;
  text-align: center;
  max-width: 720px;
}
.gallery-lightbox__caption h5 {
  color: var(--ad-brand-primary, #C3A27C);
  text-transform: uppercase;
  letter-spacing: 1.3px;
  margin: 0 0 6px;
  font-size: 18px;
}
.gallery-lightbox__caption .cate {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  letter-spacing: 0.6px;
  margin: 0 0 8px;
}
.gallery-lightbox__caption .text {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
.gallery-lightbox__close,
.gallery-lightbox__nav {
  position: absolute;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  font-size: 28px;
  line-height: 1;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}
.gallery-lightbox__close:hover,
.gallery-lightbox__nav:hover {
  background: var(--ad-brand-primary, #C3A27C);
  color: var(--ad-brand-dark, #2D2723);
  border-color: var(--ad-brand-primary, #C3A27C);
}
.gallery-lightbox__close {
  top: 20px;
  right: 20px;
  font-size: 32px;
}
.gallery-lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  font-size: 36px;
  line-height: 1;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}
.gallery-lightbox__nav > span {
  display: block;
  line-height: 1;
  transform: translateY(-2px);
}
.gallery-lightbox__nav--prev { left: 20px; }
.gallery-lightbox__nav--next { right: 20px; }
@media (max-width: 575px) {
  .gallery-lightbox { padding: 20px; }
  .gallery-lightbox__close { top: 10px; right: 10px; }
  .gallery-lightbox__nav { width: 40px; height: 40px; font-size: 28px; }
  .gallery-lightbox__nav--prev { left: 8px; }
  .gallery-lightbox__nav--next { right: 8px; }
}

/* ── BasilicoCoffeeServices — equal-height cards with bottom CTA ─────── */
.wg-service .service-item {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.wg-service .service-item .content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.wg-service .service-item .content p {
  flex: 1 1 auto;
}
.wg-service .service-item .content .button-style-1 {
  align-self: center;
  margin-top: -2px;
}

.more-infor{
  display:none;
}