/* PolarPeak Labs — component styles for plugin blocks.
   Uses the theme's design tokens (theme.json) with brand-kit fallbacks. */

:root {
	--pp-black: var(--wp--preset--color--summit-black, #0A0C0F);
	--pp-glacier: var(--wp--preset--color--glacier-shadow, #1C2733);
	--pp-granite: var(--wp--preset--color--granite, #5B6670);
	--pp-frost: var(--wp--preset--color--frost, #D6DEE5);
	--pp-snow: var(--wp--preset--color--fresh-snow, #F6F8FA);
	--pp-white: var(--wp--preset--color--white, #FFFFFF);
	--pp-ice: var(--wp--preset--color--ice-blue, #B9DFF2);
	--pp-glow: var(--wp--preset--color--alpenglow, #FF5A2E);
	--pp-amber: var(--wp--preset--color--notice-amber, #F2B705);
	--pp-mono: var(--wp--preset--font-family--mono, "JetBrains Mono", ui-monospace, monospace);
	--pp-display: var(--wp--preset--font-family--display, "Michroma", sans-serif);
	--pp-radius: 2px;
	--pp-ease: cubic-bezier(.2, .7, .2, 1);
}

:where([class^="pp-"], [class*=" pp-"]), :where([class^="pp-"], [class*=" pp-"]) * { box-sizing: border-box; }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; width: 1px; word-wrap: normal !important;
}

.pp-icon { flex: none; display: inline-block; vertical-align: middle; }
.pp-mono { font-family: var(--pp-mono); font-size: .92em; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.pp-muted { color: var(--pp-granite); }
.pp-eyebrow, .pp-label {
	display: block; font-size: .75rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
	color: var(--pp-granite); margin: 0 0 .5rem;
}
.pp-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Inputs ---------- */
.pp-search-form input[type="search"],
.pp-coa-library input, .pp-coa-library select,
.pp-coa-lookup input, .pp-newsletter input,
.pp-form input, .pp-form select, .pp-form textarea {
	width: 100%; min-height: 48px; padding: .75rem 1rem; font: inherit; font-size: 1rem;
	color: var(--pp-black); background: var(--pp-white); border: 1px solid var(--pp-frost);
	border-radius: var(--pp-radius); transition: border-color .2s var(--pp-ease), box-shadow .2s var(--pp-ease);
	-webkit-appearance: none; appearance: none;
}
.pp-form textarea { min-height: 160px; resize: vertical; }
.pp-coa-library select, .pp-form select {
	padding-right: 2.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235B6670' stroke-width='1.6'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 1rem center;
}
:is(.pp-search-form, .pp-coa-library, .pp-coa-lookup, .pp-newsletter, .pp-form) :is(input, select, textarea):hover { border-color: var(--pp-granite); }
:is(.pp-search-form, .pp-coa-library, .pp-coa-lookup, .pp-newsletter, .pp-form) :is(input, select, textarea):focus {
	outline: none; border-color: var(--pp-black); box-shadow: 0 0 0 3px rgba(255, 90, 46, .28);
}

.pp-inline-field { display: flex; gap: .5rem; }
.pp-inline-field input { flex: 1 1 auto; min-width: 0; }
.pp-inline-field .wp-element-button { flex: none; white-space: nowrap; }

/* ---------- Product search ---------- */
.pp-product-search { width: 100%; }
.pp-search-form { position: relative; }
.pp-search-form__field { position: relative; display: flex; align-items: center; }
.pp-search-form__field > .pp-icon { position: absolute; left: 1.1rem; color: var(--pp-granite); pointer-events: none; }
.pp-search-form input[type="search"] { min-height: 60px; padding-left: 3.1rem; padding-right: 7.5rem; font-size: 1.0625rem; }
.pp-search-form input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.pp-search-form__submit {
	position: absolute; right: 6px; top: 6px; bottom: 6px; padding: 0 1.25rem; border: 0; border-radius: var(--pp-radius);
	background: var(--pp-black); color: var(--pp-white); font: inherit; font-size: .8125rem; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background-color .2s var(--pp-ease);
}
.pp-search-form__submit:hover { background: var(--pp-glacier); }
.pp-search-form__submit:focus-visible { outline: 2px solid var(--pp-glow); outline-offset: 2px; }
.pp-search-form__results {
	position: absolute; z-index: 50; left: 0; right: 0; top: calc(100% + 6px); max-height: min(420px, 60vh); overflow: auto;
	background: var(--pp-white); border: 1px solid var(--pp-frost); border-radius: var(--pp-radius);
	box-shadow: 0 24px 48px -24px rgba(10, 12, 15, .35); padding: .375rem;
}
.pp-search-form__item {
	display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: .875rem;
	padding: .5rem .625rem; color: var(--pp-black); text-decoration: none; border-radius: var(--pp-radius);
}
.pp-search-form__item:not(:has(img)) { grid-template-columns: 1fr auto; }
.pp-search-form__item img { width: 44px; height: 55px; object-fit: cover; background: var(--pp-snow); }
.pp-search-form__item:hover, .pp-search-form__item[aria-selected="true"] { background: var(--pp-snow); }
.pp-search-form__name { font-weight: 600; }
.pp-search-form__price { font-family: var(--pp-mono); font-size: .875rem; color: var(--pp-granite); }
.pp-search-form__empty { margin: 0; padding: .875rem .625rem; color: var(--pp-granite); }
.pp-search-form__all {
	display: block; margin-top: .25rem; padding: .75rem .625rem; border-top: 1px solid var(--pp-frost);
	font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pp-black); text-decoration: none;
}
.pp-search-form__all:hover { color: var(--pp-glow); }

.pp-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; }
.pp-chips__label { font-size: .75rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--pp-granite); margin-right: .25rem; }
.pp-chip {
	display: inline-flex; align-items: center; min-height: 36px; padding: 0 .875rem; font-size: .875rem; font-weight: 600;
	color: var(--pp-black); text-decoration: none; border: 1px solid var(--pp-frost); border-radius: var(--pp-radius);
	background: var(--pp-white); transition: border-color .2s var(--pp-ease), background-color .2s var(--pp-ease);
}
.pp-chip:hover { border-color: var(--pp-black); }

/* Dark-surface variant (search inside dark sections) */
.has-summit-black-background-color .pp-chip, .has-glacier-shadow-background-color .pp-chip { background: transparent; color: var(--pp-white); border-color: rgba(214, 222, 229, .3); }
.has-summit-black-background-color .pp-chip:hover, .has-glacier-shadow-background-color .pp-chip:hover { border-color: var(--pp-white); }

/* ---------- Header search toggle / dialog ---------- */
.pp-icon-button {
	display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
	border: 0; background: transparent; color: inherit; cursor: pointer; border-radius: var(--pp-radius);
}
.pp-icon-button:hover { color: var(--pp-glow); }
.pp-icon-button:focus-visible { outline: 2px solid var(--pp-glow); outline-offset: 2px; }
.pp-search-dialog {
	width: 100%; max-width: none; margin: 0; padding: 0; border: 0; background: var(--pp-white);
	top: 0; bottom: auto; box-shadow: 0 30px 60px -30px rgba(10, 12, 15, .45);
}
.pp-search-dialog[open] { animation: pp-drop .28s var(--pp-ease); }
.pp-search-dialog::backdrop { background: rgba(10, 12, 15, .55); backdrop-filter: blur(2px); }
.pp-search-dialog__inner {
	display: flex; align-items: flex-start; gap: .75rem; max-width: 880px; margin: 0 auto;
	padding: clamp(1.25rem, 4vw, 2.5rem) var(--wp--style--root--padding-right, 1.25rem);
}
.pp-search-dialog .pp-search-form { flex: 1; }
.pp-search-dialog__close { margin-top: 8px; color: var(--pp-black); }
@keyframes pp-drop { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- Category nav ---------- */
.pp-category-nav ul { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.pp-category-nav ul::-webkit-scrollbar { display: none; }
.pp-category-nav a {
	display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding: 0 1rem; white-space: nowrap;
	font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
	color: var(--pp-granite); border: 1px solid transparent; border-radius: var(--pp-radius);
}
.pp-category-nav a:hover { color: var(--pp-black); }
.pp-category-nav a[aria-current="page"] { color: var(--pp-black); border-color: var(--pp-black); }
.pp-count { font-family: var(--pp-mono); font-size: .75rem; font-weight: 400; letter-spacing: 0; color: var(--pp-granite); }

/* ---------- Card meta ---------- */
.pp-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .75rem; font-size: .8125rem; }
.pp-card-meta__sizes { display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.pp-card-meta__sizes li { padding: .125rem .5rem; border: 1px solid var(--pp-frost); border-radius: var(--pp-radius); color: var(--pp-black); background: var(--pp-white); }
.pp-stock { display: inline-flex; align-items: center; gap: .375rem; color: var(--pp-granite); }
.pp-stock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2E9E6A; }
.pp-stock--outofstock::before { background: var(--pp-granite); }
.pp-stock--onbackorder::before { background: var(--pp-amber); }
.pp-ruo-tag { font-size: .6875rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pp-granite); }

/* ---------- RUO notice ---------- */
.pp-ruo { display: flex; gap: .75rem; align-items: flex-start; margin: 0; font-size: .8125rem; line-height: 1.55; color: var(--pp-glacier); }
.pp-ruo__icon { color: #8a6a00; padding-top: 1px; }
.pp-ruo__text { display: flex; flex-direction: column; gap: .25rem; }
.pp-ruo__primary { font-weight: 700; letter-spacing: .04em; color: var(--pp-black); }
.pp-ruo--inline { padding: .875rem 1rem; background: var(--pp-snow); border-left: 3px solid var(--pp-amber); }
.pp-ruo--full { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--pp-frost); border-left: 3px solid var(--pp-amber); background: var(--pp-white); font-size: .875rem; }
.pp-ruo--full .pp-ruo__primary { font-size: .9375rem; }
.pp-ruo--compact, .pp-ruo--bar { align-items: center; gap: .5rem; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.pp-ruo--bar .pp-ruo__primary, .pp-ruo--compact .pp-ruo__primary { color: inherit; font-weight: 600; letter-spacing: inherit; }
.pp-ruo__mark { flex: none; width: 7px; height: 7px; background: var(--pp-amber); transform: rotate(45deg); }
:is(.has-summit-black-background-color, .has-glacier-shadow-background-color) .pp-ruo--full { background: transparent; border-color: rgba(214, 222, 229, .2); border-left-color: var(--pp-amber); color: var(--pp-frost); }
:is(.has-summit-black-background-color, .has-glacier-shadow-background-color) .pp-ruo--full .pp-ruo__primary { color: var(--pp-white); }
:is(.has-summit-black-background-color, .has-glacier-shadow-background-color) .pp-ruo__icon { color: var(--pp-amber); }

/* ---------- COA library ---------- */
.pp-coa-library__controls { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem; align-items: end; }
.pp-coa-library__controls .pp-field { margin: 0; }
.pp-input-icon { position: relative; display: block; }
.pp-input-icon .pp-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--pp-granite); }
.pp-input-icon input { padding-left: 2.85rem; }
.pp-coa-library__count { margin: 1.75rem 0 .75rem; font-family: var(--pp-mono); font-size: .8125rem; color: var(--pp-granite); }

.pp-coa-table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.pp-coa-table thead th {
	text-align: left; font-size: .6875rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
	color: var(--pp-granite); padding: .75rem 1rem; border-bottom: 1px solid var(--pp-black);
}
.pp-coa-table tbody th, .pp-coa-table td { text-align: left; padding: 1.125rem 1rem; border-bottom: 1px solid var(--pp-frost); vertical-align: middle; }
.pp-coa-table tbody th { font-weight: 700; }
.pp-coa-table tbody th a { color: var(--pp-black); text-decoration: none; }
.pp-coa-table tbody th a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pp-coa-table tbody tr { transition: background-color .15s var(--pp-ease); }
.pp-coa-table tbody tr:hover { background: var(--pp-snow); }
.pp-coa-table__action { text-align: right !important; white-space: nowrap; }
.pp-link-button {
	display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; padding: 0 1rem; font-size: .8125rem; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase; color: var(--pp-black); text-decoration: none;
	border: 1px solid var(--pp-black); border-radius: var(--pp-radius); transition: all .2s var(--pp-ease);
}
.pp-link-button:hover { background: var(--pp-black); color: var(--pp-white); }

.pp-badge { display: inline-block; padding: .2rem .55rem; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; border-radius: var(--pp-radius); background: var(--pp-snow); color: var(--pp-granite); border: 1px solid var(--pp-frost); }
.pp-badge--current { background: var(--pp-ice); border-color: var(--pp-ice); color: var(--pp-black); }
.pp-badge--archived { opacity: .7; }

.pp-empty { padding: clamp(2rem, 6vw, 3.5rem) 1.5rem; text-align: center; border: 1px dashed var(--pp-frost); }
.pp-empty p { margin: 0 auto; max-width: 46ch; color: var(--pp-granite); }
.pp-empty .pp-empty__title { font-weight: 700; color: var(--pp-black); margin-bottom: .5rem; }

@media (max-width: 781px) {
	.pp-coa-library__controls { grid-template-columns: 1fr; }
	.pp-coa-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.pp-coa-table, .pp-coa-table tbody { display: block; }
	.pp-coa-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1rem; padding: 1.25rem 0; border-bottom: 1px solid var(--pp-frost); }
	.pp-coa-table tr[hidden] { display: none; }
	.pp-coa-table tbody th, .pp-coa-table td { display: block; padding: 0; border: 0; }
	.pp-coa-table tbody th { grid-column: 1 / -1; font-size: 1.0625rem; }
	.pp-coa-table td[data-label]::before { content: attr(data-label); display: block; font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--pp-granite); margin-bottom: .2rem; }
	.pp-coa-table__action { grid-column: 1 / -1; text-align: left !important; }
	.pp-coa-table__action .pp-link-button { width: 100%; justify-content: center; min-height: 48px; }
	.pp-coa-table tbody tr:hover { background: transparent; }
}

/* ---------- Product COA panel ---------- */
.pp-coa-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(1.5rem, 4vw, 4rem); padding: clamp(1.75rem, 4vw, 3rem); background: var(--pp-snow); border: 1px solid var(--pp-frost); }
.pp-coa-panel__title { margin: 0; font-family: var(--pp-display); font-size: clamp(1.125rem, 2vw, 1.5rem); line-height: 1.25; letter-spacing: .06em; text-transform: uppercase; }
.pp-spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem 2rem; margin: 0 0 1.75rem; }
.pp-spec__row { border-top: 1px solid var(--pp-frost); padding-top: .75rem; }
.pp-spec dt { font-size: .6875rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--pp-granite); margin-bottom: .25rem; }
.pp-spec dd { margin: 0; font-size: 1rem; color: var(--pp-black); }
.pp-spec__lot { font-size: 1.25rem !important; font-weight: 500; }
.pp-coa-panel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.pp-button-coa { display: inline-flex !important; align-items: center; gap: .6rem; }
.pp-text-link { display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pp-black); text-decoration: none; }
.pp-text-link .pp-icon { width: 16px; height: 16px; transition: transform .2s var(--pp-ease); }
.pp-text-link:hover .pp-icon { transform: translateX(3px); }
.pp-coa-previous { margin-top: 1.75rem; border-top: 1px solid var(--pp-frost); }
.pp-coa-previous summary { cursor: pointer; padding: 1rem 0 .25rem; font-weight: 700; font-size: .875rem; list-style: none; display: flex; align-items: center; gap: .5rem; }
.pp-coa-previous summary::-webkit-details-marker { display: none; }
.pp-coa-previous summary::before { content: "+"; font-family: var(--pp-mono); width: 1em; }
.pp-coa-previous[open] summary::before { content: "−"; }
.pp-coa-previous ul { margin: .5rem 0 0; padding: 0; list-style: none; }
.pp-coa-previous li { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; padding: .625rem 0; border-bottom: 1px solid var(--pp-frost); }
.pp-coa-previous li a { margin-left: auto; font-weight: 700; font-size: .8125rem; color: var(--pp-black); }
.pp-coa-panel__empty { margin: 0 0 .25rem; font-weight: 700; color: var(--pp-black); }
@media (max-width: 781px) { .pp-coa-panel { grid-template-columns: 1fr; } }

/* ---------- COA lookup ---------- */
.pp-coa-lookup__recent { margin-top: 1.5rem; }
.pp-coa-lookup__recent ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid currentColor; border-color: var(--pp-frost); }
.pp-coa-lookup__recent li { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--pp-frost); }
.pp-coa-lookup__name { font-weight: 600; }
.pp-coa-lookup__recent a { font-size: .8125rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: inherit; }

/* ---------- Forms ---------- */
.pp-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; }
.pp-form .pp-field { margin: 0; }
.pp-field--full { grid-column: 1 / -1; }
.pp-form__note { font-size: .8125rem; color: var(--pp-granite); margin: 1rem 0 1.5rem; }
@media (max-width: 600px) { .pp-form__grid { grid-template-columns: 1fr; } }
.pp-form-message { padding: 1rem 1.25rem; border-left: 3px solid; font-weight: 600; margin: 0 0 1.25rem; }
.pp-form-message.is-success { border-color: #2E9E6A; background: #EAF6F0; color: #0d3d26; }
.pp-form-message.is-error { border-color: var(--pp-glow); background: #FFF1EC; color: #6b1d07; }

.pp-newsletter .pp-label { color: inherit; opacity: .75; }
.pp-form__consent { margin: .75rem 0 0; font-size: .75rem; line-height: 1.5; opacity: .75; }
.pp-form__consent a, .pp-form__note a { color: inherit; }
:is(.has-summit-black-background-color, .has-glacier-shadow-background-color) .pp-newsletter input {
	background: rgba(255, 255, 255, .04); border-color: rgba(214, 222, 229, .28); color: var(--pp-white);
}
:is(.has-summit-black-background-color, .has-glacier-shadow-background-color) .pp-newsletter input::placeholder { color: rgba(214, 222, 229, .55); }
@media (max-width: 480px) { .pp-inline-field { flex-direction: column; } }

/* ---------- Entry gate ---------- */
.pp-gate { max-width: 520px; width: calc(100% - 2rem); padding: 0; border: 0; background: var(--pp-black); color: var(--pp-frost); }
.pp-gate::backdrop { background: rgba(10, 12, 15, .82); backdrop-filter: blur(6px); }
.pp-gate__inner { padding: clamp(2rem, 6vw, 3rem); text-align: center; }
.pp-gate__mark { width: 72px; color: var(--pp-white); margin: 0 auto 1.5rem; display: block; }
.pp-gate__title { font-family: var(--pp-display); font-size: 1.25rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pp-white); margin: 0 0 1rem; }
.pp-gate__text { margin: 0 0 1rem; line-height: 1.6; }
.pp-gate__ruo { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--pp-amber); margin: 0 0 2rem; }
.pp-gate__actions { display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.pp-gate__enter { width: 100%; background: var(--pp-glow) !important; color: var(--pp-black) !important; }
.pp-gate__leave { color: var(--pp-frost); font-size: .875rem; }

.pp-editor-placeholder { padding: 1rem 1.25rem; border: 1px dashed var(--pp-granite); font-size: .875rem; color: var(--pp-granite); background: var(--pp-snow); }

@media (prefers-reduced-motion: reduce) {
	.pp-search-dialog[open] { animation: none; }
	* { transition-duration: 0s !important; }
}