/* =============================================================================
   Divi Menucraft — Frontend & Visual Builder Styles
   Version: 1.0.0
   ============================================================================= */

/* -----------------------------------------------------------------------------
   CSS Custom Properties (defaults — overridden per-module via inline style)
   ----------------------------------------------------------------------------- */
.dmc-menu {
	--dmc-gap:                30px;
	--dmc-card-bg:             #ffffff;
	--dmc-card-border-color:   #e5e5e5;
	--dmc-card-border-width:   0px;
	--dmc-card-radius:         8px;
	--dmc-card-padding:        20px;
	--dmc-card-shadow:         0 2px 18px rgba(0,0,0,.08);
	--dmc-featured-color:      #c9a15a;
	--dmc-image-height:        220px;
	--dmc-badge-text:          #333333;
	--dmc-filter-active-bg:    #c9a15a;
	--dmc-filter-active-color: #ffffff;
	--dmc-filter-radius:       30px;
	--dmc-page-active-bg:      #c9a15a;
	--dmc-page-active-color:   #ffffff;

	display: block;
	width:   100%;
	box-sizing: border-box;
}

.dmc-menu *,
.dmc-menu *::before,
.dmc-menu *::after {
	box-sizing: border-box;
}

/* -----------------------------------------------------------------------------
   Category filter bar
   ----------------------------------------------------------------------------- */
.dmc-filters {
	display:         flex;
	flex-wrap:       wrap;
	gap:              10px;
	margin-bottom:    30px;
}

.dmc-filters-align-left   { justify-content: flex-start; }
.dmc-filters-align-center { justify-content: center;     }
.dmc-filters-align-right  { justify-content: flex-end;   }

.dmc-filter-btn {
	display:            inline-flex;
	align-items:        center;
	background:         var( --dmc-filter-bg, transparent );
	color:              inherit;
	border:             1px solid rgba(0,0,0,.14);
	border-radius:      var( --dmc-filter-radius, 30px );
	padding:            8px 20px;
	font-size:          14px;
	line-height:        1.4;
	cursor:             pointer;
	-webkit-transition: background .2s ease, color .2s ease, border-color .2s ease;
	transition:         background .2s ease, color .2s ease, border-color .2s ease;
}

.dmc-filter-btn:hover {
	border-color: var( --dmc-filter-active-bg, #c9a15a );
}

.dmc-filter-btn.is-active {
	background:   var( --dmc-filter-active-bg, #c9a15a );
	color:        var( --dmc-filter-active-color, #ffffff );
	border-color: transparent;
}

.dmc-filter-btn:focus-visible {
	outline:        2px solid currentColor;
	outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   Grid / column layout (Card Grid, Stacked List)
   ----------------------------------------------------------------------------- */
.dmc-items {
	display: grid;
	gap:      var( --dmc-gap, 30px );
	grid-template-columns: repeat( 3, 1fr );
}

.dmc-cols-1 .dmc-items { grid-template-columns: repeat( 1, 1fr ); }
.dmc-cols-2 .dmc-items { grid-template-columns: repeat( 2, 1fr ); }
.dmc-cols-3 .dmc-items { grid-template-columns: repeat( 3, 1fr ); }
.dmc-cols-4 .dmc-items { grid-template-columns: repeat( 4, 1fr ); }
.dmc-cols-5 .dmc-items { grid-template-columns: repeat( 5, 1fr ); }
.dmc-cols-6 .dmc-items { grid-template-columns: repeat( 6, 1fr ); }

/* Default responsive collapse (overridden below when tablet/phone columns are set explicitly) */
@media ( max-width: 980px ) {
	.dmc-style-cards .dmc-items,
	.dmc-style-stacked .dmc-items {
		grid-template-columns: repeat( 2, 1fr );
		gap: var( --dmc-gap-tablet, var( --dmc-gap, 30px ) );
	}
	.dmc-cols-tablet-1 .dmc-items { grid-template-columns: repeat( 1, 1fr ); }
	.dmc-cols-tablet-2 .dmc-items { grid-template-columns: repeat( 2, 1fr ); }
	.dmc-cols-tablet-3 .dmc-items { grid-template-columns: repeat( 3, 1fr ); }
	.dmc-cols-tablet-4 .dmc-items { grid-template-columns: repeat( 4, 1fr ); }
}

@media ( max-width: 767px ) {
	.dmc-style-cards .dmc-items,
	.dmc-style-stacked .dmc-items {
		grid-template-columns: repeat( 1, 1fr );
		gap: var( --dmc-gap-phone, var( --dmc-gap, 30px ) );
	}
	.dmc-cols-phone-1 .dmc-items { grid-template-columns: repeat( 1, 1fr ); }
	.dmc-cols-phone-2 .dmc-items { grid-template-columns: repeat( 2, 1fr ); }

	.dmc-style-sidebyside .dmc-item {
		flex-direction: column !important;
	}
}

/* List-based styles ignore the column grid entirely */
.dmc-style-sidebyside .dmc-items,
.dmc-style-minimal .dmc-items,
.dmc-style-elegant .dmc-items {
	display:        flex;
	flex-direction: column;
	grid-template-columns: none;
}

/* -----------------------------------------------------------------------------
   Item card — shared base
   ----------------------------------------------------------------------------- */
.dmc-item {
	position:       relative;
	display:        flex;
	flex-direction: column;
	background:     var( --dmc-card-bg, #ffffff );
	border:         var( --dmc-card-border-width, 0px ) solid var( --dmc-card-border-color, #e5e5e5 );
	border-radius:  var( --dmc-card-radius, 8px );
	box-shadow:     var( --dmc-card-shadow, none );
	padding:        var( --dmc-card-padding, 20px );
	overflow:       hidden;
}

.dmc-item-featured {
	box-shadow: 0 0 0 2px var( --dmc-featured-color, #c9a15a ), var( --dmc-card-shadow, none );
}

.dmc-item-soldout .dmc-image-wrap img,
.dmc-item-soldout .dmc-img-placeholder {
	opacity: .45;
	filter:  grayscale( .4 );
}

.dmc-item-soldout .dmc-title {
	opacity: .6;
}

/* -----------------------------------------------------------------------------
   Image
   ----------------------------------------------------------------------------- */
.dmc-image-wrap {
	position:     relative;
	overflow:     hidden;
	width:        calc( 100% + ( 2 * var( --dmc-card-padding, 20px ) ) );
	height:       var( --dmc-image-height, 220px );
	margin:       calc( -1 * var( --dmc-card-padding, 20px ) ) calc( -1 * var( --dmc-card-padding, 20px ) ) var( --dmc-card-padding, 20px );
	background:   rgba(0,0,0,.04);
	flex-shrink:  0;
}

.dmc-image-wrap img,
.dmc-image-wrap.dmc-img,
.dmc-img {
	display:      block;
	width:        100%;
	height:       100%;
	object-fit:   cover;
	-webkit-transition: transform .4s ease;
	transition:         transform .4s ease;
}

.dmc-img-placeholder {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           100%;
	height:          100%;
	color:           #999999;
}

.dmc-img-placeholder svg {
	width:  46%;
	height: 46%;
}

.dmc-image-rounded { border-radius: var( --dmc-card-radius, 8px ) var( --dmc-card-radius, 8px ) 0 0; }
.dmc-image-square   { border-radius: 0; }
.dmc-image-circle   {
	border-radius: 50%;
	width:  140px;
	height: 140px;
	margin: 0 auto var( --dmc-card-padding, 20px );
}

.dmc-zoom-on .dmc-item:hover .dmc-img,
.dmc-zoom-on .dmc-item:hover img {
	transform: scale( 1.06 );
}

.dmc-soldout-ribbon {
	position:      absolute;
	top:           14px;
	right:         -34px;
	background:    #c0392b;
	color:         #ffffff;
	font-size:     12px;
	font-weight:   700;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding:       4px 40px;
	transform:     rotate( 40deg );
	box-shadow:    0 2px 8px rgba(0,0,0,.2);
}

/* -----------------------------------------------------------------------------
   Content
   ----------------------------------------------------------------------------- */
.dmc-content {
	display:        flex;
	flex-direction: column;
	flex-grow:      1;
	gap:            6px;
}

.dmc-cat-label {
	display:        inline-block;
	align-self:     flex-start;
	font-size:      11px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color:          #999999;
	margin-bottom:  2px;
}

/* -----------------------------------------------------------------------------
   Badges
   ----------------------------------------------------------------------------- */
.dmc-badges {
	display:       flex;
	flex-wrap:     wrap;
	gap:           6px;
	margin-bottom: 4px;
}

.dmc-badge {
	display:        inline-flex;
	align-items:    center;
	gap:            4px;
	font-size:      11px;
	font-weight:    600;
	line-height:    1.4;
	padding:        3px 9px;
	border-radius:  30px;
	background:     var( --dmc-badge-bg, #f2f2f2 );
	color:          var( --dmc-badge-text, #333333 );
	white-space:    nowrap;
}

.dmc-badge-new         { background: var( --dmc-badge-bg, #e3f2fd ); }
.dmc-badge-popular     { background: var( --dmc-badge-bg, #fff3e0 ); }
.dmc-badge-chef        { background: var( --dmc-badge-bg, #f3e5f5 ); }
.dmc-badge-vegan       { background: var( --dmc-badge-bg, #e8f5e9 ); }
.dmc-badge-vegetarian  { background: var( --dmc-badge-bg, #edf7ed ); }
.dmc-badge-gluten_free { background: var( --dmc-badge-bg, #fff8e1 ); }
.dmc-badge-dairy_free  { background: var( --dmc-badge-bg, #e1f5fe ); }
.dmc-badge-halal       { background: var( --dmc-badge-bg, #e0f2f1 ); }
.dmc-badge-nuts        { background: var( --dmc-badge-bg, #efebe9 ); }
.dmc-badge-spice       { background: var( --dmc-badge-bg, #ffebee ); }

/* -----------------------------------------------------------------------------
   Title / price header row
   ----------------------------------------------------------------------------- */
.dmc-header-row {
	display:     flex;
	align-items: baseline;
	gap:         8px;
}

.dmc-style-cards .dmc-header-row,
.dmc-style-stacked .dmc-header-row,
.dmc-style-sidebyside .dmc-header-row {
	justify-content: space-between;
}

.dmc-title {
	margin:      0;
	font-size:   18px;
	font-weight: 600;
	line-height: 1.35;
}

.dmc-dots {
	display:  none;
	flex:     1 1 auto;
	height:   .55em;
	align-self: center;
	border-bottom: 1px dotted currentColor;
	opacity:  .35;
}

.dmc-style-minimal .dmc-dots,
.dmc-style-elegant .dmc-dots {
	display: block;
}

.dmc-price {
	font-weight: 700;
	white-space: nowrap;
}

.dmc-price-multi {
	display:   flex;
	flex-wrap: wrap;
	gap:       10px 16px;
	font-weight: 700;
}

.dmc-price-variant em {
	display:        block;
	font-style:     normal;
	font-weight:    400;
	font-size:      11px;
	text-transform: uppercase;
	letter-spacing: .04em;
	opacity:        .6;
	margin-bottom:  1px;
}

/* -----------------------------------------------------------------------------
   Description / ingredients
   ----------------------------------------------------------------------------- */
.dmc-desc {
	margin:      0;
	font-size:   14px;
	line-height: 1.6;
	color:       rgba(0,0,0,.65);
}

.dmc-ingredients {
	margin:      0;
	font-size:   12.5px;
	line-height: 1.6;
	color:       rgba(0,0,0,.5);
}

.dmc-ingredients-label {
	font-weight: 600;
	color:       rgba(0,0,0,.65);
}

/* -----------------------------------------------------------------------------
   Style: Card Grid (default)
   ----------------------------------------------------------------------------- */
.dmc-style-cards .dmc-title { font-size: 19px; }

/* -----------------------------------------------------------------------------
   Style: Side-by-Side List
   ----------------------------------------------------------------------------- */
.dmc-style-sidebyside .dmc-item {
	flex-direction: row;
	align-items:    flex-start;
	gap:            20px;
}

.dmc-style-sidebyside .dmc-image-wrap {
	width:   140px;
	height:  140px;
	flex:    0 0 140px;
	margin:  0;
	border-radius: var( --dmc-card-radius, 8px );
}

.dmc-style-sidebyside.dmc-imgpos-right .dmc-item {
	flex-direction: row-reverse;
}

.dmc-style-sidebyside .dmc-image-circle {
	margin: 0;
}

/* -----------------------------------------------------------------------------
   Style: Stacked List
   ----------------------------------------------------------------------------- */
.dmc-style-stacked .dmc-item      { text-align: center; }
.dmc-style-stacked .dmc-content   { align-items: center; }
.dmc-style-stacked .dmc-header-row {
	flex-direction: column;
	align-items:    center;
	gap:            4px;
}
.dmc-style-stacked .dmc-price {
	font-size:      15px;
	padding:        3px 14px;
	border-radius:  30px;
	background:     rgba(0,0,0,.045);
}
.dmc-style-stacked .dmc-badges,
.dmc-style-stacked .dmc-price-multi { justify-content: center; }
.dmc-style-stacked .dmc-image-circle { margin-left: auto; margin-right: auto; }

/* -----------------------------------------------------------------------------
   Style: Minimal Price List (classic, no images)
   ----------------------------------------------------------------------------- */
.dmc-style-minimal .dmc-image-wrap { display: none; }
.dmc-style-minimal .dmc-item {
	background:    transparent;
	box-shadow:    none;
	border:        none;
	border-bottom: 1px solid rgba(0,0,0,.09);
	border-radius: 0;
	padding:       14px 2px;
}
.dmc-style-minimal .dmc-item:last-child { border-bottom: none; }
.dmc-style-minimal .dmc-title  { font-size: 16px; }
.dmc-style-minimal .dmc-price  { font-size: 16px; }

/* -----------------------------------------------------------------------------
   Style: Elegant Divider
   ----------------------------------------------------------------------------- */
.dmc-style-elegant .dmc-image-wrap { display: none; }
.dmc-style-elegant .dmc-item {
	background:    transparent;
	box-shadow:    none;
	border:        none;
	text-align:    center;
	padding:       26px 10px;
	border-bottom: 1px solid rgba(0,0,0,.06);
}
.dmc-style-elegant .dmc-item:last-child { border-bottom: none; }
.dmc-style-elegant .dmc-content { align-items: center; }
.dmc-style-elegant .dmc-header-row {
	flex-direction: column;
	align-items:    center;
}
.dmc-style-elegant .dmc-title {
	font-size:      21px;
	font-weight:    500;
	letter-spacing: .03em;
	text-transform: uppercase;
}
.dmc-style-elegant .dmc-dots {
	width:         40px;
	flex:          none;
	align-self:    center;
	height:        0;
	margin:        10px 0;
	border-bottom: 1px solid currentColor;
	opacity:       .25;
}
.dmc-style-elegant .dmc-price { font-size: 15px; letter-spacing: .04em; }
.dmc-style-elegant .dmc-badges,
.dmc-style-elegant .dmc-price-multi { justify-content: center; }

/* -----------------------------------------------------------------------------
   Filtering / pagination visibility (toggled by frontend.js)
   ----------------------------------------------------------------------------- */
.dmc-hide-filter,
.dmc-hide-page {
	display: none !important;
}

/* -----------------------------------------------------------------------------
   No results
   ----------------------------------------------------------------------------- */
.dmc-no-items {
	text-align: center;
	padding:    40px 20px;
	opacity:    .7;
}

/* -----------------------------------------------------------------------------
   Pagination
   ----------------------------------------------------------------------------- */
.dmc-pagination {
	display:         flex;
	flex-wrap:       wrap;
	justify-content: center;
	align-items:     center;
	gap:             8px;
	margin-top:      36px;
}

.dmc-page-btn {
	display:            inline-flex;
	align-items:        center;
	justify-content:    center;
	min-width:          38px;
	height:             38px;
	padding:            0 12px;
	background:         transparent;
	border:             1px solid rgba(0,0,0,.14);
	border-radius:      6px;
	font-size:          14px;
	cursor:              pointer;
	-webkit-transition: background .2s ease, color .2s ease, border-color .2s ease;
	transition:         background .2s ease, color .2s ease, border-color .2s ease;
}

.dmc-page-btn:hover {
	border-color: var( --dmc-page-active-bg, #c9a15a );
}

.dmc-page-btn.is-active {
	background:   var( --dmc-page-active-bg, #c9a15a );
	color:        var( --dmc-page-active-color, #ffffff );
	border-color: transparent;
	cursor:       default;
}

.dmc-load-more {
	width:     auto;
	min-width: 180px;
	padding:   0 28px;
}

.dmc-page-btn:focus-visible {
	outline:        2px solid currentColor;
	outline-offset: 2px;
}

.dmc-page-btn[disabled] {
	opacity:        .35;
	cursor:         default;
	pointer-events: none;
}

/* =============================================================================
   Visual Builder helpers
   ============================================================================= */
.dmc-vb-preview .dmc-filter-btn,
.dmc-vb-preview .dmc-page-btn {
	cursor: default;
}

.dmc-vb-loading {
	padding:    40px 20px;
	text-align: center;
	opacity:    .6;
	font-size:  14px;
}