/* Oliva: oliva-account, oliva-search, oliva-white (includes/speed.php) */

/* oliva-account */
/* Oliva — Account: My account, the checkout's sign-in panel and "Create my account" box, the order received box.
   The checkout's look (Oliva — Product page, assets/checkout.css): Jost and Cormorant Garamond, boxes with the label
   inside, brown #3b2f2a for buttons, borders and what is chosen (never black), small capitals only for short labels,
   lists and buttons in normal case, nothing cut (long names and emails wrap). */
.oa-page, .oa-panel, .oa-co-line, .oa-create, .oa-thanks {
	--ink: #1f1a14; --brown: #3b2f2a; --brown-2: #4a3c36; --muted: #8d7c7a; --line: #e5e5e5; --paper: #f6f6f6; --text: #4a423a; --red: #b3261e;
	--sans: "Jost", system-ui, sans-serif; --serif: "Cormorant Garamond", Georgia, serif;
}
.oa-page, .oa-panel { color: var(--ink); font: 400 14px/1.6 var(--sans); }
.oa-page *, .oa-page *::before, .oa-page *::after, .oa-panel *, .oa-panel *::before, .oa-panel *::after { box-sizing: border-box; }
.oa-page a, .oa-panel a { color: inherit; }
.oa-page :focus-visible, .oa-panel :focus-visible { outline: 1px solid var(--brown); outline-offset: 2px; }
.oa-page input:focus-visible, .oa-panel input:focus-visible, .oa-page select:focus-visible { outline: none; } /* the box's own brown line shows the focus */

/* The page around (theme Hello): room and width like the checkout */
.oliva-account-page .page-content > .woocommerce { max-width: none; }
.oa-page { max-width: 1188px; margin: 0 auto; padding: 40px 24px 96px; }
.oliva-account-page .woocommerce-notices-wrapper:not(:empty) { max-width: 1188px; margin: 24px auto 0; padding: 0 24px; }
.oliva-account-page .woocommerce-message, .oliva-account-page .woocommerce-info, .oliva-account-page .woocommerce-error {
	margin: 0 0 8px; padding: 12px 16px; border: 0; background: #f6f6f6; color: #4a423a; font: 400 13px/1.5 "Jost", system-ui, sans-serif; list-style: none; }
.oliva-account-page .woocommerce-error { color: #b3261e; }
.oliva-account-page .woocommerce-message::before, .oliva-account-page .woocommerce-info::before, .oliva-account-page .woocommerce-error::before { display: none; }
.oliva-account-page .woocommerce-message .button, .oliva-account-page .woocommerce-info .button { display: none; }

/* Titles, text, small capitals for short labels */
.oa-title { margin: 0 0 12px; font: 300 44px/1.05 var(--serif); letter-spacing: -.01em; color: var(--ink); overflow-wrap: anywhere; }
.oa-title em { font-style: italic; }
.oa-title--sent { font-size: 34px; }
.oa-sent-email { display: block; margin-top: 10px; font: 400 16px/1.4 var(--sans); letter-spacing: 0; color: var(--ink); overflow-wrap: anywhere; }
.oa-lead { margin: 0 0 24px; font-size: 14px; line-height: 1.7; color: var(--text); overflow-wrap: anywhere; }
.oa-caps { margin: 0 0 12px; font: 400 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.oa-caps a { text-decoration: none; color: var(--ink); }
.oa-caps .oa-up { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; letter-spacing: 0; text-transform: none; text-decoration: underline; text-underline-offset: 3px; }
.oa-caps .oa-up::before { content: "‹"; font-size: 18px; line-height: 1; text-decoration: none; }
.oa-subtitle { margin-top: 36px; color: var(--ink); }
.oa-small { margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: var(--text); }
.oa-small a { text-decoration: underline; text-underline-offset: 2px; }

/* Fields (the checkout's): a box with a brown line, the label inside at full size until there is a value */
.oa-field { position: relative; margin: 0 0 10px; }
.oa-field input, .oa-page form.oa-form--wc .form-row input.input-text, .oa-page form.oa-form--wc .form-row select {
	display: block; width: 100%; height: 54px; margin: 0; padding: 22px 14px 8px; border: 1px solid var(--brown); border-radius: 0; background: #fff; box-shadow: none;
	color: var(--ink); font: 400 15px/1.2 var(--sans); outline: none; -webkit-appearance: none; appearance: none; }
.oa-field input:focus, .oa-page form.oa-form--wc .form-row input.input-text:focus { box-shadow: inset 0 0 0 1px var(--brown); }
.oa-field input::placeholder, .oa-page form.oa-form--wc .form-row input.input-text::placeholder { color: transparent; }
.oa-field label { position: absolute; top: 9px; left: 15px; right: 15px; margin: 0; font-size: 9px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); pointer-events: none;
	transition: top .15s ease, font-size .15s ease, letter-spacing .15s ease; white-space: nowrap; overflow: visible; }
.oa-field input:placeholder-shown:not(:focus) + label { top: 27px; transform: translateY(-50%); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--text); white-space: normal; }
.oa-field[aria-invalid="true"] input, .oa-field.is-invalid input { border-color: var(--red); }
.oa-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 10px; }

/* WooCommerce's own address fields, in the same boxes */
.oa-fields { display: flex; flex-wrap: wrap; gap: 0 10px; }
.oa-page form.oa-form--wc .form-row { position: relative; width: 100%; margin: 0 0 10px; padding: 0; float: none; }
.oa-page form.oa-form--wc .form-row-first, .oa-page form.oa-form--wc .form-row-last { width: calc(50% - 5px); }
.oa-page form.oa-form--wc .form-row > label:not(.checkbox) { position: absolute; z-index: 2; top: 9px; left: 15px; margin: 0; font-size: 9px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); pointer-events: none; }
.oa-page form.oa-form--wc .form-row:has(.input-text:placeholder-shown):not(:focus-within):not(:has(> label.screen-reader-text)) > label:not(.checkbox) {
	top: 27px; transform: translateY(-50%); font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--text); }
.oa-page form.oa-form--wc .form-row > label .required { display: none; }
.oa-page form.oa-form--wc .form-row > label .optional { text-transform: none; letter-spacing: 0; }
.oa-page form.oa-form--wc .form-row:has(> label.screen-reader-text) .input-text { padding: 0 14px; }
.oa-page form.oa-form--wc .form-row:has(> label.screen-reader-text) .input-text::placeholder { color: var(--muted); }
.oa-page form.oa-form--wc .woocommerce-input-wrapper { display: block; }
.oa-page form.oa-form--wc .select2-container { width: 100% !important; }
.oa-page form.oa-form--wc .select2-container .select2-selection--single { height: 54px; border: 1px solid var(--brown); border-radius: 0; }
.oa-page form.oa-form--wc .select2-container .select2-selection--single .select2-selection__rendered { padding: 22px 34px 0 14px; line-height: 24px; color: var(--ink); font-size: 15px; }
.oa-page form.oa-form--wc .select2-container .select2-selection--single .select2-selection__arrow { height: 52px; right: 8px; }
.oa-page form.oa-form--wc .form-row.woocommerce-invalid .input-text { border-color: var(--red); }

/* Buttons (brown, normal case) and quiet links */
.oa-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; margin: 18px 0 0; padding: 12px 24px; border: 1px solid var(--brown); border-radius: 0;
	background: var(--brown); color: #fff !important; font: 400 15px/1.3 var(--sans); letter-spacing: .02em; text-align: center; text-decoration: none !important; cursor: pointer; transition: background .2s, color .2s; }
.oa-button:hover, .oa-button:focus-visible { background: var(--brown-2); border-color: var(--brown-2); color: #fff; }
.oa-button--outline { background: #fff; color: var(--brown) !important; }
.oa-button--outline:hover, .oa-button--outline:focus-visible { background: var(--brown); border-color: var(--brown); color: #fff !important; }
.oa-button--inline { display: inline-flex; width: auto; min-width: 220px; }
.oa-button[disabled], .oa-signin.is-busy .oa-button { opacity: .6; cursor: progress; }
.oa-link { display: inline; padding: 0; border: 0; background: none; color: var(--ink); font: 400 13px/1.6 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.oa-link:hover, .oa-link:focus-visible { background: none; color: var(--brown); }
.oa-link[disabled] { color: var(--muted); text-decoration: none; cursor: default; }
.oa-link--danger { color: var(--red); }
.oa-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 18px 0 0; }
.oa-links--end { margin-top: 40px; }
.oa-check { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--text); cursor: pointer; }
.oa-check input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--brown); }
.oa-error { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--red); }
.oa-note { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--text); }
.oa-trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* "or continue with" Google / Apple (includes/social.php): white boxes with a brown line, like the outline buttons */
.oa-social { margin-top: 26px; }
.oa-or { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; font-size: 12px; color: var(--muted); }
.oa-or::before, .oa-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.oa-social__button { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; margin: 0 0 10px; padding: 12px 20px; border: 1px solid var(--brown); background: #fff;
	color: var(--ink) !important; font: 400 15px/1.3 var(--sans); text-align: center; text-decoration: none !important; transition: background .2s; }
.oa-social__button:hover, .oa-social__button:focus-visible { background: var(--paper); }
.oa-social__button svg { flex: none; width: 18px; height: 18px; }
.oa-social__note { margin-top: 4px; }

/* Sign in: one narrow column */
.oa-page--signin { display: flex; justify-content: center; padding-top: 56px; }
.oa-signin { width: 100%; max-width: 440px; }
.oa-signin .oa-step[hidden] { display: none; }

/* My account: "Hi, Ana", the menu on the left, the section on the right */
.oa-account__head { padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.oa-hello { margin: 0; font: 300 48px/1.05 var(--serif); color: var(--ink); overflow-wrap: anywhere; }
.oa-hello__email { margin: 6px 0 0; font-size: 13px; color: var(--text); overflow-wrap: anywhere; }
.oa-account__grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 64px; align-items: start; margin-top: 40px; }
/* WooCommerce's own floats and widths for its menu (30 %) and content (68 %) go: the grid sets them */
.oa-account .woocommerce-MyAccount-navigation, .oa-account .woocommerce-MyAccount-content { float: none; width: auto; min-width: 0; margin: 0; }
.oa-section + .oa-section { margin-top: 48px; }
.oa-block { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); }
.oa-block .oa-subtitle { margin-top: 0; }
.oa-form { max-width: 560px; }
.oa-card { max-width: 560px; padding: 22px 24px; border: 1px solid var(--line); }
.oa-card address { margin: 0 0 14px; font-style: normal; font-size: 14px; line-height: 1.7; color: var(--text); overflow-wrap: anywhere; }

/* Orders: photo, number and date, the four steps, items and total. When the section's column is narrow (a tablet held
   upright, with the menu beside it) the rows take the phone layout: steps two by two, «View order» below (1.4.1, QA). */
.oa-account__content { container-type: inline-size; }
.oa-orders { margin: 8px 0 0; padding: 0; list-style: none; }
.oa-order { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: 20px 0; border-top: 1px solid var(--line); }
.oa-order:last-child { border-bottom: 1px solid var(--line); }
.oa-order__photo { display: block; background: var(--paper); }
.oa-order__photo img { display: block; width: 72px; height: 96px; object-fit: cover; }
.oa-order__info { min-width: 0; }
.oa-order__head { margin: 0 0 10px; font-size: 15px; line-height: 1.4; }
.oa-order__head a { text-decoration: none; font-weight: 500; }
.oa-order__head span { color: var(--text); }
.oa-order__meta { margin: 10px 0 0; font-size: 13px; color: var(--text); }
.oa-order__go { align-self: center; font-size: 13px; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.oa-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.oa-steps li { padding-top: 8px; border-top: 2px solid var(--line); font-size: 12px; line-height: 1.35; color: var(--muted); }
.oa-steps li.is-done, .oa-steps li.is-now { border-top-color: var(--brown); }
.oa-steps li.is-now { color: var(--ink); font-weight: 500; }
.oa-status--plain { margin: 0; font-size: 13px; color: var(--text); }
.oa-delivered { margin: 8px 0 0; font-size: 12px; line-height: 1.35; color: var(--text); }
.oa-pages { display: flex; justify-content: space-between; gap: 20px; margin: 24px 0 0; }
.oa-empty { padding: 28px 0; border-top: 1px solid var(--line); }
.oa-empty p { margin: 0 0 6px; color: var(--text); }

/* One order */
.oa-view .oa-steps { margin: 18px 0 28px; max-width: 640px; }
.oa-view .oa-steps:has(+ .oa-delivered) { margin-bottom: 0; }
.oa-view .oa-delivered { margin: 10px 0 28px; font-size: 13px; }
.oa-view .oa-caps span { color: var(--muted); }
.oa-track { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin: 0 0 28px; padding: 18px 20px; background: var(--paper); }
.oa-track p { margin: 0; font-size: 15px; }
.oa-track .oa-caps { margin: 0 8px 0 0; }
.oa-track .oa-button { margin: 0; }
@container (max-width: 620px) {
	.oa-order { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
	.oa-order__photo img { width: 64px; height: 85px; }
	.oa-order__go { grid-column: 2; justify-self: start; }
	.oa-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; }
}
.oa-view__grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 48px; align-items: start; padding-top: 28px; border-top: 1px solid var(--line); }
.oa-items { margin: 0; padding: 0; list-style: none; }
.oa-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line); }
.oa-item:first-child { border-top: 0; padding-top: 0; }
.oa-item__photo { position: relative; display: block; background: var(--paper); }
.oa-item__photo img { display: block; width: 64px; height: 85px; object-fit: cover; }
.oa-item__photo b { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--brown); color: #fff; font-size: 10px; font-weight: 400; line-height: 18px; text-align: center; }
.oa-item__info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.oa-item__name { font: 400 18px/1.2 var(--serif); }
.oa-item__details { font-size: 12px; line-height: 1.5; color: var(--text); }
.oa-item__swatch { display: inline-block; width: 11px; height: 11px; margin: 0 6px -1px 0; border: 1px solid rgba(31, 26, 20, .25); }
.oa-item__price { font-size: 13px; white-space: nowrap; }
.oa-totals { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.oa-totals > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 4px 0; }
.oa-totals dt, .oa-totals dd { margin: 0; font-size: 13px; font-weight: 400; }
.oa-was dd { color: var(--muted); text-decoration: line-through; }
.oa-discount dt, .oa-discount dd { color: var(--red); }
.oa-total dt, .oa-total dd { font-size: 15px; font-weight: 500; }
.oa-info { display: grid; gap: 24px; margin: 0; }
.oa-info dt.oa-caps { margin: 0 0 8px; }
.oa-info dd { margin: 0; font-size: 13px; line-height: 1.7; color: var(--text); overflow-wrap: anywhere; }

/* Checkout: the line above step 1, "Create my account" under the email (inside the checkout's .oc-page) */
.oa-co-line { margin: 0 0 28px; padding: 0; font: 400 13px/1.5 var(--sans); color: var(--text); overflow-wrap: anywhere; }
.oa-co-open { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.oa-co-open:hover, .oa-co-open:focus { background: none; color: var(--brown); }
.oc-page form.oc .form-row.oa-create { margin: 2px 0 14px; }
.oc-page form.oc .form-row.oa-create label.oa-check { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 4px 0 0; font-size: 13px; line-height: 1.5; text-transform: none; letter-spacing: 0; }
.oc-page form.oc .form-row.oa-create .oa-check input { flex: none; display: block; margin: 3px 0 0; }
.oa-create__label { display: block; color: var(--ink); }
.oa-create__note { display: block; font-size: 12px; color: var(--muted); }
.oc-page .woocommerce-error [data-oliva-ac-open] { text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

/* The checkout's sign-in panel (1.4.2, Josep: like the sign-in page). Tablets and computers: a dialog in the middle,
   up to 520 px, the form its full width, × top right, the checkout behind tinted brown. Phones (≤ 767 px): the whole
   screen, with the sign-in page's side room. Titles as on the sign-in page. It scrolls inside only when a step is
   taller than the screen (nothing cut). */
.oa-panel { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.oa-panel[hidden] { display: none; }
.oa-panel__backdrop { position: absolute; inset: 0; background: rgba(59, 47, 42, .45); opacity: 0; transition: opacity .25s ease; }
.oa-panel__box { position: relative; display: flex; flex-direction: column; width: min(520px, 100%); max-height: 100%; padding: 64px 56px 52px; background: #fff; overflow-y: auto; overscroll-behavior: contain;
	transform: translateY(16px); opacity: 0; transition: transform .3s cubic-bezier(.2, .7, .2, 1), opacity .25s ease; }
.oa-panel.is-open .oa-panel__backdrop { opacity: 1; }
.oa-panel.is-open .oa-panel__box { transform: none; opacity: 1; }
.oa-panel .oa-signin { max-width: none; }
.oa-panel__close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; padding: 10px; border: 0; background: none; color: var(--ink); cursor: pointer; }
.oa-panel__close:hover, .oa-panel__close:focus { background: none; color: var(--brown); }
.oa-panel__close svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.oa-panel h2.oa-title { margin: 0 0 12px; font: 300 44px/1.05 var(--serif); letter-spacing: -.01em; color: var(--ink); text-transform: none; } /* an h2 here: the theme's h2 never wins */
.oa-panel h2.oa-title--sent { font-size: 34px; }
html.oa-panel-open { overflow: hidden; }

/* Order received: "Save your details for next time", under the summary */
.oa-thanks { margin-top: 28px; padding: 22px 22px 24px; border: 1px solid var(--line); font: 400 13px/1.6 var(--sans); color: var(--text); }
.oa-thanks__title { margin: 0 0 6px; font: 400 22px/1.2 var(--serif); color: var(--ink); }
.oa-thanks__text { margin: 0; overflow-wrap: anywhere; }
.oa-thanks .oa-button { margin-top: 16px; }
.oa-thanks__links { margin: 12px 0 0; }
.oa-thanks__links a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1024px) {
	.oa-account__grid { grid-template-columns: 200px minmax(0, 1fr); gap: 40px; }
	.oa-view__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

/* Phones: one column. The front page shows the menu as a list; every other section has "‹ My account" at the top */
@media (max-width: 767px) {
	.oa-page { padding: 24px 16px 72px; }
	.oa-page--signin { padding-top: 28px; }
	.oa-title { font-size: 36px; }
	.oa-title--sent { font-size: 28px; }
	.oa-hello { font-size: 38px; }
	.oa-account__grid { display: block; margin-top: 0; }
	.oa-row { grid-template-columns: minmax(0, 1fr); }
	.oa-page form.oa-form--wc .form-row-first, .oa-page form.oa-form--wc .form-row-last { width: 100%; }
	.oa-button--inline { display: flex; width: 100%; min-width: 0; }
	.oa-order { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
	.oa-order__photo img { width: 64px; height: 85px; }
	.oa-order__go { grid-column: 2; justify-self: start; }
	.oa-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; }
	.oa-track { flex-direction: column; align-items: stretch; }
	.oa-panel { align-items: stretch; padding: 0; }
	.oa-panel__box { width: 100%; height: 100%; max-height: none; padding: 64px 20px calc(36px + env(safe-area-inset-bottom)); transform: translateY(24px); }
	.oa-co-line { margin: 22px 0 0; }
	.oa-panel h2.oa-title { font-size: 36px; }
	.oa-panel h2.oa-title--sent { font-size: 28px; }
}

/* The sign-in page (includes/signin-page.php, templates/signin-page.php), like Zara's: logo, form and small links in
   the left 40 %, one photo filling the right 60 %; no photo → the form alone, centred. Phones: a short band of the
   photo on top (gone once the name or the code is asked for), the form below. */
body.oliva-signin-page { margin: 0; background: #fff; }
.oa-shell { --ink: #1f1a14; --brown: #3b2f2a; --muted: #8d7c7a; --text: #4a423a; --sans: "Jost", system-ui, sans-serif;
	display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; grid-template-areas: "main" "legal"; min-height: 100vh; min-height: 100dvh; font-family: var(--sans); }
.oa-shell.has-photo { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); grid-template-areas: "main photo" "legal photo"; }
.oa-shell__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 0 38px; } /* inside the centred block, right above the title (1.3.4) */
.oa-shell__back { flex: none; color: var(--ink); font: 400 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; } /* the step before the checkout (1.4.1): like the checkout's «Back to bag» */
.oa-shell__back:hover { color: var(--brown); }
.oa-shell__logo { display: inline-block; color: var(--ink); text-decoration: none; font: 300 32px/1 "Cormorant Garamond", Georgia, serif; }
.oa-shell__logo img { display: block; width: 96px; height: auto; }
.oa-shell__main { grid-area: main; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 48px clamp(24px, 4.5vw, 72px); }
.oa-shell:not(.has-photo) .oa-shell__main { align-items: center; }
.oa-shell__main > .oa-shell__top { align-self: stretch; } /* the logo on the block's left edge */
.oa-shell__main > .woocommerce, .oa-shell__main .oa-page--signin, .oa-shell__help { width: 100%; max-width: 440px; }
.oliva-signin-page .oa-page--signin { display: block; margin: 0; padding: 0; }
.oliva-signin-page .woocommerce-notices-wrapper:not(:empty) { max-width: 440px; margin: 0 0 20px; padding: 0; }
.oa-shell__help { margin: 28px 0 0; font-size: 13px; }
.oa-shell__help a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.oa-shell__help a:hover { color: var(--brown); }
.oa-shell__legal { grid-area: legal; display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0 clamp(24px, 4.5vw, 72px) 28px; font-size: 11px; line-height: 1.6; color: var(--muted); }
.oa-shell:not(.has-photo) .oa-shell__legal { justify-content: center; }
.oa-shell__legal a { color: var(--text); text-decoration: none; }
.oa-shell__legal a:hover { color: var(--brown); text-decoration: underline; }
.oa-shell__photo { grid-area: photo; position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; background: #f6f6f6; }
.oa-shell__photo picture { display: block; width: 100%; height: 100%; }
.oa-shell .oa-shell__photo img.oa-shell__img { display: block; width: 100% !important; max-width: none !important; height: 100% !important; object-fit: cover; } /* the theme's img { height: auto } kept it at its own height, uncropped and cut at the bottom; the focus (object-position) comes from the setting */

@media (max-width: 1023px) { .oa-shell.has-photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 768px) {
	.oa-shell.has-photo { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto; grid-template-areas: "main" "legal"; }
	.oa-shell.has-photo .oa-shell__photo { display: none; } /* phones: no photo (nor its download: templates/signin-page.php) */
	.oa-shell__top { padding: 0 0 28px; }
	.oa-shell__logo img { width: 76px; }
	.oa-shell__main { justify-content: flex-start; padding: 20px 20px 36px; }
	.oa-shell__legal { padding: 0 20px 24px; }
}

/* The step before the checkout (1.4.0, checkout-gate.php): the sign-in page with «Continue as guest» under the box, as
   wide and tall as «Continue» (outlined), then «New to Oliva?», one line and what an account gives, with thin checks (no button: the email box makes the account). Past the email (the code,
   «Your details») only the box stays. */
.oa-gate { margin-top: 26px; }
.oa-signin[data-step-now]:not([data-step-now="email"]) + .oa-gate { display: none; }
.oa-gate__join { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.oa-page h2.oa-gate__title { margin: 0 0 6px; font: 500 15px/1.4 var(--sans); letter-spacing: 0; color: var(--ink); }
.oa-gate__lead { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }
.oa-perks { margin: 0; padding: 0; list-style: none; }
.oa-perks li { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 10px; font-size: 14px; line-height: 1.55; color: var(--text); overflow-wrap: anywhere; }
.oa-perks svg { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--brown); }

/* WooCommerce's notices where they still print: the signed-out pages (forgotten password: "We've emailed a link…").
   The site's own CSS hides WooCommerce's notice box, so it is shown here in the checkout's quiet grey box. Signed in,
   My account's messages never come this way since 1.4.2 (next to their form, account.js). */
.oliva-account-page .woocommerce-notices-wrapper:not(:empty), .oa-account__content .woocommerce-notices-wrapper:not(:empty) { display: block !important; margin: 0 0 24px; padding: 0; visibility: visible !important; }
.oliva-account-page .woocommerce-message, .oliva-account-page .woocommerce-info, .oliva-account-page .woocommerce-error { display: block !important; visibility: visible !important; opacity: 1 !important; }
.oliva-account-page .woocommerce-message { border-left: 2px solid #3b2f2a; }

/* Buttons that are links: never underlined (the theme underlines links in page content) */
.oa-page a.oa-button, .oa-page a.oa-button:hover, .oa-shell a.oa-button, .oa-panel a.oa-button, .oa-page a.oa-social__button, .oa-panel a.oa-social__button { text-decoration: none !important; }

/* Short labels in small capitals: always Jost, as at checkout (the theme gives h2 its serif) */
.oa-page .oa-caps, .oa-page h2.oa-caps, .oa-page dt.oa-caps, .oa-page p.oa-caps { font-family: "Jost", "Oliva Jost fallback", system-ui, sans-serif; font-weight: 400; font-size: 11px; line-height: 1.4; letter-spacing: .2em; text-transform: uppercase; }
.oa-page h2.oa-subtitle { color: #1f1a14; }
.oa-page .oa-caps .oa-up { font-size: 13px; letter-spacing: 0; text-transform: none; }


/* An email in a sentence stays whole (it moved to its own line rather than breaking at a hyphen); only one longer
   than the whole line breaks */
.oa-email { display: inline-block; max-width: 100%; overflow-wrap: anywhere; white-space: normal; word-break: normal; hyphens: none; }
.oa-sent-email { hyphens: none; }
/* WooCommerce focuses a new notice (for screen readers): no outline on top of its own left line */
.oliva-account-page .woocommerce-message:focus, .oliva-account-page .woocommerce-error:focus, .oliva-account-page .woocommerce-info:focus { outline: none; }
.oa-link[hidden], .oa-button[hidden] { display: none !important; }

/* «Your details» (1.2.0): phone as prefix + number, the two boxes to tick, the panel scrolling as a whole if a short
   phone can't fit it (never cut) */
.oa-phone { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 0 10px; }
.oa-field--select select { display: block; width: 100%; height: 54px; margin: 0; padding: 22px 28px 8px 14px; border: 1px solid var(--brown); border-radius: 0; background: #fff
	url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%233b2f2a' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 10px center / 10px 6px;
	color: var(--ink); font: 400 15px/1.2 var(--sans); -webkit-appearance: none; appearance: none; outline: none; text-overflow: clip; }
.oa-field--select select:focus { box-shadow: inset 0 0 0 1px var(--brown); }
.oa-field--select label { top: 9px; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; }
.oa-step[data-step="name"] .oa-check { margin-top: 12px; }
.oa-step[data-step="name"] .oa-check + .oa-check { margin-top: 10px; }
.oa-check a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.oa-check.is-invalid span { color: var(--red); }
.oa-check.is-invalid input { outline: 1px solid var(--red); outline-offset: 1px; }
/* Rows of fields: the same 10 px between every box, stacked or side by side */
.oa-row, .oa-phone { gap: 10px; margin: 0 0 10px; }
.oa-row > .oa-field, .oa-phone > .oa-field { margin: 0; }

/* The email Google or Apple gave, shown on «Your details» and not editable */
.oa-field--readonly input { background: #f6f6f6; color: var(--text); border-color: #e5e5e5; cursor: default; }
.oa-field--readonly input:focus { box-shadow: none; }
.oa-privacy-note { margin: 16px 0 0; }
.oa-privacy-note + .oa-button { margin-top: 12px; }

/* The account menu, Zara-style (1.3.0; phones 1.3.1). Computers: a plain text column, no lines; the current one brown
   and bolder, the rest grey-brown. Phones (≤ 767 px): right under the greeting, the links wrap onto two lines (never
   a scroll that hides part of a word: Josep's rule, never cut text), the current one underlined; the section full
   width below. Sign out is not in the menu since 1.4.3: My details → Session. */
.oa-nav { position: relative; }
.oa-nav ul { display: flex; flex-direction: column; gap: 15px; margin: 0; padding: 0; list-style: none; }
.oa-nav li { margin: 0; padding: 0; border: 0; }
.oa-nav a { display: inline-block; padding: 0; font: 400 15px/1.35 var(--sans); color: #7a6a63; text-decoration: none; white-space: nowrap; transition: color .15s; }
.oa-nav a:hover, .oa-nav a:focus-visible { color: var(--brown); }
.oa-nav .is-current a { color: var(--brown); font-weight: 500; }
.oa-account__grid { grid-template-columns: 200px minmax(0, 1fr); }
@media (max-width: 767px) {
	.oa-account__head { padding-bottom: 0; border-bottom: 0; }
	.oa-hello { font-size: 34px; }
	.oa-account .oa-nav { margin: 24px 0 0; padding-bottom: 18px; border-bottom: 1px solid var(--line); } /* .oa-account: stronger than the float reset above */
	.oa-nav ul { flex-direction: row; flex-wrap: wrap; gap: 14px 22px; }
	.oa-nav li { flex: none; max-width: 100%; }
	.oa-nav a { padding: 2px 0 4px; font-size: 15px; white-space: normal; }
	.oa-nav .is-current a { font-weight: 500; box-shadow: inset 0 -1.5px 0 var(--brown); }
	.oa-account__content { padding-top: 28px; }
}

/* With the photo (landscape screens above 768 px, any above 1024 px; 1.3.3, Josep on a wide screen): the logo, the
   form and the legal links are one block of up to 460 px, centred in the white column with equal space either side,
   all on the block's left edge; still centred vertically, the photo column as it was. */
@media (min-width: 769px) and (orientation: landscape), (min-width: 1025px) {
	.oa-shell.has-photo .oa-shell__main, .oa-shell.has-photo .oa-shell__legal { width: min(460px, calc(100% - 48px)); margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; }
	.oa-shell.has-photo .oa-shell__main > .woocommerce, .oa-shell.has-photo .oa-shell__main .oa-page--signin, .oa-shell.has-photo .oa-shell__main .oa-signin, .oa-shell.has-photo .oa-shell__help { max-width: none; }
}

/* No photo beside the form (1.3.2, Josep on an iPad): above 560 px the form is one centred column (460 px) with the
   logo and the legal links aligned to it, centred in the screen when it fits (else the page just scrolls). That is the
   no-photo fallback on any screen, phones turned sideways up to 768 px, and tablets held upright up to 1024 px (iPad
   mini 744, Air 820, Pro 1024): there the photo would leave the form cramped, so it is hidden and not even downloaded
   (templates: the <source> asks for a landscape screen above 768 px, or any screen above 1024 px). Phones up to
   560 px stay as they were. */
@media (min-width: 561px) {
	.oa-shell:not(.has-photo) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: "main" "legal"; align-content: center; min-height: 100vh; min-height: 100svh; padding: 48px 32px; }
	.oa-shell:not(.has-photo) .oa-shell__main, .oa-shell:not(.has-photo) .oa-shell__legal { width: 100%; max-width: 460px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; }
	.oa-shell:not(.has-photo) .oa-shell__top { padding: 0 0 38px; }
	.oa-shell:not(.has-photo) .oa-shell__main { display: block; padding-top: 0; padding-bottom: 0; }
	.oa-shell:not(.has-photo) .oa-shell__main > .woocommerce, .oa-shell:not(.has-photo) .oa-shell__main .oa-page--signin, .oa-shell:not(.has-photo) .oa-shell__main .oa-signin, .oa-shell:not(.has-photo) .oa-shell__help { max-width: none; }
	.oa-shell:not(.has-photo) .oa-shell__legal { justify-content: flex-start; padding-top: 48px; padding-bottom: 0; }
}
@media (min-width: 561px) and (max-width: 768px), (min-width: 561px) and (max-width: 1024px) and (orientation: portrait) {
	.oa-shell.has-photo .oa-shell__photo { display: none; }
	.oa-shell.has-photo { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: "main" "legal"; align-content: center; min-height: 100vh; min-height: 100svh; padding: 48px 32px; }
	.oa-shell.has-photo .oa-shell__main, .oa-shell.has-photo .oa-shell__legal { width: 100%; max-width: 460px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; }
	.oa-shell.has-photo .oa-shell__top { padding: 0 0 38px; }
	.oa-shell.has-photo .oa-shell__main { display: block; padding-top: 0; padding-bottom: 0; }
	.oa-shell.has-photo .oa-shell__main > .woocommerce, .oa-shell.has-photo .oa-shell__main .oa-page--signin, .oa-shell.has-photo .oa-shell__main .oa-signin, .oa-shell.has-photo .oa-shell__help { max-width: none; }
	.oa-shell.has-photo .oa-shell__legal { justify-content: flex-start; padding-top: 48px; padding-bottom: 0; }
}

/* My account's messages (1.4.2, account.js): «Saved» small and brown with a thin check under the form's button, gone
   after 3 s; errors in red under their field. Never WooCommerce's grey bar. */
.oa-saved { display: flex; align-items: flex-start; gap: 7px; margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--brown, #3b2f2a); overflow-wrap: anywhere; transition: opacity .5s ease; }
.oa-saved svg { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.oa-saved.is-gone { opacity: 0; }
.oa-card .oa-saved { margin-top: 14px; }
.oa-error.oa-flash { margin: 6px 0 10px; }
.oa-page form.oa-form--wc .form-row.is-invalid :is(input.input-text, select), .oa-account .oa-field.is-invalid input { border-color: var(--red, #b3261e); }
.oa-page form.oa-form--wc .form-row .oa-error.oa-flash, .oa-field > .oa-error.oa-flash, .oa-check > .oa-error.oa-flash { display: block; margin: 6px 0 0; }

/* Buttons stay Oliva's browns on hover, focus and press (1.4.2, Josep: «Guardar turns pink»). The theme (Hello) paints
   every button:hover, button:focus and [type=submit]:focus pink (#c36), and WooCommerce's .button grey-lilac; after a
   click the button keeps the focus, so it stayed pink. Strong enough to win over both, on every page of ours: My
   account, the sign-in page and the step before the checkout, the checkout's panel and boxes, the order received box. */
:is(.oa-page, .oa-panel, .oa-shell, .oa-thanks, .oa-create, .oa-co-line) .oa-button:not(.oa-button--outline) { background: #3b2f2a; border-color: #3b2f2a; color: #fff; }
:is(.oa-page, .oa-panel, .oa-shell, .oa-thanks, .oa-create, .oa-co-line) .oa-button:not(.oa-button--outline):is(:hover, :focus-visible, :active) { background: #4a3c36; border-color: #4a3c36; color: #fff; }
:is(.oa-page, .oa-panel, .oa-shell, .oa-thanks, .oa-create, .oa-co-line) .oa-button:not(.oa-button--outline):focus:not(:focus-visible):not(:hover):not(:active) { background: #3b2f2a; border-color: #3b2f2a; color: #fff; }
:is(.oa-page, .oa-panel, .oa-shell, .oa-thanks, .oa-create, .oa-co-line) .oa-button--outline { background: #fff; border-color: #3b2f2a; color: #3b2f2a !important; }
:is(.oa-page, .oa-panel, .oa-shell, .oa-thanks, .oa-create, .oa-co-line) .oa-button--outline:is(:hover, :active) { background: #3b2f2a; border-color: #3b2f2a; color: #fff !important; }
/* keyboard focus (also the focus given back when a dialog closes, 1.4.4): a thin brown ring, never filled, so an
   outlined button never looks like the filled one */
:is(.oa-page, .oa-panel, .oa-shell, .oa-thanks, .oa-create, .oa-co-line) .oa-button--outline:focus-visible:not(:hover):not(:active) { background: #fff; border-color: #3b2f2a; color: #3b2f2a !important; outline: 1px solid #3b2f2a; outline-offset: 2px; }
:is(.oa-page, .oa-panel, .oa-shell, .oa-thanks, .oa-create, .oa-co-line) .oa-button--outline:focus:not(:focus-visible):not(:hover):not(:active) { background: #fff; color: #3b2f2a !important; }
:is(.oa-page, .oa-panel, .oa-shell, .oa-thanks, .oa-create, .oa-co-line) button:not(.oa-button, .oa-link, .oa-co-open, .oa-panel__close, .oa-date button):is(:hover, :focus, :active) { background-color: transparent; color: var(--ink, #1f1a14); } /* WooCommerce's own small buttons (show password) */
.oa-co-line .oa-co-open:is(:hover, :focus, :active) { background: none; color: #3b2f2a; }
:is(.oa-page, .oa-panel, .oa-shell, .oa-thanks, .oa-create, .oa-co-line) .oa-link:is(:hover, :focus, :active) { background: none; color: #3b2f2a; }
:is(.oa-page, .oa-panel, .oa-shell, .oa-thanks, .oa-create, .oa-co-line) .oa-link:focus:not(:focus-visible):not(:hover) { color: var(--ink, #1f1a14); }
:is(.oa-page, .oa-panel, .oa-shell, .oa-thanks, .oa-create, .oa-co-line) .oa-link--danger:is(:hover, :focus, :active) { color: #b3261e; }
:is(.oa-page, .oa-panel, .oa-shell) .oa-social__button:is(:hover, :focus-visible, :active) { background: #f6f6f6; border-color: #3b2f2a; color: var(--ink, #1f1a14) !important; }
.oa-panel .oa-panel__close:is(:hover, :focus, :active) { background: none; color: #3b2f2a; }

/* Date boxes (1.4.2, account.php oliva_ac_date_field + account.js): the whole box is one button, like the other boxes
   (brown line, the label small on top, a thin calendar on the right); the calendar opens below it, in the page, in
   Oliva's browns (the selected day filled brown, today underlined), never the browser's blue. Without JavaScript:
   the browser's own date box, at least as wide and tall as the others. */
.oa-field--date input[type="date"] { min-height: 54px; }
.oa-date { position: relative; margin: 0 0 10px; }
.oa-page .oa-date .oa-date__box { position: relative; display: block; width: 100%; min-height: 54px; margin: 0; padding: 23px 48px 8px 14px; border: 1px solid #3b2f2a; border-radius: 0; background: #fff;
	color: var(--ink, #1f1a14); font: 400 15px/1.3 var(--sans); text-align: left; text-transform: none; letter-spacing: 0; cursor: pointer; box-shadow: none; outline: none; }
.oa-page .oa-date .oa-date__box:is(:hover, :focus, :active) { background: #fff; color: var(--ink, #1f1a14); }
.oa-page .oa-date .oa-date__box:is(:focus-visible, [aria-expanded="true"]) { box-shadow: inset 0 0 0 1px #3b2f2a; }
.oa-date__label { position: absolute; top: 9px; left: 15px; right: 48px; font-size: 9px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #8d7c7a); white-space: nowrap; }
.oa-date__value { display: block; overflow-wrap: anywhere; }
.oa-date__value.is-empty { color: var(--text, #4a423a); }
.oa-date__box svg { position: absolute; top: 50%; right: 16px; width: 18px; height: 18px; color: #3b2f2a; transform: translateY(-50%); pointer-events: none; }
.oa-date__pop { width: min(100%, 340px); margin: 6px 0 0; padding: 14px 14px 10px; border: 1px solid #3b2f2a; background: #fff; }
.oa-date__pop[hidden] { display: none; }
.oa-date__head { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 36px; gap: 6px; align-items: center; margin: 0 0 10px; }
.oa-date__head select { width: 100%; height: 36px; margin: 0; padding: 0 22px 0 8px; border: 0; border-bottom: 1px solid var(--line, #e5e5e5); border-radius: 0; background: #fff
	url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%233b2f2a' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 6px center / 9px 6px;
	color: var(--ink, #1f1a14); font: 400 14px/1.2 var(--sans); -webkit-appearance: none; appearance: none; cursor: pointer; }
.oa-date__head select:focus-visible { outline: 1px solid #3b2f2a; outline-offset: 1px; }
.oa-page .oa-date .oa-date__nav { width: 36px; height: 36px; margin: 0; padding: 0; border: 0; background: none; color: #3b2f2a; font: 300 24px/1 var(--sans); cursor: pointer; }
.oa-page .oa-date .oa-date__nav:is(:hover, :focus, :active) { background: #f6f6f6; color: #3b2f2a; }
.oa-page .oa-date .oa-date__nav:disabled { color: var(--line, #e5e5e5); background: none; cursor: default; }
.oa-date__week, .oa-date__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.oa-date__week span { padding: 4px 0; font-size: 11px; line-height: 1.2; text-align: center; text-transform: uppercase; color: var(--muted, #8d7c7a); }
.oa-page .oa-date .oa-date__day { aspect-ratio: 1; min-height: 38px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink, #1f1a14); font: 400 14px/1 var(--sans); cursor: pointer; }
.oa-page .oa-date .oa-date__day:is(:hover, :focus, :active) { background: #f6f6f6; color: var(--ink, #1f1a14); }
.oa-page .oa-date .oa-date__day:focus-visible { outline: 1px solid #3b2f2a; outline-offset: -1px; }
.oa-page .oa-date .oa-date__day.is-today { text-decoration: underline; text-underline-offset: 4px; }
.oa-page .oa-date .oa-date__day.is-selected, .oa-page .oa-date .oa-date__day.is-selected:is(:hover, :focus, :active) { background: #3b2f2a; color: #fff; }
.oa-page .oa-date .oa-date__day:disabled { background: none; color: var(--line, #e5e5e5); cursor: default; }
.oa-date__foot { display: flex; justify-content: flex-end; margin: 8px 0 0; }

/* Oliva's dialogs (1.4.2): «Delete your account?» in the checkout panel's look (.oa-panel); on phones a sheet from the
   bottom, as tall as it needs. Cancel and the yes side by side when they fit, else one above the other. */
.oa-dialog__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.oa-dialog__actions .oa-button { flex: 1 1 170px; width: auto; margin: 0; padding-left: 16px; padding-right: 16px; }
.oa-panel--sheet .oa-lead { margin-bottom: 0; }
@media (max-width: 767px) {
	.oa-panel--sheet { align-items: flex-end; }
	.oa-panel--sheet .oa-panel__box { height: auto; max-height: 100%; padding: 60px 20px calc(24px + env(safe-area-inset-bottom)); }
	.oa-panel--sheet .oa-dialog__actions .oa-button { flex-basis: 100%; }
}

/* Phones, every option without scrolling (1.4.5, Josep: «like Zara»): on the sign-in page, the step before the checkout
   and the checkout's sign-in panel, a smaller title, 48 px boxes and buttons, 10 px between them, a slimmer «or»,
   the logo smaller and closer. On the step, «Continue as guest» right under «Continue» (then Google / Apple); «New
   to Oliva?» below the fold. Measured in iPhone 13 (390 × 664 with Safari's bars) and iPhone SE (375 × 553), ES and EN.
   Computers and tablets: unchanged. */
@media (max-width: 767px) {
	.oliva-signin-page .oa-shell__main { padding-top: 14px; }
	.oliva-signin-page .oa-shell__top { padding: 0 0 18px; }
	.oliva-signin-page .oa-shell__logo img { width: 64px; }
	:is(.oliva-signin-page, .oa-panel) .oa-signin h1.oa-title, :is(.oliva-signin-page, .oa-panel) .oa-signin h2.oa-title { margin: 0 0 6px; font-size: 28px; line-height: 1.08; }
	:is(.oliva-signin-page, .oa-panel) .oa-signin h1.oa-title--sent, :is(.oliva-signin-page, .oa-panel) .oa-signin h2.oa-title--sent { font-size: 24px; }
	:is(.oliva-signin-page, .oa-panel) .oa-signin .oa-lead { margin: 0 0 14px; font-size: 13px; line-height: 1.5; }
	:is(.oliva-signin-page, .oa-panel) .oa-signin .oa-field input, :is(.oliva-signin-page, .oa-panel) .oa-signin .oa-field--select select { height: 48px; padding-top: 19px; padding-bottom: 6px; }
	:is(.oliva-signin-page, .oa-panel) .oa-signin .oa-field label { top: 8px; }
	:is(.oliva-signin-page, .oa-panel) .oa-signin .oa-field input:placeholder-shown:not(:focus) + label { top: 24px; }
	:is(.oliva-signin-page, .oa-panel) .oa-signin .oa-button { min-height: 48px; margin-top: 10px; padding-top: 10px; padding-bottom: 10px; }
	:is(.oliva-signin-page, .oa-panel) .oa-signin .oa-social { margin-top: 14px; }
	:is(.oliva-signin-page, .oa-panel) .oa-signin .oa-or { margin: 0 0 10px; font-size: 11px; }
	:is(.oliva-signin-page, .oa-panel) .oa-signin .oa-social__button { min-height: 48px; margin: 0 0 8px; padding-top: 10px; padding-bottom: 10px; }
	:is(.oliva-signin-page, .oa-panel) .oa-signin .oa-social__note { margin-top: 2px; font-size: 11px; line-height: 1.5; }
	:is(.oliva-signin-page, .oa-panel) .oa-signin .oa-links { margin-top: 12px; }
	.oa-panel .oa-panel__box { padding-top: 52px; }
	.oa-panel .oa-panel__close { top: 6px; right: 6px; }
	.oa-gate { margin-top: 0; }
	.oa-gate__join { margin-top: 28px; padding-top: 22px; }
}

/* The phone (1.4.6, includes/phone.php): the prefix box and the number side by side, in WooCommerce's row, at checkout
   and in My account → Addresses; the label moves right, over the number. A red line under the box when it's missing
   or too short (the checkout's own red lines are written in its CSS the same way). */
.form-row.oa-tel-row .woocommerce-input-wrapper.oa-tel { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 0 10px; }
.form-row.oa-tel-row .oa-tel__box { position: relative; display: block; min-width: 0; }
.form-row.oa-tel-row .oa-tel__label { position: absolute; top: 9px; left: 13px; right: 24px; margin: 0; font: 400 9px/1 "Jost", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #8d7c7a); white-space: nowrap; pointer-events: none; }
.form-row.oa-tel-row .oa-tel__prefix { display: block; width: 100%; height: 54px; margin: 0; padding: 20px 26px 6px 12px; border: 1px solid #3b2f2a; border-radius: 0; background: #fff
	url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%233b2f2a' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat right 10px center / 10px 6px;
	color: #1f1a14; font: 400 15px/1.2 "Jost", system-ui, sans-serif; -webkit-appearance: none; appearance: none; outline: none; cursor: pointer; }
.form-row.oa-tel-row .oa-tel__prefix:focus { box-shadow: inset 0 0 0 1px #3b2f2a; }
.form-row.oa-tel-row.woocommerce-invalid .oa-tel__prefix { border-color: var(--red, #b3261e); }
.oc-page #billing_phone_field.oa-tel-row > label, .oa-page form.oa-form--wc #billing_phone_field.oa-tel-row > label { left: 136px; right: 14px; }
.oc-page #billing_phone_field.woocommerce-invalid::after { content: "Add a contact phone for the delivery"; display: block; margin-top: 6px; font-size: 11px; color: var(--red, #b3261e); }
html[lang^="es"] .oc-page #billing_phone_field.woocommerce-invalid::after { content: "Escribe un teléfono de contacto para el envío"; }

/* My details → «Main address» (1.4.7): the address as lines, then «Change» */
.oa-address { margin: 0 0 12px; font-style: normal; font-size: 14px; line-height: 1.7; color: var(--text, #4a423a); overflow-wrap: anywhere; }

/* The surname, required everywhere (1.4.7): at checkout the same words as «Your details» and My details */
.oc-page #billing_last_name_field.woocommerce-invalid-required-field::after { content: "Enter your last name"; }
html[lang^="es"] .oc-page #billing_last_name_field.woocommerce-invalid-required-field::after { content: "Escribe tus apellidos"; }

/* My account on tablets and small laptops (1.4.9, E2's Oliva Club fix: the menu beside the section left it 312 px on
   an iPad held upright, 488 px at 1180 × 820). The menu stays beside the section only while the section still gets
   640 px or more (My account's own width, 904 px inside, whatever the theme's page width); narrower, the phone's
   layout: the menu as rows under the greeting, the section full width below, both up to 760 px and centred. */
.oa-account { container: oa-account / inline-size; }
@container oa-account (max-width: 903px) {
	.oa-account__head, .oa-account__grid { max-width: 760px; margin-left: auto; margin-right: auto; }
	.oa-account__head { padding-bottom: 0; border-bottom: 0; }
	.oa-account__grid { display: block; margin-top: 0; }
	.oa-account .oa-nav { margin: 24px 0 0; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
	.oa-account .oa-nav ul { flex-direction: row; flex-wrap: wrap; gap: 14px 22px; }
	.oa-account .oa-nav li { flex: none; max-width: 100%; }
	.oa-account .oa-nav a { padding: 2px 0 4px; white-space: normal; }
	.oa-account .oa-nav .is-current a { font-weight: 500; box-shadow: inset 0 -1.5px 0 var(--brown); }
	.oa-account .oa-account__content { padding-top: 28px; }
}

/* My pets (1.5.0): a card per pet (up to two), the kind as three chips, «Remove» small under it */
.oa-pets .oa-pet { margin: 0 0 22px; padding: 0 0 22px; border: 0; border-bottom: 1px solid var(--line, #e5e5e5); min-width: 0; }
.oa-pets .oa-pet[hidden] { display: none; }
.oa-pets .oa-pet__title { display: block; margin: 0 0 12px; padding: 0; }
.oa-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.oa-chip { position: relative; display: inline-flex; margin: 0; cursor: pointer; }
.oa-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.oa-chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 20px; border: 1px solid var(--line, #e5e5e5); background: #fff; color: var(--ink, #1f1a14); font: 400 14px/1.3 var(--sans); transition: border-color .15s, background .15s, color .15s; }
.oa-chip:hover span { border-color: #3b2f2a; }
.oa-chip input:checked + span { border-color: #3b2f2a; background: #3b2f2a; color: #fff; }
.oa-chip input:focus-visible + span { outline: 1px solid #3b2f2a; outline-offset: 2px; }
.oa-pets .oa-pet__links { margin-top: 6px; }
.oa-pets .oa-pets__add { margin: 0 0 6px; }
.oa-pets .oa-pets__add[hidden], .oa-pets .oa-links[hidden] { display: none; }

/* My details → «Your birthday (optional)» (1.5.1): day and month, two boxes side by side (also on phones), a short note */
.oa-bday { min-width: 0; margin: 4px 0 0; padding: 0; border: 0; }
.oa-bday .oa-bday__title { display: block; margin: 10px 0 10px; padding: 0; }
.oa-bday .oa-bday__row { grid-template-columns: 116px minmax(0, 1fr); margin-bottom: 0; } /* lined up with the prefix and the phone above */
.oa-bday .oa-bday__note { margin: 6px 0 0; }

/* The sign-in page: the Oliva Club in a line under the title (1.5.3) */
.oa-pitch { margin: 0 0 6px; font-size: 14px; line-height: 1.5; color: var(--brown, #3b2f2a); overflow-wrap: anywhere; }
@media (max-width: 767px) { .oliva-signin-page .oa-signin .oa-pitch { margin: 0 0 4px; font-size: 13px; } }

/* «Continue as guest» (1.5.4, Josep: like Zara): a plain underlined link right under «Continue», on every screen. Its
   box is 44 px tall (an easy tap), the text about 14 px under the button. */
.oa-signin a.oa-gate__guest { display: inline-flex; align-items: center; min-height: 44px; margin: 1px 0 0; padding: 0 2px 0 0; color: #3b2f2a !important; font: 400 14px/1.3 var(--sans);
	text-decoration: underline !important; text-underline-offset: 3px; text-transform: none; letter-spacing: 0; background: none; }
.oa-signin a.oa-gate__guest:hover { color: #4a3c36 !important; }
.oa-signin a.oa-gate__guest:focus-visible { outline: 1px solid #3b2f2a !important; outline-offset: 2px !important; } /* the site's CSS takes every link's outline away (a, a:focus) */

/* The code in six boxes (1.5.4): square-ish boxes with the brown line, large digits; the box being typed in has the
   thicker brown line and, while empty, a thin brown cursor. The real field lies over them, invisible. Six fit across
   a 320 px phone. Red when the code is wrong. */
.oa-otp { position: relative; width: max-content; max-width: 100%; margin: 0 0 10px; } /* as wide as the six boxes: the field over them too */
.oa-otp__boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 52px)); gap: 10px; }
.oa-otp__boxes span { position: relative; display: flex; align-items: center; justify-content: center; height: 60px; border: 1px solid #3b2f2a; background: #fff; color: var(--ink, #1f1a14); font: 400 26px/1 var(--sans); }
.oa-otp__boxes span.is-active { box-shadow: inset 0 0 0 1px #3b2f2a; }
.oa-otp__boxes span.is-active:not(.is-filled)::after { content: ""; width: 1px; height: 26px; background: #3b2f2a; animation: oa-caret 1s steps(1) infinite; }
@keyframes oa-caret { 50% { opacity: 0; } }
.oa-otp.is-invalid .oa-otp__boxes span { border-color: var(--red, #b3261e); }
.oa-otp.is-invalid .oa-otp__boxes span.is-active { box-shadow: inset 0 0 0 1px var(--red, #b3261e); }
.oa-page .oa-otp .oa-otp__input, .oa-panel .oa-otp .oa-otp__input { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none;
	color: transparent; -webkit-text-fill-color: transparent; caret-color: transparent; font-size: 16px; letter-spacing: 0; outline: none; cursor: text; transition: background-color 99999s; }
.oa-otp__input::selection { background: transparent; }
.oa-otp + .oa-error { margin: 8px 0 0; }
@media (prefers-reduced-motion: reduce) { .oa-otp__boxes span.is-active:not(.is-filled)::after { animation: none; } }
@media (max-width: 767px) {
	.oa-otp__boxes { gap: 8px; }
	.oa-otp__boxes span { height: 54px; font-size: 24px; }
}


/* oliva-search */
/* Oliva — Header search (Essential Addons "Advanced Search", results from includes/search.php). Same type and colours
   as the cart: a photo, the name in the serif and the price beside it, on a plain white panel with a thin border.
   Selectors start with body … .eael-adv-search-wrapper to outrank the widget's Elementor styles. */
.elementor-widget-eael-advanced-search {
	--ink: #1f1a14; --muted: #8d7c7a; --line: #e5e5e5; --paper: #f6f6f6; --text: #4a423a;
	--sans: "Jost", system-ui, sans-serif; --serif: "Cormorant Garamond", Georgia, serif;
}

/* Field: no shadow or rounded corners; the clear × and the spinner small and dark instead of a red circle */
body .elementor-widget-eael-advanced-search .eael-adv-search-wrapper .eael-advanced-search-wrap .eael-advanced-search {
	box-shadow: none; border-radius: 0; padding: 0 28px 0 0; color: var(--ink); font: 400 13px/1 var(--sans); letter-spacing: .04em; }
body .elementor-widget-eael-advanced-search .eael-adv-search-wrapper .eael-advanced-search-wrap .eael-adv-search-close {
	right: 0; width: 20px; height: 20px; line-height: 20px; border-radius: 0; background: none; color: var(--ink); font-size: 11px; }
body .elementor-widget-eael-advanced-search .eael-adv-search-wrapper .eael-advanced-search-wrap .eael-adv-search-close:hover { background: none; color: var(--muted); }
body .elementor-widget-eael-advanced-search .eael-adv-search-wrapper .eael-advanced-search-wrap .eael-adv-search-loader {
	right: 2px; width: 14px; height: 14px; border-width: 1px; border-color: var(--line); border-left-color: var(--accent, #3b2f2a); }

/* Panel */
body .elementor-widget-eael-advanced-search .eael-adv-search-wrapper .eael-advanced-search-widget .eael-advanced-search-result {
	padding: 8px 0; margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 0; box-shadow: none; max-height: min(70vh, 560px); }
body .elementor-widget-eael-advanced-search .eael-adv-search-wrapper .eael-advanced-search-widget .eael-advanced-search-result > * { margin: 0; }

/* One product: photo, name, price, colours */
body .elementor-widget-eael-advanced-search .eael-adv-search-wrapper .eael-advanced-search-result .eael-advanced-search-content .oliva-search__item {
	display: flex; align-items: center; gap: 14px; margin: 0 !important; padding: 6px 16px; text-decoration: none; transition: background .15s; } /* the widget's custom CSS gives each result margin-bottom: 10px !important */
body .elementor-widget-eael-advanced-search .eael-adv-search-wrapper .eael-advanced-search-result .eael-advanced-search-content .oliva-search__item:hover,
body .elementor-widget-eael-advanced-search .eael-adv-search-wrapper .eael-advanced-search-result .eael-advanced-search-content .oliva-search__item:focus-visible { background: var(--paper); outline: 0; }
.oliva-search__photo { flex: 0 0 48px; width: 48px; aspect-ratio: 3 / 4; overflow: hidden; background: var(--paper); }
.oliva-search__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.oliva-search__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.oliva-search__name { font: 400 17px/1.2 var(--serif); color: var(--ink); }
.oliva-search__price { font: 400 12px/1.3 var(--sans); letter-spacing: .02em; color: var(--text); }
.oliva-search__price del { color: var(--muted); margin-right: 6px; }
.oliva-search__price ins { text-decoration: none; }
/* The product's colours, as the squares on the shop cards, so it's clear the item comes in more than one */
.oliva-search__colours { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.oliva-search__colours > span { width: 10px; height: 10px; border: 1px solid rgba(31, 26, 20, .25); }

/* Nothing found; and no "See all results" button, since every match is already listed */
body .elementor-widget-eael-advanced-search .eael-adv-search-wrapper .eael-advanced-search-widget .eael-advanced-search-not-found p {
	padding: 4px 16px; font: 400 12px/1.5 var(--sans); letter-spacing: .02em; color: var(--text); text-align: left; }
body .elementor-widget-eael-advanced-search .eael-adv-search-wrapper .eael-advanced-search-widget .eael-advanced-search-load-more { display: none !important; }


/* oliva-white */
/* Oliva — white background everywhere instead of the cream (#F5F1EA).
   Generated from the Elementor CSS: every background that used the cream, plus the global colour itself.
   Cream used as a text colour (e.g. the footer) is untouched. */
body { background: #fff !important; }
.elementor-kit-20 { --e-global-color-0e52d82: #FFFFFF; }
.elementor-13 .elementor-element.elementor-element-221afdba:not(.elementor-motion-effects-element-type-background), .elementor-13 .elementor-element.elementor-element-221afdba > .elementor-motion-effects-container > .elementor-motion-effects-layer { background-color: #fff !important; }
.elementor-13 .elementor-element.elementor-element-326369d1:not(.elementor-motion-effects-element-type-background), .elementor-13 .elementor-element.elementor-element-326369d1 > .elementor-motion-effects-container > .elementor-motion-effects-layer { background-color: #fff !important; }
.elementor-13 .elementor-element.elementor-element-295326c4:not(.elementor-motion-effects-element-type-background), .elementor-13 .elementor-element.elementor-element-295326c4 > .elementor-motion-effects-container > .elementor-motion-effects-layer { background-color: #fff !important; }
.elementor-13 .elementor-element.elementor-element-4a83a88d:not(.elementor-motion-effects-element-type-background), .elementor-13 .elementor-element.elementor-element-4a83a88d > .elementor-motion-effects-container > .elementor-motion-effects-layer { background-color: #fff !important; }
.elementor-13 .elementor-element.elementor-element-47c3e57a:not(.elementor-motion-effects-element-type-background), .elementor-13 .elementor-element.elementor-element-47c3e57a > .elementor-motion-effects-container > .elementor-motion-effects-layer { background-color: #fff !important; }
.elementor-13 .elementor-element.elementor-element-6035c38b:not(.elementor-motion-effects-element-type-background), .elementor-13 .elementor-element.elementor-element-6035c38b > .elementor-motion-effects-container > .elementor-motion-effects-layer { background-color: #fff !important; }
.elementor-13 .elementor-element.elementor-element-0daee90 .eael-adv-accordion .eael-accordion-list .eael-accordion-header, .elementor-13 .elementor-element.elementor-element-0daee90 .eael-accordion_media-wrapper .eael-accordion_media-list { background-color: #fff !important; }
.elementor-13 .elementor-element.elementor-element-1be4c683:not(.elementor-motion-effects-element-type-background), .elementor-13 .elementor-element.elementor-element-1be4c683 > .elementor-motion-effects-container > .elementor-motion-effects-layer { background-color: #fff !important; }
.elementor-13 .elementor-element.elementor-element-498324a4:not(.elementor-motion-effects-element-type-background), .elementor-13 .elementor-element.elementor-element-498324a4 > .elementor-motion-effects-container > .elementor-motion-effects-layer { background-color: #fff !important; }
body.elementor-page-13:not(.elementor-motion-effects-element-type-background), body.elementor-page-13 > .elementor-motion-effects-container > .elementor-motion-effects-layer { background-color: #fff !important; }
body.elementor-page-253:not(.elementor-motion-effects-element-type-background), body.elementor-page-253 > .elementor-motion-effects-container > .elementor-motion-effects-layer { background-color: #fff !important; }
.elementor-400 .elementor-element.elementor-element-fad327d:not(.elementor-motion-effects-element-type-background), .elementor-400 .elementor-element.elementor-element-fad327d > .elementor-motion-effects-container > .elementor-motion-effects-layer { background-color: #fff !important; }
.elementor-400 .elementor-element.elementor-element-195ca5a .eael-advanced-search { background-color: #fff !important; }
.elementor-400 .elementor-element.elementor-element-195ca5a .eael-advanced-search-result { background-color: #fff !important; }
.elementor-400 .elementor-element.elementor-element-d97daa1 .elementor-button { background-color: #fff !important; }
.elementor-400 .elementor-element.elementor-element-8f9d5bd .elementor-button { background-color: #fff !important; }
.elementor-410 .elementor-element.elementor-element-6f4ef42 .elementor-button { background-color: #fff !important; }
.elementor-410 .elementor-element.elementor-element-56c9e6a .elementor-button { background-color: #fff !important; }
#elementor-popup-modal-410 .dialog-widget-content { background-color: #fff !important; }
body.elementor-page-481:not(.elementor-motion-effects-element-type-background), body.elementor-page-481 > .elementor-motion-effects-container > .elementor-motion-effects-layer { background-color: #fff !important; }
body.elementor-page-533:not(.elementor-motion-effects-element-type-background), body.elementor-page-533 > .elementor-motion-effects-container > .elementor-motion-effects-layer { background-color: #fff !important; }

/* Header pinned to the top while scrolling, like Zara. Only the main bar stays: the announcement strip scrolls away
   (assets/site.js sets the exact offset, including the WordPress admin bar when logged in). */
header[data-elementor-type="header"] { position: sticky; top: 0; z-index: 9970; }

/* Language switcher (ES/EN) level with the bag count beside it: its capitals sat about 1px higher. */
header[data-elementor-type="header"] .trp-shortcode-switcher .trp-language-item-name { position: relative; top: 1px; }

/* No separator line under the header bar, like Zara. */
header[data-elementor-type="header"] .elementor-element-fad327d { border-bottom: 0 !important; }

/* Homepage Instagram feed (Smash Balloon) in place of the placeholder tiles: 6 square photos in a row, 3 on phones. */
.elementor-element-5bcda37:has(+ .oliva-ig) { display: none !important; }
.oliva-ig #sb_instagram { padding: 0 !important; width: 100% !important; }
.oliva-ig #sb_instagram .sb_instagram_header, .oliva-ig #sb_instagram #sbi_load, .oliva-ig #sb_instagram .sbi_follow_btn { display: none !important; }
.oliva-ig #sb_instagram #sbi_images { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; padding: 0 !important; width: 100% !important; }
.oliva-ig #sb_instagram .sbi_item { width: 100% !important; padding: 0 !important; margin: 0 !important; }
.oliva-ig #sb_instagram .sbi_item:nth-child(n+7) { display: none !important; }
.oliva-ig #sb_instagram .sbi_photo_wrap, .oliva-ig #sb_instagram .sbi_photo { aspect-ratio: 1 / 1; height: auto !important; }
.oliva-ig #sb_instagram .sbi_photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) { .oliva-ig #sb_instagram #sbi_images { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } } /* phones: two across, like The Oliva Collection */
/* Computers: 3 across in 2 rows, each photo the size of a The Oliva Collection card (a third of the row, 371px tall,
   24px apart). Smash Balloon sets gap: 10px inline on #sbi_images, hence !important; .oliva-ig shrank to fit
   without the width. */
@media (min-width: 1025px) {
	.oliva-ig { width: 100%; }
	.oliva-ig #sb_instagram #sbi_images { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px !important; }
	.oliva-ig #sb_instagram .sbi_photo_wrap, .oliva-ig #sb_instagram .sbi_photo { width: 100% !important; aspect-ratio: auto; height: 371px !important; }
}
/* Tablets and small laptops (768–1024px): 3 across in 2 rows too, square photos; all 6 in one row were tiny. */
@media (min-width: 768px) and (max-width: 1024px) {
	.oliva-ig { width: 100%; }
	.oliva-ig #sb_instagram #sbi_images { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px !important; }
}

/* Homepage "The Oliva Collection": three categories across on tablets too (768–1024px), as on computers. Elementor sets
   each card to 45% there, so the third card of each row (Leashes, Accessories) went on a line of its own at full width.
   Rows: containers 450cd453 and d4e5ab8; the cards still grow to fill the row. */
@media (min-width: 768px) and (max-width: 1024px) {
	body .elementor-13 .elementor-element.elementor-element-450cd453 > .e-con,
	body .elementor-13 .elementor-element.elementor-element-d4e5ab8 > .e-con { --width: 28%; }
}

/* Header bag (Elementor menu cart 3a04dbc): icon and item count in the same black as the ES / EN switcher, instead of
   the brown global colour. It stays that colour on hover, like the switcher (it turned grey). */
body .elementor-400 .elementor-element.elementor-element-3a04dbc { --toggle-button-icon-color: #000; --items-indicator-text-color: #000;
	--toggle-button-icon-hover-color: #000; --toggle-button-hover-text-color: #000; }
body .elementor-400 .elementor-element-3a04dbc .elementor-menu-cart__toggle_button:is(:hover, :focus) :is(.elementor-button-icon, .elementor-button-icon-qty) { color: #000 !important; }
body .elementor-400 .elementor-element-3a04dbc .elementor-menu-cart__toggle_button:is(:hover, :focus) .elementor-button-icon svg { fill: #000 !important; }

/* Category pages (archive template 533) and Shop all (page 253): side space on computers too. Their boxed sections
   have 30px at the sides on tablets but none above 1024px, so between 1025 and ~1200px wide the title, filters and
   products ran into the window edge. 36px lines them up with the header logo; wider screens are unchanged. */
@media (min-width: 1025px) {
	body .elementor-533 > .elementor-element.e-con-boxed,
	body .elementor-253 > .elementor-element.e-con-boxed { --padding-left: 36px; --padding-right: 36px; }
}
/* The links under a category's description (Size guide · …, container 0c90ee7) each stay on one line; when the
   column is too narrow for all three, the last one moves to a second line instead of every link breaking. */
body .elementor-533 .elementor-element.elementor-element-0c90ee7 { --flex-wrap: wrap; --row-gap: 14px; }
body .elementor-533 .elementor-element.elementor-element-0c90ee7 > .e-con-inner > .elementor-widget { flex-shrink: 0; white-space: nowrap; }

/* Shop and category cards (loop item 257): no tag line under the name (the pink "Novedades" / "Perros, Primavera…",
   text widget 3907c14); products tagged Novedades get a small "New" / "Nuevo" label on the photo instead. */
body .elementor-257 .elementor-element.elementor-element-3907c14 { display: none; }
body .e-loop-item:is(.product_tag-novedades, .product_tag-new-in) .elementor-element-5380d57 { position: relative; }
body .e-loop-item:is(.product_tag-novedades, .product_tag-new-in) .elementor-element-5380d57::after {
	content: "New"; position: absolute; top: 10px; right: 10px; z-index: 2; padding: 6px 9px 5px; background: #fff; color: #1f1a14;
	font: 400 10px/1 "Jost", system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; pointer-events: none; }
html[lang^="es"] body .e-loop-item:is(.product_tag-novedades, .product_tag-new-in) .elementor-element-5380d57::after { content: "Nuevo"; }

/* Prices everywhere (includes/prices.php): an amount never breaks between the number and the "€". On sale, like Zara,
   the old price is crossed out in grey and the discount and the new price sit together in a brown box. */
.woocommerce-Price-amount { white-space: nowrap; }
del:has(.woocommerce-Price-amount) { color: #8d7c7a; }
.oliva-sale { display: inline-flex; align-items: baseline; gap: .6em; margin-left: .3em; padding: .35em .5em .3em; background: var(--accent, #3b2f2a); color: #fff; line-height: 1; white-space: nowrap; }
.oliva-sale ins { color: inherit; background: none; text-decoration: none; font-weight: inherit; }
/* Cards (price widget 83f1a90): on a narrow card, as on the phone, the box drops under the crossed-out price instead of
   running off the card's edge. */
body .elementor-257 .elementor-element.elementor-element-83f1a90 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px .45em; max-width: 100%; min-width: 0; }
body .elementor-257 .elementor-element.elementor-element-83f1a90 .oliva-sale { margin-left: 0; }

/* Homepage: the "Visit Oliva" pop-up invitation (container 3c7afc03, the pink block before the footer) is hidden until
   there is a pop-up space to announce. It stays in Elementor; delete this rule to show it again. */
body .elementor-13 .elementor-element.elementor-element-3c7afc03 { display: none; }

/* Menu popup (Elementor popup 410): no "Ayuda" button under the links (widget 56c9e6a); FAQ and Contact are in the list. */
body .elementor-410 .elementor-element.elementor-element-56c9e6a { display: none; }

/* Homepage newsletter ("Correspondencia", form #oliva-newsletter): the email line and "Subscribe →" in the footer brown,
   like the buttons, instead of black. The page's own style block sets them with #oliva-newsletter (the button with
   !important), so these need the id too. */
body #oliva-newsletter .elementor-form-fields-wrapper { border-bottom-color: #3b2f2a; }
body #oliva-newsletter .elementor-button { color: #3b2f2a !important; }

/* Homepage cards under the categories: the small caps label on each photo ("Dog ID tags engraved…", "Designer dog
   beds", "A thoughtful gesture"; headings 184ba7a6, a2a75d6, 7cb8e0fe) on a white label with dark text, like "New" on
   the shop cards, so it reads on light and dark photos alike. */
body .elementor-13 .elementor-element.elementor-element-184ba7a6 .elementor-heading-title,
body .elementor-13 .elementor-element.elementor-element-a2a75d6 .elementor-heading-title,
body .elementor-13 .elementor-element.elementor-element-7cb8e0fe .elementor-heading-title { display: inline-block; padding: 6px 9px 5px; background: #fff; color: #1f1a14; }

/* Homepage Instagram header (container 1f3ed44d): "Follow on Instagram →" (container 37b5c02e, hidden on phones) ends
   at the photos' right edge and sits level with "@oliva_pet_atelier", like "Shop all categories" beside The Oliva
   Collection. It was a 25%-wide box from the left, at the top. */
body .elementor-13 .elementor-element.elementor-element-1f3ed44d { --align-items: center; align-items: center; }
body .elementor-13 .elementor-element.elementor-element-37b5c02e { --width: auto; width: auto; --padding-bottom: 0px; padding-bottom: 0; }

/* Homepage: no slide-up on the blocks marked "seccion" (titles, cards, FAQ…). A script in the page hid
   each one again whenever it left the screen and faded it back in on return, so every scroll replayed it. Now they are
   simply there; the script still toggles its "animate" class, which no longer does anything. */
body .seccion, body .seccion.animate { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Shop all, categories and collections: the WP Grid Builder filters (categories, colour, sort by) in Oliva's style.
   They use Grid Builder's own dropdown (its "Combobox" setting) instead of the browser's: closed, each is as wide as its
   label in small spaced capitals; open, a square white panel with a thin border, no shadow, the chosen line underlined
   in the footer brown. */
body .elementor .elementor-element.elementor-widget-wpgb-facet { width: auto; max-width: none; --container-widget-width: auto; }
body .wpgb-facet .wpgb-select { width: auto; min-height: 0; border: 0; background: none; box-shadow: none; cursor: pointer; }
body .wpgb-facet .wpgb-select input { field-sizing: content; min-width: 4ch; padding: 0; color: #1f1a14; font: 400 11px/26px "Jost", system-ui, sans-serif;
	letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
body .wpgb-facet .wpgb-select input::placeholder { color: #1f1a14; opacity: 1; }
body .wpgb-facet .wpgb-select-separator { display: none; }
body .wpgb-facet .wpgb-select-toggle { color: #1f1a14; }
body .wpgb-select-dropdown.wpgb-style-1 { min-width: 200px; margin-top: 4px; padding: 6px 0; border: 1px solid #e5e5e5; border-radius: 0; background: #fff; box-shadow: none; }
body .wpgb-select-dropdown.wpgb-style-1 .wpgb-select-item { padding: 11px 18px; color: #1f1a14; font: 400 11px/1.3 "Jost", system-ui, sans-serif;
	letter-spacing: .14em; text-transform: uppercase; background: none; }
body .wpgb-select-dropdown.wpgb-style-1 .wpgb-select-item.wpgb-focused { background: #f6f6f6; }
body .wpgb-select-dropdown.wpgb-style-1 .wpgb-select-item[aria-selected="true"] { background: #fff; color: #3b2f2a; text-decoration: underline; text-underline-offset: 4px; } /* not Grid Builder's blue */
body .wpgb-select-dropdown.wpgb-style-1 .wpgb-select-item[aria-selected="true"].wpgb-focused { background: #f6f6f6; }
/* A chosen value (e.g. "Camas para perros") sits inside the field rather than over it, so the filter grows to fit it
   instead of cutting it to "C…"; the empty search field beside it takes no room then. */
body .wpgb-facet .wpgb-select-value { position: static; top: auto; left: auto; max-width: none; overflow: visible; transform: none; white-space: nowrap;
	color: #1f1a14; font: 400 11px/26px "Jost", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
body .wpgb-facet .wpgb-select-placeholder:has(.wpgb-select-value:not(:empty)) input { width: 0; min-width: 0; }
/* The "|" between the result count and Sort by: the same space on both sides. */
body .elementor-widget-wpgb-facet:has(.wpgb-facet-7) + .elementor-widget-text-editor { margin-right: 10px; }

/* Category (facet 1) and colour (facet 10) dropdowns: the field always reads "Categoría" / "Color" (set in
   includes/filters.php); what's chosen shows as a chip under the bar instead, with a × to remove it. In the colour list
   each name has its colour square, as on the product pages. */
body .wpgb-facet.wpgb-facet-1 .wpgb-select-value, body .wpgb-facet.wpgb-facet-10 .wpgb-select-value { display: none; }
body .wpgb-facet.wpgb-facet-1 .wpgb-select-placeholder:has(.wpgb-select-value) input, body .wpgb-facet.wpgb-facet-10 .wpgb-select-placeholder:has(.wpgb-select-value) input,
body .wpgb-facet.wpgb-facet-1 .wpgb-select-placeholder input, body .wpgb-facet.wpgb-facet-10 .wpgb-select-placeholder input { width: auto; min-width: 4ch; } /* the label stays when something is chosen */
body .wpgb-select-dropdown.wpgb-style-1 .wpgb-select-item.oliva-has-swatch::before { content: ""; display: inline-block; width: 12px; height: 12px; margin: 0 10px 0 0;
	vertical-align: -2px; border: 1px solid rgba(31, 26, 20, .25); background: var(--oliva-swatch); }

/* The filter bar (Shop all a51dff4, categories 2fb4ef4): dropdowns on the left, count and Sort by on the right at their
   own width; the chips on a line of their own under the dropdowns, only when something is chosen. */
body .elementor .e-con:has(> .elementor-widget-wpgb-facet .wpgb-facet-10) { --width: auto; width: auto; flex: 1 1 auto; min-width: 0; max-width: 100%;
	--flex-direction: row; flex-direction: row; --flex-wrap: wrap; flex-wrap: wrap; align-items: center; column-gap: 32px; row-gap: 10px; }
body .elementor .e-con:has(> .elementor-widget-wpgb-facet .wpgb-facet-4) { --width: auto; width: auto; flex: 0 0 auto; }
.oliva-chips { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; }
.oliva-chips:empty { display: none; }
body .oliva-chips .oliva-chip { display: inline-flex; align-items: center; gap: 8px; height: 30px; margin: 0; padding: 0 10px 0 12px; border: 1px solid #e5e5e5; border-radius: 0;
	background: #fff; box-shadow: none; color: #1f1a14; font: 400 11px/1 "Jost", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
body .oliva-chips .oliva-chip:hover, body .oliva-chips .oliva-chip:focus-visible { border-color: #3b2f2a; background: #fff; color: #1f1a14; outline: 0; }
.oliva-chip__swatch { width: 12px; height: 12px; border: 1px solid rgba(31, 26, 20, .25); background: var(--oliva-swatch); }
.oliva-chip__x { display: block; flex: none; width: 9px; height: 9px; stroke: #3b2f2a; stroke-width: 1.1; fill: none; } /* drawn, so it sits centred on the text on every device (the "×" character sat low) */
body .oliva-chips .oliva-chip > span:not(.oliva-chip__swatch) { line-height: 1; padding-top: 1px; } /* Jost's letters sit a touch high in their box */
@media (max-width: 767px) { /* phones: the two sides stack, each the full width (the line between them too) */
	body .elementor .e-con:has(> .elementor-widget-wpgb-facet .wpgb-facet-10),
	body .elementor .e-con:has(> .elementor-widget-wpgb-facet .wpgb-facet-4) { width: 100%; flex-basis: auto; }
	body .elementor .e-con:has(> .elementor-widget-wpgb-facet .wpgb-facet-10) { column-gap: 24px; }
}

/* Sort by (facet 4) like the other two: the field always reads "Ordenar por" (includes/filters.php), no × in any field,
   the chosen order underlined in the list. The open list as wide as its longest line, never wrapped (and moved left to
   fit the window). The count in the same small capitals, without the "|" before Sort by. */
body .wpgb-facet.wpgb-facet-4 .wpgb-select-value, body .wpgb-facet .wpgb-select-clear { display: none; }
body .wpgb-facet.wpgb-facet-4 .wpgb-select-placeholder:has(.wpgb-select-value) input, body .wpgb-facet.wpgb-facet-4 .wpgb-select-placeholder input { width: auto; min-width: 4ch; }
body .wpgb-select-dropdown.wpgb-style-1 { width: max-content !important; }
body .wpgb-select-dropdown.wpgb-style-1 .wpgb-select-item { white-space: nowrap; }
body .wpgb-facet.wpgb-facet-7 .wpgb-result-count { color: #4a423a; font: 400 11px/26px "Jost", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
@media (min-width: 768px) { body .wpgb-facet.wpgb-facet-7 .wpgb-result-count { font-size: 11px !important; } } /* something else made it 13px, bigger than the fields */
body .elementor-widget-wpgb-facet:has(.wpgb-facet-7) + .elementor-widget-text-editor { display: none; }
body .elementor .e-con:has(> .elementor-widget-wpgb-facet .wpgb-facet-4) { column-gap: 28px; gap: 28px; align-items: center; }

/* The three fields' labels as plain text (data-oliva-label, set in includes/filters.php) rather than the field's own
   placeholder, which some browsers clipped ("CATEGO…"); the field itself sits invisibly on top to open the list. */
body .wpgb-facet div.wpgb-select .wpgb-select-placeholder[data-oliva-label] { position: relative; }
body .wpgb-facet div.wpgb-select .wpgb-select-placeholder[data-oliva-label]::before { content: attr(data-oliva-label); color: #1f1a14;
	font: 400 11px/26px "Jost", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
body .wpgb-facet div.wpgb-select .wpgb-select-placeholder[data-oliva-label] .wpgb-select-search { position: absolute; inset: 0; opacity: 0; }
body .wpgb-facet div.wpgb-select .wpgb-select-placeholder[data-oliva-label] .wpgb-select-search input { width: 100% !important; height: 100%; min-width: 0; cursor: pointer; }
@media (max-width: 767px) { body .wpgb-facet div.wpgb-select .wpgb-select-placeholder[data-oliva-label]::before { font-size: 13px; letter-spacing: .1em; } }

/* While Grid Builder loads (class wpgb-loading) the filters are the browser's own dropdowns, grey and as wide as their
   longest option, before its script turns them into its own. Rather than show that look for a moment, the filters and
   the count stay invisible at their final size until it's done, then appear once in the style above (no jump). */
html:not(.oliva-filters-ready) body .wpgb-facet.wpgb-loading { visibility: hidden; height: 26px; max-width: 110px; overflow: hidden; }
html:not(.oliva-filters-ready) body .e-con:has(.wpgb-facet.wpgb-loading) .wpgb-facet-7 { visibility: hidden; }
/* Only on the first load: once they've appeared (oliva-filters-ready, set in includes/filters.php) they stay while the
   results reload after a choice, which Grid Builder also marks as loading. */

/* The open lists and the chips in normal case (only the bar's three labels stay in small capitals), like Zara. */
body .wpgb-select-dropdown.wpgb-style-1 .wpgb-select-item { font-size: 13px; letter-spacing: .02em; text-transform: none; }
body .oliva-chips .oliva-chip { font-size: 12px; letter-spacing: .02em; text-transform: none; }

/* Phones: the filter bar is one slim line so the products come first: CATEGORÍA · COLOR on the left, ORDENAR POR on
   the right, in the same 11px small capitals as on computers (the labels are drawn text, so no iPhone zoom), the chips
   under them only when something is chosen, and no count (the grid shows the results). One line above and below the
   bar, none in the middle. */
@media (max-width: 767px) {
	body .elementor .e-con:has(> .e-con > .elementor-widget-wpgb-facet .wpgb-facet-4) { --flex-direction: row; flex-direction: row; --flex-wrap: nowrap; flex-wrap: nowrap;
		align-items: flex-start; padding: 0; border-top: 1px solid rgb(217, 201, 197); border-bottom: 1px solid rgb(217, 201, 197); }
	body .elementor .e-con:has(> .elementor-widget-wpgb-facet .wpgb-facet-10) { width: auto; flex: 1 1 0; min-width: 0; padding: 10px 0; border: 0; column-gap: 18px; row-gap: 8px; }
	body .elementor .e-con:has(> .elementor-widget-wpgb-facet .wpgb-facet-4) { width: auto; flex: 0 0 auto; padding: 10px 0; border: 0; align-self: flex-start; --align-self: flex-start; }
	body .elementor .elementor-widget-wpgb-facet:has(.wpgb-facet-7) { display: none; }
	body .wpgb-facet div.wpgb-select .wpgb-select-placeholder[data-oliva-label]::before { font-size: 11px; letter-spacing: .12em; }
	body .wpgb-facet.wpgb-loading select.wpgb-select { font-size: 11px !important; letter-spacing: .12em; }
	.oliva-chips { margin: 0; }
}
/* First load: the filters' side stays on one line while they're invisible (no chips yet), so the bar has its final
   height from the start instead of wrapping to two lines and shrinking once they appear. */
html:not(.oliva-filters-ready) body .elementor .e-con:has(> .elementor-widget-wpgb-facet .wpgb-facet-10) { --flex-wrap: nowrap; flex-wrap: nowrap; }
html:not(.oliva-filters-ready) body .wpgb-facet.wpgb-loading { max-width: 90px; }

/* Shop all (page 253) and category / collection pages (archive template 533): about half the space under the header
   (Elementor had 100 / 80 / 70px above "Shop all", and 70 / 50 / 30px above the breadcrumb plus 30 / 60 / 40px above a
   category's title, on computers / tablets / phones); since 1.5.178 closer still, as Josep asked. */
body .elementor-253 .elementor-element.elementor-element-1266cba { --padding-top: 28px; }
body .elementor-533 .elementor-element.elementor-element-57e9ef4 { --padding-top: 20px; }
body .elementor-533 .elementor-element.elementor-element-008a008 { --padding-top: 12px; }
@media (max-width: 1024px) {
	body .elementor-253 .elementor-element.elementor-element-1266cba { --padding-top: 24px; }
	body .elementor-533 .elementor-element.elementor-element-57e9ef4 { --padding-top: 16px; --padding-bottom: 0px; }
	body .elementor-533 .elementor-element.elementor-element-008a008 { --padding-top: 12px; }
}
@media (max-width: 767px) {
	body .elementor-253 .elementor-element.elementor-element-1266cba { --padding-top: 16px; }
	body .elementor-533 .elementor-element.elementor-element-57e9ef4 { --padding-top: 10px; --padding-bottom: 0px; }
	body .elementor-533 .elementor-element.elementor-element-008a008 { --padding-top: 8px; }
}

/* Touch screens: Grid Builder marks the first option of a list as active the moment it opens (for the keyboard), which
   on a phone looked like something was already picked. No active look there; the chosen option keeps its underline.
   (Computers keep the light grey hover.) */
@media (hover: none) {
	html body .wpgb-select-dropdown.wpgb-style-1 .wpgb-select-item.wpgb-focused { background: #fff; color: #1f1a14; }
	html body .wpgb-select-dropdown.wpgb-style-1 .wpgb-select-item.wpgb-focused[aria-selected="true"] { color: #3b2f2a; }
}

/* Category breadcrumb ("Tienda / Collares", Essential Addons widget ad52041): 14px instead of 12, in the site's colours
   (the link in the muted brown, the page itself near-black) instead of a blue-grey. */
body .elementor-533 .elementor-element.elementor-element-ad52041 .eael-breadcrumbs .eael-breadcrumbs__content { font-size: 14px; letter-spacing: .02em; color: #1f1a14; }
body .elementor-533 .elementor-element.elementor-element-ad52041 .eael-breadcrumbs .eael-breadcrumbs__content a, body .elementor-533 .elementor-element.elementor-element-ad52041 .eael-breadcrumbs .eael-breadcrumb-separator { font-size: 14px; color: #8d7c7a; }
body .elementor-533 .elementor-element.elementor-element-ad52041 .eael-breadcrumbs .eael-breadcrumb-separator { margin: 0 8px; }

/* Homepage on phones: about half the space between sections. Elementor gave most sections 50-80px above and below, so
   where two met there were 120-150px of white (e.g. FAQ → Instagram, "Ver todas las categorías" → video). Photos and
   the hero are unchanged. */
@media (max-width: 767px) {
	body .elementor-13 .elementor-element.elementor-element-326369d1 { --padding-top: 40px; --padding-bottom: 24px; } /* the four values */
	body .elementor-13 .elementor-element.elementor-element-32f5dfef { --padding-top: 24px; }  /* "La vida juntos" */
	body .elementor-13 .elementor-element.elementor-element-d44aae5 { --padding-bottom: 32px; } /* "Ver la colección completa" */
	body .elementor-13 .elementor-element.elementor-element-3166050 { --padding-top: 48px; --padding-bottom: 40px; } /* dark "Novedades" */
	body .elementor-13 .elementor-element.elementor-element-47c3e57a { --padding-bottom: 32px; } /* "La colección Oliva" */
	body .elementor-13 .elementor-element.elementor-element-38db17f { display: none; } /* its 50px spacer */
	body .elementor-13 .elementor-element.elementor-element-1ea7f58a { --padding-top: 40px; }
	body .elementor-13 .elementor-element.elementor-element-4a83a88d { --padding-top: 32px; } /* video, "Un ritual diario" */
	body .elementor-13 .elementor-element.elementor-element-3d9db8ec { --padding-top: 48px; --padding-bottom: 48px; } /* Vogue */
	body .elementor-13 .elementor-element.elementor-element-6035c38b { --padding-top: 48px; --padding-bottom: 24px; } /* FAQ */
	body .elementor-13 .elementor-element.elementor-element-8f5eea5 { --row-gap: 20px; row-gap: 20px; } /* FAQ intro → questions: 20px, not 52 */
	body .elementor-13 .elementor-element.elementor-element-2b19cb9b { --margin-top: 0px; margin-top: 0; }
	body .elementor-13 .elementor-element.elementor-element-239865e1 { --padding-top: 24px; } /* Instagram */
	body .elementor-13 .elementor-element.elementor-element-022edb9 { --padding-bottom: 32px; } /* "Síguenos en Instagram" */
	body .elementor-13 .elementor-element.elementor-element-498324a4 { --padding-top: 14px; --padding-bottom: 48px; } /* "Correspondencia" (top: see the newsletter rule at the end) */
}

/* Homepage values ("Diseñado en Girona", "Prendas cotidianas bien pensadas", "Elaborado en pequeñas cantidades",
   "La vida juntos"): the headings in normal case, Jost 15px, instead of small spaced capitals. */
body .elementor-13 .elementor-element.elementor-element-5696481c .elementor-heading-title,
body .elementor-13 .elementor-element.elementor-element-209159f9 .elementor-heading-title,
body .elementor-13 .elementor-element.elementor-element-76350ea9 .elementor-heading-title,
body .elementor-13 .elementor-element.elementor-element-771401ad .elementor-heading-title { text-transform: none; letter-spacing: .01em; font-size: 15px; }

/* Homepage "Novedades en el / atelier": two heading widgets that read as one title; the block's 20px gap between
   items made it look like two, so "atelier" sits right under the first line. */
body .elementor-13 .elementor-element.elementor-element-7914afa { margin-top: -20px; }

/* iPhone: Safari zooms into any field under 16px when it's tapped. The site's custom CSS sets the first filter's field
   (input#wpgb-select-0: Category on Shop all, Colour on category pages) to 13px, so tapping it zoomed the page. The
   fields' own text isn't shown (the labels are drawn, see data-oliva-label above), so all of them can be 16px; the id
   selectors outrank that rule. */
@media (max-width: 767px) {
	html body .wpgb-facet div.wpgb-select input:is(#wpgb-select-0, #wpgb-select-1, #wpgb-select-2, #wpgb-select-3, #wpgb-select-4, #wpgb-select-5),
	html body .wpgb-facet div.wpgb-select input { font-size: 16px !important; }
}

/* Homepage newsletter: no "Correspondencia" label above "Cartas desde nuestro atelier" (heading widget 42c4cff0). */
body .elementor-13 .elementor-element.elementor-element-42c4cff0 { display: none; }
/* …and as much space above "Cartas desde nuestro atelier" as below its small print (to the footer): the block above
   adds its own bottom padding (40px on computers, 25px on tablets, the "Síguenos" link's 32px on phones) and the
   title's line height a few pixels over the letters, so the newsletter's top padding is that much smaller than its
   bottom one. Phones: in the block above (14px). */
@media (min-width: 1025px) { body .elementor-13 .elementor-element.elementor-element-498324a4 { --padding-top: 74px; } }
@media (min-width: 768px) and (max-width: 1024px) { body .elementor-13 .elementor-element.elementor-element-498324a4 { --padding-top: 38px; } }

/* A filter with no choices left (e.g. Colour once Placas y colgantes is chosen) stays in the bar as a stand-in with the
   same look, which opens to "Sin resultados" (includes/filters.php). */
body .oliva-facet-empty { position: relative; }
body .oliva-facet-empty .wpgb-select-placeholder { flex: 0 0 auto; overflow: visible; } /* as wide as its label, which otherwise covered the arrow */
body .oliva-facet-empty .oliva-facet-empty__open { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; opacity: 0; cursor: pointer; }
body .oliva-facet-empty .wpgb-select-toggle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 22px; padding: 0; }
body .oliva-facet-empty .wpgb-select-toggle svg { width: 14px; height: 14px; fill: currentColor; stroke: currentColor; stroke-width: 1px; } /* as Grid Builder draws its own */
body .oliva-facet-empty .oliva-facet-empty__list { position: absolute; top: 100%; left: 0; z-index: 30; }
body .oliva-facet-empty .oliva-facet-empty__list[hidden] { display: none !important; }
body .oliva-facet-empty .oliva-facet-empty__list .wpgb-select-item { color: #4a423a; cursor: default; background: #fff; }

/* Product cards (Elementor loop item 257): the photo's room from the first paint, before the photo arrives (9/11/2026,
   docs/performance/lcp-tienda-portadas.md). The template gives the photo width: 100% and aspect-ratio 3 / 4, but while
   it downloads Chrome counts a percentage-wide image as 0 px tall when it sizes the grid's rows, so every card started
   92 px tall: the whole shop fitted in the first screens, all 40 photos (940 KB) were near enough for loading="lazy" to
   fetch them as the page opened, and each card then grew as its photo came. Three quarters of the photo box's own width
   (container units) is a fixed length, which Chrome does count: the same 3:4 box, so the card looks exactly as before.
   Not in the landing pages' grid (.olp-grid, «Oliva — Landing»): there the photo box is shorter than the photo on a
   phone (217 px against 236 px, the photo reaches into the gap above the name), and this rule made each card 19 px
   taller (measured at 390 px, 9/11/2026). Seven cards, so nothing to gain there; the look stays as it was. */
body .elementor-257:not(.olp-grid .elementor-257) .elementor-element-e46a192 { container-type: inline-size; }
body .elementor-257:not(.olp-grid .elementor-257) .elementor-element-5380d57 { min-height: calc(100cqw * 4 / 3); }

/* Product cards: the next photo while the mouse is over the card, like Zara (includes/card-colours.php). Computers only. */
body .oliva-hover-wrap { position: relative; display: block; overflow: hidden; }
body .oliva-hover-wrap > .oliva-card-hover { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; margin: 0; object-fit: cover; opacity: 0; transition: opacity .45s ease; pointer-events: none; }
@media (hover: hover) {
	body :is(.e-loop-item, .oliva-pp__ymbi li):hover .oliva-hover-wrap > .oliva-card-hover.is-ready { opacity: 1; }
}

/* No results on the shop, categories and collections (includes/filters.php): like the 404 page, instead of Grid
   Builder's single line. */
body .elementor-element.oliva-grid-empty { display: none; } /* the grid's own empty box: its line and 60px of nothing */
.oliva-empty { padding: 0 0 24px; color: #1f1a14; }
body .oliva-empty .oliva-empty__title { margin: 0 0 12px; font: 300 44px/1.05 "Cormorant Garamond", Georgia, serif; letter-spacing: -.01em; color: #1f1a14; }
.oliva-empty__title em { font-style: italic; }
body .oliva-empty .oliva-empty__panel p { margin: 0 0 24px; max-width: 520px; font: 400 13px/1.6 "Jost", system-ui, sans-serif; color: #4a423a; }
body .oliva-empty .oliva-empty__clear { display: inline-flex; align-items: center; height: 44px; padding: 0 26px; border: 1px solid #3b2f2a; color: #3b2f2a; background: none;
	font: 400 11px/1 "Jost", system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; transition: background .2s, color .2s; }
body .oliva-empty .oliva-empty__clear:hover { background: #3b2f2a; color: #fff; }
.oliva-empty__also { padding: 88px 0 0; }
@media (max-width: 767px) {
	body .oliva-empty .oliva-empty__title { font-size: 34px; }
	.oliva-empty__also { padding-top: 56px; }
}

/* The site menu, like Mango's (includes/menu.php): full screen, white, sliding in from the left; the sections as tabs
   along the top (the open one underlined), its links below in small capitals, × on the right. */
.oliva-menu { position: fixed; inset: 0; z-index: 100000; display: flex; flex-direction: column; padding: 30px 40px 40px; overflow-y: auto; background: #fff; color: #1f1a14;
	transform: translateX(-100%); transition: transform .42s cubic-bezier(.2, .7, .2, 1); }
.oliva-menu[hidden] { display: none; }
.oliva-menu.is-open { transform: none; }
html.oliva-menu-open, html.oliva-menu-open body { overflow: hidden; }
.oliva-menu__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.oliva-menu__tabs { display: flex; flex-wrap: wrap; gap: 6px 26px; }
body .oliva-menu .oliva-menu__tab { margin: 0; padding: 0 0 5px; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: none; color: #8d7c7a;
	font: 400 12px/1.2 "Jost", system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
body .oliva-menu .oliva-menu__tab:hover { background: none; color: #3b2f2a; }
body .oliva-menu .oliva-menu__tab[aria-selected="true"] { color: #1f1a14; border-bottom-color: #3b2f2a; }
body .oliva-menu .oliva-menu__close { display: flex; width: 32px; height: 32px; margin: -8px -8px 0 0; padding: 8px; border: 0; background: none; color: #1f1a14; cursor: pointer; }
.oliva-menu__close svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.2; }
.oliva-menu__list { margin: 28px 0 0; padding: 0; list-style: none; }
.oliva-menu__list li { margin: 0 0 30px; padding: 0; }
body .oliva-menu .oliva-menu__list a { color: #1f1a14; font: 400 13px/1.3 "Jost", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }
body .oliva-menu .oliva-menu__list a:hover { color: #3b2f2a; text-decoration: underline; text-underline-offset: 5px; }
body .oliva-menu :focus-visible { outline: 1px solid #3b2f2a; outline-offset: 4px; }
.oliva-menu:focus { outline: none; }
@media (max-width: 767px) {
	.oliva-menu { padding: 22px 20px 32px; }
	.oliva-menu__tabs { gap: 6px 20px; }
	.oliva-menu__list { margin-top: 24px; }
	.oliva-menu__list li { margin-bottom: 26px; }
}

/* Cookie banner (Complianz; Mireia's CSS in wordpress/complianz-banner.css): hidden unless Complianz marks it as showing.
   Complianz hides it with classes (cmplz-hidden in the page, cmplz-dismissed after a choice, cmplz-show only while it
   waits for one), but that CSS gives the bar display: grid / flex with an id selector, which beat Complianz's own
   display: none, so after "Accept" (and on every later page) the bar stayed. "Manage consent" adds cmplz-show again. */
#cmplz-cookiebanner-container .cmplz-cookiebanner:not(.cmplz-show),
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-hidden,
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-dismissed { display: none !important; }
/* The banner's two links (Cookie and Privacy policy) are empty for a moment while TranslatePress translates the titles
   Complianz writes in English: their line stays, so the banner doesn't grow under the visitor (includes/filters.php). */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-documents { min-height: 1lh; }

/* While the cookie banner waits for a choice (html.oliva-consent-open, set in assets/site.js): the dimmed page catches
   every tap and nothing behind it reacts. On iPhone taps went through the dim layer and played the homepage video.
   The layer is drawn here too, so it doesn't depend on the :has() in the banner's CSS, and the page's own elements
   take no taps at all; the banner keeps all of its buttons and links and scrolls on its own (site.js holds the page). */
html.oliva-consent-open body #cmplz-cookiebanner-container::before { content: ""; position: fixed; inset: 0; z-index: 99998; background: rgba(59, 47, 42, .45);
	pointer-events: auto; touch-action: none; }
html.oliva-consent-open body > :not(#cmplz-cookiebanner-container),
html.oliva-consent-open body > :not(#cmplz-cookiebanner-container) * { pointer-events: none !important; }
html.oliva-consent-open body #cmplz-cookiebanner-container .cmplz-cookiebanner { overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
	transition-property: box-shadow; } /* Complianz animates every property for 1 s while hovered: the bar and the preference centre below morphed into each other */
@media (max-width: 1023px) { /* phones: the bottom sheet no taller than the visible screen, so its buttons stay above Safari's toolbar */
	html body #cmplz-cookiebanner-container .cmplz-cookiebanner { max-height: 85dvh; }
}
/* …and the phone's status bar the colour of the dimmed page (#a7a19f, white under the dim layer) instead of white:
   the page's background, and a strip at the very top for Safari 26, which tints the status bar from fixed elements
   touching the top (site.js adds it while the banner is open and also sets <meta name="theme-color">). */
html.oliva-consent-open, html.oliva-consent-open body { background: #a7a19f !important; }
.oliva-consent-top { position: fixed; top: 0; left: 0; right: 0; z-index: 99999; height: 1px; height: max(1px, env(safe-area-inset-top)); background: #a7a19f;
	pointer-events: none; }

/* No floating "Cookies" button once the visitor has chosen: "Cookie settings" in the footer reopens the preference centre
   (includes/footer.php, assets/site.js). */
body #cmplz-manage-consent { display: none !important; }

/* Computers: "Cookie settings" opens a centred preference centre like Zara's (assets/site.js adds the header and the
   tabs; Complianz's own switches, texts and buttons are laid out here): logo and title on top, the categories as tabs
   on the left (the open one white with a brown bar), its switch and text on the right, the three buttons stacked
   below. × or Escape go back to the bar without saving. Phones keep the categories inside the bottom sheet. */
.oliva-pc-head, .oliva-pc-tabs { display: none; }
@media (min-width: 1024px) {
	html body #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible { top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%);
		display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 730px; max-width: calc(100vw - 48px); max-height: 85vh; margin: 0; padding: 0; overflow: hidden;
		border: 0; border-radius: 0; box-shadow: 0 24px 60px rgba(59, 47, 42, .22); }
	html body #cmplz-cookiebanner-container .cmplz-categories-visible .oliva-pc-head { display: flex; flex: none; align-items: center; gap: 18px; padding: 18px 20px 18px 28px;
		border-bottom: 1px solid #e8dcd8; }
	.oliva-pc-logo { flex: none; width: 63px; height: 30px; background: url("https://oliva-atelier.com/wp-content/plugins/oliva-product-page/assets/logo-oliva.png") center / contain no-repeat; } /* the header's wordmark */
	.oliva-pc-title { color: #3b2f2a; font: 400 11px/1.4 Jost, "Helvetica Neue", Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
	html body .oliva-pc-head .oliva-pc-close { display: flex; flex: none; width: 36px; height: 36px; margin: 0 0 0 auto; padding: 10px; border: 0; border-radius: 0;
		background: none; color: #3b2f2a; cursor: pointer; }
	html body .oliva-pc-head .oliva-pc-close:is(:hover, :focus) { background: none; color: #3b2f2a; }
	.oliva-pc-close svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.2; }

	html body #cmplz-cookiebanner-container .cmplz-categories-visible .cmplz-body { display: block; flex: 1 1 auto; min-height: 0; max-height: none; width: auto; margin: 0; padding: 0;
		overflow-y: auto; }
	html body #cmplz-cookiebanner-container .cmplz-categories-visible .cmplz-body > div { width: auto; }
	html body #cmplz-cookiebanner-container .cmplz-categories-visible .cmplz-message { display: none; }
	html body #cmplz-cookiebanner-container .cmplz-categories-visible .cmplz-categories { display: grid; grid-template-columns: 200px minmax(0, 1fr); width: auto;
		min-height: 280px; margin: 0; animation: none; }
	html body #cmplz-cookiebanner-container .cmplz-categories-visible .oliva-pc-tabs { display: flex; flex-direction: column; grid-column: 1; grid-row: 1;
		background: #faf6f4; border-right: 1px solid #e8dcd8; }
	html body #cmplz-cookiebanner-container .cmplz-categories-visible .oliva-pc-tab { display: block; width: 100%; margin: 0; padding: 18px 20px 18px 21px; border: 0;
		border-left: 3px solid transparent; border-radius: 0; background: #faf6f4; color: #3b2f2a; font: 400 13px/1.35 Jost, "Helvetica Neue", Arial, sans-serif;
		letter-spacing: .02em; text-align: left; text-transform: none; white-space: normal; cursor: pointer; }
	html body #cmplz-cookiebanner-container .cmplz-categories-visible .oliva-pc-tab:is(:hover, :focus) { background: #f4eeeb; color: #3b2f2a; outline: 0; }
	html body #cmplz-cookiebanner-container .cmplz-categories-visible .oliva-pc-tab:focus-visible { outline: 1px solid #3b2f2a; outline-offset: -4px; }
	html body #cmplz-cookiebanner-container .cmplz-categories-visible .oliva-pc-tab[aria-selected="true"] { background: #fff; border-left-color: #3b2f2a; }
	html body #cmplz-cookiebanner-container .cmplz-categories-visible .cmplz-categories .cmplz-category { display: none; grid-column: 2; grid-row: 1; margin: 0;
		padding: 26px 28px; background: #fff; }
	html body #cmplz-cookiebanner-container .cmplz-categories-visible .cmplz-categories .cmplz-category.oliva-pc-on { display: block; }
	html body #cmplz-cookiebanner-container .cmplz-categories-visible .cmplz-category .cmplz-category-header { display: flex; align-items: center;
		justify-content: space-between; gap: 20px; padding: 0 0 16px; }
	/* the switch's focus ring brown, only for the keyboard (Complianz draws a blue one after every click) */
	html body #cmplz-cookiebanner-container .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus + .cmplz-label::before { box-shadow: none; }
	html body #cmplz-cookiebanner-container .cmplz-category .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus-visible + .cmplz-label::before { box-shadow: 0 0 0 2px #fff, 0 0 0 3px #3b2f2a; }
	html body #cmplz-cookiebanner-container .cmplz-categories-visible .cmplz-category .cmplz-category-title { font-size: 15px; font-weight: 400; }
	html body #cmplz-cookiebanner-container .cmplz-categories-visible .cmplz-category .cmplz-always-active { font-size: 12px; font-weight: 400; letter-spacing: .02em; }
	html body #cmplz-cookiebanner-container .cmplz-categories-visible .cmplz-category .cmplz-category-toggle { display: none; }
	html body #cmplz-cookiebanner-container .cmplz-categories-visible .cmplz-category .cmplz-description { display: block !important; margin: 0; padding: 0;
		color: #3b2f2a; font: 300 13px/1.7 Jost, "Helvetica Neue", Arial, sans-serif; }

	html body #cmplz-cookiebanner-container .cmplz-categories-visible .cmplz-buttons { display: flex; flex: none; flex-direction: column; gap: 10px; margin: 0;
		padding: 20px 28px 0; border-top: 1px solid #e8dcd8; }
	html body #cmplz-cookiebanner-container .cmplz-categories-visible .cmplz-buttons .cmplz-btn { width: 100%; min-width: 0; margin: 0; }
	html body #cmplz-cookiebanner-container .cmplz-categories-visible .cmplz-links { flex: none; margin: 0; padding: 12px 28px 0; justify-content: center; }
	html body #cmplz-cookiebanner-container .cmplz-categories-visible .cmplz-links:last-child { padding-bottom: 18px; }
	html body #cmplz-cookiebanner-container .cmplz-categories-visible .cmplz-links ul { justify-content: center; }
}
/* Short windows (up to 640px tall, e.g. a laptop with the browser zoomed): the whole preference centre scrolls instead
   of squeezing the categories between the header and the buttons. Up to 400px Complianz also shrinks its banner to
   60% (zoom, and !important on padding and buttons), which left it unreadable, so that is undone here. */
@media (min-width: 1024px) and (max-height: 640px) {
	html body #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible { height: auto; max-height: calc(100vh - 24px); padding: 0 !important;
		overflow-y: auto; zoom: 1; }
	html body #cmplz-cookiebanner-container .cmplz-categories-visible .cmplz-body { flex: none; min-height: auto; margin-top: 0 !important; overflow: visible; }
	html body #cmplz-cookiebanner-container .cmplz-categories-visible .cmplz-categories { min-height: 0; }
	html body #cmplz-cookiebanner-container .cmplz-categories-visible .cmplz-buttons { gap: 10px !important; }
	html body #cmplz-cookiebanner-container .cmplz-categories-visible .cmplz-buttons .cmplz-btn { height: auto !important; min-height: 46px !important;
		padding: 0 22px !important; font-size: 11px !important; line-height: 1.2 !important; zoom: 1 !important; }
	html body #cmplz-cookiebanner-container .cmplz-categories-visible :is(.cmplz-documents, .cmplz-information) { zoom: 1 !important; }
}