/* Oliva — picker for the "+" on product cards (includes/quick-add.php, assets/quick-add.js): colour squares and sizes,
   in the product page's style. Computers: a small list next to the "+" (Zara), the page stays as it is; phones: a panel
   from the bottom over the dimmed page. */
.oliva-qa { position: fixed; inset: 0; z-index: 9992; display: none; pointer-events: none; }
html.oliva-qa-open .oliva-qa { display: block; }
.oliva-qa__panel { position: fixed; width: 220px; max-height: 300px; overflow-y: auto; padding: 16px 18px 12px; background: #fff; border: 1px solid var(--accent, #3b2f2a); pointer-events: auto; }
.oliva-qa.is-busy .oliva-qa__panel { opacity: .6; pointer-events: none; }
.oliva-pp .oliva-qa__close { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; font: 300 20px/1 var(--sans); }
.oliva-qa__name { display: none; margin: 0 40px 18px 0; font: 300 24px/1.15 var(--serif); color: var(--ink); }
.oliva-qa__colours { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px; margin: -4px 24px 12px -4px; }
.oliva-qa__colours:empty { display: none; }
.oliva-pp .oliva-qa__swatch { position: relative; width: 18px; height: 18px; border: 1px solid rgba(31, 26, 20, .25); outline-offset: 3px; }
.oliva-pp .oliva-qa__swatch[aria-pressed="true"] { outline: 1px solid var(--accent, #3b2f2a); }
.oliva-qa__label { margin: 0 24px 6px 0; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

/* Sizes as a list, like Zara's */
.oliva-qa__sizes { display: flex; flex-direction: column; }
.oliva-qa__sizes:empty { display: none; }
.oliva-pp .oliva-qa__size { width: 100%; padding: 8px 0; font: 400 13px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; text-align: left; }
.oliva-pp .oliva-qa__size:hover { text-decoration: underline; text-underline-offset: 3px; }
.oliva-pp .oliva-qa__size[data-unavailable="true"] { color: var(--muted); text-decoration: line-through; }

.oliva-pp .oliva-qa__add { display: flex; align-items: center; justify-content: center; width: 100%; height: 42px; margin-top: 6px; border: 1px solid var(--accent, #3b2f2a); color: var(--accent, #3b2f2a); font: 400 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.oliva-pp .oliva-qa__add:hover { background: var(--accent, #3b2f2a); color: #fff; }
.oliva-qa__add[hidden], .oliva-qa__label[hidden] { display: none !important; }
.oliva-qa__error { margin: 8px 0 0; font-size: 11px; color: #b3261e; }

@media (max-width: 767px) {
	.oliva-qa { pointer-events: auto; background: rgba(31, 26, 20, .25); }
	.oliva-qa__panel { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 80vh; padding: 26px 20px calc(24px + env(safe-area-inset-bottom)); border: 0; animation: oliva-qa-up .25s ease; }
	@keyframes oliva-qa-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
	.oliva-pp .oliva-qa__close { top: 12px; right: 12px; width: 32px; height: 32px; font-size: 24px; }
	.oliva-qa__name { display: block; }
	.oliva-qa__colours { margin: -4px -4px 18px; }
	.oliva-qa__label { margin: 0 0 8px; font-size: 11px; color: var(--ink); text-align: center; }
	.oliva-pp .oliva-qa__size { padding: 15px 0; font-size: 15px; text-align: center; }
	.oliva-pp .oliva-qa__size:hover { text-decoration: none; }
	.oliva-pp .oliva-qa__add { height: 46px; font-size: 12px; }
}

/* ID tags: the dog's name (required) and phone (optional) in the picker, boxed like the product page's field */
.oliva-qa__pz[hidden] { display: none; }
.oliva-qa__pz .oliva-qa__label { display: block; margin-top: 4px; }
.oliva-qa__pz .oliva-qa__label + .oliva-qa__input { margin-bottom: 4px; }
.oliva-pp .oliva-qa__input { display: block; width: 100%; height: 38px; box-sizing: border-box; margin: 0 0 4px; padding: 0 10px; border: 1px solid var(--line, #e5e5e5); border-radius: 0; background: #fff; box-shadow: none;
	color: var(--ink, #1f1a14); font: 400 13px/1 var(--sans, "Jost", sans-serif); letter-spacing: .04em; outline: none; }
.oliva-pp .oliva-qa__input:focus { border-color: var(--accent, #3b2f2a); }
.oliva-pp .oliva-qa__input[aria-invalid="true"] { border-color: #b3261e; }
.oliva-qa__pz .oliva-qa__error { margin: 0 0 8px; }
.oliva-qa__note { margin: 0 0 6px; font-size: 10px; color: var(--muted, #8d7c7a); }
.oliva-qa:has(.oliva-qa__pz:not([hidden])) .oliva-qa__panel { width: 260px; max-height: none; }
@media (max-width: 767px) {
	.oliva-pp .oliva-qa__input { height: 46px; font-size: 16px; text-align: center; } /* 16px: no iPhone zoom */
	.oliva-qa__pz .oliva-qa__label, .oliva-qa__note, .oliva-qa__pz .oliva-qa__error { text-align: center; }
	.oliva-qa:has(.oliva-qa__pz:not([hidden])) .oliva-qa__panel { width: 100%; }
}
/* Initial or name (optional) on personalised products: the same field, above the sizes or the Add button */
.oliva-qa__pz[data-qa-pzo] .oliva-qa__note { margin-bottom: 14px; }