/* Oliva — Zara-style product page. Everything scoped under .oliva-pp so the Elementor kit styles don't leak in. */
.oliva-pp {
	--side: max(40px, (100vw - 1080px) / 2); /* one centred frame, ~1080px wide like Zara */
	--ink: #1f1a14; --brown: #4d3b39; --muted: #8d7c7a; --line: #e5e5e5; --paper: #f6f6f6; --text: #4a423a;
	--sans: "Jost", system-ui, sans-serif; --serif: "Cormorant Garamond", Georgia, serif;
	color: var(--ink); font: 400 13px/1.6 var(--sans); overflow-x: clip;
}
.oliva-pp *, .oliva-pp *::before, .oliva-pp *::after { box-sizing: border-box; }
.oliva-pp button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; text-transform: none; border-radius: 0; box-shadow: none; }
.oliva-pp img { display: block; max-width: 100%; height: auto; }
.oliva-pp figure { margin: 0; }
.oliva-pp a { color: inherit; }
.oliva-pp__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.oliva-pp__label { font: 400 11px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--brown); }
.oliva-pp__caps { font: 400 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.oliva-pp .oliva-pp__link { font: 400 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
/* The theme turns every button pink on hover/focus; not here. Links fade a little instead of underlining. */
.oliva-pp button:hover, .oliva-pp button:focus, .oliva-pp button:active { background-color: transparent; color: inherit; text-decoration: none; }
.oliva-pp button:focus-visible, .oliva-pp a:focus-visible { outline: 1px solid var(--accent, #3b2f2a); outline-offset: 3px; }
.oliva-pp .oliva-pp__link:hover, .oliva-pp .oliva-pp__plus:hover { opacity: .55; text-decoration: none; }
.oliva-pp .oliva-pp__link { transition: opacity .2s; }

/* Top row: large photo + info column (Zara proportions 58.5% · 8.5% · 33%) */
.oliva-pp__hero { display: grid; grid-template-columns: minmax(0, 58.5fr) minmax(0, 33fr); column-gap: 8.5%; padding: 64px var(--side) 0; align-items: start; }
.oliva-pp__photo { position: relative; overflow: hidden; background: var(--paper); cursor: zoom-in; }
.oliva-pp__photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.oliva-pp__info { position: sticky; top: 120px; padding-top: 0; } /* top of the info column level with the top of the first photo, like Zara */
.oliva-pp .oliva-pp__title { font: 300 36px/1.1 var(--serif); margin: 10px 0 10px; letter-spacing: -.01em; color: var(--ink); text-transform: none; }
.oliva-pp__price { font: 400 15px/1 var(--sans); }
.oliva-pp__price del { color: var(--muted); margin-right: 8px; }
.oliva-pp__price ins { text-decoration: none; }
.oliva-pp .oliva-pp__rule { border: 0; border-top: 1px solid var(--accent, #3b2f2a); margin: 24px 0; }
.oliva-pp__swatches { display: flex; gap: 10px; margin: 14px 0 24px; }
.oliva-pp .oliva-pp__swatch { width: 18px; height: 18px; border: 1px solid rgba(31, 26, 20, .25); outline-offset: 3px; position: relative; }
.oliva-pp .oliva-pp__swatch[aria-pressed="true"] { outline: 1px solid var(--accent, #3b2f2a); }
.oliva-pp__size-head { display: flex; justify-content: space-between; align-items: baseline; }
.oliva-pp__sizes { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 26px; }
.oliva-pp .oliva-pp__size { min-width: 44px; height: 36px; padding: 0 10px; border: 1px solid var(--line); font: 400 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.oliva-pp .oliva-pp__size:hover { border-color: var(--accent, #3b2f2a); }
.oliva-pp .oliva-pp__size[aria-pressed="true"] { border-color: var(--accent, #3b2f2a); box-shadow: inset 0 0 0 1px var(--accent, #3b2f2a); } /* inside the box: an outline gets clipped at the column edge */
.oliva-pp .oliva-pp__size[data-unavailable="true"] { color: var(--muted); text-decoration: line-through; }
.oliva-pp__sizes.attention .oliva-pp__size { border-color: #b3261e; }
.oliva-pp__hint { display: none; color: #b3261e; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin: -16px 0 18px; }
.oliva-pp__sizes.attention + .oliva-pp__hint { display: block; }
.oliva-pp__buttons { display: grid; gap: 12px; }
.oliva-pp .oliva-pp__button { display: flex; align-items: center; justify-content: center; width: 100%; height: 46px; border: 1px solid var(--accent, #3b2f2a); background: transparent; color: var(--accent, #3b2f2a);
	font: 400 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; transition: background .2s, color .2s; }
.oliva-pp .oliva-pp__button:hover, .oliva-pp button.oliva-pp__button:hover { background: var(--accent, #3b2f2a); color: #fff; }
.oliva-pp .oliva-pp__button[disabled] { opacity: .5; cursor: not-allowed; }
.oliva-pp .oliva-pp__button.is-loading { opacity: .5; pointer-events: none; }
/* Apple Pay / Google Pay (includes/wallet.php, assets/wallet.css, assets/product-page.js): instead of Process order when
   the device has the wallet (the guess in the page's head, then Stripe's answer), as tall as Add. The page's own button,
   drawn like the wallet's. */
.oliva-pp__wallet { --oliva-wallet-h: 46px; }
html:not(.oliva-wallet-on) .oliva-pp__wallet { display: none; }
html.oliva-wallet-on .oliva-pp .oliva-pp__buttons [data-checkout] { display: none; }
.oliva-pp__message { min-height: 0; margin-top: 10px; font-size: 12px; color: var(--brown); }
.oliva-pp__wears { margin: 26px 0 0; color: var(--text); }
.oliva-pp__desc { margin-top: 26px; color: var(--text); }
.oliva-pp__desc p, .oliva-pp__desc ul { margin: 0 0 10px; }
.oliva-pp__desc ul { padding-left: 18px; }
.oliva-pp__look { margin-top: 34px; }
.oliva-pp__look-items { display: flex; gap: 14px; margin-top: 14px; }
.oliva-pp__look-items a { width: 76px; text-decoration: none; }
.oliva-pp__look-items img { width: 76px; aspect-ratio: 1; object-fit: cover; background: var(--paper); }
.oliva-pp__look-items small { display: block; margin-top: 6px; font-size: 11px; color: var(--muted); }
.oliva-pp__more { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 14px; }

/* More photos: same size, two columns; with a one-line sentence the first photo goes on the right */
.oliva-pp__gallery { padding: 120px var(--side) 0; display: grid; grid-template-columns: repeat(var(--oliva-cols, 2), minmax(0, 1fr)); gap: var(--oliva-gap, 56px); }
.oliva-pp__gallery.has-story .oliva-pp__story + .oliva-pp__photo { grid-column: 2; }
.oliva-pp__story { grid-column: 1; grid-row: 1; align-self: center; justify-self: center; max-width: 280px; }
.oliva-pp__story p { margin: 0; color: var(--text); }
/* Bold words in the product's own text ("100% algodón") read as plain text, as in the rest of the page. */
.oliva-pp :is(.oliva-pp__desc, .oliva-pp__summary, .oliva-pp__tabpanel, .oliva-pp__story) :is(strong, b) { font-weight: inherit; }
/* Material & care as the detail (no story): small, like Zara's composition beside its photos. */
.oliva-pp__story--care { font-size: 12px; line-height: 1.7; color: var(--text); }
.oliva-pp__story--care p, .oliva-pp__story--care ul { margin: 0 0 14px; padding: 0; list-style: none; }
.oliva-pp__story--care > :last-child { margin-bottom: 0; }
.oliva-pp__story--care :is(h2, h3, h4, strong) { font: inherit; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }

/* You may be interested in */
.oliva-pp__ymbi { padding: 120px var(--side); }
.oliva-pp .oliva-pp__ymbi h2 { font: 400 13px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--brown); margin: 0 0 36px; }
.oliva-pp__ymbi ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--oliva-cols, 6), minmax(0, 1fr)); gap: 56px 24px; }
.oliva-pp__ymbi li { text-align: center; }
.oliva-pp__ymbi img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--paper); }
/* The round "+" on the photo, as on the product cards (assets/quick-add.js adds or opens the size picker) */
.oliva-pp__ymbi-photo { position: relative; display: block; margin-bottom: 16px; }
.oliva-pp .oliva-pp__ymbi-plus { position: absolute; right: 8px; bottom: 8px; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
	background: rgba(255, 255, 255, .9); color: var(--ink); font: 300 18px/1 var(--sans); text-decoration: none; transition: background .2s; }
.oliva-pp .oliva-pp__ymbi-plus:hover { background: #fff; }
.oliva-pp .oliva-pp__ymbi-plus.is-loading { opacity: .5; pointer-events: none; }
.oliva-pp__ymbi-price { font-size: 11px; letter-spacing: .06em; color: var(--text); }
.oliva-pp .oliva-pp__plus { display: inline-block; margin-top: 4px; font: 300 18px/1 var(--sans); text-decoration: none; }

/* Side panels */
.oliva-pp__veil { position: fixed; inset: 0; z-index: 9990; background: rgba(255, 255, 255, .75); opacity: 0; pointer-events: none; transition: opacity .3s; }
.oliva-pp__drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 9991; width: min(440px, 100vw); background: #fff; /* no line on its edge: the veiled page sets it apart */
	transform: translateX(100%); transition: transform .35s cubic-bezier(.2, .7, .2, 1); overflow-y: auto; padding: 72px 44px 48px; }
html.oliva-pp-drawer-open .oliva-pp__veil { opacity: 1; pointer-events: auto; }
.oliva-pp__drawer.open { transform: none; }
.oliva-pp .oliva-pp__close { position: absolute; top: 22px; right: 22px; width: 32px; height: 32px; font: 300 26px/1 var(--sans); }
.oliva-pp .oliva-pp__drawer h2 { font: 400 14px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 14px; color: var(--ink); }
.oliva-pp .oliva-pp__drawer h3, .oliva-pp .oliva-pp__drawer h4 { font: 400 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; margin: 32px 0 12px; color: var(--ink); }
.oliva-pp__drawer p, .oliva-pp__drawer li { color: var(--text); }
.oliva-pp__drawer-body table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.oliva-pp__drawer-body th { font: 500 11px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; text-align: left; padding: 0 8px 12px 0; }
.oliva-pp__drawer-body td { padding: 10px 8px 10px 0; border-top: 1px solid var(--line); }
/* Shipping & returns panel, Zara-style: small capitals for sections, plain text, simple lists */
.oliva-pp .oliva-pp__policy h3 { margin-top: 30px; }
.oliva-pp .oliva-pp__policy h4 { font: 400 12px/1.4 var(--sans); letter-spacing: .06em; text-transform: uppercase; margin: 20px 0 6px; color: var(--ink); }
.oliva-pp__policy ul { margin: 0 0 12px; padding-left: 18px; }
.oliva-pp__policy li { margin-bottom: 8px; }
.oliva-pp__policy-help { margin-top: 36px !important; }
.oliva-pp__cutout { width: 200px; margin: 24px auto; mix-blend-mode: multiply; }

/* "Added to your bag", like Zara: a box in the top right corner, under the header; on phones it comes up from the bottom */
.oliva-pp__added { position: fixed; top: 110px; right: 32px; z-index: 9993; width: min(500px, calc(100vw - 32px)); background: #fff; border: 1px solid var(--accent, #3b2f2a);
	padding: 16px; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility 0s .2s; }
html.oliva-pp-added-open .oliva-pp__added { visibility: visible; opacity: 1; transform: none; transition: opacity .2s, transform .2s; }
.oliva-pp__added:focus { outline: none; }
.oliva-pp__added-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.oliva-pp__added-title { margin: 0; font: 500 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.oliva-pp .oliva-pp__added-close { width: 28px; height: 28px; margin: -6px -6px -6px 0; font: 300 24px/1 var(--sans); }
.oliva-pp__added-item { display: flex; align-items: flex-end; gap: 10px; }
.oliva-pp .oliva-pp__added-item img { width: 130px; aspect-ratio: 3 / 4; object-fit: cover; background: var(--paper); flex: none; }
.oliva-pp__added-text { min-width: 0; color: var(--text); }
.oliva-pp__added-text p { margin: 0 0 8px; }
.oliva-pp__added-text p:last-child { margin-bottom: 0; }
.oliva-pp__added-text p:empty, .oliva-pp__added-text p:has(> span:empty) { display: none; }
.oliva-pp__added-text del { color: var(--muted); margin-right: 6px; }
.oliva-pp__added-options { display: flex; align-items: center; gap: 16px; }
.oliva-pp__added-swatch { position: relative; width: 18px; height: 18px; border: 1px solid rgba(31, 26, 20, .25); }
.oliva-pp__added-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
.oliva-pp .oliva-pp__button--dark { background: #3b2f2a; border-color: #3b2f2a; color: #fff; } /* the footer's brown, like the bottom bars */
.oliva-pp .oliva-pp__button--dark:hover { background: var(--brown); border-color: var(--brown); }

/* Full-screen photo viewer */
.oliva-pp__viewer { position: fixed; inset: 0; z-index: 9995; background: #fff; display: none; }
.oliva-pp__viewer.open { display: block; }
.oliva-pp__thumbs { position: absolute; left: 32px; top: 50%; transform: translateY(-50%); display: grid; gap: 12px; z-index: 2; }
.oliva-pp .oliva-pp__thumbs button { width: 52px; opacity: .45; transition: opacity .2s; }
.oliva-pp .oliva-pp__thumbs button[aria-current="true"] { opacity: 1; outline: 1px solid var(--accent, #3b2f2a); outline-offset: 2px; }
.oliva-pp__thumbs img { width: 52px; aspect-ratio: 3 / 4; object-fit: cover; }
.oliva-pp__stack { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; }
.oliva-pp__stack img { height: 100vh; width: auto; max-width: calc(100vw - 240px); margin: 0 auto; object-fit: contain; scroll-snap-align: start; }
.oliva-pp__viewer .oliva-pp__close { z-index: 3; top: 26px; right: 30px; }

/* Mobile-only blocks are hidden on desktop */
.oliva-pp__swipe, .oliva-pp__sticky, .oliva-pp__m-tabs, .oliva-pp__m-more, .oliva-pp__sheet, .oliva-pp__buy-price { display: none; }

/* Phones (up to 767px, Elementor's Mobile) — Zara mobile concept: photo, tabs, name + colours + price, Add / Process order, photos full width,
   fixed Add + price bar, expandable rows, Complete the look. */
/* Phone-only parts (tabs under the photo, rows and Complete the look below the photos). They only show on phones,
   but are styled for every width so the Elementor editor can show them on the computer view too. */
.oliva-pp__tablist { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; margin-bottom: 16px; }
.oliva-pp__tablist::-webkit-scrollbar { display: none; }
.oliva-pp .oliva-pp__tablist button { flex: none; font: 400 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 4px 0; }
.oliva-pp .oliva-pp__tablist button[aria-selected="true"] { color: var(--ink); font-weight: 500; }
.oliva-pp__tabpanel { color: var(--text); font-size: 13px; }
.oliva-pp__tabpanel p, .oliva-pp__tabpanel ul { margin: 0 0 10px; }
.oliva-pp__tabpanel table { width: 100%; border-collapse: collapse; }
.oliva-pp__tabpanel td, .oliva-pp__tabpanel th { padding: 8px 6px 8px 0; border-top: 1px solid var(--line); text-align: left; font-size: 12px; }
.oliva-pp__colour-list:not([hidden]) { display: flex; gap: 10px; flex-wrap: wrap; padding: 4px; } /* room for the chosen square's outline */
.oliva-pp .oliva-pp__colour-card { position: relative; display: block; width: 18px; height: 18px; }
.oliva-pp__colour-card .oliva-pp__dot { display: block; width: 18px; height: 18px; outline-offset: 3px; } /* same size as the colour buttons */
.oliva-pp__colour-card[aria-pressed="true"] .oliva-pp__dot { outline: 1px solid var(--accent, #3b2f2a); }
.oliva-pp__dot { width: 16px; height: 16px; border: 1px solid rgba(31, 26, 20, .25); }
.oliva-pp .oliva-pp__m-row { display: flex; justify-content: space-between; width: 100%; padding: 16px 0; border-top: 1px solid var(--line); font: 400 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; text-align: left; }
.oliva-pp .oliva-pp__m-row:last-of-type { border-bottom: 1px solid var(--line); }
.oliva-pp .oliva-pp__m-row::after { content: "+"; font-weight: 300; font-size: 16px; line-height: 12px; }
.oliva-pp__m-more details { border-top: 1px solid var(--line); }
.oliva-pp__m-more details:last-of-type { border-bottom: 1px solid var(--line); }
.oliva-pp__m-more summary { list-style: none; display: flex; justify-content: space-between; padding: 16px 0; font: 400 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.oliva-pp__m-more summary::-webkit-details-marker { display: none; }
.oliva-pp__m-more summary::after { content: "+"; font-weight: 300; font-size: 16px; line-height: 12px; }
.oliva-pp__m-more details[open] summary::after { content: "–"; }
.oliva-pp__m-more details p { margin: 0 0 14px; color: var(--text); }
.oliva-pp__m-look { margin-top: 56px; }
.oliva-pp .oliva-pp__m-look h2 { font: 400 12px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; margin: 0 0 22px; color: var(--ink); }
.oliva-pp__m-look ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center; }
.oliva-pp__m-look img { width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: 10px; background: var(--paper); }

@media (max-width: 767px) {
	.oliva-pp { --m: 12px; }
	.oliva-pp__hero { display: block; padding: 12px 0 8px; } /* a little space under the header */
	.oliva-pp__hero-photo { margin: 0 var(--m) !important; }
	.oliva-pp__hero-photo img { aspect-ratio: 3 / 4; }
	.oliva-pp__info { position: static; padding: 22px 20px 0; }

	/* Tabs + panel */
	.oliva-pp__m-tabs { display: block; margin-bottom: 8px; }
	/* Colour tab: the colours as squares, like the colour buttons; the chosen one is outlined */

	/* Hidden on phones (shown in the tabs or lower down instead) */
	.oliva-pp__info > .oliva-pp__label, .oliva-pp__buy .oliva-pp__rule, .oliva-pp__buy [data-colour-name], .oliva-pp__buy .oliva-pp__size-head,
	.oliva-pp__buy .oliva-pp__sizes, .oliva-pp__buy .oliva-pp__hint, .oliva-pp__info > .oliva-pp__wears, .oliva-pp__info > .oliva-pp__desc,
	.oliva-pp__info > .oliva-pp__look, .oliva-pp__info > .oliva-pp__more { display: none !important; }

	/* Purchase panel fixed at the bottom when the page opens: name + colour squares, price, Add | Process order */
	/* One footer that changes shape, like Zara, in smooth steps: Process order narrows away while Add stretches to full
	   width, then the price slides in on the right (Add gives a little back) and the name + colours fold away. */
	.oliva-pp__buy { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9981; background: #fff; padding: 16px 20px calc(14px + env(safe-area-inset-bottom));
		display: grid; grid-template-columns: 1fr auto; column-gap: 16px; align-items: center; transition: transform .3s cubic-bezier(.2, .7, .2, 1), padding .3s ease; }
	.oliva-pp__buy > * { grid-column: 1 / -1; }
	.oliva-pp .oliva-pp__title { grid-column: 1; grid-row: 1; font-size: 22px; margin: 0; }
	.oliva-pp__swatches { grid-column: 2; grid-row: 1; margin: 0; align-self: center; }
	.oliva-pp__price { grid-column: 1 / -1; grid-row: 2; margin: 6px 0 14px; font-size: 13px; }
	.oliva-pp__buy .oliva-pp__swatches { padding: 4px; margin-right: -4px; } /* room for the selected outline */
	.oliva-pp__buy .oliva-pp__title, .oliva-pp__buy .oliva-pp__swatches, .oliva-pp__buy .oliva-pp__price {
		max-height: 60px; overflow: hidden; transition: max-height .3s ease .12s, opacity .2s ease .08s, margin .3s ease .12s, padding .3s ease .12s; }

	.oliva-pp__buttons { grid-row: 3; display: flex !important; align-items: center; gap: 0 !important; }
	.oliva-pp .oliva-pp__buttons [data-add] { flex: 1 1 0; min-width: 0; }
	.oliva-pp .oliva-pp__buttons [data-checkout] { display: none !important; } /* phones: only Add, like Zara */
	/* With Apple Pay, like Zara: Add and the wallet side by side, the same size; folded, Add and the price */
	html.oliva-wallet-on .oliva-pp__wallet { flex: 1 1 0; min-width: 0; --oliva-wallet-h: 44px; margin-left: 12px; }
	html.oliva-wallet-on.oliva-pp-buy-compact .oliva-pp__wallet { display: none; }
	.oliva-pp__buy-price { display: block; flex: 0 0 auto; max-width: 0; margin-left: 0; opacity: 0; overflow: hidden; white-space: nowrap; font-size: 13px;
		transition: max-width .3s ease .1s, margin .3s ease .1s, opacity .2s ease .18s; }

	html.oliva-pp-buy-compact .oliva-pp__buy { padding-top: 12px; }
	html.oliva-pp-buy-compact .oliva-pp__buy .oliva-pp__title, html.oliva-pp-buy-compact .oliva-pp__buy .oliva-pp__swatches, html.oliva-pp-buy-compact .oliva-pp__buy .oliva-pp__price {
		max-height: 0; opacity: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; pointer-events: none; }
	html.oliva-pp-buy-compact .oliva-pp__buy-price { max-width: 120px; margin-left: 20px; opacity: 1; }
	html.oliva-pp-buy-hidden .oliva-pp__buy { transform: translateY(110%); }
	.oliva-pp .oliva-pp__button { height: 44px; }
	.oliva-pp__message:empty { display: none; }

	/* Photos: one per row, full width */
	.oliva-pp__gallery { display: grid; grid-template-columns: repeat(var(--oliva-cols-phone, 1), minmax(0, 1fr)); gap: var(--oliva-gap-phone, 12px); padding: 36px var(--m) 0; }
	.oliva-pp__gallery.has-story .oliva-pp__story + .oliva-pp__photo { grid-column: 1; }
	.oliva-pp__story { display: none; }

	/* Expandable rows + Complete the look */
	.oliva-pp__m-more { display: block; padding: 40px 20px 0; }

	/* You may be interested in */
	.oliva-pp__ymbi { padding: 64px 20px 120px; }
	.oliva-pp .oliva-pp__ymbi h2 { font-size: 12px; letter-spacing: .14em; color: var(--ink); margin-bottom: 22px; }
	.oliva-pp__ymbi ul { grid-template-columns: repeat(var(--oliva-cols-phone, 2), minmax(0, 1fr)); gap: 32px 12px; }

	/* (Old separate slim bar — replaced by the shape-changing footer above.) */
	.oliva-pp__sticky { display: none !important; align-items: center; gap: 20px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9980; padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
		background: #fff; border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .25s; }
	.oliva-pp__sticky.show { transform: none; }
	.oliva-pp__sticky .oliva-pp__button { flex: 1; }
	.oliva-pp__sticky-price { font-size: 13px; white-space: nowrap; }

	/* Size sheet from the bottom */
	.oliva-pp__sheet { display: flex; flex-direction: column; align-items: center; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9992; background: #fff;
		padding: 26px 20px calc(26px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform .3s cubic-bezier(.2, .7, .2, 1); max-height: 80vh; overflow-y: auto; }
	html.oliva-pp-sheet-open .oliva-pp__sheet { transform: none; }
	html.oliva-pp-sheet-open .oliva-pp__veil { opacity: 1; pointer-events: auto; background: rgba(31, 26, 20, .25); touch-action: none; } /* like the Added popup */
	.oliva-pp__sheet-title { margin: 0 0 12px; color: var(--text); font-size: 13px; }
	.oliva-pp .oliva-pp__sheet-size { width: 100%; padding: 15px 0; font: 400 15px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
	.oliva-pp .oliva-pp__sheet-size[data-unavailable="true"] { color: var(--muted); text-decoration: line-through; }
	.oliva-pp .oliva-pp__sheet-size[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--accent, #3b2f2a); } /* the size already chosen */
	.oliva-pp__sheet-guide { margin-top: 14px; }

	/* "Added to your bag" from the bottom, like Zara: page dimmed behind, a handle instead of the ×, View bag first.
	   Swipe down or tap the page to close; the page doesn't scroll meanwhile. */
	.oliva-pp__added { top: auto; left: 0; right: 0; bottom: 0; width: auto; border: 0; padding: 34px 16px calc(16px + env(safe-area-inset-bottom));
		transform: translateY(100%); transition: transform .3s cubic-bezier(.2, .7, .2, 1), visibility 0s .3s; opacity: 1; }
	.oliva-pp__added::before { content: ""; position: absolute; top: 8px; left: 50%; width: 56px; height: 2px; margin-left: -28px; background: var(--accent, #3b2f2a); }
	html.oliva-pp-added-open .oliva-pp__added { transform: none; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
	html.oliva-pp-added-open .oliva-pp__veil { opacity: 1; pointer-events: auto; background: rgba(31, 26, 20, .25); touch-action: none; }
	.oliva-pp__added { overscroll-behavior: contain; touch-action: none; }
	.oliva-pp .oliva-pp__added-close { display: none; }
	.oliva-pp__added-head { margin-bottom: 18px; }
	.oliva-pp__added-buttons { grid-template-columns: 1fr; margin-top: 16px; }
	.oliva-pp .oliva-pp__added-buttons .oliva-pp__button--dark { order: -1; }

	/* Panels open full screen on phones, like Zara */
	.oliva-pp__drawer { width: 100vw; padding: 64px 24px 48px; } /* slides in from the right, full screen */
	.oliva-pp .oliva-pp__drawer .oliva-pp__close { left: 14px; right: auto; }
	.oliva-pp__thumbs { display: none; }
	.oliva-pp__stack img { max-width: 100vw; height: auto; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Elementor template: each Oliva widget is its own .oliva-pp block inside Elementor containers. The containers give
   the spacing (padding, widths), so the blocks drop the coded page's own frame. */
.oliva-pp-block { display: block; }
.oliva-pp-block > .oliva-pp__gallery, .oliva-pp-block > .oliva-pp__ymbi, .oliva-pp-block > .oliva-pp__m-more { padding: 0; }
.oliva-pp-block .oliva-pp__hero-photo { margin: 0 !important; }
.oliva-pp-block .oliva-pp__message:empty, .oliva-pp-block .oliva-pp__desc p:last-child { margin-bottom: 0; margin-top: 0; } /* margins that collapse on the coded page but not inside a widget */
.oliva-pp-block > .oliva-pp__label { margin: 0; }
.oliva-pp-empty { padding: 14px; border: 1px dashed #c9c1b8; color: #8d7c7a; font: 400 12px/1.5 "Jost", system-ui, sans-serif; text-align: center; }

/* Info column (container with the class oliva-pp-info) scrolls with the page, with the photo beside it: not sticky,
   which made the title and description slide a little before scrolling away. Like Zara, it sits halfway down the main
   photo (when it's taller than the photo, it starts at the top). The photos are bigger than the template's 1080px
   frame gave: the first row, the gallery and "You may be interested in" are 1280px wide. Between the main photo and the
   gallery, the same 56px as between the gallery's photos (its "Space between photos"), not 120px: one grid, like Zara. */
@media (min-width: 768px) {
	.e-con.oliva-pp-info { position: static; align-self: center; --align-self: center; }
	html body .elementor .elementor-element.e-con.oliva-pp-top,
	html body .elementor .elementor-element.e-con:has(> .e-con-inner > :is(.elementor-widget-oliva-pp-gallery, .elementor-widget-oliva-pp-ymbi)) { --content-width: 1280px; }
	html body .elementor .elementor-element.e-con:has(> .e-con-inner > .elementor-widget-oliva-pp-gallery) { --padding-top: 56px; }
	html body .elementor .elementor-element.e-con.oliva-pp-top { --padding-top: 28px; } /* the photo closer to the header (it was 64px below) */
	.elementor-widget-oliva-pp-phone-tabs, .elementor-widget-oliva-pp-phone-more { display: none; }
}
/* Phones (Elementor's Mobile, up to 767px): the phone-only widgets instead of the computer ones. The containers' own
   Mobile settings put the photo above the info. */
@media (max-width: 767px) {
	.elementor-widget-oliva-pp-collection, .elementor-widget-oliva-pp-summary, .elementor-widget-oliva-pp-look,
	.elementor-widget-oliva-pp-links { display: none; }
}

/* In the Elementor editor the page looks exactly as on the site: phone-only widgets only in the Mobile view, side
   panels closed until a panel link is clicked (click inside an open panel to edit its texts). */

/* Size guide as a table, like Zara (built in assets/product-page.js): sizes across the top, a row per measurement,
   no lines but one under the table; scrolls sideways if a guide has many sizes. */
.oliva-size-table { margin: 22px 0 18px; overflow-x: auto; }
html body .oliva-size-table table { width: 100%; margin: 0; border: 0; border-collapse: collapse; border-bottom: 1px solid #e5e5e5; font: 400 12px/1.4 "Jost", system-ui, sans-serif; color: #1f1a14; }
html body .oliva-size-table table :is(th, td) { padding: 0 8px 22px; border: 0; background: none; text-align: center; vertical-align: top;
	font: inherit; letter-spacing: normal; text-transform: none; } /* not the theme's striped, bordered tables */
html body .oliva-size-table table thead th { padding-bottom: 24px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #1f1a14; white-space: nowrap; } /* bold, like Zara's AREA · XS · S */
html body .oliva-size-table table thead th:first-child { padding-left: 0; text-align: left; }
html body .oliva-size-table table tbody th { padding-left: 0; text-align: left; color: #4a423a; min-width: 92px; }
html body .oliva-size-table table tr :is(th, td) { border-top: 0 !important; } /* the theme's line above the first row */
html body .oliva-size-table table td { white-space: nowrap; }
html body .oliva-size-table table td.is-long { min-width: 130px; white-space: normal; }
@media (max-width: 767px) { /* four sizes fit a phone without scrolling sideways */
	html body .oliva-size-table table :is(th, td) { padding: 0 4px 18px; }
	html body .oliva-size-table table tbody th { min-width: 0; width: 30%; padding-left: 0; }
	html body .oliva-size-table table thead th { letter-spacing: .06em; }
}
.oliva-pp__drawer .oliva-pp__cutout[src] { width: 240px; max-width: 70%; aspect-ratio: 3 / 4; object-fit: cover; mix-blend-mode: normal; }

/* Composition & care, like Zara (includes/care.php): COMPOSITION with each part in small capitals and its materials
   under it, then CARE with the laundry symbols. */
.oliva-care { margin-top: 26px; color: #1f1a14; font: 400 12px/1.65 "Jost", system-ui, sans-serif; }
.oliva-pp .oliva-care .oliva-care__title { margin: 0 0 16px; font: 400 12px/1.3 "Jost", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #1f1a14; }
.oliva-pp .oliva-care .oliva-care__title ~ .oliva-care__title { margin-top: 34px; }
.oliva-care__part { margin: 0 0 18px; }
.oliva-pp .oliva-care .oliva-care__part h4 { margin: 0 0 2px; font: 400 11px/1.4 "Jost", system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #3b2f2a; }
.oliva-pp .oliva-care p { margin: 0; color: #4a423a; }
.oliva-pp .oliva-care .oliva-care__intro { margin: 0 0 16px; }
.oliva-pp .oliva-care .oliva-care__list { margin: 0; padding: 0; list-style: none; }
.oliva-pp .oliva-care .oliva-care__list li { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; padding: 0; color: #4a423a; }
.oliva-pp .oliva-care .oliva-care__list li::before { content: none; }
.oliva-care__icon { flex: 0 0 22px; color: #3b2f2a; }

/* Units once above the size table, like Zara: CM | IN (assets/product-page.js converts the cells). */
.oliva-pp .oliva-size-units { display: flex; gap: 18px; margin: 0 0 26px; }
.oliva-pp .oliva-size-units button { padding: 0; border: 0; background: none; color: #8d7c7a; font: 400 12px/1 "Jost", system-ui, sans-serif; letter-spacing: .08em; cursor: pointer; }
.oliva-pp .oliva-size-units button[aria-pressed="true"] { color: #1f1a14; font-weight: 600; }
/* The short line under the panel's title ("Measurements may show slight variations…"). */
.oliva-pp .oliva-pp__drawer-lead { margin: -8px 0 6px; color: #4a423a; font: 400 12px/1.6 "Jost", system-ui, sans-serif; }