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

/* 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; }
}


/* oliva-wallet */
/* Oliva — Apple Pay / Google Pay places (includes/wallet.php: oliva_wallet_slot). The placeholder shows the wallet's
   button at once, as tall as the buttons beside it (--oliva-wallet-h, set by each page); WooPayments' real button (a
   Stripe frame) loads over it a moment later and takes over (.is-live, assets/wallet.js). */
.oliva-wallet-box { position: relative; height: var(--oliva-wallet-h, 48px); }
.oliva-wallet-box > .oliva-wallet { position: relative; z-index: 1; display: flow-root; height: 100%; } /* flow-root: the frame's -4px margin stays inside (else the box moves up 4px when it arrives) */
.oliva-wallet-box > .oliva-wallet-btn { position: relative; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer; } /* the product page's own button (the placeholder inside is its look) */
.oliva-wallet-box > .oliva-wallet-btn:focus-visible { outline: 1px solid #3b2f2a; outline-offset: 3px; }
.oliva-wallet-box > .oliva-wallet-btn:hover, .oliva-wallet-box > .oliva-wallet-btn:focus, .oliva-wallet-box > .oliva-wallet-btn:active { background: none !important; border: 0 !important; box-shadow: none !important; } /* the theme turns buttons pink */
.oliva-wallet iframe { max-width: none !important; } /* Stripe's frame is 8px wider than its box (room for the focus ring); the site caps iframes at 100% */
.oliva-wallet-ph { position: absolute; top: 0; left: 0; right: 0; height: 100%; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
	background: #fff; color: #000; pointer-events: none; }
/* The 1px outline on top of what's inside: Apple's own button (Safari, below) paints a little wider than its box at widths
   with a fraction of a pixel (e.g. 422.4px on a 1440px-wide laptop) and covered the right edge */
.oliva-wallet-ph::after { content: ""; position: absolute; inset: 0; border: 1px solid #000; pointer-events: none; }
.oliva-wallet-box--dark .oliva-wallet-ph { background: #000; color: #fff; }
.oliva-wallet-ph svg { display: none; width: auto; height: 60%; } /* the logo as big as on Apple's button */
.oliva-wallet-ph .oliva-wallet-ph__google { height: 46%; color: #5f6368; } /* Google's grey "Pay" */
.oliva-wallet-box--dark .oliva-wallet-ph .oliva-wallet-ph__google { color: #fff; }
html.oliva-wallet-applepay .oliva-wallet-ph__apple, html.oliva-wallet-googlepay .oliva-wallet-ph__google { display: block; }
/* Safari (every browser on an iPhone): Stripe's Apple Pay button there is Apple's own, drawn by the browser, with a
   slightly bigger logo than ours; the placeholder is that same button, so nothing changes when the real one arrives
   (the bag), and the product page's own button looks just like it. */
.oliva-wallet-ph__native { display: none; }
@supports (-webkit-appearance: -apple-pay-button) {
	html.oliva-wallet-applepay .oliva-wallet-ph .oliva-wallet-ph__apple { display: none; }
	/* Apple's white button, under our outline (Apple's own outline lost its right edge at such widths too) */
	html.oliva-wallet-applepay .oliva-wallet-ph__native { display: block; width: 100%; height: 100%; border-radius: 0;
		-webkit-appearance: -apple-pay-button; -apple-pay-button-type: plain; -apple-pay-button-style: white; }
	html.oliva-wallet-applepay .oliva-wallet-box--dark .oliva-wallet-ph__native { -apple-pay-button-style: black; }
}
.oliva-wallet-box.is-live .oliva-wallet-ph { visibility: hidden; }
/* WooPayments greys its button out (a white veil and WooCommerce's spinning loader) while it rechecks the price after a
   change: not here, the button keeps its look (a tap meanwhile is simply not taken; WooPayments refuses it). */
.oliva-wallet .blockUI { display: none !important; }

/* The bag's placeholder accepts a cold tap until Stripe's real button is ready, without changing its layout. */
.oliva-wallet-box > [data-wallet-load] { position: absolute; inset: 0; z-index: 2; }
.oliva-wallet-box.is-live > [data-wallet-load] { visibility: hidden; pointer-events: none; }
.oliva-wallet-btn[aria-busy="true"] { opacity: .65; cursor: progress; }