/*
 Theme Name:  IDPLR
 Description: idplr.com theme for Divi 5. The design lives in Divi; this theme adds the brand fonts and the CSS for MemberShops pages.
 Author:      MemberShops
 Template:    Divi
 Version:     2.1.11
 Requires at least: 6.6
 Requires PHP: 8.1
 Text Domain: idplr
*/

/*
 * Task 194 (idplr rebuild, 29 Oct 2026). Rules: no !important, no full addresses, Divi does the layout and colours.
 * Watch out: the font names must match IdplrTheme::FONTS, which lists them in Divi's font picker.
 */

/* Variable fonts, Latin and Latin Extended: one file per family covers its weight range, so nothing is faked bold. */
@font-face {
	font-family: "Bricolage Grotesque";
	src: url("fonts/BricolageGrotesque-SemiBold-Bold.woff2") format("woff2");
	font-weight: 600 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Instrument Sans";
	src: url("fonts/InstrumentSans-Regular-SemiBold.woff2") format("woff2");
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
}

/*
 * Luminance bridge: the MemberShops pages still use Luminance's stylesheet (loaded before this file) until each one
 * gets its IDPLR design. Its colour and font variables are set to the IDPLR palette here (same values as the Divi
 * global colours "IDPLR · ..."). html:root is one step more specific than Luminance's :root, so no !important is needed.
 */
html:root {
	--shop-font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--shop-theme-color-1: #D9382F;
	--shop-theme-color-1-dark: #BF2E26;
	--shop-theme-color-2: #C42F27;
	--shop-theme-gray-1: #E4E4DF;
	--shop-theme-gray-2: #F6F6F4;
	--shop-theme-color-text-dark: #1C1C1F;
}

/*
 * MemberShops design tokens (--ms-*), mapped to the IDPLR Divi variables and colours.
 * Added: 30 Oct 2026 (product details design, Goran). AI-written note, verify against the code before relying on it.
 * Why: MemberShops layouts (e.g. "Modern") and the Luminance bridge read only these generic names, each with a fallback,
 * so the same layout works in any shop theme: a theme that sets them gets its own look, a theme that does not keeps
 * the old look. Change sizes and colours in design/foundation/build_globals.py (applied to Divi > Variables) and
 * here: Divi prints a variable only on pages whose Divi content uses it, so each token carries the same value as its
 * fallback. build_globals.py stops when a fallback here differs from its value.
 */
html:root {
	--ms-h1: var(--gvid-idplr-h1, clamp(36px, 3.6vw, 50px));
	--ms-h1-line: 1.05;
	--ms-h2: var(--gvid-idplr-h2-content, clamp(26px, 2.6vw, 34px));
	--ms-h3: var(--gvid-idplr-h3, 21px);
	--ms-h4: var(--gvid-idplr-h4, 20px);
	--ms-heading-font: "Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;
	--ms-lead: var(--gvid-idplr-lead, 19px);
	--ms-text: var(--gcid-idplr-ink, #1C1C1F);
	--ms-text-soft: var(--gcid-idplr-body, #4E4E55);
	--ms-text-muted: var(--gcid-idplr-label, #6B6B72);
	--ms-accent: var(--gcid-idplr-red, #D9382F);
	--ms-accent-hover: var(--gcid-idplr-red-hover, #BF2E26);
	--ms-accent-text: var(--gcid-idplr-red-text, #C42F27);
	--ms-success: var(--gcid-idplr-green, #14804D);
	--ms-line: var(--gcid-idplr-line, #E4E4DF);
	--ms-line-strong: var(--gcid-idplr-line-strong, #D4D4CE);
	--ms-surface-soft: var(--gcid-idplr-light, #F6F6F4);
	--ms-surface-dark: var(--gcid-idplr-dark, #29292B);
	--ms-surface-ink: var(--gcid-idplr-ink, #1C1C1F);
	--ms-text-on-ink: #fff;
	--ms-text-on-dark: var(--gcid-idplr-text-on-dark, #DCDCE0);
	--ms-radius-button: var(--gvid-idplr-radius-button, 10px);
	--ms-radius-card: var(--gvid-idplr-radius-card, 16px);
	--ms-radius-panel: var(--gvid-idplr-radius-panel, 24px);
	--ms-button-case: none;
	--ms-button-size: 16px;
	--ms-price-size: clamp(42px, 3.6vw, 52px);
	--ms-price-color: var(--gcid-idplr-red-text, #C42F27);
	--ms-price-font: var(--ms-heading-font);
}

/*
 * Plain headings use the theme sizes on every page (Goran, 30 Oct 2026: "set up the defaults in the theme and use them
 * everywhere, override only when necessary"). AI-written note, verify against the code before relying on it.
 * Why plain selectors and not :where(): Divi sets h1-h4 sizes with plain selectors in an earlier stylesheet, so the
 * same specificity later in the page wins, while Divi modules and presets (more specific) keep their own sizes; the
 * homepage headings come from presets that read the same variables. h2 is the content size (26-34 px); the big 44 px
 * section headline is the Divi preset "IDPLR · Headings".
 */
h1 {
	font-size: var(--ms-h1);
	line-height: var(--ms-h1-line);
	letter-spacing: -0.025em;
}

h2 {
	font-size: var(--ms-h2);
	line-height: 1.12;
	letter-spacing: -0.01em;
}

h3 {
	font-size: var(--ms-h3);
	line-height: 1.25;
}

h4 {
	font-size: var(--ms-h4);
	line-height: 1.2;
}

/*
 * Breadcrumb bar above the product (Theme Builder product template, section class idplr-crumbs, filled by
 * [membershops-product-breadcrumb], plugin 1.9.7+). Added: 30 Oct 2026 (product details design). AI-written note,
 * verify against the code before relying on it. The plugin prints Back and its divider with the hidden attribute and
 * shows them only after a visit from this site.
 */
.idplr-crumbs {
	background-color: var(--ms-surface-soft);
	border-bottom: 1px solid var(--ms-line);
}

.plr-pub-shop-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	min-height: 52px;
	padding: 8px 0;
	color: var(--ms-text-soft);
	font-size: 0.853em;
	line-height: 1.4;
}

.plr-pub-shop-breadcrumb a {
	color: inherit;
	text-decoration: none;
}

.plr-pub-shop-breadcrumb a:hover,
.plr-pub-shop-breadcrumb a:focus-visible {
	color: var(--ms-accent-text);
	text-decoration: underline;
}

.plr-pub-shop-breadcrumb [hidden] {
	display: none;
}

.plr-pub-shop-breadcrumb .plr-pub-shop-breadcrumb-back {
	color: var(--ms-text);
	font-weight: 600;
}

.plr-pub-shop-breadcrumb-separator,
.plr-pub-shop-breadcrumb-divider {
	color: var(--ms-text-muted);
}

.plr-pub-shop-breadcrumb-current {
	color: var(--ms-text);
	font-weight: 500;
}

/*
 * Header wishlist and cart counters as a small badge on the icon (product details design, 30 Oct 2026).
 * AI-written note, verify against the code before relying on it. The MemberShops script writes the count as text
 * "(n)" (kept for other themes) and, from plugin 1.9.7, the bare number in data-count; the badge shows data-count and
 * hides the text. Without data-count (older plugin) the text stays as it was. The cart icon is a Divi icon module with
 * role="button", so it gets the pointer cursor the wishlist link has.
 */
.et-l--header .plr-pub-wishlist-counter,
.et-l--header .plr-pub-header-cart-button {
	position: relative;
	cursor: pointer;
}

/* The cart's number sits inside the icon glyph; the badge is placed on the whole button like the wishlist's. */
.et-l--header .plr-pub-header-cart-button .et_pb_icon_wrap,
.et-l--header .plr-pub-header-cart-button .et-pb-icon {
	position: static;
}

.et-l--header .plr-pub-wishlist-counter .wishlist-counter[data-count],
.et-l--header .plr-pub-header-cart-button span.plr-pub-cart-items-count[data-count] {
	position: absolute;
	top: 1px;
	right: 0;
	min-width: 17px;
	height: 17px;
	margin: 0;
	padding: 0 4px;
	border-radius: 9px;
	background-color: var(--ms-accent);
	font-size: 0;
	line-height: 17px;
	text-align: center;
	pointer-events: none;
}

.et-l--header .plr-pub-wishlist-counter .wishlist-counter[data-count]::after,
.et-l--header .plr-pub-header-cart-button span.plr-pub-cart-items-count[data-count]::after {
	content: attr(data-count);
	color: #fff;
	font-family: var(--shop-font-family);
	font-size: 11px;
	font-weight: 700;
}

/*
 * Listing and search pages: the list and its sidebar stack at 1100 px and narrower, sidebar below the list (product
 * listing design, 31 Oct 2026). AI-written note, verify against the code before relying on it.
 * Why: Divi stacks columns only at 980 px, so between 981 and 1100 px the list was squeezed beside the sidebar. The row
 * carries the class idplr-listing-cols (design/fixes/fix-listing-sidebar.php). The selectors repeat Divi's column
 * width rule (.et_pb_gutters2.et_block_row.et_pb_row > .et_pb_column_1_4) with one class more, so no !important.
 */
@media (max-width: 1100px) {
	.idplr-listing-cols.et_block_row.et_pb_row > .et_pb_column.et_pb_column_3_4,
	.idplr-listing-cols.et_block_row.et_pb_row > .et_pb_column.et_pb_column_1_4 {
		float: none;
		width: 100%;
		margin-right: 0;
	}
}

/*
 * Divi gives every heading 10 px of bottom padding. In the IDPLR layouts a heading that sits alone in a Text module
 * gets its spacing from the module gap instead, so that padding is removed there (task 194 step 2). Only on pages
 * with the new design (body class idplr-design, see IdplrTheme::add_body_class), so older pages keep their spacing.
 */
.idplr-design .et_pb_text_inner > :is(h1, h2, h3, h4, h5, h6):only-child {
	padding-bottom: 0;
}

/*
 * Phone and tablet menu (task 194 step 2), used with js/header-menu.js.
 * Why: Divi opens its mobile menu under the hamburger, as narrow as the icon's column; the header row and column carry
 * the class idplr-menu-holder so the menu spans the whole header instead. Divi forces every submenu to show
 * (display: block !important), so closed submenus fold to zero height rather than being hidden.
 */
@media (max-width: 980px) {
	.et-l--header .idplr-menu-holder,
	.et-l--header .idplr-mobile-menu,
	.et-l--header .idplr-mobile-menu .et_pb_menu_inner_container {
		position: static;
	}

	.et-l--header .idplr-mobile-menu .et_mobile_menu {
		max-height: calc(100vh - 140px);
		overflow-y: auto;
	}

	.et-l--header .idplr-mobile-menu .et_mobile_menu li.menu-item-has-children {
		position: relative;
	}

	.et-l--header .idplr-mobile-menu .et_mobile_menu li.menu-item-has-children > a {
		padding-right: 56px;
	}

	.et-l--header .idplr-mobile-menu .et_mobile_menu li.menu-item-has-children > .sub-menu {
		height: 0;
		overflow: hidden;
	}

	.et-l--header .idplr-mobile-menu .et_mobile_menu li.idplr-open > .sub-menu {
		height: auto;
	}

	.idplr-submenu-toggle {
		position: absolute;
		top: 0;
		right: 0;
		width: 48px;
		height: 44px;
		padding: 0;
		border: 0;
		background: transparent;
		color: inherit;
		cursor: pointer;
	}

	.idplr-submenu-toggle::after {
		content: "";
		display: block;
		width: 8px;
		height: 8px;
		margin: 0 auto;
		border-right: 2px solid #E8E8EA;
		border-bottom: 2px solid #E8E8EA;
		transform: translateY(-2px) rotate(45deg);
		transition: transform 0.2s;
	}

	.idplr-open > .idplr-submenu-toggle::after {
		transform: translateY(2px) rotate(-135deg);
	}
}

/*
 * Homepage "Shop by niche" (task 194, step 2b): js/niche-list.js folds the niche links behind "Browse all niches".
 * Why here: Divi has no fold setting for a Group. Watch out: idplr-folded is set only by the script, so the links
 * show when scripts are off. The chevron is the Link module's own icon, turned when the list is open.
 */
.idplr-design .idplr-niche-list.idplr-folded {
	display: none;
}

.idplr-design .idplr-niche-toggle .et-pb-icon {
	transition: transform 0.2s;
}

.idplr-design .idplr-niche-toggle[aria-expanded="true"] .et-pb-icon {
	transform: rotate(180deg);
}

/* Divi colours a Link icon on hover only while the icon itself is hovered; the button turns dark on hover. */
.idplr-design .idplr-niche-toggle:is(:hover, :focus-visible) .et-pb-icon {
	color: #fff;
}

/*
 * Desktop menu panels (task 194, step 2c). The menu and its panels are Divi modules in the IDPLR header; Divi has no
 * setting that opens a Group on hover, so these rules do it, as Goran's layout does: a panel shows while its item is
 * hovered or holds keyboard focus. js/header-menu.js adds aria-expanded and closes a panel on Esc (idplr-closed).
 * Watch out: only closed panels and panes get "display: none", so an open one keeps the layout set in Divi, and
 * hidden links are skipped by Tab. The menu bar shows on desktop only (Divi visibility setting).
 */
.idplr-design .idplr-nav {
	position: relative;
}

.idplr-design .idplr-mn-item {
	position: static;
	align-self: stretch;
}

.idplr-design .idplr-mn-item.idplr-mn-rel {
	position: relative;
}

.idplr-design .idplr-panel {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	box-shadow: 0 24px 48px rgba(0, 0, 0, 0.3);
}

/* Only closed panels get a display value; an open one keeps the flex or grid layout set in Divi. */
.idplr-design .idplr-mn-item:not(:hover, :focus-within) > .idplr-panel,
.idplr-design .idplr-mn-item.idplr-closed > .idplr-panel {
	display: none;
}

.idplr-design .idplr-nb:hover,
.idplr-design .idplr-mn-item:is(:hover, :focus-within):not(.idplr-closed) > .idplr-nb {
	border-bottom-color: #ff6b61;
}

.idplr-design .idplr-mn-item:is(:hover, :focus-within):not(.idplr-closed) > .idplr-nb .et_pb_link_inner,
.idplr-design .idplr-mn-item:is(:hover, :focus-within):not(.idplr-closed) > .idplr-nb .et-pb-icon {
	color: #fff;
}

.idplr-design .idplr-nb .et-pb-icon {
	transition: transform 0.2s;
}

.idplr-design .idplr-mn-item:is(:hover, :focus-within):not(.idplr-closed) > .idplr-nb .et-pb-icon {
	transform: rotate(180deg);
}

.idplr-design .idplr-nb:focus-visible {
	outline: 2px solid #ff8a80;
	outline-offset: -4px;
	border-radius: 6px;
}

/* White panels: the grey link icons turn dark on hover, as the link text turns red (Divi colours the icon only
   while the icon itself is hovered). */
.idplr-design .idplr-ml:is(:hover, :focus-visible) .et-pb-icon {
	color: #1c1c1f;
}

/*
 * Categories: the category under the pointer or keyboard focus shows its rights on the right; the first one shows by
 * default. js/header-menu.js marks the shown one (idplr-cat-current) and ignores categories the pointer crosses on its
 * way to the right side ("menu aim"). Without the script, plain hover does the same job.
 */
.idplr-design :is(.idplr-cat-list, .idplr-cat-tab) {
	position: static;
}

.idplr-design .idplr-cat-pane {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 400px;
}

/* Hidden at once (display, not a fade), so the red "View all" button of another category never lingers. */
.idplr-design .idplr-cat-list.idplr-cat-js > .idplr-cat-tab:not(.idplr-cat-current) > .idplr-cat-pane,
.idplr-design .idplr-cat-list:not(.idplr-cat-js) > .idplr-cat-tab:not(:first-child):not(:hover, :focus-within) > .idplr-cat-pane,
.idplr-design .idplr-cat-list:not(.idplr-cat-js):is(:hover, :focus-within) > .idplr-cat-tab:first-child:not(:hover, :focus-within) > .idplr-cat-pane {
	display: none;
}

.idplr-design .idplr-cat-btn {
	transition: background-color 0.15s;
}

.idplr-design .idplr-cat-list.idplr-cat-js > .idplr-cat-current > .idplr-cat-btn,
.idplr-design .idplr-cat-list:not(.idplr-cat-js) > .idplr-cat-tab:is(:hover, :focus-within) > .idplr-cat-btn,
.idplr-design .idplr-cat-list:not(.idplr-cat-js):not(:hover, :focus-within) > .idplr-cat-tab:first-child > .idplr-cat-btn {
	background-color: #3e3e42;
}

.idplr-design .idplr-cat-list.idplr-cat-js > .idplr-cat-current > .idplr-cat-btn :is(.et_pb_link_inner, .et-pb-icon, .idplr-cat-a),
.idplr-design .idplr-cat-list:not(.idplr-cat-js) > .idplr-cat-tab:is(:hover, :focus-within) > .idplr-cat-btn :is(.et_pb_link_inner, .et-pb-icon, .idplr-cat-a),
.idplr-design .idplr-cat-list:not(.idplr-cat-js):not(:hover, :focus-within) > .idplr-cat-tab:first-child > .idplr-cat-btn :is(.et_pb_link_inner, .et-pb-icon, .idplr-cat-a) {
	color: #fff;
}

/*
 * Homepage glow: a soft grey light behind the product collage (hero, and the "Start free" box).
 * Task 194 (idplr rebuild, step 3 follow-up, 29 Oct 2026). Why: Goran's layout puts a radial gradient centred on the
 * top edge of the picture; Divi's gradient can only start from a side or corner of the module, so this draws it on
 * the column or image with the class idplr-glow. Watch out: it sits behind the picture (isolation keeps it inside
 * the module's own layer); the hero section and the "Start free" box clip it with Divi's Overflow setting.
 */
.idplr-design .idplr-glow {
	isolation: isolate;
}

.idplr-design .idplr-glow::before {
	content: "";
	position: absolute;
	left: 55%;
	top: 0;
	z-index: -1;
	width: 150%;
	aspect-ratio: 1.5;
	transform: translate(-50%, -50%);
	background: radial-gradient(ellipse closest-side, #3a3a3d 0%, rgba(58, 58, 61, 0) 100%);
	pointer-events: none;
}

.idplr-design .idplr-glow.idplr-glow-box::before {
	left: 50%;
	background: radial-gradient(ellipse closest-side, #3e3e41 0%, rgba(62, 62, 65, 0) 100%);
}

/* Tablets and phones stack the hero: the glow centres on the picture, so it never tints the buttons above it. */
@media (max-width: 980px) {
	.idplr-design .idplr-glow::before {
		top: 50%;
	}
}

/*
 * Slim lists: menu-panel link lists and Bonuses buttons built as one Text module each.
 * Task 194 (idplr rebuild, speed work, Goran 29 Oct 2026 "Slim now, page cache at the end"). Why: every Divi module
 * costs about 1.4 ms to build on each page view, and the header's panels had about 130 of them (one per link). As
 * one Text module per list they look the same; these rules give them the spacing, colours and hover states that the
 * Link modules had in Divi. Watch out: design/home/build.py --modules builds the earlier one-module-per-link version
 * (these rules then do nothing). Colours use the IDPLR global colours with their values as fallback.
 */
.idplr-design :is(.idplr-mlist, .idplr-cat-links) {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: inherit;
}

.idplr-design :is(.idplr-mlist, .idplr-cat-links) li {
	margin: 0;
	padding: 0;
}

.idplr-design .idplr-mlist a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	border-radius: 10px;
	color: var(--gcid-idplr-ink, #1c1c1f);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	transition: background-color 0.15s, color 0.15s;
}

.idplr-design .idplr-mlist-sm a {
	padding: 10px 16px;
}

.idplr-design .idplr-mlist a:is(:hover, :focus-visible) {
	background-color: var(--gcid-idplr-light, #f6f6f4);
	color: var(--gcid-idplr-red-text, #c42f27);
}

.idplr-design .idplr-mlist .et-pb-icon {
	flex-shrink: 0;
	color: #7a7a80;
	font-size: 20px;
	transition: color 0.15s;
}

.idplr-design .idplr-mlist a:is(:hover, :focus-visible) .et-pb-icon {
	color: var(--gcid-idplr-ink, #1c1c1f);
}

/* The niche list reads top to bottom in two columns, as in the layout. */
.idplr-design .idplr-mlist-2col {
	columns: 2;
	column-gap: 12px;
}

.idplr-design .idplr-mlist-2col li {
	break-inside: avoid;
}

/*
 * Categories panel, slim build: each category row (link with its icon, then the product count) is one Text module.
 * Laid out like the Link + Text pair of the module version.
 */
.idplr-design .idplr-cat-btn.et_pb_text {
	justify-content: center;
}

.idplr-design .idplr-cat-btn .et_pb_text_inner {
	width: 100%;
}

.idplr-design .idplr-cat-row {
	display: flex;
	align-items: center;
	gap: 14px;
}

.idplr-design .idplr-cat-a {
	display: flex;
	flex-grow: 1;
	align-items: center;
	gap: 14px;
	color: var(--gcid-idplr-text-on-dark, #dcdce0);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.25;
}

.idplr-design .idplr-cat-a:is(:hover, :focus-visible) {
	color: #fff;
}

.idplr-design .idplr-cat-a .et-pb-icon {
	flex-shrink: 0;
	color: #9a9aa2;
	font-size: 20px;
}

.idplr-design .idplr-cat-count {
	color: #8e8e96;
	font-size: 12.5px;
	line-height: 1.2;
}

/* Categories panel: the rights of the shown category. */
.idplr-design .idplr-cat-links a {
	display: block;
	padding: 11px 0;
	border-bottom: 1px solid var(--gcid-idplr-dark-line, #45454a);
	color: var(--gcid-idplr-text-on-dark, #dcdce0);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	transition: color 0.15s;
}

.idplr-design .idplr-cat-links a:is(:hover, :focus-visible) {
	color: var(--gcid-idplr-coral-text, #ff7a70);
}

/* Bonuses cards: icon, title and text in one Text module, the buttons in a second one. */
.idplr-design .idplr-bonus-icon {
	padding-bottom: 8px;
	line-height: 1;
}

.idplr-design .idplr-bonus-icon .et-pb-icon {
	color: #5e5e65;
	font-size: 28px;
}

.idplr-design .idplr-bonus-icon + h4 {
	padding-bottom: 8px;
}

.idplr-design .idplr-bonus-btns {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-bottom: 0;
}

.idplr-design .idplr-bonus-btn {
	display: block;
	padding: 11px 16px 10px;
	border: 1px solid #c9c9c2;
	border-radius: 10px;
	background-color: #fff;
	color: var(--gcid-idplr-ink, #1c1c1f);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.idplr-design .idplr-bonus-btn:is(:hover, :focus-visible) {
	border-color: var(--gcid-idplr-ink, #1c1c1f);
	color: var(--gcid-idplr-ink, #1c1c1f);
}

.idplr-design .idplr-bonus-btn.idplr-bonus-btn-main {
	border-color: var(--gcid-idplr-ink, #1c1c1f);
	background-color: var(--gcid-idplr-ink, #1c1c1f);
	color: #fff;
}

.idplr-design .idplr-bonus-btn.idplr-bonus-btn-main:is(:hover, :focus-visible) {
	border-color: var(--gcid-idplr-red, #d9382f);
	background-color: var(--gcid-idplr-red, #d9382f);
	color: #fff;
}

/* Homepage "Shop by niche": the 20 niche links as pills in one Text module (they were 20 Button modules). */
.idplr-design .idplr-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding-bottom: 0;
}

.idplr-design .idplr-chip {
	display: inline-block;
	padding: 9px 18px;
	border: 1px solid #d4d4ce;
	border-radius: 999px;
	background-color: #fff;
	color: var(--gcid-idplr-ink, #1c1c1f);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.5;
	transition: border-color 0.2s, color 0.2s;
}

.idplr-design .idplr-chip:is(:hover, :focus-visible) {
	border-color: var(--gcid-idplr-red-text, #c42f27);
	color: var(--gcid-idplr-red-text, #c42f27);
}

/* Homepage "Make money with PLR": the ticked lists in one Text module each (they were Icon List modules). */
.idplr-design .idplr-checks {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.idplr-design .idplr-checks li {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	padding: 0;
	line-height: 1.5;
}

.idplr-design .idplr-checks .et-pb-icon {
	flex-shrink: 0;
	color: var(--gcid-idplr-red, #d9382f);
	font-size: 15px;
}

/*
 * Slim footer (build.py without --modules): promise titles, the legal links and the payment badges sit in single
 * Text modules instead of one module each. Same look as the module version.
 */
.idplr-design .idplr-promise-title {
	padding-bottom: 4px;
	color: #fff;
	font-family: "Bricolage Grotesque", var(--shop-font-family);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.3;
}

.idplr-design .idplr-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 20px;
}

.idplr-design .idplr-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.idplr-design .idplr-badges span {
	padding: 6px 12px;
	border: 1px solid var(--gcid-idplr-dark-line, #45454a);
	border-radius: 8px;
}

/*
 * Slim homepage (build.py without --modules): category counts and review cards use fewer Text modules. Same look as
 * the module version.
 */
.idplr-design .idplr-count .idplr-count-num {
	padding-bottom: 2px;
	color: #fff;
	font-family: "Bricolage Grotesque", var(--shop-font-family);
	font-size: 34px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.02em;
	transition: color 0.15s;
}

/* The whole tile reacts, as in the layout: the number turns coral and the arrow slides in. */
.idplr-design .idplr-count-tile:hover .idplr-count-num {
	color: #ff6b61;
}

.idplr-design .idplr-count-tile .et_pb_icon {
	opacity: 0.55;
	transform: translateX(-4px);
	transition: opacity 0.15s, transform 0.15s;
}

.idplr-design .idplr-count-tile:hover .et_pb_icon {
	opacity: 1;
	transform: none;
}

.idplr-design .idplr-stars {
	padding-bottom: 16px;
	color: #f2a516;
	font-size: 20px;
	line-height: 1;
	letter-spacing: 0.1em;
}

.idplr-design .idplr-review-name {
	padding-bottom: 2px;
	color: var(--gcid-idplr-ink, #1c1c1f);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

/*
 * Call-to-action button rows (hero, Start free, final call to action): full-width buttons on phones, as in the layout.
 * Divi 5.15.1's Button module has no width setting, so the theme does it. 767px is Divi's phone breakpoint.
 */
@media (max-width: 767px) {
	.idplr-design .idplr-cta-row :is(.et_pb_button_module_wrapper, .et_pb_button) {
		width: 100%;
		max-width: none; /* Divi caps buttons at max-content */
		text-align: center;
	}
}

/*
 * Listing and search page numbers on phones: smaller boxes, and a tidy wrap if they still do not fit. The Luminance
 * bridge gives each number 12px 16px padding, so 1 2 3 4 … 46 Next did not fit a phone.
 */
@media (max-width: 767px) {
	.idplr-design .plr-pub-listing-pagination .nav-links {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 4px;
	}

	.idplr-design .plr-pub-listing-pagination .page-numbers {
		padding: 10px 12px;
	}
}

/*
 * Homepage "Fresh in the library": the carousel arrows next to "Browse the full library".
 * AI-written note, verify against the code before relying on it.
 * Added: theme 2.1.2 (31 Oct 2026). Why: Goran's homepage design has round prev/next arrows beside the link; the
 * MemberShops "Modern carousel" layout moves the cards and turns an arrow off at either end (aria-disabled, styled in
 * the layout CSS). Watch out: the arrows sit in a Divi code module in the heading row; margin-left: auto keeps them
 * and the link together on the right of the row.
 */
.idplr-design .et_pb_code:has(.idplr-carousel-nav) {
	margin-left: auto;
}

.idplr-design .idplr-carousel-nav {
	display: flex;
	align-items: center;
	gap: 12px;
}

.idplr-design .idplr-carousel-nav button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--ms-text, #1c1c1f);
	cursor: pointer;
	transition: background-color .15s, opacity .15s;
}

.idplr-design .idplr-carousel-nav button svg {
	stroke-width: 3;
}

.idplr-design .idplr-carousel-nav button:hover {
	background: var(--ms-surface-soft, #f1f1ee);
}

.idplr-design .idplr-carousel-nav button:focus-visible {
	outline: 2px solid var(--ms-text, #1c1c1f);
	outline-offset: 2px;
}

/*
 * Sidebar promo card ("Buy this store" on listing pages, widget in sidebar-1).
 * AI-written note, verify against the code before relying on it.
 * Added: theme 2.1.3 (31 Oct 2026). Why: Goran wanted the old "Buy this store" box back, in the new design, linking
 * to the Ready Made Store page. Watch out: the card is plain HTML in a block widget; only these classes style it.
 */
.idplr-design .idplr-promo-card {
	padding: 22px 22px 24px;
	border: 1px solid var(--ms-line, #e4e4df);
	border-radius: var(--ms-radius-card, 16px);
	background: var(--ms-surface-soft, #f6f6f4);
	color: var(--ms-text-soft, #4e4e55);
}

.idplr-design .idplr-promo-card .idplr-promo-eyebrow {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ms-accent-text, #c42f27);
}

.idplr-design .idplr-promo-card .idplr-promo-title {
	margin: 0 0 8px;
	padding: 0;
	font-family: var(--ms-heading-font, inherit);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--ms-text, #1c1c1f);
}

.idplr-design .idplr-promo-card .idplr-promo-text {
	margin: 0 0 18px;
	padding: 0;
	font-size: 15px;
	line-height: 1.55;
}

.idplr-design .idplr-promo-card .idplr-promo-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border-radius: var(--ms-radius-button, 10px);
	background: var(--ms-surface-ink, #1c1c1f);
	color: var(--ms-text-on-ink, #fff);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .15s;
}

.idplr-design .idplr-promo-card .idplr-promo-button:hover,
.idplr-design .idplr-promo-card .idplr-promo-button:focus-visible {
	background: var(--ms-accent, #d9382f);
	color: var(--ms-text-on-ink, #fff);
}

/*
 * Sidebar "User menu" box: shown only to logged-in members.
 * AI-written note, verify against the code before relying on it.
 * Added: theme 2.1.4 (31 Oct 2026). Why: the old site hid this widget with the Widget Wizard plugin; wrapping it in
 * aMember's [am4show] breaks the page because the box itself uses [am4show] inside (shortcodes of the same name
 * cannot be nested). Watch out: WordPress adds body.logged-in for aMember members, because aMember logs them into
 * WordPress too.
 */
.idplr-design .idplr-members-only {
	display: none;
}

.idplr-design.logged-in .idplr-members-only {
	display: block;
}

/*
 * The promo button outside the store card (e.g. "Access Products" in the dark free-account box in the sidebar).
 * AI-written note, verify against the code before relying on it.
 * Added: theme 2.1.5 (31 Oct 2026). Why: Goran wanted that link to look like the store card's button. On the dark box
 * the button is light (same shape and size), so it stays visible; it turns red on hover like the store card's.
 */
.idplr-design .idplr-sidebar-dark .idplr-promo-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border-radius: var(--ms-radius-button, 10px);
	background: var(--ms-text-on-ink, #fff);
	color: var(--ms-text, #1c1c1f);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color .15s, color .15s;
}

.idplr-design .idplr-sidebar-dark .idplr-promo-button:hover,
.idplr-design .idplr-sidebar-dark .idplr-promo-button:focus-visible {
	background: var(--ms-accent, #d9382f);
	color: var(--ms-text-on-ink, #fff);
}

/*
 * Pages copied from the old idplr.com (body class idplr-copied from the mu-plugin idplr-copied-pages-conditions.php).
 * AI-written note, verify against the code before relying on it.
 * Added: theme 2.1.8 (31 Oct 2026). Why: their Divi 4 entrance animations (et-waypoint) start at opacity 0 and the
 * site's Divi 5 never runs them, so images such as the Hosting feature icons stayed invisible. TEMPORARY: remove with
 * the copied pages.
 */
.idplr-design.idplr-copied .et-waypoint,
.idplr-design.idplr-copied .et-waypoint.et-animated {
	opacity: 1;
	animation: none;
}

/* Old modules with a fixed width (e.g. an 800 px blurb on Free PLR Downloads) no longer push the page sideways */
.idplr-design.idplr-copied .et_pb_module,
.idplr-design.idplr-copied .et_pb_blurb_content {
	max-width: 100%;
}

/* Sidebar "User menu" card for logged-in members (widget in sidebar-1) */
.idplr-design .idplr-user-card {
	padding: 22px;
	border: 1px solid var(--ms-line, #e4e4df);
	border-radius: var(--ms-radius-card, 16px);
	background: #fff;
	color: var(--ms-text-soft, #4e4e55);
}

.idplr-design .idplr-user-card h3 {
	margin: 0 0 6px;
	padding: 0;
	font-family: var(--ms-heading-font, inherit);
	font-size: 20px;
	font-weight: 700;
	color: var(--ms-text, #1c1c1f);
}

.idplr-design .idplr-user-card .idplr-user-status {
	margin: 0 0 14px;
	padding: 0 0 14px;
	border-bottom: 1px solid var(--ms-line, #e4e4df);
	font-size: 14px;
}

.idplr-design .idplr-user-card .idplr-user-status b {
	color: var(--ms-accent-text, #c42f27);
	font-weight: 700;
}

.idplr-design .idplr-user-card ul {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.idplr-design .idplr-user-card li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 10px;
	color: var(--ms-text, #1c1c1f);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.idplr-design .idplr-user-card li a:hover {
	background: var(--ms-surface-soft, #f6f6f4);
	color: var(--ms-accent-text, #c42f27);
}

.idplr-design .idplr-user-card li svg {
	flex: none;
	width: 18px;
	height: 18px;
}

.idplr-design .idplr-user-card li:empty {
	display: none;
}