/*
Theme Name:  Brands International (Divi 5)
Description: Child theme of Divi 5 for brands.com.mt. Holds only what Divi cannot store as a setting: the display
             font stack (system fonts, so no web-font download) and the base type rhythm. Colours, sizes and
             spacing are Divi global variables and presets (Divi → Theme Builder / Visual Builder → Variables).
Template:    Divi
Version:     0.1.1
Author:      Brands International Ltd
Text Domain: brands-divi5
*/

:root {
	--bi-font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
	--bi-font-text: Jost, system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	background-color: var(--gcid-bi-white, #fff);
}

/* Page gutters from the concept: content up to 1280 px with 24–80 px side margins. Divi 5 sizes rows through these
   variables (default 80 % / 1080 px); html:root outranks Divi's :root. A row's own width setting still wins. */
html:root {
	--content-width: calc(100% - 2 * clamp(24px, 5vw, 80px));
	--content-max-width: 1280px;
}

/* Card titles on phones (user, 2026-11-02): the "Type · Card title on phones" variable (22 px), below the 28 px section
   headings. Desktop keeps "Type · Card title" (26 px). The second rule also covers Home's larger featured card. */
@media (max-width: 767px) {
	html:root {
		--gvid-bi-h3: var(--gvid-bi-h3-phone, 22px);
	}
	#page-container .preset--module--divi-text--bi-card-title h3 {
		font-size: var(--gvid-bi-h3);
	}
}

/* Headings use the display stack unless a module picks another font in the builder (module CSS is more specific). */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--bi-font-display);
	font-weight: 400;
	color: var(--gcid-bi-ink, #231F20);
	padding-bottom: 0;
}

/* Vertical rhythm in page content (not the header or footer). Divi adds 2 % padding to every row and 2.75 % below
   every module on top of the section padding, which left ~264 px between sections and ~67 px between an eyebrow, its
   heading and the content. Sections keep their padding (the --gvid-bi-section variable); rows add none; blocks are
   spaced 24 px apart, an eyebrow 12 px above its heading, a heading 32 px above its content, card parts 12 px.
   #page-container outranks Divi's custom-post-type rules (.et-db #et-boc .et-l …); a module's own margin-top
   (set in its layout) still applies. */
#page-container :is(.et-l--body, .et-l--post) .et_pb_section > .et_pb_row.et_block_row {
	padding-top: 0;
	padding-bottom: 0;
}
#page-container :is(.et-l--body, .et-l--post) .et_pb_section > .et_pb_row.et_block_row + .et_pb_row.et_block_row {
	margin-top: var(--gvid-bi-gap, 32px);
}
#page-container :is(.et-l--body, .et-l--post) .et_pb_column.et_block_column > .et_pb_module.et_block_module:not(:last-child):not(.bi-loop-item) {
	margin-bottom: 24px;
}
#page-container :is(.et-l--body, .et-l--post) .et_pb_column.et_block_column > .et_pb_module.preset--module--divi-text--bi-eyebrow:not(:last-child) {
	margin-bottom: 12px;
}
#page-container :is(.et-l--body, .et-l--post) .et_pb_column.et_block_column > .et_pb_module.preset--module--divi-text--bi-heading:not(:last-child) {
	margin-bottom: 32px;
}
#page-container :is(.et-l--body, .et-l--post) .et_pb_column .et_pb_group.et_pb_module > .et_pb_module.et_block_module:not(:last-child) {
	margin-bottom: 12px;
}
/* Card grids (a column holding loop cards is a grid with a 32 px gap): the gap alone spaces the eyebrow, heading and
   cards, so their own margins go (the eyebrow pulls back to 12 px below it). */
#page-container :is(.et-l--body, .et-l--post) .et_pb_column.et_block_column:has(> .bi-loop-item) > .et_pb_module.et_block_module:not(:last-child),
#page-container :is(.et-l--body, .et-l--post) .et_pb_column.et_block_column:has(> .bi-loop-item) > .bi-loop-item.et_pb_module:not(:last-child) {
	margin-bottom: 0; /* loop cards too, or every card but the last is shorter than its grid row (the Tribu logo tile) */
}
#page-container :is(.et-l--body, .et-l--post) .et_pb_column.et_block_column:has(> .bi-loop-item) > .et_pb_text.preset--module--divi-text--bi-eyebrow:not(:last-child) {
	margin-bottom: calc(12px - var(--gvid-bi-gap, 32px));
}

/* Neighbouring sections with the same background read as one band, so the second drops its top padding: the gap is
   one section padding, not two. Also from the page title area (Theme Builder) into the page's own first section,
   which Divi nests inside a post-content section. */
#page-container .et_pb_section[class*="bi-section-linen"] + .et_pb_section[class*="bi-section-linen"],
#page-container .et_pb_section[class*="bi-section-white"] + .et_pb_section[class*="bi-section-white"],
#page-container .et_pb_section[class*="bi-section-sand"] + .et_pb_section[class*="bi-section-sand"],
#page-container .et_pb_section[class*="bi-section-ink"] + .et_pb_section[class*="bi-section-ink"],
#page-container .et_pb_section[class*="bi-section-slate"] + .et_pb_section[class*="bi-section-slate"],
#page-container .et_pb_section[class*="bi-section-linen"] + .et_pb_section .et-l--post .et_builder_inner_content > .et_pb_section[class*="bi-section-linen"]:first-child,
#page-container .et_pb_section[class*="bi-section-white"] + .et_pb_section .et-l--post .et_builder_inner_content > .et_pb_section[class*="bi-section-white"]:first-child,
#page-container .et_pb_section[class*="bi-section-sand"] + .et_pb_section .et-l--post .et_builder_inner_content > .et_pb_section[class*="bi-section-sand"]:first-child {
	padding-top: 0 !important;
}
/* The section around the page's own content takes the colour of the first section inside it, so no hairline of
   white shows where the title area meets the content (their edge can fall on a fraction of a pixel). */
#page-container .et_pb_section:has(> .et_pb_fullwidth_post_content .et_builder_inner_content > .et_pb_section[class*="bi-section-linen"]:first-child) {
	background-color: var(--gcid-bi-linen, #F5F1EA) !important;
}
#page-container .et_pb_section:has(> .et_pb_fullwidth_post_content .et_builder_inner_content > .et_pb_section[class*="bi-section-sand"]:first-child) {
	background-color: var(--gcid-bi-sand, #E8E0D3) !important;
}

/* A section given the other background so it doesn't match the one above (includes/loops.php): Divi's stylesheet
   for the page may hold only the presets the layout first rendered, so the colour is set here too. */
#page-container .et_pb_section.bi-recoloured[class*="bi-section-white"] {
	background-color: var(--gcid-bi-white, #FFFFFF) !important;
}
#page-container .et_pb_section.bi-recoloured[class*="bi-section-linen"] {
	background-color: var(--gcid-bi-linen, #F5F1EA) !important;
}

/* Gallery tiles on hover: a light ink tint with a white zoom icon instead of Divi's 90 % white wash, so the photo
   stays visible (user, 2026-11-08). */
#page-container .et_pb_gallery .et_pb_gallery_image .et_overlay {
	background-color: rgba(35, 31, 32, 0.22) !important;
	border-color: transparent !important;
}
#page-container .et_pb_gallery .et_pb_gallery_image .et_overlay::before {
	color: #FFFFFF !important;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

/* Buttons: only colours animate. Divi prints the button presets near the end of the page, so a button first appears
   at Divi's default size; animating the size made pairs of buttons wrap onto two lines while the page loaded. */
#page-container .et_pb_button {
	transition-property: background-color, color, border-color, box-shadow !important;
}

/* Home banner (user, 2026-11-01): lower, so the text panel fits on a full screen, and the Image modules in the column
   fade into each other. Timing is in brands-core assets/hero-fader.js. In the builder the photos stay one under the other. */
.bi-hero-fader .et_pb_image,
.bi-hero-fader .et_pb_image_wrap {
	display: block;
	width: 100%;
}
.bi-hero-fader img {
	display: block;
	width: 100%;
	height: clamp(380px, min(48vw, 68vh), 650px);
	object-fit: cover;
	object-position: center;
}
.bi-fader-on .bi-hero-fader {
	display: grid !important;
}
.bi-fader-on .bi-hero-fader > .et_pb_module {
	grid-area: 1 / 1;
	margin: 0 !important;
	opacity: 0;
	z-index: 0;
}
.bi-fader-on .bi-hero-fader > .et_pb_module:first-child,
.bi-fader-on .bi-hero-fader.is-running > .is-previous {
	opacity: 1;
}
.bi-fader-on .bi-hero-fader.is-running > .et_pb_module:first-child:not(.is-active, .is-previous) {
	opacity: 0;
}
.bi-fader-on .bi-hero-fader.is-running > .is-previous {
	z-index: 1;
}
.bi-fader-on .bi-hero-fader.is-running > .is-active {
	opacity: 1;
	z-index: 2;
	transition: opacity 1.6s ease-in-out;
}

/* Phones: small stand-alone links get room to tap, 24 px or more (audit, 2026-11-01). */
@media (max-width: 767px) {
	.bi-fact-link,
	.bi-spec-value a,
	.pagination a {
		display: inline-block;
		padding-block: 6px;
	}
}

/* Two or more buttons in a row (Home hero, brand pages, thank-you pages): side by side on PC and tablet, one under
   the other at full width on mobile. */
@media (min-width: 768px) {
	/* Floated rather than inline, so no space character is added between them (it pushed the second button onto a
	   new line when the pair only just fitted); the column contains them and what follows starts below. */
	#page-container :is(.et-l--body, .et-l--post) .et_pb_column:has(> .et_pb_button_module_wrapper + .et_pb_button_module_wrapper) {
		display: flow-root;
	}
	#page-container :is(.et-l--body, .et-l--post) .et_pb_column > .et_pb_button_module_wrapper:has(+ .et_pb_button_module_wrapper),
	#page-container :is(.et-l--body, .et-l--post) .et_pb_column > .et_pb_button_module_wrapper + .et_pb_button_module_wrapper {
		float: left;
		display: block !important;
		margin-right: 12px !important;
	}
	#page-container :is(.et-l--body, .et-l--post) .et_pb_column > .et_pb_button_module_wrapper + .et_pb_button_module_wrapper ~ :not(.et_pb_button_module_wrapper) {
		clear: both;
	}
	#page-container :is(.et-l--body, .et-l--post) .et_pb_button_module_wrapper .et_pb_button {
		white-space: nowrap;
	}
}
@media (max-width: 767px) {
	#page-container :is(.et-l--body, .et-l--post) .et_pb_column > .et_pb_button_module_wrapper:has(+ .et_pb_button_module_wrapper),
	#page-container :is(.et-l--body, .et-l--post) .et_pb_column > .et_pb_button_module_wrapper + .et_pb_button_module_wrapper {
		display: block !important;
		margin: 0 0 12px !important;
	}
	#page-container :is(.et-l--body, .et-l--post) .et_pb_column > .et_pb_button_module_wrapper + .et_pb_button_module_wrapper:last-child {
		margin-bottom: 0 !important;
	}
	#page-container :is(.et-l--body, .et-l--post) .et_pb_column > :is(.et_pb_button_module_wrapper:has(+ .et_pb_button_module_wrapper), .et_pb_button_module_wrapper + .et_pb_button_module_wrapper) .et_pb_button {
		display: block;
		width: 100%;
		text-align: center;
	}
}

/* A heading that opens a text block (e.g. job descriptions) keeps its space above only between paragraphs. */
#page-container .et_pb_text_inner > :first-child,
#page-container .et_pb_text_inner > div:first-child > :first-child {
	margin-top: 0;
}

/* Links in running text: copper deep (4.5:1+ on linen and white); copper stays for lines and accents. */
.et_pb_text a {
	color: var(--gcid-bi-copper-deep, #7E5238);
	text-underline-offset: 0.2em;
}

/* Products mega menu (user, 2026-10-26; items generated by brands-core/includes/menus.php for the `bi-mega` menu item).
   Desktop: a four-column panel under the header, hanging from the header row (centred menu from 1366 px: from the
   menu, centred on the page). Phones: no submenu, Products is a plain link.
   Selectors start "#page-container … :not(#bi-mega)" (two IDs; #bi-mega matches nothing): on Theme Builder body pages
   (single offers, products, categories) Divi repeats its menu rules with ".et-db #et-boc" in front — sub-menus 240 px
   wide, items position: relative — and one ID was not enough to outrank them (2026-10-26: the panel collapsed on
   single offers). */
@media (min-width: 981px) {
	#page-container .et-l--header:not(#bi-mega) .et-menu li.bi-mega {
		position: static;
	}
	#page-container .et-l--header:not(#bi-mega) .et-menu li.bi-mega > ul.sub-menu {
		top: 100%;
		left: 0;
		right: 0;
		width: auto;
		display: block;
		column-count: 4; /* flowing columns: a long category (sub-categories) does not stretch a whole row */
		column-gap: 40px;
		padding: 32px 40px 28px;
		background: var(--gcid-bi-white, #FFFFFF);
		border-top: 2px solid var(--gcid-bi-copper, #96694C);
		box-shadow: 0 18px 40px rgba(35, 31, 32, 0.12);
	}
	/* No hover "bridge" above the panel (removed 2026-11-02): the panel starts where the menu row ends, and the 32 px strip
	   lay over the menu itself, so the lower half of Products and Spaces could not be clicked and the open panel stayed
	   open while the pointer moved on to Services and the other items. */
	#page-container .et-l--header:not(#bi-mega) .et-menu li.bi-mega > ul.sub-menu > li {
		display: block;
		width: auto;
		padding: 0;
		break-inside: avoid;
	}
	/* Sizes and weights are !important: on Theme Builder body pages (product, category) Divi prints the header menu's
	   font rule again with #et-boc in front (500, 14px for every menu link), which outranks these selectors. */
	#page-container .et-l--header:not(#bi-mega) .et-menu li.bi-mega li > a {
		width: auto;
		padding: 7px 0;
		font-size: 15px !important;
		font-weight: 400 !important;
		line-height: 1.35;
		color: var(--gcid-bi-ink, #231F20);
	}
	#page-container .et-l--header:not(#bi-mega) .et-menu li.bi-mega li > a:hover {
		color: var(--gcid-bi-copper-deep, #7E5238);
		opacity: 1;
	}
	#page-container .et-l--header:not(#bi-mega) .et-menu li.bi-mega li.bi-mega-category > a {
		font-weight: 600 !important;
	}
	/* Sub-categories always listed under their category (no second fly-out). Visibility follows the panel: forcing it
	   "visible" left the hidden panel's sub-category lists hoverable, so passing over the page title and banner opened
	   the menu. */
	#page-container .et-l--header:not(#bi-mega) .et-menu li.bi-mega ul ul {
		position: static !important;
		visibility: inherit !important;
		opacity: 1 !important;
		display: block !important;
		width: auto !important;
		padding: 0 0 6px 14px !important;
		border: 0 !important;
		box-shadow: none !important;
		background: transparent !important;
		transform: none !important;
	}
	#page-container .et-l--header:not(#bi-mega) .et-menu li.bi-mega ul ul li {
		/* One per line: Divi makes them inline blocks, so short names (Lighting, Rugs) sat side by side. */
		display: block;
		width: auto;
	}
	#page-container .et-l--header:not(#bi-mega) .et-menu li.bi-mega ul ul a {
		font-weight: 400 !important;
		font-size: 14px !important;
		padding: 4px 0;
		color: var(--gcid-bi-slate, #35414C);
	}
	#page-container .et-l--header:not(#bi-mega) .et-menu li.bi-mega li.menu-item-has-children > a::after {
		display: none;
	}
	#page-container .et-l--header:not(#bi-mega) .et-menu li.bi-mega > ul.sub-menu > li.bi-mega-all {
		column-span: all;
		margin-top: 14px;
		padding-top: 16px;
		border-top: 1px solid var(--gcid-bi-sand, #E8E0D3);
	}
	#page-container .et-l--header:not(#bi-mega) .et-menu li.bi-mega > ul.sub-menu > li.bi-mega-all > a {
		font-weight: 600 !important;
		color: var(--gcid-bi-copper-deep, #7E5238);
	}
	/* Products by heading (user, 2026-11-09): Furniture / Outdoor / Floors, walls & ceilings / Lighting & décor as
	   small labels (not links), the main categories under them, then "Shop by room" and "All products" on one line. */
	#page-container .et-l--header:not(#bi-mega) .et-menu li.bi-mega li.bi-mega-heading > a {
		padding: 0 0 8px;
		font-size: 12px !important;
		font-weight: 600 !important;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--gcid-bi-copper-deep, #7E5238);
		cursor: default;
	}
	#page-container .et-l--header:not(#bi-mega) .et-menu li.bi-mega li.bi-mega-heading > ul {
		padding: 0 0 18px !important;
	}
	#page-container .et-l--header:not(#bi-mega) .et-menu li.bi-mega li.bi-mega-heading > ul a {
		font-size: 15px !important;
		padding: 5px 0;
		color: var(--gcid-bi-ink, #231F20);
	}
	#page-container .et-l--header:not(#bi-mega) .et-menu li.bi-mega li.bi-mega-heading > ul a:hover {
		color: var(--gcid-bi-copper-deep, #7E5238);
	}
	/* "Browse by room" and "All products" on one line (user, 2026-11-09): All products is a child item of Browse by room. */
	#page-container .et-l--header:not(#bi-mega) .et-menu li.bi-mega > ul.sub-menu > li.bi-mega-rooms {
		display: flex;
		align-items: baseline;
		gap: 40px;
	}
	#page-container .et-l--header:not(#bi-mega) .et-menu li.bi-mega li.bi-mega-rooms > a::after {
		display: none;
	}
	#page-container .et-l--header:not(#bi-mega) .et-menu li.bi-mega li.bi-mega-rooms > ul.sub-menu {
		position: static;
		display: block;
		width: auto;
		margin: 0;
		padding: 0 !important;
		border: 0;
		box-shadow: none;
		background: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}
	#page-container .et-l--header:not(#bi-mega) .et-menu li.bi-mega li.bi-mega-all-products > a {
		padding: 0;
		font-size: inherit !important;
		font-weight: 600 !important;
		color: var(--gcid-bi-copper-deep, #7E5238);
	}
}
@media (min-width: 1366px) {
	/* The centred menu box is the positioning box here: the panel spans the content width, centred on the page. */
	#page-container .et-l--header:not(#bi-mega) .et-menu li.bi-mega > ul.sub-menu {
		left: 50%;
		right: auto;
		width: min(1120px, calc(100vw - 160px));
		transform: translateX(-50%);
	}
}
/* Phone menu: Products is a plain link to Our Products. */
.et-l--header .et_mobile_menu li.bi-mega > ul,
.et-l--header .et_mobile_menu li.bi-mega > .mobile-toggle,
.et-l--header .et_mobile_menu li.bi-mega > a > .mobile-toggle {
	display: none !important;
}
/* The current section in the main menu (design concept): copper text with a fine copper underline. Pages get
   current-menu-item from WordPress; brand, category, product, project, article and offer pages get
   current-menu-ancestor from brands-core (includes/menus.php). Desktop menu only. */
@media (min-width: 981px) {
	.et-l--header .et-menu > li:is(.current-menu-item, .current-menu-ancestor, .current_page_item, .current_page_ancestor) > a {
		color: var(--gcid-bi-copper-deep, #7E5238) !important;
		text-decoration: underline;
		text-decoration-color: var(--gcid-bi-copper, #96694C);
		text-decoration-thickness: 1px;
		text-underline-offset: 8px;
	}
}
/* Spaces mega menu (user, 2026-10-31): the Products panel's style, in two columns: Residential and Commercial. */
@media (min-width: 981px) {
	#page-container .et-l--header:not(#bi-mega) .et-menu li.bi-mega.bi-mega-spaces > ul.sub-menu {
		column-count: 2;
	}
}
@media (min-width: 1366px) {
	#page-container .et-l--header:not(#bi-mega) .et-menu li.bi-mega.bi-mega-spaces > ul.sub-menu {
		width: min(640px, calc(100vw - 160px));
	}
}

/* Sitemap page ([bi_sitemap], user, 2026-11-02): one tree. Main pages stand out, a fine line marks each deeper level,
   and the long lists of brands and projects fold. */
.bi-sitemap ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.bi-sitemap li {
	margin: 0;
	padding: 4px 0;
}
.bi-sitemap ul ul {
	margin: 4px 0 4px 4px;
	padding-left: 20px;
	border-left: 1px solid rgba(126, 82, 56, .3);
}
.bi-sitemap > ul > li {
	padding: 14px 0;
}
.bi-sitemap > ul > li > a {
	font-weight: 600;
}
.bi-sitemap summary {
	cursor: pointer;
	margin: 4px 0 4px 4px;
	padding-left: 20px;
	font-size: .9em;
}

/* Footer logo: this is its only size rule, for both footers on every template (user, 2026-10-31; no more than 300 px).
   The layouts used to set 150 / 120 px, which only won on Theme Builder pages with Divi's .et-db #et-boc prefix (brand
   and category pages); elsewhere Divi's "width: auto" for SVG images won and the logo filled the column (376 px).
   !important because that Divi rule also exists with the prefix. */
.et-l--footer .et_pb_image img {
	width: 260px !important;
	max-width: 100%;
	height: auto;
}
@media (max-width: 767px) {
	.et-l--footer .et_pb_image img {
		width: 200px !important;
	}
}

/* Collections cards (brand and category pages, user 10 Nov 2026): compact tiles, all shown, so a brand or category
   with many collections (Cornices: 13) doesn't push its products down the page. Picture and name only: 6 a row from
   981 px, 4 on tablets, 2 on phones. */
#page-container .et_pb_column.et_block_column:has(> .bi-loop-term-collections) {
	grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
	column-gap: 20px !important;
	row-gap: 24px !important;
}
#page-container .bi-loop-term-collections > .et_pb_text:not(.preset--module--divi-text--bi-card-title) {
	display: none;
}
/* The picture's own width: on brand pages the layout's "width: 100%" didn't reach it and the lazy image stayed 0 px,
   so tiles showed only their names (10 Nov 2026). */
#page-container .bi-loop-term-collections .et_pb_image,
#page-container .bi-loop-term-collections .et_pb_image_wrap {
	display: block;
	width: 100%;
}
#page-container .bi-loop-term-collections img {
	display: block;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: cover;
}
#page-container .bi-loop-term-collections img[data-bi-cutout] {
	object-fit: contain;
}
#page-container .bi-loop-term-collections h3 {
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
}
#page-container .bi-loop-term-collections > .et_pb_module:not(:last-child) {
	margin-bottom: 8px !important;
}
@media (max-width: 980px) {
	#page-container .et_pb_column.et_block_column:has(> .bi-loop-term-collections) {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}
@media (max-width: 767px) {
	#page-container .et_pb_column.et_block_column:has(> .bi-loop-term-collections) {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		column-gap: 16px !important;
	}
}

/* Brand pages: product cards 4 a row from 981 px (user, 10 Nov 2026; batches of 8 in brands-core products-more.php). */
@media (min-width: 981px) {
	body.tax-brand #page-container .et_pb_column.et_block_column:has(> .bi-loop-products) {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
}

/* Product page: "More from {category}" follows "More from the … collection" on the same white, so the band rule above
   took its top padding and the heading sat on the dividing line (user, 10 Nov 2026). */
#page-container .et_pb_section[class*="bi-section-white"] + .et_pb_section[class*="bi-section-white"]:has(.bi-loop-related-category) {
	padding-top: 48px !important;
}