/**
 * Sensory Boutique UX — Artisanal Soap Transformation
 * Implements: Glassmorphism (B), Lather button (C), Organic image masks (D),
 * typography (Cormorant Garamond + Montserrat), earth-neutrals palette.
 * Plan: sj-soaps/Artisanal-Soap-UX-Transformation-Plan.html (A = Botanical Float not applied)
 *
 * @package Ecosoap_Child
 */

/* -------------------------------------------------------------------------
   Earth neutrals & typography (Final Polish)
   ------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Montserrat:wght@400;500;600&display=swap');

:root {
	--sj-sensory-cream: #faf8f5;
	--sj-sensory-sage: #8a9a7b;
	--sj-sensory-terracotta: #c4a484;
	--sj-sensory-text: #3d3d3d;
	--sj-sensory-text-muted: #6b6b6b;
	--sj-sensory-border: rgba(139, 154, 123, 0.25);
	--sj-sensory-font-heading: 'Cormorant Garamond', Georgia, serif;
	--sj-sensory-font-body: 'Montserrat', sans-serif;
}

/* Product summary & marketing card: luxury typography */
.woocommerce div.product .summary.entry-summary,
.woocommerce div.product .summary.entry-summary h1,
.woocommerce div.product .summary.entry-summary h2,
.woocommerce div.product .summary.entry-summary h3,
.sj-eo-blend-marketing-card .sj-blend-name,
.sj-eo-blend-marketing-card .sj-blend-card-header,
.sj-eo-blend-marketing-card .sj-section-title {
	font-family: var(--sj-sensory-font-heading) !important;
}
.woocommerce div.product .summary.entry-summary,
.woocommerce div.product .summary.entry-summary p,
.sj-eo-blend-marketing-card,
.sj-eo-blend-marketing-card .sj-blend-card-body,
.sj-eo-blend-marketing-card .sj-section-content {
	font-family: var(--sj-sensory-font-body);
}

/* -------------------------------------------------------------------------
   B. Glassmorphism — Product info (frosted glass)
   ------------------------------------------------------------------------- */
/* 17 — Soft colored shadows (sage/terracotta tint). !important so Elementor post CSS does not override. */
.woocommerce div.product .summary.entry-summary,
body.single-product .woocommerce .summary.entry-summary {
	background: rgba(255, 255, 255, 0.45) !important;
	backdrop-filter: blur(12px) !important;
	-webkit-backdrop-filter: blur(12px) !important;
	border: 1px solid rgba(255, 255, 255, 0.35) !important;
	border-radius: 20px !important;
	box-shadow: 0 10px 40px rgba(139, 154, 123, 0.12), 0 4px 12px rgba(196, 164, 132, 0.08) !important;
	padding: 1.5rem 1.75rem !important;
}

/* Marketing card optional glassmorphism accent (keeps existing card style, adds subtle frost) */
.sj-eo-blend-marketing-card .sj-blend-card-body {
	background: rgba(251, 250, 253, 0.85);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* -------------------------------------------------------------------------
   C. Lather button — Shimmer on Add to Cart (WooCommerce + Elementor)
   ------------------------------------------------------------------------- */
.woocommerce div.product .cart .single_add_to_cart_button,
.woocommerce .single_add_to_cart_button,
.woocommerce div.product form.cart .button,
.woocommerce a.button.single_add_to_cart_button,
.woocommerce ul.products li.product .button,
.woocommerce .add-cart .add_to_cart_button,
.elementor-widget-button .elementor-button {
	overflow: hidden;
	position: relative;
}
.woocommerce div.product .cart .single_add_to_cart_button::before,
.woocommerce .single_add_to_cart_button::before,
.woocommerce div.product form.cart .button::before,
.woocommerce ul.products li.product .button::before,
.woocommerce .add-cart .add_to_cart_button::before,
.elementor-widget-button .elementor-button::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	background: linear-gradient(
		to right,
		transparent,
		rgba(255, 255, 255, 0.4),
		transparent
	);
	transition: none;
	pointer-events: none;
}
.woocommerce div.product .cart .single_add_to_cart_button:hover::before,
.woocommerce .single_add_to_cart_button:hover::before,
.woocommerce div.product form.cart .button:hover::before,
.woocommerce ul.products li.product .button:hover::before,
.woocommerce .add-cart .add_to_cart_button:hover::before,
.elementor-widget-button a.elementor-button:hover::before {
	left: 150%;
	transition: left 0.7s ease;
}

/* C. Lather sheen — category pills & scent filter pills (Herbal-Citrus, Energizing & Uplifting, etc.) */
a.sj-product-category-pill,
.sj-product-category-pill,
.sj-filter-pill {
	overflow: hidden;
	position: relative;
}
a.sj-product-category-pill::before,
.sj-product-category-pill::before,
.sj-filter-pill::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 50%;
	height: 100%;
	background: linear-gradient(
		to right,
		transparent,
		rgba(255, 255, 255, 0.4),
		transparent
	);
	transition: none;
	pointer-events: none;
}
a.sj-product-category-pill:hover::before,
.sj-product-category-pill:hover::before,
.sj-filter-pill:hover::before {
	left: 150%;
	transition: left 0.7s ease;
}

/* -------------------------------------------------------------------------
   D. Soft organic image masks — hand-poured soap shape
   ------------------------------------------------------------------------- */
/* Single product gallery */
.woocommerce div.product .goal-woocommerce-product-gallery img,
.woocommerce div.product .woocommerce-product-gallery__image img,
.woocommerce div.product .image-mains img {
	border-radius: 60% 40% 70% 30% / 40% 50% 60% 50%;
	transition: border-radius 0.5s ease-in-out;
}
.woocommerce div.product .goal-woocommerce-product-gallery:hover img,
.woocommerce div.product .woocommerce-product-gallery__image:hover img,
.woocommerce div.product .image-mains:hover img {
	border-radius: 40% 60% 30% 70% / 50% 40% 50% 60%;
}

/* Shop loop & product thumbnails */
.woocommerce ul.products li.product .attachment-woocommerce_thumbnail,
.woocommerce ul.products li.product img,
.woocommerce div.product .goal-woocommerce-product-gallery-thumbs img {
	border-radius: 60% 40% 70% 30% / 40% 50% 60% 50%;
	transition: border-radius 0.5s ease-in-out;
}
.woocommerce ul.products li.product:hover .attachment-woocommerce_thumbnail,
.woocommerce ul.products li.product:hover img,
.woocommerce div.product .goal-woocommerce-product-gallery-thumbs:hover img {
	border-radius: 40% 60% 30% 70% / 50% 40% 50% 60%;
}

/* -------------------------------------------------------------------------
   Scent Note micro-UX — utility classes for Elementor Icon Boxes
   Use class sj-scent-note sj-scent-note--top|middle|base on Icon Box widget
   ------------------------------------------------------------------------- */
.sj-scent-note {
	font-family: var(--sj-sensory-font-body);
}
.sj-scent-note .elementor-icon-box-title,
.sj-scent-note .elementor-icon-box-content .elementor-icon-box-title {
	font-family: var(--sj-sensory-font-heading);
	font-weight: 600;
	color: var(--sj-sensory-text);
}
.sj-scent-note--top .elementor-icon { color: var(--sj-sensory-sage); }
.sj-scent-note--middle .elementor-icon { color: var(--sj-sensory-terracotta); }
.sj-scent-note--base .elementor-icon { color: var(--sj-sensory-text-muted); }

/* 17 — Soft colored shadows: marketing card & product blocks */
.sj-eo-blend-marketing-card,
.sj-eo-blend-marketing-card .sj-blend-card-body {
	box-shadow: 0 10px 40px rgba(139, 154, 123, 0.1), 0 4px 16px rgba(196, 164, 132, 0.06);
}
.woocommerce ul.products li.product .product-block,
.woocommerce ul.products li.product .product-inner,
.woocommerce .products .product-block {
	box-shadow: 0 8px 28px rgba(139, 154, 123, 0.1), 0 2px 10px rgba(196, 164, 132, 0.05);
}

/* -------------------------------------------------------------------------
   12 — Custom loader: rose SVG (replace spinning logo / loading-quick.gif)
   ------------------------------------------------------------------------- */
/* Full-page preloader: use theme loader SVG, no spin, optional pulse */
.goal-page-loading .goal-loader-inner {
	background-image: url('../images/loader-rose.svg') !important;
	background-size: 48px 48px !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	animation: none !important;
}
@keyframes sj-loader-pulse {
	0%, 100% { opacity: 0.85; }
	50% { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
	.goal-page-loading .goal-loader-inner {
		animation: sj-loader-pulse 1.2s ease-in-out infinite !important;
	}
}

/* WooCommerce / ajax loaders: small areas use same SVG */
.goal-shop-products-wrapper.loading::before,
.woocommerce #respond input#submit.loading::after,
.woocommerce a.button.loading::after,
.woocommerce button.button.loading::after,
.woocommerce input.button.loading::after,
.woocommerce .details-product button.button.loading::after,
.woocommerce .product-block-list a.button.loading::after,
.product-block.grid .quickview.loading::before,
.product-block.grid .quickview.loading::after,
.product-block-list .quickview.loading::before,
.product-block-list .quickview.loading::after,
.accessoriesproducts-wrapper.loading::before {
	background-image: url('../images/loader-rose.svg') !important;
	background-size: 20px 20px !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
}
.goal-shop-products-wrapper.loading::before {
	background-size: 50px 50px !important;
}

/* -------------------------------------------------------------------------
   13 — Add-to-cart / wishlist micro-feedback pulse
   ------------------------------------------------------------------------- */
.woocommerce .single_add_to_cart_button.sj-pulsed,
.woocommerce .add_to_cart_button.sj-pulsed,
.woocommerce .button.sj-pulsed,
.elementor-widget-button .elementor-button.sj-pulsed,
.yith-wcwl-add-to-wishlist .ajax-loading.sj-pulsed {
	animation: sj-pulse-feedback 0.4s ease-out;
}
@keyframes sj-pulse-feedback {
	0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(139, 154, 123, 0.4); }
	50% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(139, 154, 123, 0); }
	100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
	.woocommerce .single_add_to_cart_button.sj-pulsed,
	.woocommerce .add_to_cart_button.sj-pulsed,
	.woocommerce .button.sj-pulsed,
	.elementor-widget-button .elementor-button.sj-pulsed {
		animation: none;
	}
}

/* -------------------------------------------------------------------------
   7 — Magnetic buttons: smooth transition for cursor-follow translate
   ------------------------------------------------------------------------- */
.woocommerce .single_add_to_cart_button,
.woocommerce .add_to_cart_button,
.woocommerce .button,
.elementor-widget-button .elementor-button,
.sj-magnetic-btn {
	transition: transform 0.2s ease-out;
}

/* -------------------------------------------------------------------------
   8 — Spotlight: cursor-following glow (--mouse-x, --mouse-y set by JS)
   ------------------------------------------------------------------------- */
.sj-spotlight-card,
.sj-eo-blend-marketing-card {
	position: relative;
	overflow: hidden;
}
.sj-spotlight-card::before,
.sj-eo-blend-marketing-card::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.25s ease;
	background: radial-gradient(
		600px circle at calc(var(--mouse-x, 0.5) * 100%) calc(var(--mouse-y, 0.5) * 100%),
		rgba(139, 154, 123, 0.08),
		transparent 40%
	);
}
.sj-spotlight-card:hover::before,
.sj-eo-blend-marketing-card:hover::before {
	opacity: 1;
}

/* -------------------------------------------------------------------------
   10 — Staggered text reveal (.sj-stagger-words .sj-stagger-word)
   ------------------------------------------------------------------------- */
.sj-stagger-words .sj-stagger-word {
	display: inline-block;
	opacity: 0;
	animation: sj-stagger-in 0.5s ease forwards;
}
@keyframes sj-stagger-in {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.sj-stagger-words .sj-stagger-word {
		animation: none;
		opacity: 1;
	}
}

/* -------------------------------------------------------------------------
   14 — Dark mode (ritual palette): scope when body has .sj-dark-mode or .wp-dark-mode
   Use with WP Dark Mode plugin or theme toggle that adds body class.
   ------------------------------------------------------------------------- */
body.sj-dark-mode,
body.wp-dark-mode-active {
	--sj-sensory-cream: #1a1a1a;
	--sj-sensory-text: #e8e4df;
	--sj-sensory-text-muted: #b0a99e;
	--sj-sensory-border: rgba(232, 228, 223, 0.2);
}
body.sj-dark-mode .woocommerce div.product .summary.entry-summary,
body.wp-dark-mode-active .woocommerce div.product .summary.entry-summary {
	background: rgba(26, 26, 26, 0.6);
	border-color: rgba(232, 228, 223, 0.1);
}
body.sj-dark-mode .sj-eo-blend-marketing-card .sj-blend-card-body,
body.wp-dark-mode-active .sj-eo-blend-marketing-card .sj-blend-card-body {
	background: rgba(30, 30, 28, 0.9);
}

/* -------------------------------------------------------------------------
   21 — Recommendations block (shortcode [sj_recommendations])
   ------------------------------------------------------------------------- */
.sj-recommendations-block {
	font-family: var(--sj-sensory-font-body);
	margin: 2rem 0;
	padding: 1.5rem;
	border-radius: 16px;
	box-shadow: 0 10px 40px rgba(139, 154, 123, 0.1), 0 4px 16px rgba(196, 164, 132, 0.06);
	background: rgba(251, 250, 253, 0.9);
}
.sj-recommendations-title {
	font-family: var(--sj-sensory-font-heading);
	font-size: 1.35rem;
	color: var(--sj-sensory-text);
	margin: 0 0 1rem;
}
.sj-recommendations-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 1rem;
}
.sj-recommendation-item {
	margin: 0;
}
.sj-recommendation-link {
	display: block;
	text-decoration: none;
	color: var(--sj-sensory-text);
}
.sj-recommendation-image {
	border-radius: 60% 40% 70% 30% / 40% 50% 60% 50%;
	width: 100%;
	height: auto;
	display: block;
	margin-bottom: 0.5rem;
}
.sj-recommendation-name {
	font-family: var(--sj-sensory-font-heading);
	font-weight: 600;
	font-size: 0.95rem;
	display: block;
}
.sj-recommendation-price {
	font-size: 0.85rem;
	color: var(--sj-sensory-text-muted);
}
.sj-recommendation-why {
	font-size: 0.8rem;
	color: var(--sj-sensory-text-muted);
	margin: 0.25rem 0 0;
	font-style: italic;
}

/* ==========================================================================
   Mobile-first / touch (98% users) — responsive, tap targets, tap feedback
   ========================================================================== */

/* Touch targets: minimum 44px for primary actions (WCAG / Apple HIG) */
.woocommerce .single_add_to_cart_button,
.woocommerce .add_to_cart_button,
.woocommerce div.product form.cart .button,
a.sj-product-category-pill,
.sj-product-category-pill,
.sj-filter-pill {
	min-height: 44px;
	touch-action: manipulation;
	-webkit-tap-highlight-color: transparent;
}
/* Pills: ensure padding gives 44px height when min-height is used */
a.sj-product-category-pill,
.sj-product-category-pill {
	display: inline-flex;
	align-items: center;
	padding: 10px 18px;
	box-sizing: border-box;
}
.sj-filter-pill {
	min-height: 44px;
	padding: 10px 16px;
	box-sizing: border-box;
}

/* Tap feedback: sheen on tap (mobile) so user sees immediate response */
a.sj-product-category-pill:active::before,
.sj-product-category-pill:active::before,
.sj-filter-pill:active::before,
.woocommerce .single_add_to_cart_button:active::before,
.woocommerce .add_to_cart_button:active::before {
	left: 150%;
	transition: left 0.4s ease;
}
.elementor-widget-button .elementor-button:active::before {
	left: 150%;
	transition: left 0.4s ease;
}

/* Product summary: slightly less padding on narrow viewports */
@media (max-width: 480px) {
	.woocommerce div.product .summary.entry-summary,
	body.single-product .woocommerce .summary.entry-summary {
		padding: 1rem 1.25rem !important;
	}
}

/* Touch devices: no hover, so spotlight is irrelevant; reduce emphasis */
@media (hover: none) {
	.sj-spotlight-card::before,
	.sj-eo-blend-marketing-card::before {
		opacity: 0;
	}
	.sj-spotlight-card:hover::before,
	.sj-eo-blend-marketing-card:hover::before {
		opacity: 0;
	}
}

/* Recommendations block: fewer columns on small screens */
@media (max-width: 480px) {
	.sj-recommendations-list {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.75rem;
	}
	.sj-recommendations-block {
		padding: 1rem;
	}
	.sj-recommendations-title {
		font-size: 1.15rem;
	}
}


/* ==========================================================================
   Sapphire Glow Badge (photoluminescent mica products)
   Added: 2026-03-13 | SJ_MICA_MARKETING_CARDS_VERSION 1.3.0
   ========================================================================== */

.sj-glow-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #0a1628 0%, #0d2b5e 50%, #1a4080 100%);
  color: #7ec8e3;
  border: 1px solid rgba(126, 200, 227, 0.4);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  position: relative;
  cursor: default;
  box-shadow: 0 0 12px rgba(100, 180, 255, 0.25), 0 2px 8px rgba(0, 0, 0, 0.2);
  margin: 8px 0;
}

.sj-glow-icon {
  animation: sj-glow-pulse 2.5s ease-in-out infinite;
  display: inline-block;
}

@keyframes sj-glow-pulse {
  0%,
  100% {
    text-shadow: 0 0 4px #7ec8e3, 0 0 8px #5ab4d6;
    opacity: 1;
  }
  50% {
    text-shadow: 0 0 12px #aaddff, 0 0 24px #7ec8e3, 0 0 40px #5ab4d6;
    opacity: 0.85;
  }
}

.sj-glow-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #082567;
  color: #e8f4ff;
  font-size: 0.76rem;
  font-weight: 400;
  border-radius: 8px;
  padding: 8px 12px;
  width: 240px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  z-index: 100;
  line-height: 1.4;
}

.sj-glow-badge:hover .sj-glow-tooltip,
.sj-glow-badge:focus .sj-glow-tooltip {
  display: block;
}

/* Shop loop glow pill */
.sj-glow-pill {
  display: inline-block;
  background: linear-gradient(135deg, #0a1628, #0d2b5e);
  color: #7ec8e3;
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 0 6px rgba(100, 180, 255, 0.3);
  margin-top: 4px;
}

/* Touch: keep glow animation but remove tooltip (no hover on mobile) */
@media (hover: none) {
  .sj-glow-badge:hover .sj-glow-tooltip {
    display: none;
  }
}
/* FIX 11: Add to Cart button font size */
.single_add_to_cart_button,
.product .cart .single_add_to_cart_button,
.woocommerce div.product form.cart .button {
    font-size: 14px !important;
    letter-spacing: 0.5px;
}

/* === Product Page Redesign 2026-03-18 === */

/* -------------------------------------------------------------------------
   1. Evocative description block — elegant Lora italic prose
   ------------------------------------------------------------------------- */
.sj-product-evocative-desc {
	font-family: 'Lora', Georgia, serif;
	font-style: italic;
	color: #444;
	font-size: 1.05rem;
	line-height: 1.75;
	margin: 0 0 16px;
	position: relative;
	max-height: 6em;         /* ~3–4 lines */
	overflow: hidden;
}
/* Remove any list styling inside the evocative desc */
.sj-product-evocative-desc ul,
.sj-product-evocative-desc ol {
	list-style: none;
	margin: 0;
	padding: 0;
}
.sj-product-evocative-desc li {
	display: inline;
}
.sj-product-evocative-desc li + li::before {
	content: ' ';
}
/* Gentle fade at the bottom edge */
.sj-product-evocative-desc::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2em;
	background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.85));
	pointer-events: none;
}

/* -------------------------------------------------------------------------
   2. Scent / category pills row
   ------------------------------------------------------------------------- */
.sj-product-scent-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
	margin-bottom: 16px;
}

/* -------------------------------------------------------------------------
   3. INCI accordion — compact, collapsed by default
   ------------------------------------------------------------------------- */
.sj-inci-section,
.sj-inci-accordion {
	margin: 4px 0 12px;
	font-size: 0.82rem;
	border: 1px solid rgba(8, 37, 103, 0.12);
	border-radius: 6px;
	overflow: hidden;
}
.sj-inci-section summary,
.sj-inci-accordion summary,
.sj-inci-accordion .sj-inci-toggle {
	padding: 8px 14px;
	cursor: pointer;
	font-family: 'Montserrat', sans-serif;
	font-size: 0.8rem;
	font-weight: 600;
	color: #082567;
	letter-spacing: 0.03em;
	background: rgba(8, 37, 103, 0.04);
	list-style: none;
	user-select: none;
}
.sj-inci-section details[open] summary,
.sj-inci-accordion details[open] summary {
	border-bottom: 1px solid rgba(8, 37, 103, 0.1);
}
.sj-inci-section .sj-inci-body,
.sj-inci-accordion .sj-inci-body {
	padding: 10px 14px;
	color: #555;
	line-height: 1.6;
}

/* -------------------------------------------------------------------------
   4. Summary column spacing & per-section rhythm
   ------------------------------------------------------------------------- */
.woocommerce div.product .summary.entry-summary {
	padding-top: 8px !important;
}
.woocommerce div.product .summary.entry-summary > * {
	margin-bottom: 16px;
}
/* Tighten the very first child so title doesn't have extra top gap */
.woocommerce div.product .summary.entry-summary > *:first-child {
	margin-top: 0;
}

/* -------------------------------------------------------------------------
   5. Hide legacy inline description if it somehow surfaces
   ------------------------------------------------------------------------- */
.sj-product-description-inline {
	display: none !important;
}

/* -------------------------------------------------------------------------
   6. Price — prominent navy
   ------------------------------------------------------------------------- */
.woocommerce div.product .summary .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-size: 1.4rem !important;
	color: #082567 !important;
	font-weight: 700 !important;
	margin: 8px 0 12px !important;
	display: block;
}
.woocommerce div.product .summary .price del,
.woocommerce div.product p.price del {
	font-size: 1rem !important;
	color: #999 !important;
	font-weight: 400 !important;
}

/* -------------------------------------------------------------------------
   7. Add to Cart button — full-width, navy, Jabula
   ------------------------------------------------------------------------- */
.woocommerce div.product form.cart .single_add_to_cart_button,
.woocommerce div.product .cart .single_add_to_cart_button,
.woocommerce .single_add_to_cart_button {
	display: block !important;
	width: 100% !important;
	background-color: #082567 !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 6px !important;
	font-family: 'Jabula', 'Cormorant Garamond', Georgia, serif !important;
	font-size: 1.6rem !important; /* 16px on the 10px root (owner 2026-10-16) */
	font-weight: 700 !important;
	letter-spacing: 0.04em !important;
	padding: 14px 24px !important;
	text-transform: none !important;
	cursor: pointer !important;
	transition: background-color 0.2s ease, transform 0.15s ease !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:hover,
.woocommerce div.product .cart .single_add_to_cart_button:hover,
.woocommerce .single_add_to_cart_button:hover {
	background-color: #0a3080 !important;
}
.woocommerce div.product form.cart .single_add_to_cart_button:active,
.woocommerce .single_add_to_cart_button:active {
	transform: scale(0.99) !important;
}

/* -------------------------------------------------------------------------
   8. Trust badges — horizontal, centered, subtle
   ------------------------------------------------------------------------- */
.sj-trust-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 12px;
	font-size: 0.78rem;
	color: #666;
	margin-top: 8px;
	text-align: center;
}
.sj-trust-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

/* -------------------------------------------------------------------------
   9. Urgency message — subtle blue tagline
   ------------------------------------------------------------------------- */
.sj-urgency {
	font-size: 0.82rem !important;
	color: #0076e2 !important;
	margin-bottom: 4px !important;
	font-style: normal !important;
	font-weight: 500;
	letter-spacing: 0;
}
/* Remove any arrow/special prefix via content if renderer uses ::before */
.sj-urgency::before {
	content: '' !important;
}

/* -------------------------------------------------------------------------
   10. Mica marketing card — inline flow, no disruptive margin
   ------------------------------------------------------------------------- */
.sj-mica-card,
.sj-mica-marketing-card {
	margin-top: 4px !important;
	margin-bottom: 8px !important;
}

/* -------------------------------------------------------------------------
   Mobile adjustments for redesign elements
   ------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.sj-product-evocative-desc {
		font-size: 0.98rem;
		max-height: 7em;
	}
	.woocommerce div.product .summary .price,
	.woocommerce div.product p.price {
		font-size: 1.25rem !important;
	}
	.sj-trust-badges {
		font-size: 0.72rem;
		gap: 8px;
	}
}

/* === End Product Page Redesign 2026-03-18 === */