/* Redesign base: tokens, resets and shared components (product cards, section heads). */

.pma-ui {
	--pma-purple: #7141cc;
	--pma-ink: #282337;
	--pma-muted: #756d83;
	--pma-line: #eae5f0;
	--pma-bg: #fff;
	--pma-soft: #f7f4fc;
	--pma-radius: 13px;
	background: var(--pma-bg);
	color: var(--pma-ink);
	font-family: Arial, Helvetica, sans-serif;
}

.pma-ui *,
.pma-ui *::before,
.pma-ui *::after { box-sizing: border-box; }

.pma-ui a { color: inherit; text-decoration: none; }
.pma-ui :is(a, button, input, select, summary):focus-visible { outline: 3px solid var(--pma-purple); outline-offset: 3px; }

.pma-ui h1,
.pma-ui h2,
.pma-ui h3 {
	font-family: inherit;
	color: var(--pma-ink);
	text-transform: none;
	font-weight: 500;
}

.pma-icon { width: 1em; height: 1em; flex-shrink: 0; }

/* Quantity stepper */
.pma-ui .quantity {
	display: inline-flex; align-items: stretch; margin: 0; opacity: 1;
	border: 1px solid var(--pma-line); border-radius: 7px; background: #fff; overflow: hidden;
	min-height: 44px;
}
.pma-ui .quantity input.minus,
.pma-ui .quantity input.plus {
	width: 32px; min-height: 42px; height: auto; margin: 0; padding: 0;
	border: 0; border-radius: 0; background: none; box-shadow: none;
	font-size: 18px; line-height: 1; color: var(--pma-muted);
}
.pma-ui .quantity input.minus:hover,
.pma-ui .quantity input.plus:hover { color: var(--pma-purple); background: var(--pma-soft); }
.pma-ui .quantity input.qty {
	width: 38px; min-height: 42px; height: auto; margin: 0; padding: 0;
	border: 0; box-shadow: none; background: #fff;
	text-align: center; font-size: 14px; color: var(--pma-ink);
	appearance: textfield; -moz-appearance: textfield;
}
.pma-ui .quantity input.qty::-webkit-inner-spin-button,
.pma-ui .quantity input.qty::-webkit-outer-spin-button { appearance: none; margin: 0; }

/* Notices (WooCommerce's notices/*.php markup; defaults in reset.css) */
.pma-ui .woocommerce-notices-wrapper:not(:empty) { margin-bottom: 23px; }
.pma-ui :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) { margin: 0 0 10px; font-size: 12px; line-height: 1.7; }
.pma-ui .woocommerce-message .button { font-weight: 400; }
.pma-ui .woocommerce-message .button:hover { text-decoration: underline; filter: none; }
.pma-ui .restore-item { color: var(--pma-purple); text-decoration: underline; }

/* Buttons */
.pma-ui .pma-primary,
.pma-ui .pma-secondary {
	display: inline-flex; align-items: center; justify-content: center; gap: 12px;
	min-height: 44px; margin: 0; padding: 12px 20px;
	border-radius: 7px; box-shadow: none; cursor: pointer;
	font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1.2;
	text-transform: none; letter-spacing: 0;
}
.pma-ui .pma-primary { background-color: var(--pma-purple); color: #fff; border: 0; }
.pma-ui .pma-primary:hover { filter: brightness(.93); color: #fff; }
.pma-ui .pma-secondary { background: #fff; color: var(--pma-ink); border: 1px solid var(--pma-line); font-weight: 400; font-size: 12px; min-height: 42px; padding: 11px 15px; }
.pma-ui .pma-secondary:hover { border-color: var(--pma-purple); color: var(--pma-purple); }
.pma-ui .pma-secondary:disabled { opacity: .45; cursor: default; border-color: var(--pma-line); color: var(--pma-ink); }
.pma-ui .pma-link { color: var(--pma-purple); font-size: 12px; }
.pma-ui .pma-link:hover { text-decoration: underline; }

/* Breadcrumb */
.pma-breadcrumb {
	display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
	font-size: 11px; color: var(--pma-muted); margin-bottom: 26px;
}
.pma-ui .pma-breadcrumb a { color: var(--pma-purple); }
.pma-ui .pma-breadcrumb a:hover { text-decoration: underline; }

/* Intro: page heading and lead */
.pma-intro {
	text-align: center;
	padding: 37px 28px 32px;
	border-bottom: 1px solid var(--pma-line);
	background: linear-gradient(180deg, #fcfaff 0%, #fff 100%);
}
.pma-ui .pma-intro h1 { font-size: 32px; line-height: 1.2; letter-spacing: -1px; margin: 0 auto 14px; max-width: 900px; }
.pma-intro h1 span { color: var(--pma-purple); }
.pma-intro p { font-size: 16px; line-height: 1.7; color: var(--pma-muted); margin: 0 auto; max-width: 720px; }
.pma-ui .pma-intro p a { color: var(--pma-purple); }
.pma-ui .pma-intro p a:hover { text-decoration: underline; }

/* Catalog: sections of product cards */
.pma-catalog { max-width: 1110px; margin: 0 auto; padding: 29px 34px 34px; }

/* Why us cards */
.pma-features {
	max-width: 1110px; margin: 0 auto; padding: 8px 34px 44px;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px;
}
.pma-feature {
	background: var(--pma-soft);
	border: 1px solid var(--pma-line);
	border-radius: var(--pma-radius);
	padding: 22px;
}
.pma-feature-icon {
	width: 40px; height: 40px;
	display: flex; align-items: center; justify-content: center;
	background: var(--pma-bg); color: var(--pma-purple);
	border-radius: 11px; font-size: 20px; margin-bottom: 14px;
	box-shadow: 0 4px 12px #815e9914;
}
.pma-ui .pma-feature h3 { font-size: 16px; line-height: 1.3; margin: 0 0 8px; letter-spacing: -.2px; }
.pma-feature p { font-size: 13px; line-height: 1.7; color: var(--pma-muted); margin: 0; }

@media (max-width: 780px) {
	.pma-catalog { padding: 25px 22px; }
	.pma-features { padding: 4px 22px 36px; grid-template-columns: 1fr; gap: 10px; }
	.pma-ui .pma-intro h1 { font-size: 26px; }
}

@media (max-width: 600px) {
	.pma-intro { padding: 29px 22px; }
	.pma-ui .pma-intro h1 { font-size: 23px; letter-spacing: -.5px; }
	.pma-intro p { font-size: 15px; }
}

@media (max-width: 380px) {
	.pma-catalog { padding: 24px 16px; }
	.pma-features { padding-left: 16px; padding-right: 16px; }
}

/* Article: page content from the block editor (network and legal pages) */
.pma-article {
	max-width: 780px; margin: 0 auto; padding: 38px 34px 20px;
	border-top: 1px solid var(--pma-line);
}
.pma-ui .pma-article :is(h2, h3, h4) {
	margin: 30px 0 10px; color: var(--pma-ink); font-weight: 500;
	line-height: 1.3; letter-spacing: -.3px; text-transform: none;
}
.pma-ui .pma-article h2 { font-size: 26px; letter-spacing: -.5px; }
.pma-ui .pma-article h3 { font-size: 20px; }
.pma-ui .pma-article h4 { font-size: 17px; }
.pma-ui .pma-article > :first-child { margin-top: 0; }
.pma-ui .pma-article :is(h2, h3, h4) strong { font-weight: inherit; color: inherit; }
.pma-article :is(p, li) { font-size: 16px; line-height: 1.8; color: var(--pma-muted); }
.pma-article p { margin: 0 0 14px; }
.pma-article :is(ul, ol) { margin: 0 0 16px; padding-left: 22px; }
.pma-article li { margin: 0 0 8px; }
.pma-article li::marker { color: var(--pma-purple); }
.pma-article :is(strong, b) { color: var(--pma-ink); font-weight: 600; }
.pma-ui .pma-article a { color: var(--pma-purple); }
.pma-ui .pma-article a:hover { text-decoration: underline; }
.pma-article figure { margin: 22px 0; }
.pma-article img { height: auto; max-width: 100%; border-radius: var(--pma-radius); }
.pma-article iframe { display: block; max-width: 100%; margin: 22px 0; border: 0; border-radius: 9px; }

/* FAQ accordion ([pma_faq], inc/seo/faq.php): articles and product descriptions */
.pma-faq { margin: 30px 0 22px; }
.pma-ui .pma-faq .pma-faq__title { margin: 0 0 14px; }
.pma-faq__list { display: grid; gap: 10px; }
.pma-faq__item { background: #fff; border: 1px solid var(--pma-line); border-radius: 11px; transition: border-color .15s; }
.pma-faq__item[open], .pma-faq__item:hover { border-color: #d8cdea; }
.pma-faq__question {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding: 15px 18px; list-style: none; cursor: pointer;
	font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--pma-ink);
}
.pma-faq__question::-webkit-details-marker { display: none; }
.pma-faq__question::after {
	content: ""; flex: 0 0 18px; height: 18px; transition: transform .2s;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237141cc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pma-faq__item[open] .pma-faq__question::after { transform: rotate(180deg); }
.pma-faq__question:hover { color: var(--pma-purple); }
.pma-ui .pma-faq__question:focus-visible { outline-offset: -3px; border-radius: 11px; }
.pma-faq__answer { padding: 0 18px 16px; }
.pma-faq__answer > :last-child { margin-bottom: 0; }
.pma-faq__answer :is(p, li) { font-size: 16px; line-height: 1.75; color: var(--pma-muted); }
.pma-faq__answer p { margin: 0 0 10px; }
.pma-ui .pma-faq__answer a { color: var(--pma-purple); text-decoration: underline; }

@media (max-width: 780px) {
	.pma-article { padding: 30px 22px 14px; }
	.pma-ui .pma-article h2 { font-size: 23px; }
	.pma-ui .pma-article h3 { font-size: 18px; }
	.pma-faq__question { padding: 14px 15px; font-size: 15px; }
	.pma-faq__answer { padding: 0 15px 14px; }
}
@media (max-width: 600px) {
	.pma-article :is(p, li) { font-size: 15px; }
}
@media (max-width: 380px) {
	.pma-article { padding-left: 16px; padding-right: 16px; }
}

/* Section head: icon, title, "view all" */
.pma-section + .pma-section { margin-top: 35px; }
.pma-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 17px; }
.pma-section-icon {
	width: 31px; height: 31px;
	display: flex; align-items: center; justify-content: center;
	background: var(--pma-soft); color: var(--pma-purple);
	border-radius: 9px; flex-shrink: 0; font-size: 18px;
}
.pma-ui .pma-section-head h2 { margin: 0; font-size: 20px; letter-spacing: -.5px; }
.pma-ui .pma-view-all { margin-left: auto; font-size: 11px; color: var(--pma-purple); white-space: nowrap; }
.pma-ui .pma-view-all:hover { text-decoration: underline; }

/* Product card */
.pma-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; }

.pma-product {
	/* Column: the button sits at the bottom, level across a row when titles wrap. */
	display: flex; flex-direction: column;
	border: 1px solid var(--pma-line);
	border-radius: var(--pma-radius);
	overflow: hidden; min-width: 0;
	background: var(--pma-bg);
	transition: box-shadow .2s, transform .2s;
}
.pma-product:hover { box-shadow: 0 10px 28px #28233714; transform: translateY(-2px); }

/* Artwork panel, tinted per network. Variables inherit from the nearest
   [data-network], so a card keeps its own tint inside another network's page. */
.pma-ui,
[data-network=instagram] { --pma-art-bg: linear-gradient(135deg, #f3e8fc, #fff1e9); --pma-art-ink: var(--pma-purple); }
[data-network=tiktok]    { --pma-art-bg: linear-gradient(135deg, #e8f4f4, #f1edf9); --pma-art-ink: #384653; }
[data-network=twitter]   { --pma-art-bg: linear-gradient(135deg, #e9f1fb, #f1edf9); --pma-art-ink: #384653; }
[data-network=facebook]  { --pma-art-bg: linear-gradient(135deg, #e9eefa, #f3eefb); --pma-art-ink: var(--pma-purple); }
[data-network=youtube]   { --pma-art-bg: linear-gradient(135deg, #fcebeb, #f6f0fb); --pma-art-ink: var(--pma-purple); }
[data-network=spotify]   { --pma-art-bg: linear-gradient(135deg, #e7f5ec, #f1edf9); --pma-art-ink: #384653; }
[data-network=threads]   { --pma-art-bg: linear-gradient(135deg, #efeef3, #f6f2fb); --pma-art-ink: #384653; }
[data-network=telegram]  { --pma-art-bg: linear-gradient(135deg, #e6f3fb, #f1edf9); --pma-art-ink: #1c7fb8; }
[data-network=twitch]    { --pma-art-bg: linear-gradient(135deg, #efe7fd, #f6f0fb); --pma-art-ink: var(--pma-purple); }
[data-network=kick]      { --pma-art-bg: linear-gradient(135deg, #e9f7e6, #f1edf9); --pma-art-ink: #1f2326; }
[data-network=pinterest] { --pma-art-bg: linear-gradient(135deg, #fdeaea, #f6f0fb); --pma-art-ink: #e60023; }
[data-network=reddit]    { --pma-art-bg: linear-gradient(135deg, #fdeee6, #f6f0fb); --pma-art-ink: #ff4500; }

.pma-ui .pma-art {
	height: 164px; position: relative;
	display: flex; align-items: center; justify-content: center;
	background: var(--pma-art-bg);
	color: var(--pma-art-ink);
}

.pma-sticker {
	display: flex; align-items: center; justify-content: center;
	width: 77px; height: 77px; border-radius: 24px;
	background: #ffffffbf; box-shadow: 0 8px 18px #815e9910;
	transform: rotate(-7deg); font-size: 36px;
}
.pma-sticker .pma-icon { stroke-width: 1.5; transform: rotate(7deg); }

.pma-product-image {
	width: 124px; height: 124px;
	object-fit: contain;
	/* Some product images have an opaque white background: blend it into the panel. */
	mix-blend-mode: multiply;
	transition: transform .2s;
}
.pma-product:hover .pma-product-image { transform: scale(1.04) rotate(-2deg); }

.pma-service-tag,
.pma-discount {
	position: absolute;
	background: #ffffffd9;
	padding: 4px 7px; border-radius: 5px;
	font-size: 11px; line-height: 1.3;
}
.pma-service-tag { right: 10px; bottom: 10px; color: var(--pma-muted); }
/* Discount: solid, so it reads on any product image. */
.pma-discount {
	left: 11px; top: 11px; padding: 5px 9px; border-radius: 999px;
	background: linear-gradient(135deg, #7141cc, #d6457f); color: #fff;
	font-size: 12px; font-weight: 700; letter-spacing: .2px;
	box-shadow: 0 3px 10px #7141cc40;
}

.pma-product-info { display: flex; flex-direction: column; flex: 1 0 auto; padding: 16px; }
.pma-product-info .pma-buy { margin-top: auto; }
.pma-ui .pma-product-info h3 { font-size: 16px; line-height: 1.3; margin: 0 0 10px; letter-spacing: -.2px; min-height: 21px; }
.pma-product-info h3 a:hover { color: var(--pma-purple); }

.pma-price { font-size: 12px; color: var(--pma-muted); margin: 0 0 15px; white-space: nowrap; }
.pma-price strong { font-size: 16px; font-weight: 500; color: var(--pma-ink); }
.pma-price .amount { font-weight: inherit; color: inherit; }

.pma-ui .pma-buy {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	background: var(--pma-purple); color: #fff;
	padding: 11px 10px; border-radius: 7px;
	font-size: 12px; font-weight: 700; line-height: 1.2;
}
.pma-ui .pma-buy:hover { filter: brightness(.93); color: #fff; }

.pma-trust {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	margin: 31px 0 0; padding-top: 23px;
	border-top: 1px solid var(--pma-line);
	color: var(--pma-muted); font-size: 11px; line-height: 1.6;
}
.pma-trust .pma-icon { font-size: 15px; color: var(--pma-purple); }

@media (max-width: 780px) {
	.pma-grid { gap: 10px; }
	.pma-product-image { width: 104px; height: 104px; }
	.pma-product-info { padding: 12px; }
	.pma-price { font-size: 11px; }
	.pma-price strong { font-size: 14px; }
	.pma-ui .pma-product-info h3 { font-size: 15px; }
	.pma-ui .pma-art { height: 140px; }
}

@media (max-width: 600px) {
	.pma-ui .quantity input.qty { font-size: 16px; } /* no iOS zoom on focus */
	.pma-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
	.pma-product-info { padding: 14px; }
	.pma-ui .pma-section-head h2 { font-size: 18px; }
}

@media (max-width: 380px) {
	.pma-section-head { gap: 7px; }
	.pma-ui .pma-section-head h2 { font-size: 16px; }
	.pma-product-info { padding: 12px 10px; }
	.pma-ui .pma-product-info h3 { font-size: 14px; }
	.pma-price { white-space: normal; }
	.pma-ui .pma-art { height: 124px; }
	.pma-product-image { width: 92px; height: 92px; }
	.pma-section-icon { width: 27px; height: 27px; }
}

@media (prefers-reduced-motion: reduce) {
	.pma-product, .pma-product-image { transition: none; }
	.pma-product:hover, .pma-product:hover .pma-product-image { transform: none; }
}

/* Cart, checkout and order received are page content (page.php prints it
   bare); give them the space the other templates get from their intro. */
#main > :is(.pma-cart, .pma-checkout) { margin-top: 30px; }

/* Audio and video blocks in articles and product descriptions */
:is(.pma-article, .woocommerce-tabs .panel) .wp-block-audio { margin: 22px 0; }
:is(.pma-article, .woocommerce-tabs .panel) .wp-block-audio audio { display: block; width: 100%; }
:is(.pma-article, .woocommerce-tabs .panel) :is(.wp-block-audio, .wp-block-embed) figcaption {
	margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--pma-muted); text-align: center;
}