:root {
  /* Default: Font size tuning */
  --mennoo-base-font-scale: 1.00;

  /* Default: Animation tuning */
  --ease-smooth: cubic-bezier(.22,.61,.36,1);

  /* Default: Glass tuning */
    --glass-bg: rgba(255, 255, 255, 0.18);
    --glass-border: rgba(255, 255, 255, 0.35);
    --glass-blur: 18px;
    --glass-saturate: 140%;
}


/* =========================================================
   DESKTOP WIDTH LIMITER (centered "mobile-like" layout)
   ========================================================= */

@media (min-width: 992px) {

	/* Keep a soft background around the centered content */
	body {
		background-color: #f4f4f4;
	}

	/* Main centered shell */
	.mennoo-shell {
		max-width: 50%;                    /* Change to 480 / 560 if you want */
		margin: auto;                      /* Centers the layout */
		min-height: calc(100vh - 48px);    /* Keeps it tall even with little content */
		overflow: visible;                  /* Makes rounded corners look clean */
	}
}

/* =========================================================
   1. GLOBAL BASE STYLES & TYPOGRAPHY
   ========================================================= */
/* General body styles */
html {
    font-size: calc(100% * var(--mennoo-base-font-scale, 1) * var(--business-font-scale, 1));
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    /* font-family: 'Inter', sans-serif; */
    /* font-family: 'Google Sans', sans-serif; */
    font-family: 'TikTok Sans', sans-serif;
    font-size: 1rem;
    line-height: 1.5;

    background-color: #ffffff;
    margin: 0;
    padding: 0;
}

/* h1, h2, h3, h4, h5, h6 {
  font-family: 'Google Sans', sans-serif;
} */

ul {
    line-height: 1rem;
}

.emoji {
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", "Twemoji Mozilla", "Android Emoji", sans-serif;
}

/* Colors */
.pink {
  color: #EF2469;
}
.black {
  color: #000000;
}
.white {
  color: #FFFFFF;
}
.grey {
  color: #CCCCCC;
}
.anthracite {
  color: #343a40;
}


/* =========================================================
   MENNOO BUSINESS BACKGROUND SYSTEM
   ========================================================= */

:root {
    --business-bg-color: transparent;
    --business-bg-base-color: transparent;
    --theme-bg-color: transparent;
}

/* Solid color background */
body.has-bg-color {
    background-color: var(--business-bg-color);
}

/* Base color behind media backgrounds */
body.has-bg-logo,
body.has-bg-image,
body.has-bg-pattern {
    position: relative;
    isolation: isolate;

    background-color: var(--business-bg-base-color) !important;
}

/*
 * Fixed background media layer.
 * A non-negative z-index keeps the layer visible above
 * the body background.
 */
.mennoo-bg-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;

    transform: scale(1.08);
    transform-origin: center center;

    will-change: transform, filter, opacity;
    backface-visibility: hidden;
}

/*
 * Optional background overlay.
 * It stays above the media layer and below the MENNOO content.
 */
.mennoo-bg-overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/*
 * Keep the normal MENNOO content above the background layers.
 */
.mennoo-shell {
    position: relative;
    z-index: 2;

    background-color: transparent;
}

/*
 * Temporarily remove the shell stacking context while a Bootstrap
 * modal is open. This allows the modal to stay above its backdrop
 * and keeps all modal controls clickable.
 */
body.modal-open .mennoo-shell {
    z-index: auto;
}

/* =========================================================
   /MENNOO BUSINESS BACKGROUND SYSTEM
   ========================================================= */

/* Enable smooth motion only where it matters */
button,
a,
.card,
.catalog-tile,
.modal-content,
.nav-link,
.badge,
.toast,
.wishlist-toggle-btn,
.category-toggle-btn {
  transition:
    background-color .35s var(--ease-smooth),
    color .35s var(--ease-smooth),
    box-shadow .35s var(--ease-smooth),
    transform .35s var(--ease-smooth),
    opacity .35s ease;
}

/* =========================================================
   GLASS UI CORE (MENNOO GLASS SYSTEM)
   ========================================================= */

.mennoo-glass {
    background: var(--glass-bg);

    backdrop-filter:
        blur(var(--glass-blur))
        saturate(var(--glass-saturate, 140%));

    -webkit-backdrop-filter:
        blur(var(--glass-blur))
        saturate(var(--glass-saturate, 140%));

    border: 1px solid var(--glass-border);
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
}

/* =========================================================
   2. COVER HEADER & LOGO (BUSINESS / CATALOG)
   ========================================================= */
/* Cover header container styles */
.cover-container {
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Transparent overlay for better text readability */
.cover-container .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* 50% opacity */
}
/* Cover content styles */
.cover-content {
    position: relative;
    z-index: 2;
    color: white;
    text-align: center;
}

/* Logo container styles with optional white or black background */
.logo-container {
    border-radius: 0px; /*14px*/
    padding: 4px;
    display: inline-block;
    margin-top: 6px;
    margin-bottom: 15px;
    margin-left: 5px;
}
.logo-container.white-bg {
    background-color: white;
}
.logo-container.black-bg {
    background-color: black;
}

/* Logo image styles */
.logo {
    width: auto; /*130px*/
    height: 110px;
    border-radius: 14px; /*11px*/
    object-fit: cover;
}

/* Media query for larger screens */
@media (min-width: 768px) {
    .cover-content {
        text-align: left;
    }
}


/* =========================================================
   3. BUSINESS PAGE LAYOUT (business.php)
   ========================================================= */
/* ============================
   Business.php
   ============================ */

.catalog-tile {
	position: relative;
	display: block;

	/* 16:9 works ONLY when height is auto */
	aspect-ratio: 16 / 9;
	height: 260px;
	width: 100%;

	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	text-decoration: none;
	color: #fff;
	overflow: hidden;
	border-radius: 0px;
}

.catalog-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	transition: background 0.3s ease;
	z-index: 1;
}

.catalog-tile:hover::before {
	background: rgba(0, 0, 0, 0.6);
}

/* Make the inner container fill the tile and center its content */
.cta__border-container {
	position: absolute;     /* changed from relative */
	inset: 0;               /* fill the .catalog-tile */
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;    /* vertical center */
	justify-content: center;/* horizontal center */
	z-index: 2;
}

/* Center content inside the border as well */
.cta__border {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 90%;
	height: 83%;
	box-sizing: border-box;
	transition: transform 0.4s ease, border-color 0.4s ease;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 1px;
}

.catalog-tile:hover .cta__border {
	transform: scale(1.25);
	border-color: rgba(255, 255, 255, 1);
}

/* Let flexbox do the centering – no absolute/translate */
.cta__text {
	position: relative;     /* changed from absolute */
	top: auto;
	left: auto;
	transform: none;
	text-align: center;
	z-index: 3;
	width: 100%;            /* or 80% if you prefer: 80%; */
}

/* Catalog tile title readability layer */
.catalog-name-glass {
    display: inline-block;
    padding: 0.30rem 0.85rem;
    border-radius: 14px;

    background: rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);

    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    line-height: 1.2;
}
@media (max-width: 576px) {
    .catalog-name-glass {
        padding: 0.25rem 0.70rem;
        border-radius: 12px;
    }
}

/* Catalog tile title */
.catalog-name {
    font-size: 1.5rem;
    font-weight: 500;
    color: #fff;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.7);
    transition: transform 0.3s ease;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    text-align: center;
    line-height: 1.2;
}
.catalog-name button {
    color: #fff !important;

    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;

    flex-shrink: 0;           /* PREVENT ICON FROM MOVING */
}

/* Optional – makes sure any icon inside is aligned nicely */
.catalog-name button > i,
.catalog-name button > svg,
.catalog-name button > span {
    font-size: 1em;
    vertical-align: middle;
    transform: translateY(-1px);
}

.catalog-tile:hover .catalog-name {
	transform: scale(1.08);
}

.catalog-name button {
	color: #fff !important;
}


/* =========================================================
   MENNOO INFO BLOCKS
   Business Info + Catalog Info
   ========================================================= */

/* Limit Business / Catalog Header and Footer width on desktop */
@media (min-width: 992px) {
    .business-header-block,
    .business-footer-block,
    .catalog-header-block,
    .catalog-footer-block {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;

        /* Keep custom media / widgets inside the content shell */
        overflow: hidden;

        position: relative;
        z-index: 2;
    }
}


/* =========================================================
   4. CATALOG PAGE LAYOUT (catalog.php)
   ========================================================= */
/* ============================
   Catalog.php
   ============================ */

/* Limit sponsor block width on desktop */
@media (min-width: 992px) { /* Bootstrap's desktop breakpoint */
  .sponsor-data-block {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ===============================
   Catalog title
   =============================== */
.top-catalog-title {
  position: relative;
  z-index: 1020;
  background: #fff;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.top-catalog-title h1 {
  font-family: system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #212529;
}

/* Keyframes for infinite scrolling */
@keyframes slideAnimation {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* =========================================================
   5. HEADER
   ========================================================= */
/* Header styles */
header {
    background-color: #fff;
    color: #333;
    text-align: center;

    padding-top: 10px;
    /* padding-right: 6px;
    padding-left: 6px; */

}
header .d-flex.align-items-center {
  margin-top: -0.3125rem;
}

header.sticky-top {
  z-index: 100;
}

body.modal-open header.sticky-top {
  z-index: 90;
}

/* =========================================================
   5.1 NAVBAR FOR CATALOGS
   ========================================================= */
.catalog-navbar {
    gap: 6px;
    padding: 0.25rem 0;
}

/* default */
.catalog-navbar .nav-link {
    font-size: 0.9rem;
    font-weight: 500;
    color: #212529;
    background: rgba(255,255,255,0.35);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(37,37,37,0.3);
    border-radius: 20px; /* optional */
    padding: 0.4rem 0.9rem;
    transition: all 0.25s ease;
}
/* hover */
.catalog-navbar .nav-link:hover {
    color: #000;
    background-color: #e9ecef;
}

/* active */
.catalog-navbar .nav-link.active {
    background: rgba(0,0,0,0.85);
    border-color: rgba(0,0,0,0.9);
    color: #fff !important;
}
/* active hover */
.catalog-navbar .nav-link.active:hover {
    background-color: #444444;
    color: #fff !important;
}

/* =========================================================
   5.2 NAVBAR FOR CATEGORIES
   ========================================================= */
/* default */
header .navbar-nav .nav-item .nav-link {
    transition: all 0.6s ease;
    color: #333;
    text-decoration: none;
    border-radius: 14px; /* optional */
    padding: 10px 10px; /* vertical | horizontal */
    margin: 10px;
    font-size: 1.0rem;
    font-weight: bold;
    white-space: nowrap; /* Prevent wrapping of category names */
}
/* hover */
header .navbar-nav .nav-link:hover {
    background-color: #f0f0f0;
}

/* active */
header .navbar-nav .nav-link.active {
    color: #fff !important;
    font-weight: bold !important;
    background-color: #000;
}
/* active hover */
header .navbar-nav .nav-link.active:hover {
    background-color: #444444 !important;
    color: #fff !important;
}

/* =========================================================
   6. INFO / LANGUAGE / DATE & TIME / SEARCH / REVIEW CTA
   ========================================================= */

/* Button base */
.info-modal-container,
.language-container,
.date-time-container,
.review-rate-cta {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border: 1px solid var(--glass-border);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease,
        opacity 0.2s ease;
}
/* Button hover / focus */
.info-modal-container:hover,
.language-container:hover,
.date-time-container:hover,
.review-rate-cta:hover,
.info-modal-container:focus,
.language-container:focus,
.date-time-container:focus,
.review-rate-cta:focus {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
    transform: translateY(-2px);
    opacity: 1;
}
/* Button active / pressed */
.info-modal-container:active,
.language-container:active,
.date-time-container:active,
.review-rate-cta:active {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    transform: translateY(0) scale(0.98);
}

/* Info Modal container */
.info-modal-container {
    border: none !important;
    box-shadow: none !important;
    border-radius: 6px;
    padding-left: 8px;
    padding-right: 8px;
}

/* Language container */
.language-container {
    font-size: 1rem;
    border: none !important;
    box-shadow: none !important;
    font-weight: bold;
    border-radius: 6px;
    padding-left: 8px;
    padding-right: 8px;
}

/* Date & Time container */
.date-time-container {
    font-size: 1rem;
    border: none !important;
    box-shadow: none !important;
    border-radius: 6px;
    padding: 8px;
}

/***** Review CTA *****/
/* Review CTA */
.review-rate-cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    border: 2px solid var(--bs-dark) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
    border-radius: 999px;

    padding: 8px 14px;
    text-decoration: none !important;
    font-weight: bold;
    white-space: nowrap;
    cursor: pointer;

    transform-origin: center;
    animation: reviewShake 3s ease-in-out infinite;
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.review-rate-cta:hover,
.review-rate-cta:focus,
.review-rate-cta:active {
    text-decoration: none !important;
    opacity: 1;

    /* Stop the shake animation while the user interacts with the button */
    animation: none;

    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28) !important;
}

.review-rate-cta span,
.review-rate-cta i,
.review-rate-cta svg,
.review-rate-cta svg path {
    color: var(--bs-dark) !important;
    fill: var(--bs-dark) !important;
    stroke: var(--bs-dark) !important;
}

/* Review CTA shake animation
   - Starts immediately when the page loads
   - Shakes briefly at the beginning of each cycle
   - Remains still until the next 3-second cycle
 */
@keyframes reviewShake {
    0% {
        transform: translateX(0) rotate(0deg);
    }

    2% {
        transform: translateX(-2px) rotate(-1deg);
    }

    4% {
        transform: translateX(2px) rotate(1deg);
    }

    6% {
        transform: translateX(-2px) rotate(-1deg);
    }

    8% {
        transform: translateX(2px) rotate(1deg);
    }

    10% {
        transform: translateX(-1px) rotate(-0.5deg);
    }

    12% {
        transform: translateX(0) rotate(0deg);
    }

    /* Keep the button still until the next animation cycle */
    100% {
        transform: translateX(0) rotate(0deg);
    }
}
/***** /Review CTA *****/

/* Language modal: make full row clickable */
#languageModal .list-group-item {
    padding: 0 !important;
}

#languageModal .lang-switch-btn {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: var(--bs-list-group-item-padding-y) var(--bs-list-group-item-padding-x) !important;
}

/* Search input styles */
.form-control {
    border-radius: 6px;
    padding: 0.5rem 1rem;
}

/* =========================================================
   7. HELP INFO ANIMATION
   ========================================================= */
/* Help info */
.help-info {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeInHelp 0.6s ease-out forwards;
    font-size: 85%;
}
@keyframes fadeInHelp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================================
   8. IMAGE STYLES (CROP / NO CROP / COVER)
   ========================================================= */
/* Image crop 16:9 (CATALOGS + ITEMS THUMBNAILS)*/
.image-crop {
  width: 100%;
  max-width: 600px !important;
  aspect-ratio: 16 / 9 !important;        /* maintains 16:9 ratio */
  object-fit: cover;           /* crop center */
  object-position: center;     /* center focus */
  display: block;
  border-radius: 0.5rem;
  overflow: hidden;
}
/* Desktop only */
@media (min-width: 992px) {
    .catalog-item-image.image-crop {
        max-width: 600px !important;
        aspect-ratio: 16 / 9;
        object-fit: cover;
        height: auto !important;
    }
}
/*---+---*/
/* Image no crop (FOR FULL SIZE THUMBNAILS) */
.image-no-crop {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
}
/* Desktop only */
@media (min-width: 992px) {
  img.catalog-item-image.image-no-crop{
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;

    max-width: 600px !important;
    width: 100% !important;   /* critical: gives it a real width to center */
    height: auto !important;
  }
}

/* Image crop fixed size (NOT USED) */
.image-crop-fixed {
    width: 414px;
    height: 233px;
    object-fit: cover;
    object-position: center;
    display: block;
  } 
/* Cover Image (Panoramic crop 4:1 with max-height 300px) */
.image-cover {
  width: 100%;
  max-width: 100% !important;
  aspect-ratio: 4 / 1 !important;          /* Enforce 4:1 ratio */
  max-height: 300px;            /* Limit maximum height */
  object-fit: cover;            /* Crop edges cleanly */
  object-position: center;      /* Keep subject centered */
  display: block;
  border-radius: 0.5rem;
  overflow: hidden;
}

/* Catalog item images – fill column, no white frame */
.catalog-item-image {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;

    /* remove white frame from img-thumbnail */
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}


/* =========================================================
   9. CATEGORY TITLE
   ========================================================= */
/* ONLY FORl: First category title - remove the big top margin */
main .category:first-of-type .category-title{
  margin-top: 18px;
}

.category-title{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;

	padding: 8px 8px;
	margin: 40px 0 18px; /* big space before category */

	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 800;
	/* font-size: 1.25rem; */

	background: rgba(255,255,255,0.65);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);

	border: 1px solid rgba(0,0,0,0.10);
	border-radius: 14px;

	box-shadow: 0 10px 22px rgba(0,0,0,0.10);
}

/* Left & right lines to make it look like a “section header” */
.category-title::before,
.category-title::after{
	content: "";
	flex: 1;
	height: 2px;
	background: rgba(0,0,0,0.18);
	border-radius: 999px;
}

.category-title::before{ margin-right: 12px; }
.category-title::after{  margin-left: 12px; }


/* =========================================================
   10.2 CARD & ITEM / ITEMS LAYOUT
   ========================================================= */
/* Card body styles */
.card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
}
/* Card body description */
.card-body p {
    margin-bottom: -0.25rem;
    line-height: 1.35;
}
/* If there are empty <p></p>, zero them out completely */
.card-body p:empty {
    margin: 0;
    display: none;
}

/* Card title styles */
.card-title { 
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Card styles */
.card {
    background: var(--glass-bg);

    backdrop-filter:
        blur(var(--glass-blur))
        saturate(var(--glass-saturate, 140%));

    -webkit-backdrop-filter:
        blur(var(--glass-blur))
        saturate(var(--glass-saturate, 140%));

    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14);
}
/* Hover = premium lift (NO scale abuse) */
/* .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(0,0,0,0.18);
} */
/* Card image styles */
.card img {
    height: auto;
    max-height: 100%;
    object-fit: cover;
    border-top-right-radius: 0px; /*10px*/
    border-top-left-radius: 0px; /*10px*/
    cursor: pointer;
}

/* =========================================================
   Featured Item
   Highlights selected products without changing their order.
   ========================================================= */
.catalog-item.item-featured .featured-item-card {
	border: 2px solid #d3a21b !important;
	box-shadow: 0 10px 28px rgba(160, 112, 0, 0.20) !important;
}

.featured-item-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	padding: 0.45rem 0.9rem;
	background: linear-gradient(135deg, #ffe99a 0%, #e5b932 55%, #c99411 100%);
	color: #241a00;
	font-size: 0.72rem;
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
}

.featured-item-badge-icon {
	color: #241a00;
	font-size: 0.9rem;
}
/* =========================================================
   /Featured Item
   ========================================================= */

/* Variation styles */
.variation-title {
    font-size: 1.0rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 1rem;
}
.variation-price {
    font-size: 1.0rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 1rem;
}

/* =========================================================
   10.3 CATALOG ITEM VARIATIONS BOX
   - Soft neutral style for businesses without custom theme
   ========================================================= */

.catalog-variations-box {
	margin-top: 14px;
	padding: 14px 16px;
	border-radius: 14px;
	background: rgba(248, 249, 250, 0.78);
	color: var(--bs-dark);
	border: 1px solid rgba(33, 37, 41, 0.12);
	box-shadow: none;

	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}

.catalog-variations-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--bs-dark);
}

.catalog-variations-title i,
.catalog-variations-title svg,
.catalog-variations-title svg path {
	color: var(--bs-dark);
	fill: var(--bs-dark);
	stroke: var(--bs-dark);
}

.catalog-variations-title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: rgba(33, 37, 41, 0.12);
}

.catalog-variation-line {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 7px 0;
	border-bottom: 1px solid rgba(33, 37, 41, 0.12);
	font-size: 0.95rem;
	line-height: 1.25;
	color: var(--bs-dark);
}

.catalog-variation-line:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.catalog-variation-name {
	flex: 1;
	min-width: 0;
	font-weight: 500;
	color: var(--bs-dark);
}

.catalog-variation-price {
	flex: 0 0 auto;
	font-weight: 800;
	white-space: nowrap;
	color: var(--bs-dark);
}

.catalog-variation-actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}

.catalog-variation-line .wishlist-btn {
	color: var(--bs-dark);
	opacity: 0.35;
}

.catalog-variation-line .wishlist-btn:hover,
.catalog-variation-line .wishlist-btn:focus {
	color: var(--bs-dark);
	opacity: 0.75;
}

.catalog-variation-line .wishlist-btn.active {
	color: var(--bs-danger);
	opacity: 1;
}

.catalog-variation-line .wishlist-btn.active:hover,
.catalog-variation-line .wishlist-btn.active:focus {
	color: var(--bs-danger);
	opacity: 1;
}

/* Centered style for description blocks */
.item-description-block .catalog-variations-box {
	max-width: 600px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

/* Mobile */
@media (max-width: 576px) {
	.catalog-variations-box {
		padding: 13px 14px;
		border-radius: 12px;
	}

	.catalog-variation-line {
		font-size: 0.92rem;
	}

	.catalog-variations-title {
		font-size: 0.92rem;
	}
}

/* Reset conflicting global .img-fluid styles */
/* .img-fluid {
    width: 100%;
    height: auto;
    object-fit: contain;
} */
/* Default image styles for catalog item images */
/* .img-fluid {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: right;
    display: block;
    margin-left: auto;
} */
/* Mobile view: Full-width images */
/* @media (max-width: 768px) {
    .img-fluid {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
        margin-left: 0;
        margin-right: 0;
    }
} */

/* Price styles */
.price {
    font-weight: bold;
    color: #333;
}
/* Ingredients icons */
.ingredients-icons i {
    margin-left: 0.5rem;
    color: #555;
    cursor: pointer; /* Indicate that icons are clickable */
}


/* =========================================================
   11. TEXT-TO-SPEECH (TTS)
   ========================================================= */
/* Text-to-Speech (TTS) */
.tts-btn.tts-playing {
    animation: pulse-speaker 1s infinite;
    opacity: 0.8;
}
@keyframes pulse-speaker {
    0% { transform: scale(1); }
    50% { transform: scale(1.25); }
    100% { transform: scale(1); }
}


/* =========================================================
   12. AI GENERATE BUTTON
   ========================================================= */

/* AI action wrapper */
.ai-description-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Main AI button
   - Adaptive for light and dark cards
   - Small, clean and readable
*/
.ai-generate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;

    padding: 0.36rem 0.82rem;
    min-height: 32px;

    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 999px !important;

    background: rgba(255, 255, 255, 0.92);
    color: #4b5563;

    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10);

    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        opacity 0.18s ease;
}

/* AI button icon bubble */
.ai-generate-btn__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;
    border-radius: 50%;

    background: linear-gradient(135deg, #7c3aed, #2563eb);
    color: #ffffff;

    flex-shrink: 0;
}

/* Icon inside bubble */
.ai-generate-btn__icon i {
    font-size: 0.62rem;
    line-height: 1;
    color: #ffffff;
}

/* Button label */
.ai-generate-btn__text {
    display: inline-block;
    white-space: nowrap;
}

/* Hover state */
.ai-generate-btn:hover {
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.12);
    color: #111827;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.14);
}

/* Active press state */
.ai-generate-btn:active {
    transform: translateY(0);
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.10);
}

/* Focus state */
.ai-generate-btn:focus,
.ai-generate-btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 0.18rem rgba(124, 58, 237, 0.14),
        0 10px 22px rgba(0, 0, 0, 0.14);
}

/* Disabled/loading state */
.ai-generate-btn:disabled {
    opacity: 0.72;
    cursor: not-allowed;
    transform: none;
}

/* AI response box */
.ai-description {
    width: 100%;
    line-height: 1.45;
}

/* Highlight styling inside AI response */
.ai-description strong em {
    font-style: italic;
    font-weight: 600;
    background: #fff6a8;
    color: #1a1a1a;
    padding: 1px 3px;
    border-radius: 3px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* Dark / themed cards support
   - Applies only when a theme is enabled on body */
body.has-theme .ai-generate-btn {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
    color: #f5f5f5;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

body.has-theme .ai-generate-btn:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.22);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

/* Mobile fine-tuning */
@media (max-width: 576px) {
    .ai-generate-btn {
        padding: 0.32rem 0.72rem;
        font-size: 0.73rem;
        min-height: 30px;
    }

    .ai-generate-btn__icon {
        width: 17px;
        height: 17px;
    }

    .ai-generate-btn__icon i {
        font-size: 0.58rem;
    }
}


/* =========================================================
   13. MODAL BASE & ITEM MODAL
   ========================================================= */
/* Backdrop just below modal */
.modal-backdrop {
  z-index: 2000 !important;
}

/* Keep Modal over the floating buttons */
.modal {
	z-index: 2010 !important;
}

/* Ensure dialog & content are not trapped */
.modal-dialog {
    position: relative;
    z-index: 2020 !important;
}

.modal-content {
    position: relative;
    z-index: 2030 !important;
}

/* Item Modal Title */
.modal-title {
    /* margin-bottom: 0.5rem; */
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Item Modal Image */
.modal-body img {
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
}
/* Item Modal Price */
.modal-body .price {
    font-size: 1.1rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 1rem;
}

/* Ingredient list styles for modal */
.ingredients-list .ingredient {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.625rem; /* Added font-size for ingredients */
}
.ingredients-list .ingredient i {
    margin-right: 0.5rem;
    color: #555;
}

/* =========================================================
   14. INFO MODAL STYLING
   ========================================================= */
/* Info Modal Styling */
#infoModal .modal-body a {
    color: #000 !important; /* Black text color */
    text-decoration: none !important; /* Remove underline */
    font-weight: bold; /* Make text bold */
}

#infoModal .modal-body a:hover {
    color: #333 !important; /* Slightly darker black on hover */
}

#infoModal .modal-body i {
    color: #000 !important; /* Black icons */
    font-weight: bold; /* Bold icons */
}
#infoModal .list-info {
	line-height: 30px;
}


/* =========================================================
   14.x CATEGORIES MODAL STYLING
   ========================================================= */

/* Category modal links */
.category-list-modal .category-modal-link {
	color: #000000 !important;
	text-decoration: none !important;
}

/* Category modal links hover/focus */
.category-list-modal .category-modal-link:hover,
.category-list-modal .category-modal-link:focus {
	color: #000000 !important;
	text-decoration: none !important;
}

/* Category modal rows */
.category-list-modal .list-group-item {
	margin-bottom: 8px;

	border: 1px solid rgba(0, 0, 0, 0.14) !important;
	border-radius: 10px !important;

	background-color: #ffffff;

	transition:
		background-color 0.2s ease,
		border-color 0.2s ease;
}

/* Bootstrap fix: keep top border on every category row */
.category-list-modal .list-group-item + .list-group-item {
	border-top-width: 1px !important;
}

/* Remove bottom space from last category */
.category-list-modal .list-group-item:last-child {
	margin-bottom: 0;
}

/* Category modal rows hover */
.category-list-modal .list-group-item:hover {
	background-color: rgba(0, 0, 0, 0.04);
	border-color: rgba(0, 0, 0, 0.22) !important;
}


/* =========================================================
   MODAL SCROLL FIX (LONG CONTENT)
   Keeps all modals with safe margin around the screen
   ========================================================= */

/* Modal dialog spacing */
.modal-dialog {
	position: relative;
	z-index: 2020 !important;

	max-height: calc(100vh - 2rem);
	margin: 1rem;
}

/* Centered modals keep margin on all sides */
.modal-dialog-centered {
	min-height: calc(100% - 2rem);
}

/* Modal content stays inside viewport */
.modal-content {
	position: relative;
	z-index: 2030 !important;

	max-height: calc(100vh - 2rem);
	margin-top: 0;
	overflow: hidden;
	border-radius: 16px;
}

/* Scroll only the modal body when content is long */
.modal-body {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	max-height: calc(100vh - 150px);
}

/* Desktop: keep modal centered with comfortable side margins */
@media (min-width: 576px) {
	.modal-dialog {
		margin: 1.75rem auto;
		max-height: calc(100vh - 3.5rem);
	}

	.modal-dialog-centered {
		min-height: calc(100% - 3.5rem);
	}

	.modal-content {
		max-height: calc(100vh - 3.5rem);
	}
}

/* Mobile: safe perimeter margin */
@media (max-width: 575.98px) {
	.modal-dialog {
		margin: 0.85rem;
		max-height: calc(100vh - 1.7rem);
	}

	.modal-dialog-centered {
		min-height: calc(100% - 1.7rem);
	}

	.modal-content {
		max-height: calc(100vh - 1.7rem);
		border-radius: 14px;
	}
}

/* =========================================================
   MODAL OPEN ANIMATION
   Modal slides softly from bottom
   ========================================================= */

/* Initial modal position before opening */
.modal.fade:not(.show) .modal-dialog {
	transform: translateY(28px);
	opacity: 0;
	transition:
		transform 0.22s cubic-bezier(.22,.61,.36,1),
		opacity 0.38s ease;
}

/* Final modal position after opening */
.modal.fade.show .modal-dialog {
	transform: translateY(0);
	opacity: 1;
}

/* Slightly stronger bottom motion on mobile */
@media (max-width: 575.98px) {
	.modal.fade:not(.show) .modal-dialog {
		transform: translateY(38px);
	}
}

/* =========================================================
   14.1 CATALOG MODAL MEDIA / GALLERY / EXTRA FILES
   ========================================================= */
.modal-fullscreen .modal-body {
    overflow-y: auto;
    background: #fff;
}

.modal-fullscreen .modal-body img {
    max-width: 100%;
    height: auto;
}

.extra-files-block iframe {
    background: #fff;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(1);
}

.carousel-indicators [data-bs-target] {
    background-color: #222;
}

.extra-files-badge {
    top: 8px;
    right: 8px;
    font-size: 0.72rem;
    z-index: 5;
    pointer-events: none;
}

.catalog-item .position-relative {
    overflow: visible !important;
}

.item-modal-gallery-stack img {
    display: block;
    width: 100%;
    background: #fff;
}


/* =========================================================
   15. TAG BADGES
   ========================================================= */

/* ##################################################
   MENNOO FRONTEND - ITEM TAGS
   Compact icon-over-label layout for catalog items.
   ################################################## */
.item-tags {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.5rem 0.75rem;
	margin-top: 0.65rem;
}

.item-tags .badge.tag.item-tag {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 0.22rem;
	min-width: 3rem;
	max-width: 7rem;
	padding: 0;
	margin: 0;
	background-color: transparent !important;
	color: #000 !important;
	border: 0 !important;
	border-radius: 0;
	font-weight: 400;
	line-height: 1.1;
	text-align: center;
	white-space: normal;
}

.item-tags .item-tag-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.8rem;
	height: 1.8rem;
	flex: 0 0 1.8rem;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.08);
	color: #000 !important;
	line-height: 1;
}

.item-tags .item-tag-label {
	display: block;
	max-width: 100%;
	color: #000 !important;
	font-size: 0.7rem;
	font-weight: 400;
	line-height: 1.15;
	overflow-wrap: anywhere;
}

/* FontAwesome and MENNOO tag icon base */
.item-tags .badge.tag i,
.item-tags .badge.tag .tag-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #000 !important;
	line-height: 1;
}

.item-tags .badge.tag .tag-icon-fa {
	font-size: 0.88rem;
	line-height: 1;
}

.item-tags .badge.tag .tag-icon-lucide {
	width: 1rem;
	height: 1rem;
	stroke-width: 2;
}


/* =========================================================
   16. ITEM DESCRIPTION BLOCK
   ========================================================= */
/* Item Description Block */
.catalog-item.item-description-block {
	margin-left: auto;
	margin-right: auto;
}
.item-description-block .card {
	border: none;
	/* border-radius: 6px; */
	background-color: transparent;
	box-shadow: none;
}


/* =========================================================
   17. THUMBNAIL ADJUSTMENTS
   ========================================================= */
/* Adjusting .img-thumbnail class */
.img-thumbnail {
    border: 0px solid #dee2e6; /* Removed border */
    border-radius: 0rem; /*0.5rem*/ /* Added border-radius */
}


/* =========================================================
   18. WISHLIST SIDEBAR
   ========================================================= */
/* Wishlist sidebar container*/
#wishlistSidebar {
    position: fixed;
    top: 0;
    right: -350px; /* Hidden position */
    width: 350px;
    height: 100%;
    background-color: #fff;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
    transition: right 0.3s ease;
    z-index: 1065; /* Lower than wishlist button */
    overflow-y: auto;
    padding: 20px;
}
/* Sidebar open */
#wishlistSidebar.open {
    right: 0; /* Show sidebar */
}
/* Mobile responsiveness for sidebar */
@media (max-width: 768px) {
    #wishlistSidebar {
        width: 100vw; /* Full viewport width on mobile */
        right: -100vw; /* Completely off screen */
    }
    #wishlistSidebar.open {
        right: 0;
    }
}

/* Resize item image inside sidebar */
#wishlistSidebar .wishlist-item .catalog-item-image {
    width: 100%;
	height: auto;
	object-fit: contain;
	max-width: 100%;
}

/* Sidebar header */
.wishlist-header {
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}


/* =========================================================
   19. FLOATING BUTTONS (WISHLIST & CATEGORIES)
   ========================================================= */
/* Floating button to open sidebar */
.wishlist-toggle-btn {
    position: fixed;
    bottom: 90px;
    right: 20px;
    background-color: #ef2469;
    color: #fff;
    border: none;
    border-radius: 0%; /*50%*/
    width: 50px;
    height: 50px;
    z-index: 1070; /* Higher than sidebar */
    display: flex;
    align-items: center;
    justify-content: center;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.3);
    transition: background-color 0.3s;
}
.wishlist-toggle-btn i {
    font-size: 1.5rem;
}
.wishlist-toggle-btn:hover {
    background-color: #d81b60;
    transform: translateY(-2px);
}

/* Floating button to open category modal */
.category-toggle-btn {
    position: fixed;
    bottom: 20px;
    right: 20px; /* Opposite of wishlist */
    background-color: #000000; /* Button color */
    color: #fff;
    border: none;
    border-radius: 0%; /*50%*/
    width: 50px;
    height: 50px;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: background-color 0.3s;
}
.category-toggle-btn i {
    font-size: 1.5rem;
}
.category-toggle-btn:hover {
    background-color: #d81b60;
}


/* =========================================================
   20. WISHLIST SIDEBAR ITEMS
   ========================================================= */

/* -----------------------------------------
   Wishlist item card body spacing
   ----------------------------------------- */
.wishlist-item .card-body {
    padding: 0.9rem 1rem;
}

/* -----------------------------------------
   Generic grouped text layout
   ----------------------------------------- */
.wishlist-text-group {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.wishlist-main-line {
    line-height: 1.2;
}

.wishlist-helper-line {
    line-height: 1.15;
    padding-left: 0.1rem;
}

/* -----------------------------------------
   Title group
   ----------------------------------------- */
.wishlist-title-group {
    margin-bottom: 0.55rem !important;
}

.wishlist-item-title-helper-primary {
    font-size: 1.12rem;
    font-weight: 700;
    line-height: 1.15;
    color: #000000;
    text-transform: uppercase;
}

.wishlist-item-title-secondary {
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.15;
    color: rgba(0, 0, 0, 0.82);
}

/* -----------------------------------------
   Category group
   ----------------------------------------- */
.wishlist-category-group {
    margin-bottom: 0.65rem !important;
}

.wishlist-category-helper-primary {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    color: rgba(0, 0, 0, 0.95);
}

.wishlist-category-secondary {
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.2;
    color: rgba(0, 0, 0, 0.75);
}

/* -----------------------------------------
   Variation block
   ----------------------------------------- */
.wishlist-variation-wrap {
    margin-top: 0.55rem !important;
}

.wishlist-variation-group {
    gap: 0.2rem;
}

.wishlist-variation {
    border-radius: 0.35rem;
    padding: 0.42rem 0.65rem;
    font-size: 0.95rem;
    text-align: left;
    white-space: normal;
    line-height: 1.2;
    opacity: 1 !important;

    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.16rem;
}

.wishlist-variation-helper-primary {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.15;
    color: #000000;
}

.wishlist-variation-main-secondary {
    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1.15;
    color: rgba(0, 0, 0, 0.78);
}

/* -----------------------------------------
   Remove single variation button
   ----------------------------------------- */
.wishlist-remove-variation-btn {
    line-height: 1;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}

/* -----------------------------------------
   Remove all button spacing
   ----------------------------------------- */
.wishlist-item .wishlist-remove-all-btn,
.wishlist-item .btn-danger.w-100 {
    margin-top: 0.9rem !important;
}

/* -----------------------------------------
   Legacy compatibility
   ----------------------------------------- */
.wishlist-item .item-title {
    text-transform: uppercase;
}

/* -----------------------------------------
   Wishlist count badge
   ----------------------------------------- */
.wishlist-count {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #ff6b6b;
    color: #fff;
    width: 20px;
    height: 20px;
    font-size: 12px;
    border-radius: 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1061;
}


/* =========================================================
   21. WISHLIST HEART BUTTON (CARD + MODAL)
   ========================================================= */
/* Wishlist heart ico */
.wishlist-btn {
    position: relative;
}
.wishlist-btn i {
    font-size: 24px;
    color: #ccc; /* Default grey */
    transition: color 0.3s;
}
/* Animate the heart icon on click */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
/* Active state color for wishlist heart */
.wishlist-btn.active i {
    color: #EF2469; /* Pink for active */
    animation: pulse 0.3s;
}
/* Wishlist in modal Button (if item is not in wishlist) - grey */
.wishlist-btn.btn-toggle-wishlist {
    background-color: #cccccc;
    color: #000000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Keep icon + label black when NOT active */
.wishlist-btn.btn-toggle-wishlist i,
.wishlist-btn.btn-toggle-wishlist .wishlist-label,
.wishlist-btn.btn-toggle-wishlist span,
.wishlist-btn.btn-toggle-wishlist svg,
.wishlist-btn.btn-toggle-wishlist svg path {
    color: #000000 !important;
    fill: #000000 !important;
    stroke: #000000 !important;
}

/* Wishlist in modal Button (if item is in wishlist) - pink */
.wishlist-btn.btn-toggle-wishlist.active {
    background-color: #EF2469;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Keep icon + label white when ACTIVE */
.wishlist-btn.btn-toggle-wishlist.active i,
.wishlist-btn.btn-toggle-wishlist.active .wishlist-label,
.wishlist-btn.btn-toggle-wishlist.active span,
.wishlist-btn.btn-toggle-wishlist.active svg,
.wishlist-btn.btn-toggle-wishlist.active svg path {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}


/* =========================================================
   22. SCROLL BACK TO TOP BUTTON
   ========================================================= */
/* Scroll Back To Top Button - bottom left aligned */
#scrollTopBtn {
    display: none;
    position: fixed;
    bottom: 20px;          /* Space from bottom */
    left: 20px;            /* Space from left instead of right */
    z-index: 1030;
    width: 36px;
    height: 36px;
    border: none;
    outline: none;
    background-color: #212529;
    color: white;
    cursor: pointer;
    border-radius: 0%; /*50%*/
    font-size: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease;
}
#scrollTopBtn:hover {
    background-color: #000;
}


/* =========================================================
   23. GENERIC BUTTONS (BLACK BUTTON)
   ========================================================= */
/* Black button styles */
.btn-black {
    background-color: #000;
    color: #fff;
    border: none;
}
.btn-black:hover {
    background-color: #333;
    color: #fff;
}


/* =========================================================
   24. MODAL CLOSE BUTTON (×)
   ========================================================= */
/* Close button styles for modal */
.close {
    font-size: 1.5rem; /* Increase font size */
    background: none; /* Remove background color */
    border: none; /* Remove border */
    outline: none; /* Remove outline */
    color: #000; /* Set color */
}

.close:hover {
    color: #333; /* Darker color on hover */
    text-decoration: none; /* Remove underline on hover */
}


/* =========================================================
   25. LINKS, CARD LINKS & TOASTS
   ========================================================= */
/* Remove underline from links in item rows */
.catalog-item a {
    text-decoration: none;
}

/* Ensure the card-link does not affect the card's appearance */
.card-link {
    display: block;
    color: inherit;
    text-decoration: none;
}


/* Toast notification: Auto width based on content */
.toast {
    width: auto;
    max-width: 90vw; /* Optional: prevent it from being too wide on mobile */
    white-space: nowrap;
    padding: 0.2rem 0.6rem; /* Optional: adjust spacing inside */
}
/* Toast notification: Center it horizontally */
.toast-container {
    left: 50%;
    transform: translateX(-50%);
}


/* =========================================================
   26. BUSINESS / CATALOG INFO HEADER & FOOTER
   ========================================================= */

/*
 * Shared spacing for:
 * - Business Header
 * - Business Footer
 * - Catalog Header
 * - Catalog Footer
 */
.business-header-block,
.business-footer-block,
.catalog-header-block,
.catalog-footer-block {
    width: 100%;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}


/* =========================================================
   26.0.1 CATALOG INFO BLOCKS
   ========================================================= */

/*
 * Catalog Header
 * Appears before the catalog search / categories navigation.
 */
.catalog-header-block {
    position: relative;
    z-index: 2;
}


/*
 * Catalog Footer
 * Appears after all catalog content and items.
 */
.catalog-footer-block {
    position: relative;
    z-index: 2;
}


/*
 * Keep media inside Catalog Info responsive.
 */
.catalog-header-block img,
.catalog-footer-block img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}


/*
 * Keep YouTube / iframe content inside Catalog Info responsive.
 */
.catalog-header-block iframe,
.catalog-footer-block iframe {
    max-width: 100%;
}


/*
 * Prevent long text or links from overflowing the Catalog Info block.
 */
.catalog-header-block,
.catalog-footer-block {
    overflow-wrap: anywhere;
    word-break: normal;
}


/* Mobile spacing */
@media (max-width: 576px) {
    .business-header-block,
    .business-footer-block,
    .catalog-header-block,
    .catalog-footer-block {
        padding: 0.85rem 1rem;
        margin-bottom: 1.25rem;
    }
}

/* =========================================================
   26.1 BUSINESS / CATALOG HEADER & FOOTER CONTENT BUTTONS
   ========================================================= */

/*
 * Shared MENNOO content button.
 *
 * business-content-button is kept for backward compatibility.
 * catalog-content-button is the Catalog Info equivalent.
 */
.business-content-button,
.catalog-content-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    max-width: 100%;

    padding: 0.7rem 1.2rem;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;

    text-decoration: none;
    text-align: center;

    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.2;

    overflow-wrap: anywhere;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease,
        border-color 0.2s ease;
}


/* Shared hover / focus state */
.business-content-button:hover,
.business-content-button:focus,
.catalog-content-button:hover,
.catalog-content-button:focus {
    text-decoration: none;
    color: #ffffff;

    transform: translateY(-1px);

    background: rgba(255, 255, 255, 0.18);

    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}


/* Keep buttons inside Business / Catalog Info blocks */
.business-header-block .business-content-button,
.business-footer-block .business-content-button,
.catalog-header-block .catalog-content-button,
.catalog-footer-block .catalog-content-button {
    max-width: 100%;
    word-break: break-word;
}


/* =========================================================
   26.1.1 CATALOG HEADER / FOOTER BUTTONS
   - Catalog-specific button hooks
   - Base styling comes from .catalog-content-button
   ========================================================= */

/* Shared Catalog Info button protection */
.catalog-header-content-button,
.catalog-footer-content-button {
    position: relative;
    z-index: 1;

    max-width: 100%;
    min-width: 0;

    text-align: center;
    overflow-wrap: anywhere;
    word-break: normal;
}


/* Catalog Header button */
.catalog-header-content-button {
    text-decoration: none;
}


/* Catalog Footer button */
.catalog-footer-content-button {
    text-decoration: none;
}


/* Catalog Info button hover / focus safety */
.catalog-header-content-button:hover,
.catalog-header-content-button:focus,
.catalog-footer-content-button:hover,
.catalog-footer-content-button:focus {
    text-decoration: none;
}


/* Mobile protection */
@media (max-width: 576px) {
    .catalog-header-content-button,
    .catalog-footer-content-button {
        max-width: 100%;
        white-space: normal;
    }
}


/* =========================================================
   27. FOOTER SOCIAL
   ========================================================= */
.footer-social {
    padding: 1.25rem;
    margin-bottom: 1.5rem;

    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}
.footer-social a {
    color: inherit;
    transition: opacity 0.3s ease;
}
.footer-social a:hover {
    opacity: 0.7;
}


/* =========================================================
   28. FOOTER
   ========================================================= */
/* Footer */
.footer {
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    padding: 15px 20px;
    text-align: center;
    width: 100%;
    margin-top: auto; /* Ensures the footer stays at the bottom */
    color: #343a40;
	font-weight: bold; /* Optional: Make it bold if needed */
    position: relative; /* Ensures proper stacking */
}
.footer a {
    text-decoration: none; /* Removes underline */
    color: inherit; /* Inherits text color from parent */
    font-weight: bold; /* Optional: Make it bold if needed */
}


/* =========================================================
   MENNOO — GLOBAL INFO WIDGET FIX
   Business Header / Footer + Catalog Header / Footer

   Goal:
   - Prevent full-height / sidebar stretching
   - Keep embedded widgets at their natural height
   - Keep custom code inside the MENNOO content width
   ========================================================= */


/* ---------------------------------------------------------
   1. MENNOO custom code wrapper
   --------------------------------------------------------- */
.business-header-code,
.business-footer-code,
.catalog-header-code,
.catalog-footer-code {
    display: flex;
    justify-content: center;
    align-items: flex-start;

    width: 100%;
    max-width: 100%;

    min-width: 0;
}


/* ---------------------------------------------------------
   2. Generic embedded content protection
   --------------------------------------------------------- */
.business-header-code > *,
.business-footer-code > *,
.catalog-header-code > *,
.catalog-footer-code > * {
    max-width: 100%;
}


/* ---------------------------------------------------------
   3. Elfsight root containers
   --------------------------------------------------------- */
.business-header-code [class^="elfsight-app-"],
.business-footer-code [class^="elfsight-app-"],
.catalog-header-code [class^="elfsight-app-"],
.catalog-footer-code [class^="elfsight-app-"] {
    display: inline-block;

    width: 100%;
    max-width: 100%;

    height: auto !important;
    min-height: 0 !important;

    align-self: flex-start;
}


/* ---------------------------------------------------------
   4. Prevent Elfsight sidebar / full-height stretching
   --------------------------------------------------------- */
.business-header-code [class^="elfsight-app-"] .es-embed-root,
.business-footer-code [class^="elfsight-app-"] .es-embed-root,
.catalog-header-code [class^="elfsight-app-"] .es-embed-root,
.catalog-footer-code [class^="elfsight-app-"] .es-embed-root,

.business-header-code [class^="elfsight-app-"] .es-main-container,
.business-footer-code [class^="elfsight-app-"] .es-main-container,
.catalog-header-code [class^="elfsight-app-"] .es-main-container,
.catalog-footer-code [class^="elfsight-app-"] .es-main-container,

.business-header-code [class^="elfsight-app-"] .es-layout-sidebar-container,
.business-footer-code [class^="elfsight-app-"] .es-layout-sidebar-container,
.catalog-header-code [class^="elfsight-app-"] .es-layout-sidebar-container,
.catalog-footer-code [class^="elfsight-app-"] .es-layout-sidebar-container,

.business-header-code [class^="elfsight-app-"] .es-layout-sidebar-inner,
.business-footer-code [class^="elfsight-app-"] .es-layout-sidebar-inner,
.catalog-header-code [class^="elfsight-app-"] .es-layout-sidebar-inner,
.catalog-footer-code [class^="elfsight-app-"] .es-layout-sidebar-inner {
    height: auto !important;
    min-height: 0 !important;
}


/* ---------------------------------------------------------
   5. Prevent embedded widgets from reserving huge empty space
   --------------------------------------------------------- */
.business-header-code [class^="elfsight-app-"] .es-embed-root,
.business-footer-code [class^="elfsight-app-"] .es-embed-root,
.catalog-header-code [class^="elfsight-app-"] .es-embed-root,
.catalog-footer-code [class^="elfsight-app-"] .es-embed-root {
    overflow: hidden;
}


/* ---------------------------------------------------------
   6. Generic iframe protection for custom widget code
   --------------------------------------------------------- */
.business-header-code iframe,
.business-footer-code iframe,
.catalog-header-code iframe,
.catalog-footer-code iframe {
    max-width: 100%;
}