/*
 * Content-page layout — restore emoza's 1140px centred column.
 *
 * hf-base.css deliberately full-bleeds .container.content-wrapper and zeroes the
 * .row.main-row gutter to reproduce the original's SHOP ARCHIVE, which the
 * original serves through an Elementor archive template. Every OTHER page type
 * on the original — single product, account, cart, checkout, and all content
 * pages — keeps emoza's native 1140px column. Those are exactly the pages
 * WITHOUT the `archive` body class, so re-constrain there and leave the archives
 * (home / shop / product categories, all `.archive`) full-bleed as hf-base sets.
 *
 * Measured on the original: container max-width 1140, margin 80 top / 120 bottom,
 * 15px side padding; the Bootstrap row keeps its -15px gutter (the account and
 * cart grids' negative margins depend on it).
 */
/*
 * Page background. The original is #212121 on the shop-flow pages (home, shop,
 * category, product, cart, account) but pure black on the content pages and the
 * checkout — there the Elementor page background (or the absence of
 * custom-background on checkout) resolves to #000. The rebuild is #212121
 * everywhere via custom-background, so force black where the original is black:
 * content pages (a `page` body class without `woocommerce-page`) and checkout.
 */
body.page:not(.woocommerce-page),
body.woocommerce-checkout {
	background-color: #000;
}

body:not(.archive) .container.content-wrapper {
	max-width: 1140px;
	margin: 80px auto 120px;
	padding-left: 15px;
	padding-right: 15px;
}

body:not(.archive) .row.main-row {
	margin-left: -15px;
	margin-right: -15px;
}

/*
 * The original's account page content was built in Elementor, so its
 * [woocommerce_my_account] output sits inside an Elementor container with 10px
 * side padding, insetting the Login/Register grid. This build renders the
 * shortcode straight into .entry-content, so replicate that 10px inset here.
 */
body.woocommerce-account .entry-content {
	/* The original wraps the account shortcode in an Elementor text-editor widget,
	   which (a) sets the body text to Roboto — headings/inputs stay system via
	   emoza's element rules — and (b) insets it 10px horizontally / 30px above the
	   Login/Register columns. Reproduce both. */
	font-family: "Roboto", sans-serif;
	/* 10px inset all round; the account grid already carries ~20px of its own top
	   margin, so 10px here nets the original's 30px title-to-columns gap. */
	padding: 10px;
}

/*
 * Content pages (About, FAQ, Contact, Wholesale, Privacy, Refund) open straight
 * into their content on the original — the emoza page-title H1 is hidden
 * (display:none), the way Elementor's "hide title" does it. The WooCommerce pages
 * (account / cart / checkout) and the shop keep their titles. Content pages are
 * the ones with a `page` body class but not `woocommerce-page`; hide the title
 * there so the header collapses exactly as it does on the original.
 */
body.page:not(.woocommerce-page) .page-title {
	display: none;
}

/*
 * Content-page typography — the original builds these in Elementor with the kit's
 * fonts. Body copy is Roboto; the "INSIGHT — X" intro line (always the first
 * paragraph) is Montserrat 20px. Headings on these pages are the FAQ section
 * headings, handled below; everything else is a bold paragraph, so Roboto covers
 * it. (my-account has its own Roboto rule; product/shop-flow stay system.)
 */
body.page:not(.woocommerce-page) .entry-content {
	font-family: "Roboto", sans-serif;
	/* The original's copy sits in an Elementor text widget inset from the column by
	   a CONSTANT 50px each side (measured on the original: the inner container carries
	   padding:50px, applied at every breakpoint) — NOT a max-width. Reproduce it with
	   box-sizing padding so the inset also holds at tablet/mobile, where a max-width
	   of 1010 would stop constraining and the copy would run full-width. Verified vs
	   the original at 1512 (1010@x251), 1000 (870@x65) and 390 (260@x65). FAQ and
	   Wholesale use their own inset widths below. */
	box-sizing: border-box;
	padding-left: 50px;
	padding-right: 50px;
}
body.page:not(.woocommerce-page) .entry-content > p:first-of-type {
	font-family: "Montserrat", sans-serif;
	font-size: 20px;
	/* the "INSIGHT — X" intro line is Montserrat Light on the original */
	font-weight: 300;
}

/* Wholesale is the one content page the original centres, inset a wider 60px each
   side (990 within the 1110 column at desktop; verified 850@x75 at 1000). */
body.page-id-42:not(.woocommerce-page) .entry-content {
	text-align: center;
	padding-left: 60px;
	padding-right: 60px;
}

/*
 * FAQ page (page 40): the original lays the two sections (MOST COMMON FAQ /
 * Returns and Exchanges) side by side as an Elementor nested-accordion — small
 * 20px section headings and bordered accordion titles. The rebuild uses core
 * columns + details blocks; style them to match.
 */
/* The two-column accordion is inset a narrower 20px each side (1070 within the
   1110 column at desktop; verified block 930@x35 at 1000). */
body.page-id-40:not(.woocommerce-page) .entry-content {
	padding-left: 20px;
	padding-right: 20px;
}
body.page-id-40 .wp-block-columns {
	gap: 20px;
	margin-top: 30px;
}
body.page-id-40 .wp-block-column > .wp-block-heading {
	font-family: "Roboto", sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0;
}
body.page-id-40 .wp-block-details {
	margin: 0;
}
body.page-id-40 .wp-block-details > summary {
	border: 1px solid #d5d8dc;
	padding: 10px;
	/* accordion titles are system on the original, not the Roboto content default */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #ffffff;
	list-style: none;
	cursor: pointer;
}
body.page-id-40 .wp-block-details > summary::-webkit-details-marker {
	display: none;
}
body.page-id-40 .wp-block-details > summary::marker {
	content: "";
}
body.page-id-40 .wp-block-details p {
	/* accordion answers are ABeeZee on the original */
	font-family: "ABeeZee", sans-serif;
	padding: 10px;
	margin: 0;
}