/*
 * RESTORATION STUB
 * The original "Sweet Dessert" theme stylesheet is a commercially licensed
 * ThemeForest product and was never crawled by the Wayback Machine, so the
 * real file could not be recovered. This is a baseline replacement covering
 * layout/typography/color for the theme's actual markup (header, nav,
 * WPBakery grid, product cards, footer) using fonts and accent colors
 * pulled from this page's own inline styles. It is NOT the original design.
 * Swap this file for the real theme style.css to fully restore the look.
 */

:root {
	--tgs-accent: #ff5500;
	--tgs-green: #50c530;
	--tgs-text: #333333;
	--tgs-max-width: 1200px;
}

* { box-sizing: border-box; }

/* Revolution Slider custom elements default to display:inline with no
   stylesheet of their own (its CSS is a missing premium asset), so
   width/height set via JS have no effect until these are block-level. */
rs-module-wrap, rs-module, rs-slides, rs-slide { display: block; width: 100%; }

body {
	font-family: 'Raleway', Arial, sans-serif;
	color: var(--tgs-text);
	line-height: 1.6;
	margin: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Poppins', Arial, sans-serif;
	font-weight: 600;
	line-height: 1.3;
}

a { color: inherit; text-decoration: none; }
/* The page's own captured inline <style> blocks define a plain "a{color:#333}"
   rule later in the document, which beats the rule above on source order
   (equal specificity). "body a" has one more type selector so it always
   wins regardless of where either rule sits, without touching more specific
   per-component color rules (e.g. .footer_wrap a) below. */
body a { color: inherit; }

.content_wrap {
	max-width: var(--tgs-max-width);
	margin: 0 auto;
	padding: 0 20px;
}

/* Header */
.top_panel_wrap {
	border-bottom: 1px solid #eee;
	background: #fff;
}
.top_panel_middle .content_wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	padding-top: 15px;
	padding-bottom: 15px;
}
.contact_logo .logo { display: flex; align-items: center; }
.contact_logo .logo img { max-height: 60px; width: auto; }
.contact_logo .logo .logo_fixed { display: none; }
.menu_main_wrap { flex: 1 1 auto; }
.menu_main_nav_area .menu_main_nav {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	padding: 0;
	justify-content: flex-end;
}
.menu_main_nav > li { position: relative; }
.menu_main_nav > li > a {
	display: block;
	padding: 10px 12px;
	font-weight: 600;
	font-size: 14px;
	text-transform: uppercase;
}
.menu_main_nav > li > a:hover { color: var(--tgs-accent); }
.menu_main_nav .sub-menu {
	list-style: none;
	margin: 0;
	padding: 8px 0;
	position: absolute;
	top: 100%;
	left: 0;
	background: #fff;
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
	min-width: 180px;
	display: none;
	z-index: 50;
}
.menu_main_nav > li:hover .sub-menu { display: block; }
.menu_main_nav .sub-menu a { display: block; padding: 8px 16px; font-size: 13px; }
.menu_main_nav .sub-menu a:hover { color: var(--tgs-accent); }
.wpmenucart-contents { display: flex; align-items: center; gap: 6px; padding: 10px 12px; }
.header_mobile { display: none; }

@media (max-width: 960px) {
	.menu_main_wrap { display: none; }
	.header_mobile {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12px 20px;
		background: #fff;
		border-bottom: 1px solid #eee;
	}
	.header_mobile .logo img { max-height: 44px; }
}

/* vc_parallax background normally set by js_composer_front.min.js from
   data-vc-parallax-image, which is stubbed out (no JS). Set it directly. */
.vc_parallax[data-vc-parallax-image] {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.pos-home-bullet[data-vc-parallax-image] {
	background-image: url("/assets/theglobalsnacks.com/wp-content/uploads/2021/10/banner-drinken-globalsnacks.jpg");
}

/* WPBakery-style grid (generic replacement for js_composer.min.css grid) */
.vc_row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.vc_row.vc_row-fluid { width: 100%; }
.wpb_column { padding: 15px; width: 100%; }
.vc_col-sm-12 { width: 100%; }
.vc_col-sm-6 { width: 50%; }
.vc_col-sm-4 { width: 33.3333%; }
.vc_col-sm-3 { width: 25%; }
@media (max-width: 768px) {
	.vc_col-sm-12, .vc_col-sm-6, .vc_col-sm-4, .vc_col-sm-3 { width: 100%; }
}
.wpb_content_element { margin-bottom: 20px; }
.category-block { text-align: center; }

/* Buttons */
.vc_btn3, .wpb_button, button, input[type="submit"] {
	display: inline-block;
	padding: 12px 28px;
	background: var(--tgs-accent);
	color: #fff;
	border: none;
	border-radius: 4px;
	font-weight: 600;
	cursor: pointer;
}
.vc_btn3:hover, .wpb_button:hover { opacity: 0.9; }
.vc_btn3-color-black { background: #222; }
.vc_btn3-shape-rounded { border-radius: 999px; }
.vc_btn3-container { text-align: center; margin: 20px 0; }

/* Product grid fallback (WooCommerce core CSS already covers most of this) */
.products { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; padding: 0; }
.products .product { flex: 1 1 220px; text-align: center; }
.products .product img { border-radius: 6px; }

/* wpcu (woo-product-carousel-slider-and-grid-ultimate) product grid.
   Its own CSS/JS are missing premium-plugin assets (stubbed), so without
   this the swiper-wrapper lays its slides out as one huge vertical stack. */
.wpcu-products .swiper-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	list-style: none;
	padding: 0;
	margin: 0;
}
.wpcu-product {
	flex: 1 1 220px;
	max-width: 260px;
	text-align: center;
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 16px;
}
.wpcu-product__img { position: relative; }
.wpcu-product__img img { border-radius: 6px; }
.wpcu-product__title { font-size: var(--wpcu-productTitleSize, 16px); margin: 12px 0 4px; }
.wpcu-product__title a { color: var(--wpcu-productTitleColor, #363940); }
.wpcu-product__title a:hover { color: var(--tgs-accent); }
.wpcu-product__price { font-size: var(--wpcu-productPriceSize, 14px); margin-bottom: 10px; }
.wpcu-overlay-content-bottom { margin-top: 10px; }

/* CTA tile that fills the trailing gap when the product count doesn't
   divide evenly into full rows (here: 10 real products -> 2 empty slots
   in a 4-per-row grid), instead of leaving blank space or inventing fake
   products. Sized to roughly two regular cards + the gap between them. */
.wpcu-more-tile {
	flex: 1 1 480px;
	max-width: 550px;
	min-height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #faf8f5;
	border: 1px dashed #ddd;
	border-radius: 8px;
}
.wpcu-more-tile a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 200px;
	padding: 16px;
}
.wpcu-more-tile__label {
	font-family: 'Poppins', Arial, sans-serif;
	font-weight: 600;
	font-size: 18px;
	color: var(--tgs-accent);
	text-align: center;
	line-height: 1.4;
}
.wpcu-more-tile:hover { background: #fff2ea; }
.wpcu-carousel-nav { display: none; }

/* Instagram feed thumbnails point at Instagram's own signed CDN URLs from
   when this was captured (2022-2023); those tokens are long expired. The
   inline script below swaps each tile's background-image to a local photo
   instead, so this just makes sure the play/carousel icon overlays (meant
   for real Instagram video/carousel posts) don't show on top of them. */
#sb_instagram #sbi_images .sbi_had_error .sbi_playbtn,
#sb_instagram #sbi_images .sbi_had_error .sbi_lightbox_carousel_icon { display: none !important; }

/* Consistent product image box everywhere on the page: source photos have
   wildly different native aspect ratios (real photos vs. placeholder tiles
   vs. banner crops), so force a uniform 4:3 crop instead of letting each
   card be whatever height its own image happens to be. */
.products .product img,
.wpcu-product__img img,
.vc_single_image-img,
.wpb_single_image img {
	aspect-ratio: 4 / 3;
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
}

/* Instagram feed block */
.sbi_header_text { font-weight: 600; }

/* Footer */
.footer_wrap {
	background: #222;
	color: #ccc;
	margin-top: 60px;
	padding: 40px 0;
}
.footer_wrap .widget_title {
	font-family: 'Poppins', Arial, sans-serif;
	color: #fff;
	margin-bottom: 14px;
}
.footer_wrap .columns_wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 30px;
}
.footer_wrap .column-1_3 { flex: 1 1 260px; }
.footer_wrap ul { list-style: none; margin: 0; padding: 0; }
.footer_wrap ul li { margin-bottom: 8px; }
.footer_wrap a, .footer_wrap a:visited { color: #cccccc; }
.footer_wrap a:hover { color: var(--tgs-accent); }
.footer_wrap .betaalmethodenfooter {
	display: block;
	max-width: 260px;
	width: 100%;
	margin: 28px auto 0;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 6px;
}

.copyright_wrap {
	background: #1a1a1a;
	color: #888;
	font-size: 13px;
	padding: 16px 0;
}

.scroll_to_top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--tgs-accent);
	color: #fff;
	text-align: center;
	line-height: 40px;
	z-index: 100;
}