/* =============================================================================
   UGL OZ Replica — SHOP / CATEGORY ARCHIVE / SEARCH
   Owned by tuju-shop (Phase 3). Loads AFTER base.css.

   Everything here is MEASURED from ugloz.is. Sources:
     scrape/source-cdp/html/shop.html · category-oils.html · search.html
                            search-plain.html · search-empty.html
     scrape/source-cdp/css/wp-content__themes__inbio__assets__css__style.css
     scrape/source-cdp/css/…__rainbow-woocommerce.css
     scrape/source-cdp/details2.json (pagination), shell.json
     pixel measurements taken off _shots/{desktop,tablet,mobile}/shop.png

   ---------------------------------------------------------------------------
   ⚠ THE ARCHIVE GRID IS **NOT** THE HOMEPAGE GRID. This is the one place the
   RECON summary is wrong, and the numbers below are the reason.

   Measured off the reference tiles at the SAME 1440px viewport:

     _shots/desktop/home.png   cards at x = 150, 440, 730, 1020
                               width 270, pitch 290  -> gap 20, content 1140
                               (Elementor `--content-width: 1140px`, CSS grid)

     _shots/desktop/shop.png   cards at x =  80, 412,  744, 1076
                               width 284, pitch 332  -> gap 48, content 1280
                               (InBio's bootstrap `.container` xl = **1310px**,
                                minus 2 x 15px padding = 1280; WooCommerce's
                                percentage float layout with the theme override
                                `.woocommerce ul.products li.product{width:22.15%}`
                                at rainbow-woocommerce.css:839 and Woo's
                                `margin: 0 3.8% 2.992em 0`.)

     22.15% of 1280 = 283.5 (measured 284)  ·  25.95% pitch = 332.2 (measured 332)
     4 x 22.15 + 3 x 3.8 = 100.00%  -> the row fills the container exactly.

     _shots/tablet/shop.png  (820) cards at 65, 244, 423, 602 · width 153, pitch 179
                               container 720 - 30 = 690 · 22.15% = 152.8 ✓
     _shots/mobile/shop.png  (390) cards at 15, 202 · width 173
                               container 360 · Woo smallscreen 48% = 172.8 ✓

   The CARD ITSELF is identical on both surfaces (thumb radius 10, title
   Montserrat 18/700, price Poppins 16/400, hover-revealed gold button) and
   lives in base.css. Only the TRACK GEOMETRY differs. So this file overrides
   the grid for archives ONLY, scoped to `.ugloz-archive`, and base.css is left
   untouched — including its `[class*="columns-"]` selector list, which is what
   stops woocommerce-smallscreen.css from shrinking cards to 48% of their track
   on the homepage.
   ========================================================================== */

/* ---------- feather glyphs this phase adds --------------------------------- */
/* Codepoints from rainbow-elements/assets/css/feather.css. tokens.css already
   declares the @font-face and the shared feather-* base rule. */
.feather-arrow-left:before     { content: "\e910"; }
.feather-arrow-up-right:before { content: "\e917"; }

/* ---------- InBio layout helpers used by these templates ------------------- */
/* .row--25 / .row--40 net out to ZERO extra width at every breakpoint (the
   negative row margin always equals the column padding) — they are replicated
   for structural fidelity, not because they change the box. */
.row--25 { margin-left: -25px; margin-right: -25px; }
.row--25 > [class*="col"] { padding-left: 25px; padding-right: 25px; }
.row--40 { margin-left: -40px; margin-right: -40px; }
.row--40 > [class*="col"] { padding-left: 40px; padding-right: 40px; }

@media only screen and (max-width: 1599px) {
	.row--25, .row--40 { margin-left: -15px; margin-right: -15px; }
	.row--25 > [class*="col"],
	.row--40 > [class*="col"] { padding-left: 15px; padding-right: 15px; }
}

.col-md-6, .col-xs-12, .col-lg-4, .col-lg-8, .col-xl-4 {
	position: relative;
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
}
.col-xs-12 { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 768px) {
	.col-md-6 { flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 992px) {
	.col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
	.col-lg-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
}
@media (min-width: 1200px) {
	.col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
}

.mb--30 { margin-bottom: 30px !important; }
.mb--40 { margin-bottom: 40px !important; }
.mt--25 { margin-top: 25px !important; }
.ptb--30 { padding-top: 30px !important; padding-bottom: 30px !important; }

/* =============================================================================
   1. ARCHIVE SHELL  (/shop/, /product-category/<slug>/, ?s=…&post_type=product)
   ========================================================================== */

/* .rn-section-gap already gives 100px 0 (base.css). The source's archive body
   sits directly inside it — no extra wrapper padding. */
.inbio-container-content { position: relative; }

/* The archive H1 lives in the page-title bar; this header is EMPTY on source. */
.woocommerce-products-header { margin: 0; padding: 0; }
.woocommerce-products-header:empty { display: none; }

/* ---------- result count + orderby row ------------------------------------- */
/* Source: .woocommerce-header-shop > .row.align-items-center.rn-shop-top.mb--30
   with two .col-md-6 halves. Woo's own float:left/float:right on
   .woocommerce-result-count / .woocommerce-ordering still applies inside them. */
.rn-shop-top { margin-bottom: 30px; }

/* ⚠ KEEP WooCommerce's `margin: 0 0 1em` on BOTH of these. It is not cosmetic:
   the ordering form's 16px bottom margin is what makes .rn-shop-top 76px tall
   instead of 60px, and therefore what puts the first product row at y=468 on the
   source instead of y=452. Zeroing it shifted our whole grid up by exactly 16px
   (measured: source thumb rows 468/899/1357, ours 452/883/1341 — identical
   431/458 pitches, constant 16px offset). Only the float is cancelled, because
   the source's own .rn-shop-top row does the two-column split with flex. */
.woocommerce .woocommerce-count .woocommerce-result-count {
	float: none;
	margin: 0 0 1em;
	font-family: var(--ugloz-font-primary);
	font-size: var(--ugloz-fs-body);
	line-height: 30.4px;
	color: var(--ugloz-body);
}

.woocommerce-sort-list { display: flex; justify-content: flex-end; }

.woocommerce .woocommerce-sort-list .woocommerce-ordering {
	float: none;
	margin: 0 0 1em;
}

/* InBio's global <select>: 60px tall, 2px border, r4, custom arrow.
   inbio/assets/css/style.css:5601 + `.woocommerce .woocommerce-ordering select
   { background-position: 94% center }`.
   The source's arrow is an <img> asset we do not ship; an inline SVG chevron in
   the same #878e99 at the same 94%/centre position stands in for it. */
.woocommerce .woocommerce-ordering select.orderby {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 100%;
	height: 60px;
	padding: 0 32px 0 20px;
	border: var(--ugloz-border-width) solid var(--ugloz-border);
	border-radius: var(--ugloz-radius-badge);
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23878e99' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 94% center;
	font-family: var(--ugloz-font-primary);
	font-size: var(--ugloz-fs-body);
	color: var(--ugloz-body);
	line-height: normal;
	cursor: pointer;
	transition: 0.3s;
	outline: none;
}
.woocommerce .woocommerce-ordering select.orderby:focus,
.woocommerce .woocommerce-ordering select.orderby:active {
	border-color: var(--ugloz-primary);
	outline: none;
}
/* Native option list is drawn by the OS; force readable colours on the ones
   platforms do let us style. */
.woocommerce .woocommerce-ordering select.orderby option {
	background: var(--ugloz-bg);
	color: var(--ugloz-body);
}

/* NO mobile override. Checked against _shots/mobile/shop.png: when the two
   .col-md-6 halves stack at 390 the source keeps the select RIGHT-aligned and
   251px wide (its right edge is still flush with the content box), with no extra
   gap above it. An earlier `justify-content: flex-start; margin-top: 15px` here
   was invented and pushed the whole grid down 15px (429 -> 444). Removed. */

/* =============================================================================
   2. ARCHIVE PRODUCT GRID — the measured WooCommerce geometry (see header)
   Scoped to .ugloz-archive so the homepage's Elementor 4 x 270 / 20px grid in
   base.css is untouched.
   ========================================================================== */
.ugloz-archive ul.products,
.ugloz-archive ul.products[class*="columns-"] {
	display: grid;
	grid-template-columns: repeat(4, 22.15%);
	column-gap: 3.8%;      /* Woo's li margin-right */
	row-gap: 2.992em;      /* Woo's li margin-bottom = 47.87px at 16px */
	list-style: none;
	margin: 0 0 1em;       /* Woo: ul.products { margin: 0 0 1em } */
	/* A grid's row-gap sits BETWEEN tracks only, but Woo's float layout puts
	   margin-bottom: 2.992em on every li INCLUDING the last row. Without this
	   the pagination rides 47px too high (measured: source pill top y=1833,
	   ours 1786 at 1440; 1570 vs 1523 at 820; 2748 vs 2701 at 390). */
	padding: 0 0 2.992em;
	clear: both;
}

/* ORDER-PROOF li reset.
   base.css already neutralises WooCommerce's float layout, but only at equal
   specificity to woocommerce-smallscreen.css — so it only wins because it is
   normally printed later. Any enqueue that reshuffles the style queue flips
   that (measured: cards collapsed to 82.94px inside a 172.8px track at 390px).
   The `.woocommerce` + `.ugloz-archive` prefix makes these unambiguous. */
.woocommerce .ugloz-archive ul.products li.product,
.woocommerce .ugloz-archive ul.products[class*="columns-"] li.product,
.woocommerce-page .ugloz-archive ul.products[class*="columns-"] li.product {
	position: relative;
	float: none;
	clear: none;
	width: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Tablet band 769–991px: still four tracks (measured at 820: 153px cards). */
@media only screen and (max-width: 1024px) {
	.ugloz-archive ul.products,
	.ugloz-archive ul.products[class*="columns-"] {
		grid-template-columns: repeat(4, 22.15%);
		column-gap: 3.8%;
	}
}

/* woocommerce-smallscreen.css is served with media="…max-width: 768px" and sets
   li.product { width: 48% } with float left/right, i.e. TWO columns with a 4%
   gutter. Measured at 390: 173px cards at x = 15 and 202. */
@media only screen and (max-width: 768px) {
	.ugloz-archive ul.products,
	.ugloz-archive ul.products[class*="columns-"] {
		grid-template-columns: repeat(2, 48%);
		column-gap: 4%;
	}
}

/* -----------------------------------------------------------------------------
   ⚠ CARD PRICE COLOUR — A SHARED-CARD DEFECT, CORRECTED HERE FOR ARCHIVES ONLY.
   THE SAME FIX BELONGS IN base.css AND IS IN THE RETURNED NOTES; the homepage
   grids currently render prices in the wrong colour for the same reason.

   RECON §7 records "card price rgb(117,117,137)", and base.css encodes that on
   `.price`. That is the computed colour of the `.price` WRAPPER — it is not the
   colour anything paints with. Woo nests the actual text one level deeper:

     span.price > ins/del > span.woocommerce-Price-amount.amount > bdi > "$135.00"

   and inbio/assets/css/style.css carries
       span.woocommerce-Price-amount.amount { color: var(--color-heading) }
   which beats rainbow-woocommerce.css's `.woocommerce-Price-amount.amount
   { color: var(--color-primary) }` and paints EVERY price #c4cfde — the same
   colour as the card title.

   Measured live on ugloz.is 2026-08-02 (getComputedStyle):
       .price                  rgb(117,117,137) 400   <- wrapper, paints nothing
       .price .amount          rgb(196,207,222) 400   <- what you actually see
       .price del              opacity 0.7            <- base.css had 0.5
       .price ins              700, but its .amount is 400, so it RENDERS 400
                                                        and #c4cfde, NOT gold
   Cross-checked in the reference tiles: the price pixels in
   _shots/desktop/shop.png sample (196,207,222); ours sampled (117,117,137).
   The sale price in _shots/desktop/shop.png is plainly NOT gold, and
   _shots/desktop/home.png shows the same #c4cfde on the homepage grids.
   ----------------------------------------------------------------------------- */
/* ONLY the inner .amount span is recoloured. `.price` itself must STAY
   #757589, because <del>'s strike-through LINE is painted in the del's own
   colour: the source's struck price is a #757589@0.7 rule over #c4cfde@0.7
   digits, which samples as (92,92,108) + (147,156,167). Recolouring `.price`
   too lost the (92,92,108) rule. base.css's `ins { color: primary; weight:700 }`
   is CORRECT and is left alone — the nested .amount overrides it on the source
   exactly as it does here. */
.ugloz-archive ul.products li.product .price .woocommerce-Price-amount.amount {
	color: var(--ugloz-heading);
	font-weight: var(--ugloz-w-regular);
}
.ugloz-archive ul.products li.product .price del {
	opacity: 0.7;   /* base.css has 0.5; measured 0.7 on ugloz.is */
}

/* Empty product archive. NOT OBSERVED ON THE SOURCE — there is no capture of a
   zero-result product archive — so this only makes Woo's default notice legible
   in the dark theme rather than inventing a layout. See OPEN QUESTIONS. */
.woocommerce-no-products-found .woocommerce-info,
.ugloz-archive .woocommerce-info {
	background: var(--ugloz-surface);
	box-shadow: var(--ugloz-shadow-1);
	border-top: var(--ugloz-border-width) solid var(--ugloz-primary);
	border-radius: var(--ugloz-radius-badge);
	color: var(--ugloz-body);
	padding: 20px 30px;
	list-style: none;
	margin: 0;
}

/* =============================================================================
   3. PAGINATION
   Source: .post-pagination > nav.page-numbers.text-center > ul.page-numbers
   `.woocommerce-pagination` does not exist. Measured pill 42 x 42, radius 4px;
   `.current` is #dd9933 on a 2px #dd9933 border with white text; idle pills are
   the neumorphic surface (inbio style.css:20417).
   Gold pill measured in _shots/desktop/shop.png at x 558–599, y 1833–1874.
   ========================================================================== */
.post-pagination { margin-bottom: 20px; }

/* base.css renders ul.page-numbers as flex+gap; the source uses inline-block
   items with 5px padding inside a -5px ul margin (and therefore keeps the
   inter-item whitespace). Re-declared here so the archive/search pagination
   centres on exactly the source's x-offset. */
.post-pagination ul.page-numbers {
	display: block;
	margin: -5px;
	padding: 0;
	list-style: none;
	gap: 0;
}
.post-pagination ul.page-numbers li {
	display: inline-block;
	padding: 5px;
	margin: 0;
	list-style: none;
}
.post-pagination ul.page-numbers li a,
.post-pagination ul.page-numbers li span.page-numbers {
	display: block;
	width: auto;
	min-width: 42px;
	height: 42px;
	padding: 0 10px;
	line-height: 38px;
	text-align: center;
	position: relative;
	z-index: 2;
	font-family: var(--ugloz-font-primary);
	font-size: 14px;
	font-weight: var(--ugloz-w-semibold);
	border-radius: var(--ugloz-radius-badge);
	border: var(--ugloz-border-width) solid transparent;
	color: var(--ugloz-body);
	background: var(--ugloz-surface);
	box-shadow: var(--ugloz-shadow-1);
	transition: 0.3s;
}
.post-pagination ul.page-numbers li a:hover {
	color: var(--ugloz-white);
	border-color: var(--ugloz-primary);
	background: var(--ugloz-primary);
	box-shadow: none;
}
.post-pagination ul.page-numbers li .page-numbers.current {
	background: var(--ugloz-primary);
	border-color: var(--ugloz-primary);
	color: var(--ugloz-white);
	box-shadow: none;
}
.post-pagination ul.page-numbers li .page-numbers i {
	font-size: 16px;
	line-height: 38px;
	vertical-align: top;
}

/* the_posts_pagination() adds nav.navigation.pagination + .nav-links; the
   source's blog-style search wraps that in .post-pagination.text-center. */
.post-pagination .navigation.pagination { display: block; }
.post-pagination .nav-links { display: block; }

/* =============================================================================
   4. BLOG-STYLE SEARCH  (plain ?s= — PROJECT-BRIEF decision 15)
   Rebuilt from search-plain.html / search-empty.html and inbio style.css
   (.inbio-post-wrapper 19165, .rn-blog 19169, .blog-search 20195,
    .inbio-single-widget 19680, a.rn-btn 11858).
   ========================================================================== */
.inbio-post-wrapper { margin-top: -30px; }

.rn-blog {
	margin-top: 30px;
	text-align: left;
	position: relative;
	z-index: 1;
	height: 100%;
	transition: 0.5s all ease-in-out;
}
.rn-blog .inner {
	text-align: left;
	/* Measured 30px on all four sides (getComputedStyle on ugloz.is). InBio's
	   style.css declares `padding: 30px; padding-bottom: 34px`, but the rendered
	   value is a flat 30px — trusting the stylesheet cost 4px per card. */
	padding: 30px;
	position: relative;
	border-radius: 20px;
	background: var(--ugloz-surface);
	box-shadow: var(--ugloz-shadow-1);
	z-index: 1;
	transition: 0.5s all ease-in-out;
}
.rn-blog .inner::before {
	content: "";
	position: absolute;
	transition: var(--ugloz-transition);
	width: 100%;
	height: 100%;
	border-radius: 20px;
	top: 0;
	left: 0;
	background: var(--ugloz-surface-2);
	opacity: 0;
	z-index: -1;
}
.rn-blog:hover .inner::before { opacity: 1; }

@media only screen and (max-width: 479px) {
	.rn-blog .inner { padding: 20px; }
}

.rn-blog .thumbnail { margin-bottom: 25px; }
.rn-blog .thumbnail a {
	display: block;
	overflow: hidden;
	border-radius: 10px;
	width: max-content;
	max-width: 100%;
}
/* The source serves InBio's registered `rainbow-thumbnail-archive` size — a
   500x450 hard crop. That size is not registered in this theme (add_image_size()
   belongs in functions.php, which this phase does not own), so the full 500x500
   file is emitted and cropped to the same box here. Same rendered geometry. */
.rn-blog .thumbnail a img {
	display: block;
	width: 500px;
	max-width: 100%;
	aspect-ratio: 500 / 450;
	height: auto;
	object-fit: cover;
	border-radius: 10px;
	transition: var(--ugloz-transition);
}
@media only screen and (max-width: 1199px) {
	.rn-blog .thumbnail a { width: 100%; }
	.rn-blog .thumbnail a img { width: 100%; }
}

.rn-blog .title { margin: 0; font-weight: var(--ugloz-w-bold); font-size: 24px; line-height: 1.6; }
.rn-blog .title a {
	transition: var(--ugloz-transition);
	color: var(--ugloz-lightn);
	font-weight: var(--ugloz-w-semibold);
	font-size: 23px;
	line-height: 34px;
	display: inline-block;
}
.rn-blog .title a i {
	font-size: 0;
	position: relative;
	top: 10px;
	transition: var(--ugloz-transition);
	opacity: 0;
}
.rn-blog .title a:hover { color: var(--ugloz-primary) !important; }
.rn-blog .title:hover a i {
	color: var(--ugloz-primary);
	top: 3px;
	opacity: 1;
	font-size: 23px;
}
@media only screen and (max-width: 479px) {
	.rn-blog .title a { font-size: 20px; line-height: 30px; }
}

/* The source ships this list EMPTY (no date/author/category meta) but it is NOT
   display:none — measured height 0 with `margin: 18px -12px 0`, and that 18px
   top margin is real vertical rhythm: hiding it made every result card 655px
   instead of 673px. Replicate-don't-fix. */
.rn-blog ul.meta {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 18px -12px 0;
	padding: 0;
}

/* Neumorphic "View" pill — a.rn-btn (inbio style.css:11858/11880) */
/* Measured on ugloz.is: inline-FLEX with line-height 26.6px (1.9 x 14px), which
   makes the pill 122.6 x 56.6. inline-block + the theme's 30.4px body
   line-height rendered 125.6 x 60.4 and added ~4px to every result card. */
a.rn-btn {
	display: inline-flex;
	align-items: center;
	line-height: 26.6px;
	padding: 15px 35px;
	list-style: none;
	text-decoration: none;
	color: var(--ugloz-primary);
	border-radius: var(--ugloz-radius-btn);
	background: var(--ugloz-surface);
	box-shadow: var(--ugloz-shadow-1);
	transition: var(--ugloz-transition);
	position: relative;
	z-index: 2;
	font-family: var(--ugloz-font-primary);
	font-size: 14px;
	font-weight: var(--ugloz-w-medium);
	border: 0 none;
}
a.rn-btn::before {
	content: "";
	position: absolute;
	transition: var(--ugloz-transition);
	width: 100%;
	height: 100%;
	border-radius: var(--ugloz-radius-btn);
	top: 0;
	left: 0;
	background: var(--ugloz-surface-2);
	opacity: 0;
	z-index: -1;
}
a.rn-btn:hover { transform: translateY(-5px); color: var(--ugloz-primary); }
a.rn-btn:hover::before { opacity: 1; }
/* The source spaces the arrow with padding-left: 5px on the <i>, not a margin
   (measured icon box 19 x 14 = 14px glyph + 5px pad). */
a.rn-btn i { display: block; padding-left: 5px; margin-left: 0; font-size: 14px; }
a.rn-btn .button-text { display: block; }

/* ---------- "Nothing Found" ------------------------------------------------ */
.no-results .page-header { margin: 0 0 10px; }
.no-results .page-title {
	font-family: var(--ugloz-font-secondary);
	font-size: var(--ugloz-h3);
	line-height: 30px;
	color: var(--ugloz-heading);
	margin: 0 0 20px;
}
.no-results .page-content p { color: var(--ugloz-body); }

/* ---------- sidebar -------------------------------------------------------- */
.rainbow-sidebar-area { position: relative; }

.inbio-single-widget {
	border-radius: 10px;
	padding: 0 20px 20px;
	position: relative;
	z-index: 2;
	background: var(--ugloz-surface);
	box-shadow: var(--ugloz-shadow-1);
	overflow: hidden;
}
.inbio-single-widget:first-child { margin-top: 0 !important; }
.inbio-single-widget p:empty { display: none; }

.inbio-single-widget .widget-title,
.inbio-single-widget h2 {
	line-height: 26px;
	position: relative;
	font-size: 18px;
	font-weight: var(--ugloz-w-medium);
	color: var(--ugloz-lightn);
	background: var(--ugloz-darker);
	margin: -1px -21px 20px;
	padding: 14px 24px;
	border-radius: 0;
	display: block;
	width: auto;
	font-family: var(--ugloz-font-secondary);
}

.inbio-single-widget ul,
.inbio-single-widget ol {
	padding-left: 0;
	padding-right: 0;
	margin-bottom: -10px;
	list-style: none;
}
.inbio-single-widget ul li {
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: var(--ugloz-fs-body);
	line-height: 28px;
	color: var(--ugloz-body);
	list-style: none;
}

/* Category list — inbio style.css:19957-20070, transcribed. Each row carries a
   gold feather-folder glyph (\e968) in a 30px gutter, 15px vertical
   padding, and a hairline divider between rows. Measured on the source's single
   `Blog Post` row: li h=28, margin 0 0 10px, padding 0 0 0 30px. */
.inbio-single-widget.widget_categories ul li {
	position: relative;
	padding: 15px 0 15px 30px;
	margin-top: 0;
	margin-bottom: 0;
}
.inbio-single-widget.widget_categories ul li::before {
	position: absolute;
	/* \e968 = feather-folder. inbio/style.css:19984 declares \e991
	   (message-square) but is OVERRIDDEN at :20088 by the archive/block/categories
	   group, and the SOURCE renders \e968 — verified by reading the computed
	   ::before content off ugloz.is, not by reading the stylesheet. */
	content: "\e968";
	font-family: "feather";
	left: 0;
	top: 16px;
	font-size: 18px;
	opacity: 0.8;
	color: var(--ugloz-primary);
}
.inbio-single-widget.widget_categories ul li + li { border-top: 1px solid var(--ugloz-dark); }
.inbio-single-widget.widget_categories ul li:first-child { padding-top: 0; }
.inbio-single-widget.widget_categories ul li:first-child::before { top: 1px; }
.inbio-single-widget.widget_categories ul li:last-child { padding-bottom: 0; margin-bottom: 0; }
.inbio-single-widget.widget_categories > ul > li { margin-top: 0; margin-bottom: 0; }
.inbio-single-widget.widget_categories > ul > li:last-child { margin-bottom: 10px; }
.inbio-single-widget ul li a {
	transition: all 0.3s ease 0s;
	text-decoration: none;
	color: var(--ugloz-lightn);
	display: inline-block;
	padding: 0;
}
.inbio-single-widget ul li a:hover { color: var(--ugloz-primary) !important; }

.inbio-single-widget.widget_search { padding-bottom: 0; }

/* ---------- the InBio .blog-search form (sidebar + no-results) -------------- */
.blog-search { position: relative; }
/* Measured `margin: 25px 0 15px` on ugloz.is — the 15px bottom is real and is
   what makes the search widget 100px tall rather than 85px. */
.blog-search .form-group { position: relative; margin: 25px 0 15px; }
.blog-search input {
	height: 60px;
	padding: 0 90px 0 20px;
	color: var(--ugloz-body);
	border: var(--ugloz-border-width) solid var(--ugloz-border);
	border-radius: var(--ugloz-radius-badge);
	background: transparent;
	font-family: var(--ugloz-font-primary);
	font-size: var(--ugloz-fs-body);
	width: 100%;
	transition: all 0.4s ease-out 0s;
}
.blog-search input:focus { outline: none; border-color: var(--ugloz-primary); }
/* NOTE: inbio's `.inbio-single-widget input { border: 2px solid var(--color-dark) }`
   is out-ordered by `.blog-search input { border: 2px solid var(--color-border) }`
   — measured rgba(255,255,255,.2) on the source, so no widget-scoped override. */
.blog-search .search-button {
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background: var(--ugloz-primary);
	height: 40px;
	padding: 0 16px;
	border-radius: 3px;
	text-align: center;
	width: auto;
	color: var(--ugloz-white);
	box-shadow: none;
	font-size: 14px;
	border: var(--ugloz-border-width) solid var(--ugloz-primary);
	cursor: pointer;
	transition: all 0.4s ease-out 0s;
}
.blog-search .search-button i {
	color: var(--ugloz-white);
	font-weight: var(--ugloz-w-bold);
	font-size: 16px;
}
.blog-search .search-button:hover {
	background: transparent;
	border-color: var(--ugloz-primary);
	color: var(--ugloz-primary);
}
.blog-search .search-button:hover i { color: var(--ugloz-primary); }

/* Sidebar drops under the results column below lg, as on the source. */
@media only screen and (max-width: 991px) {
	.rainbow-sidebar-area { margin-top: 40px; }
}