/* Oliva — Cart page (includes/cart.php). Same frame, type and colours as Shop all and the product page. */
.oliva-cart {
	--ink: #1f1a14; --brown: #4d3b39; --muted: #8d7c7a; --line: #e5e5e5; --paper: #f6f6f6; --text: #4a423a;
	--sans: "Jost", system-ui, sans-serif; --serif: "Cormorant Garamond", Georgia, serif;
	max-width: 1188px; margin: 0 auto; padding: 36px 24px 0; color: var(--ink); font: 400 13px/1.6 var(--sans);
}
.oliva-cart *, .oliva-cart *::before, .oliva-cart *::after { box-sizing: border-box; }
body.oliva-cart-page main.site-main { max-width: none; width: 100%; padding-inline: 0; } /* the theme keeps pages in a narrow column; the cart sets its own frame */
.oliva-cart a { color: inherit; }
.page-content .oliva-cart a, .page-content .oliva-cart a:hover { text-decoration: none; } /* the theme underlines links in pages */
.oliva-cart img { display: block; width: 100%; height: auto; }
.oliva-cart button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; border-radius: 0; box-shadow: none; text-transform: none; letter-spacing: inherit; }
.oliva-cart button:hover, .oliva-cart button:focus, .oliva-cart button:active { background: none; color: inherit; } /* the theme turns buttons pink */
.oliva-cart button:focus-visible, .oliva-cart a:focus-visible, .oliva-cart input:focus-visible { outline: 1px solid var(--accent, #3b2f2a); outline-offset: 3px; }
.oliva-cart__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.oliva-cart .oliva-cart__caps { font: 400 12px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--brown); margin: 0; }
.oliva-cart.is-busy { opacity: .55; pointer-events: none; transition: opacity .15s; }

/* Title, like "Shop all": large serif, second word in italics */
.oliva-cart__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.oliva-cart .oliva-cart__title { margin: 0; font: 300 72px/1 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.oliva-cart__title em { font-style: italic; }
.oliva-cart__count { margin: 0 0 8px; font-size: 12px; color: var(--text); }

.oliva-cart .oliva-cart__notices.woocommerce-notices-wrapper { display: block !important; } /* the site's custom CSS hides that class */
.oliva-cart__notices:not(:empty) { margin-top: 24px; }
.oliva-cart__notices .woocommerce-message, .oliva-cart__notices .woocommerce-info, .oliva-cart__notices .woocommerce-error {
	margin: 0 0 8px; padding: 12px 16px; border: 0; background: var(--paper); color: var(--text); font-size: 12px; list-style: none; }
.oliva-cart__notices .woocommerce-message::before, .oliva-cart__notices .woocommerce-info::before, .oliva-cart__notices .woocommerce-error::before { display: none; }
.oliva-cart__notices a { text-decoration: underline; margin-left: 8px; }

/* "Item deleted · Undo", after Mango but light: a white box with a thin border in the top right corner (phones: above
   the bar) that fades away after a few seconds */
.oliva-cart__toast { position: fixed; top: 110px; right: 32px; z-index: 9993; display: flex; align-items: center; gap: 16px; padding: 6px 6px 6px 16px;
	background: #fff; border: 1px solid var(--line); animation: oliva-cart-toast 7s ease forwards; }
.oliva-cart__toast span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
/* Undo looks like the promo code's Apply button */
.page-content .oliva-cart .oliva-cart__toast a { display: flex; align-items: center; height: 36px; padding: 0 18px; border: 1px solid var(--accent, #3b2f2a); color: var(--accent, #3b2f2a);
	font-size: 12px; letter-spacing: .16em; text-transform: uppercase; transition: background .2s, color .2s; }
.page-content .oliva-cart .oliva-cart__toast a:hover { background: var(--accent, #3b2f2a); color: #fff; }
@keyframes oliva-cart-toast {
	0% { opacity: 0; transform: translateY(-8px); }
	4%, 88% { opacity: 1; transform: none; }
	100% { opacity: 0; visibility: hidden; }
}

/* Items (Mango: large photos, three across) and the summary beside them */
.oliva-cart__main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; margin-top: 40px; }
.oliva-cart__items { margin: 0; }
.oliva-cart__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 16px; }
.oliva-cart__item { position: relative; }
.oliva-cart__photo { display: block; background: var(--paper); }
.oliva-cart__photo img { aspect-ratio: 3 / 4; object-fit: cover; }
.oliva-cart .oliva-cart__x { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: #fff; font: 300 20px/1 var(--sans); }
.oliva-cart .oliva-cart__x:hover { opacity: .6; }
.oliva-cart__info { padding-top: 14px; }
.oliva-cart__line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.oliva-cart .oliva-cart__name { font: 400 20px/1.2 var(--serif); color: var(--ink); }
.oliva-cart__price { flex: none; font-size: 13px; }
.oliva-cart__price del { color: var(--muted); margin-right: 6px; }
.oliva-cart__price ins { text-decoration: none; }
.oliva-cart__options { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 12px; line-height: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.oliva-cart__options > span:not(.oliva-cart__swatch) { padding-top: 2px; } /* capitals have no descenders: nudge them down so they centre on the square */
.oliva-cart__swatch { position: relative; display: inline-block; width: 12px; height: 12px; border: 1px solid rgba(31, 26, 20, .25); }
.oliva-cart__extra { margin: 6px 0 0; font-size: 12px; color: var(--text); }
.oliva-cart__qty { display: flex; align-items: center; gap: 4px; margin-top: 12px; }
.oliva-cart .oliva-cart__qty button { width: 28px; height: 28px; font: 300 18px/1 var(--sans); }
.oliva-cart .oliva-cart__qty button:first-child { width: 22px; text-align: left; } /* the − starts where the colour square does */
.oliva-cart .oliva-cart__qty button:disabled { opacity: .3; cursor: default; }
.oliva-cart__qty span { min-width: 20px; text-align: center; }
.oliva-cart .oliva-cart__remove { display: none; }

.oliva-cart__summary { position: sticky; top: 120px; }
/* Breakdown, as plain as Mango's: compact rows, then TOTAL in bold with "Taxes included" under it */
.oliva-cart__totals { margin: 18px 0 0; }
.oliva-cart__totals > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 4px 0; }
.oliva-cart__totals dt, .oliva-cart__totals dd { margin: 0; font-size: 13px; font-weight: 400; color: var(--ink); }
.oliva-cart__totals dd { text-align: right; }
/* With a promo code: the subtotal struck through and the discount in red */
.oliva-cart__was dd { color: var(--muted); text-decoration: line-through; }
.oliva-cart .oliva-cart__discount dt, .oliva-cart .oliva-cart__discount dd { color: #b3261e; }
.oliva-cart .oliva-cart__total { margin-top: 6px; }
.oliva-cart .oliva-cart__total dt, .oliva-cart .oliva-cart__total dd { font-size: 14px; font-weight: 500; }
.oliva-cart .oliva-cart__total dt { text-transform: uppercase; letter-spacing: .04em; }
.oliva-cart__taxes { margin: 2px 0 0; font-size: 11px; color: var(--muted); }
.oliva-cart__free { margin: 14px 0 0; font-size: 12px; color: var(--text); }
.oliva-cart .oliva-cart__checkout { display: flex; width: 100%; height: 48px; margin-top: 24px; }
/* Apple Pay / Google Pay (includes/wallet.php, assets/wallet.css): shown at once when the device has it (the guess in
   the page's head, then Stripe's answer); on computers under Process order, the same size, on phones in the bar.
   Without it the place waits out of sight, so Stripe can still look. */
html:not(.oliva-wallet-on) .oliva-cart__wallet { position: absolute; left: -10000px; width: 300px; }
.oliva-cart__summary .oliva-cart__wallet { --oliva-wallet-h: 46px; margin-top: 8px; }

/* Promo code, like Mango: a line to open it, then the field and Apply one under the other */
.oliva-cart__promo { margin-top: 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.oliva-cart__promo summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.oliva-cart__promo summary::-webkit-details-marker { display: none; }
.oliva-cart__promo summary::after { content: "+"; font-weight: 300; font-size: 16px; line-height: 1; letter-spacing: 0; }
.oliva-cart__promo[open] summary::after { content: "–"; }
.oliva-cart__promo form { display: grid; gap: 8px; padding-bottom: 18px; }
.oliva-cart__codes { list-style: none; margin: 0 0 14px; padding: 0; }
.oliva-cart__codes li { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: var(--paper); font-size: 12px; letter-spacing: .1em; }
.oliva-cart__codes li + li { margin-top: 6px; }
.oliva-cart .oliva-cart__codes a { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; }
.oliva-cart .oliva-cart__promo input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 0; background: #fff; box-shadow: none;
	font: 400 13px/1 var(--sans); color: var(--ink); }
.oliva-cart .oliva-cart__promo input:focus { border-color: var(--accent, #3b2f2a); outline: none; }
.oliva-cart .oliva-cart__promo input::placeholder { color: var(--muted); }
.oliva-cart .oliva-cart__promo input[aria-invalid="true"] { border-color: #b3261e; }
.oliva-cart__promo-error { margin: -2px 0 4px; font-size: 11px; color: #b3261e; }
.oliva-cart .oliva-cart__promo button { height: 46px; border: 1px solid var(--accent, #3b2f2a); color: var(--accent, #3b2f2a); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; transition: background .2s, color .2s; }
.oliva-cart .oliva-cart__promo button:hover { background: var(--accent, #3b2f2a); color: #fff; }

/* Empty bag */
.oliva-cart__empty { padding: 56px 0 8px; }
.oliva-cart__empty p { margin: 0 0 24px; font: 300 24px/1.3 var(--serif); }

/* Buttons */
.oliva-cart .oliva-cart__button { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 32px; border: 1px solid var(--accent, #3b2f2a); color: var(--accent, #3b2f2a);
	font: 400 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; transition: background .2s, color .2s; }
.oliva-cart .oliva-cart__button:hover { background: var(--accent, #3b2f2a); color: #fff; }
.oliva-cart .oliva-cart__button--dark { background: var(--accent, #3b2f2a); color: #fff; }
.oliva-cart .oliva-cart__button--dark:hover { background: var(--brown); border-color: var(--brown); }

/* You may be interested in: the product page's block (product-page.css) */
.oliva-cart__also { margin: 120px 0; }

/* Phones only: bar fixed at the bottom (Zara) with the free-shipping line, the total and Process order, so the button
   is always in reach. Computers have the button in the summary instead. */
.oliva-cart__bar { display: none; }

@media (max-width: 1024px) {
	.oliva-cart__main { grid-template-columns: minmax(0, 1fr) 260px; gap: 32px; }
	.oliva-cart__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phones (Zara): one item per row, photo on the left; summary below; two suggestions across; the bar stacks */
@media (max-width: 767px) {
	.oliva-cart { padding: 32px 16px 0; }
	.oliva-cart__toast { top: auto; bottom: calc(86px + env(safe-area-inset-bottom)); left: 0; right: 0; width: max-content; max-width: calc(100vw - 32px); margin: 0 auto; } /* centred above the bar */
	html.oliva-wallet-on .oliva-cart__toast { bottom: calc(140px + env(safe-area-inset-bottom)); } /* the bar is taller with Apple Pay */
	.oliva-cart .oliva-cart__title { font-size: 44px; }
	.oliva-cart__head { padding-bottom: 18px; }
	.oliva-cart__count { margin-bottom: 4px; }
	.oliva-cart__main { display: block; margin-top: 24px; }
	.oliva-cart__list { display: block; }
	.oliva-cart__item { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
	.oliva-cart__item:first-child { padding-top: 0; }
	.oliva-cart .oliva-cart__x { display: none; }
	.oliva-cart__info { padding-top: 0; }
	.oliva-cart__line { flex-direction: column; gap: 4px; }
	.oliva-cart .oliva-cart__name { font-size: 18px; }
	.oliva-cart .oliva-cart__remove { display: inline-block; margin-top: 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text); }
	.oliva-cart__summary { position: static; margin-top: 32px; }
	.oliva-cart__also { margin: 64px 0 96px; }
	.oliva-cart .oliva-cart__checkout { display: none; } /* the bar has it */
	.oliva-cart__summary .oliva-cart__wallet { display: none; } /* the bar has Apple Pay / Google Pay too */
	/* Laid out like the product page's phone footer (button, the amount on its right, no line above), with a dark button */
	.oliva-cart__bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9980; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
		padding: 14px 20px calc(14px + env(safe-area-inset-bottom)); background: #fff; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
	html.oliva-bar-hidden .oliva-cart__bar { transform: translateY(110%); } /* scrolled well into "You may be interested in" (assets/cart.js) */
	.oliva-cart .oliva-cart__bar .oliva-cart__button--dark { background: #3b2f2a; border-color: #3b2f2a; } /* the footer's brown */
	.oliva-cart .oliva-cart__bar .oliva-cart__button--dark:hover { background: var(--brown); border-color: var(--brown); }
	.oliva-cart__bar-note { flex: 1 0 100%; margin: 0; font-size: 11px; color: var(--text); }
	.oliva-cart__bar-note:empty { display: none; }
	.oliva-cart__bar .oliva-cart__button { order: 1; flex: 1; min-width: 0; height: 44px; padding: 0 12px; }
	.oliva-cart__bar-total { order: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; line-height: 1.3; white-space: nowrap; }
	.oliva-cart__bar-label { display: none; }
	.oliva-cart__bar-amount { display: flex; flex-direction: column; align-items: flex-end; }
	.oliva-cart__bar-total strong { font-size: 13px; font-weight: 400; }
	.oliva-cart__bar-total small { font-size: 10px; color: var(--muted); }
	/* With Apple Pay / Google Pay, like Zara: TOTAL and the amount on a line of their own, then Process order and the
	   wallet's button side by side, the same size. Process order loses its "(1)" there ("1 item" is at the top), so
	   "Tramitar pedido" stays on one line */
	html.oliva-wallet-on .oliva-cart__bar .oliva-cart__bar-total { order: 0; flex: 1 0 100%; }
	html.oliva-wallet-on .oliva-cart__bar .oliva-cart__bar-label { display: block; font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
	html.oliva-wallet-on .oliva-cart__bar .oliva-cart__bar-total strong { font-weight: 500; }
	html.oliva-wallet-on .oliva-cart__bar .oliva-cart__button { flex: 1 1 calc(50% - 10px); padding: 0 6px; letter-spacing: .1em; white-space: nowrap; }
	html.oliva-wallet-on .oliva-cart__bar .oliva-cart__bar-count { display: none; }
	.oliva-cart__bar .oliva-cart__wallet { order: 2; flex: 1 1 calc(50% - 10px); min-width: 0; --oliva-wallet-h: 44px; }
}
@media (max-width: 359px) { /* the smallest phones */
	html.oliva-wallet-on .oliva-cart__bar .oliva-cart__button { font-size: 11px; letter-spacing: .06em; }
}