/*
 * legacy-customizer.css
 *
 * Ruling C5 of spec/00-BUILD-SPEC.md. WordPress stores Customizer "Additional CSS"
 * per THEME SLUG, in a custom_css post whose post_name is the stylesheet slug, so
 * activating rlj-theme presents an empty Additional CSS box and all 243 lines
 * currently applied under "generatepress" stop applying. Every surviving rule from
 * that block lives here instead.
 *
 * GeneratePress's own custom_css_post_id is left untouched in the database, so a
 * theme rollback restores the original block verbatim. Nothing is duplicated: this
 * file is the ONLY copy of these rules in the theme.
 *
 * Rule numbers below match the annotation table in spec/01-design-tokens.md 6.1 and
 * the per-rule decision table in spec/wp0-customizer-css-migration.md. The dropped
 * rules (7, 12, 14, 15, 17, 20, and the two duplicate short-description hides) are
 * not here by decision, not by oversight.
 *
 * LAYERING. Each section names the package-owned stylesheet it moves into as that
 * package lands. This file is a staging layer for WP1 and is expected to shrink to
 * nothing by WP8. Load it AFTER tokens.css and base.css and BEFORE the package
 * stylesheets, because in the live site these rules print last in <head> and win
 * every tie; keeping them late preserves that ordering while the port is in flight.
 *
 * !important is stripped throughout. In the live site it exists only to out-shout
 * GeneratePress and GP Premium's WooCommerce module, neither of which will be
 * loaded. Any rule that still needs it after the port is a specificity bug to fix,
 * not a reason to add it back.
 */

/* ==========================================================================
   1. Buttons  (rules 8, 9, 18)  ->  assets/css/base.css
   The live button style for the whole store. GP's border-radius:0 /
   padding:10px 20px / font-weight:500 never won anywhere.
   Two deliberate corrections, both recorded in wp0-customizer-css-migration.md:
     - hover now also reaches bare <button> and input[type=submit], which had no
       hover feedback at all (01 8.5)
     - the disabled treatment now also reaches a.button, which fell through to
       GP's background:transparent;opacity:.3 (01 8.7)
   WP1 correction: bare <button> and input[type=submit] were also in the BASE
   selector list, which is a third widening the migration record does not
   approve. Live rule 8 covers .button / Woo only, so a CF7 submit and every
   bare button on the store render GP's grey square today, not a black pill.
   They are back on the GP-equivalent base in base.css, and only the hover and
   disabled widenings above remain.
   ========================================================================== */

a.button,
button.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	background-color: var(--btn-bg);
	color: var(--btn-text);
	border: none;
	border-radius: var(--radius-button);
	padding: 12px 28px;
	font-weight: var(--fw-button);
	text-transform: uppercase;
	text-decoration: none;
	display: inline-block;
	transition: var(--transition-button);
}

a.button:hover,
button.button:hover,
button:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background-color: var(--btn-bg-hover);
	color: var(--btn-text);
}

a.button[aria-disabled="true"],
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce input.button:disabled,
.woocommerce input.button:disabled[disabled] {
	background-color: var(--btn-bg);
	color: var(--btn-text);
	border: none;
	border-radius: var(--radius-button);
	opacity: 0.6;
	cursor: not-allowed;
}

/* ==========================================================================
   2. Site title and hero type  (rules 1, 2, 11)
   1  ->  assets/css/header.css   2, 11  ->  assets/css/hero.css
   Rule 2 is the reason GP's .hero-title{font-size:36px} mobile value is dead:
   the homepage H1 really is 50px under 768px. Rule 1 kills both stored mobile
   site-title sizes (25 and 19).
   ========================================================================== */

@media (max-width: 768px) {

	.main-title {
		font-size: var(--fs-title-mobile);
	}

	.home .page-hero h1 {
		font-size: var(--fs-hero-home-768);
	}

	/* Keeps the right side of Home-Banner.webp in frame on a phone. */
	.home-hero {
		background-position: 70% 50%;
		background-size: cover;
	}
}

/* ==========================================================================
   3. WooCommerce product loops  (rule 3)  ->  assets/css/woocommerce.css
   Verified live 2026-08-08: the front page really does render two
   `woocommerce ul.products` loops (columns-4), so this rule is load-bearing,
   not a leftover. Without it every homepage tile grows an Add to cart button.
   ========================================================================== */

.home .woocommerce ul.products li.product .button {
	display: none;
}

/* ==========================================================================
   4. Single product summary  (rules 5, 10, 21)  ->  assets/css/woocommerce.css
   Rule 10 styles the "Full description" jump link that GP Premium Element 1235
   injects on woocommerce_before_add_to_cart_form; inc/woocommerce.php must
   reproduce <p class="loud-link"><a class="smooth-scroll" href="#tab-title-description">
   or this rule has nothing to style (verified live, the markup sits between the
   In Stock line and <form class="cart">).
   The live selector list also carried [href*="description"], which matched any
   summary link with "description" anywhere in the href. Narrowed to the anchor
   the markup actually uses.
   Rule 21 is the ONLY styling for snippet 20's free-shipping note. The snippet
   ships no CSS of its own, so dropping this silently unstyles 92 product pages.
   ========================================================================== */

.single-product .product .product_title {
	margin-bottom: 30px;
}

.single-product .summary a[href^="#tab-"],
.single-product .entry-summary a[href^="#tab-"] {
	color: #000;
	font-weight: 700;
	text-decoration: underline;
}

.single-product .summary a[href^="#tab-"]:hover,
.single-product .summary a[href^="#tab-"]:focus,
.single-product .summary a[href^="#tab-"]:visited,
.single-product .entry-summary a[href^="#tab-"]:hover,
.single-product .entry-summary a[href^="#tab-"]:focus,
.single-product .entry-summary a[href^="#tab-"]:visited {
	color: #000;
	text-decoration: underline;
}

.single-product .summary .rlj-free-shipping-note {
	margin-top: 6px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--free-shipping);
}

/* ==========================================================================
   5. Currency symbol  (rule 6)  ->  assets/css/woocommerce.css
   LIVE DEFECT A, see spec/wp0-live-defects.md. Measured live on product 4973:
   the symbol computes "Times New Roman" 700 23.75px while the amount beside it
   computes Catamaran 700 23.75px, so every price on the store mixes two
   typefaces mid-token.
   The token stays so the old behaviour is one line away: set --font-currency to
   "Times New Roman", Georgia, "Noto Serif", serif in tokens.css to restore it.
   ========================================================================== */

.woocommerce .woocommerce-Price-currencySymbol {
	font-family: var(--font-currency);
}

/* ==========================================================================
   6. Additional information tab  (rule 13)  ->  assets/css/woocommerce.css
   Rule 12's sibling (border-collapse:separate on the same table) is deliberately
   NOT here: it never applied live, because the commented-out block above it in the
   Customizer contains a nested comment terminator that ends the comment early and
   swallows the declaration. Adding it now would be a new visual change, not a port.
   ========================================================================== */

.woocommerce-Tabs-panel--additional_information table.shop_attributes td.woocommerce-product-attributes-item__value {
	padding-left: 14px;
	font-style: normal;
}

/* ==========================================================================
   7. Sidebar widget titles  (rule 19)  ->  assets/css/archive.css
   Makes GP's widget_title_font_size:18 dead. Verified live: Playfair 700 22px.
   ========================================================================== */

.widget-area .widget .widget-title {
	font-size: var(--fs-widget-title);
	font-weight: var(--fw-widget-title);
}

/* ==========================================================================
   8. Footer social row  (rule 16 only)  ->  assets/css/footer.css
   Rules 14, 15 and 17 are dropped: 14 is superseded by 16 at equal specificity,
   15 loses to 16 at every width because media queries add no specificity, and 17
   targets .wp-block-social-links / .aligncenter, neither of which exists inside
   the row (the icons are GenerateBlocks buttons).
   Renamed .footer-icons -> .rlj-footer-social per ruling C4. This one rule also
   beat all three GenerateBlocks responsive widths (15% / 50% / 100%), so the row
   has always been full width with the icons flush right at every breakpoint.
   ========================================================================== */

.rlj-footer-social {
	max-width: none;
	width: 100%;
	margin: 0;
	display: flex;
	justify-content: flex-end;
	padding-right: 40px;
}

/* ==========================================================================
   9. Product-category parent pages  (rules 22 to 28)  ->  assets/css/woocommerce.css
   /product-category/rings/ and /product-category/pendants/. The two section
   headings are CSS generated content driven by :has() and the body classes
   term-rings / term-pendants, which is why they are invisible to any HTML-level
   port. Kept as generated content because spec 7.1 asserts
   ul.products::before === "Shop by stone type" as a pass/fail gate; promoting
   them to real headings is filed as an open item for WP6.
   The "Shop more" fallback only ever shows on a parent category that is neither
   rings nor pendants, which does not exist today.
   ========================================================================== */

ul.products:has(> li.product-category)::before {
	content: "Shop by stone type";
	display: block;
	grid-column: 1 / -1;
	width: 100%;
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--archive-heading);
	margin: 0 0 16px;
	padding: 0;
	line-height: 1.2;
}

ul.products li.product-category {
	grid-column: 1 / -1;
	width: 100%;
	float: none;
	clear: both;
	box-sizing: border-box;
	margin: 0 0 6px;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	text-align: left;
	display: block;
}

ul.products li.product-category:not(:has(~ li.product-category)) {
	margin-bottom: 0;
}

ul.products li.product-category:not(:has(~ li.product-category))::after {
	content: "Shop more";
	display: block;
	font-family: var(--font-heading);
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--archive-heading);
	border-top: 1px solid var(--archive-rule);
	margin-top: 24px;
	padding-top: 24px;
	margin-bottom: 18px;
	line-height: 1.2;
}

body.term-rings ul.products li.product-category:not(:has(~ li.product-category))::after {
	content: "Shop all rings";
}

body.term-pendants ul.products li.product-category:not(:has(~ li.product-category))::after {
	content: "Shop all pendants";
}

ul.products li.product-category > a {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-start;
	gap: 22px;
	width: 100%;
	padding: 8px 4px;
	text-decoration: none;
}

/* The .wc-product-image / .inside-wc-product-image wrapper pair is GP Premium's,
   so inc/woocommerce.php has to reproduce it on BOTH
   woocommerce_template_loop_product_thumbnail and woocommerce_subcategory_thumbnail
   or these three rules have nothing to size (risk R13). */
ul.products li.product-category .wc-product-image {
	flex: 0 0 88px;
	width: 88px;
	height: 88px;
	margin: 0;
}

ul.products li.product-category .inside-wc-product-image {
	width: 88px;
	height: 88px;
}

ul.products li.product-category img {
	width: 88px;
	height: 88px;
	margin: 0;
	border-radius: var(--radius-round);
	object-fit: cover;
}

ul.products li.product-category .woocommerce-loop-category__title {
	margin: 0;
	padding: 0;
	flex: 1 1 auto;
	font-size: 1.5rem;
	line-height: 1.25;
	text-align: left;
}

/* Kills WooCommerce's "(4)" count marker on the category title. */
ul.products li.product-category .woocommerce-loop-category__title::before {
	content: none;
}
