/* Product page (woocommerce/single-product.php, inc/product-page.php). Loaded on product pages only.
   Same 1240px / 28px container as the header, so logo, breadcrumb, title and footer share one edge. */

.iew-product { background: var(--iew-paper); color: var(--iew-ink-900); font-family: var(--iew-font-sans); }
/* Links in the page content (Elementor's kit used to colour them; it no longer loads here). */
.iew-product a { color: var(--iew-olive-700); }
.iew-product a:hover { color: var(--iew-olive-900); }
.iew-product__in { max-width: 1240px; margin: 0 auto; padding: 20px 28px 72px; }
/* Hello Elementor caps .site-main at 500-1140px (and pads it 10px on phones); this page sets its own container. */
body main.iew-product.site-main { max-width: none; width: 100%; padding-inline: 0; }
.iew-product .woocommerce-breadcrumb { margin: 0 0 28px; font-size: var(--iew-text-sm); }

/* Two columns: what you need to order on the left, the photo on the right. */
.iew-product__grid.product { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; }
/* WooCommerce's clearfix pseudo-elements would take a grid cell. */
.iew-product__grid.product::before,
.iew-product__grid.product::after { content: none; display: none; }
.iew-product__summary { grid-column: 1; grid-row: 1; min-width: 0; }
.iew-product__media { grid-column: 2; grid-row: 1; min-width: 0; }
/* WooCommerce floats these at 48% with #content in the selector; main carries id="content". */
.woocommerce #content .iew-product__grid.product div.summary,
.woocommerce #content .iew-product__grid.product div.images { float: none; width: auto; margin: 0; }

/* WooCommerce notices (e.g. after adding to the cart). WooCommerce moves focus to the notice for screen
   readers; the notice itself is not operable, so it gets no focus ring (its button keeps one). */
.iew-product .woocommerce-message,
.iew-product .woocommerce-info,
.iew-product .woocommerce-error {
	display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 8px 12px; margin: 0 0 24px; padding: 14px 16px;
	background: var(--iew-paper-2); border: 0; border-radius: var(--iew-radius-sm);
	color: var(--iew-ink-900); font-size: 15px; line-height: 1.45;
}
/* Icon, text and button share one baseline, so the icon lines up with the first line of text instead of
   WooCommerce's absolute top-left corner. An error is a list: its items stack in the text column. */
.iew-product .woocommerce-message::before,
.iew-product .woocommerce-info::before,
.iew-product .woocommerce-error::before { position: static; grid-column: 1; grid-row: 1; margin: 0; color: var(--iew-olive-700); }
.iew-product .woocommerce-error { grid-template-columns: auto 1fr; }
.iew-product .woocommerce-error > li { grid-column: 2; }
.iew-product .woocommerce-error::before { color: var(--iew-error); }
.iew-product .woocommerce-message:focus { outline: none; }
.iew-product .woocommerce-message .button {
	justify-self: end; float: none; margin: 0; padding: 8px 14px; background: transparent; color: var(--iew-olive-700);
	border: 1px solid var(--iew-olive-700); border-radius: var(--iew-radius-sm); font-size: 14px; font-weight: var(--iew-w-semi); line-height: 1.2;
}
.iew-product .woocommerce-message .button:hover { background: var(--iew-olive-100); color: var(--iew-olive-800); }

/* Title, price, stock. */
.iew-product .product_title {
	margin: 0 0 16px; font-family: var(--iew-font-display); font-weight: var(--iew-w-medium);
	font-size: 44px; line-height: 1.1; letter-spacing: -0.01em; color: var(--iew-ink-900);
}
.woocommerce #content.iew-product .summary > .price { margin: 0 0 12px; font-size: var(--iew-text-lg); color: var(--iew-ink-700); }
/* Stock badge (core, same as the shop grid): between the price and the order form. */
.iew-product .summary > .iew-stock { margin: 0 0 4px; font-size: 15px; }
/* Origin on the photo, as on the shop cards, taking no room: top left of the photo column, on the grid
   lines of the page (level with the title on desktop, with the breadcrumb and title on phones). */
.iew-product .iew-product__media { position: relative; }
.iew-product .iew-product__origin {
	position: absolute; top: 0; left: 0; z-index: 2;
	display: flex; flex-direction: column; gap: 2px; margin: 0; pointer-events: none;
}
.iew-product__country { font-size: 13px; font-weight: var(--iew-w-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--iew-ink-900); }
.iew-product__region { font-size: 14px; color: var(--iew-ink-700); }
/* Subheadings inside a description ("Spijs en moment"), same weight as the bold text they replace. */
.iew-product .iew-product__subhead { margin: 22px 0 6px; font-family: var(--iew-font-sans); font-size: var(--iew-text-base); font-weight: var(--iew-w-semi); line-height: 1.4; letter-spacing: normal; color: var(--iew-ink-900); }
.iew-product__price-unit { margin-left: 4px; font-size: 15px; color: var(--iew-ink-500); white-space: nowrap; }

/* Cart form: quantity and the gold order button on one row, the order list underneath. */
.iew-product form.cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 24px 0 0; }
/* WooCommerce's clearfix pseudo-elements would become flex items and push the button to a new row. */
.woocommerce #content.iew-product form.cart::before,
.woocommerce #content.iew-product form.cart::after { content: none; display: none; }
.woocommerce #content.iew-product form.cart .quantity { float: none; margin: 0; }
.woocommerce #content.iew-product form.cart .single_add_to_cart_button { float: none; }
.iew-product form.cart .quantity .qty {
	width: 88px; height: 100%; min-height: 48px; padding: 0 8px; border: 1px solid var(--iew-ink-300);
	border-radius: var(--iew-radius-sm); background: #fff; font-size: var(--iew-text-base); text-align: center;
}
.iew-product form.cart .single_add_to_cart_button {
	flex: 1 1 160px; min-width: 0; box-sizing: border-box; min-height: 48px; margin: 0; padding: 0 20px; border: 0; border-radius: var(--iew-radius-sm);
	background: var(--iew-gold-500); color: var(--iew-olive-900); font-family: var(--iew-font-sans);
	font-size: 15px; font-weight: var(--iew-w-bold); letter-spacing: 0.02em;
}
.iew-product form.cart .single_add_to_cart_button:hover,
.iew-product form.cart .single_add_to_cart_button:focus-visible { background: var(--iew-gold-400); color: var(--iew-olive-900); }
/* Amount, the way Snel bestellen shows it: a label above, then − field + next to the order button. */
.iew-product .iew-qty__label { flex: 0 0 100%; margin: 0 0 -2px; font-size: 14px; font-weight: var(--iew-w-semi); color: var(--iew-ink-700); }
.iew-product .iew-qty { display: inline-flex; align-items: stretch; flex: none; border: 1px solid var(--iew-ink-300); border-radius: var(--iew-radius-sm); background: #fff; overflow: hidden; }
.woocommerce #content.iew-product form.cart .iew-qty .quantity { display: flex; margin: 0; }
.iew-product form.cart .iew-qty .quantity .qty {
	width: 52px; height: auto; min-height: 46px; padding: 0; border: 0; border-radius: 0; background: transparent;
	font-size: var(--iew-text-base); text-align: center; -moz-appearance: textfield; appearance: textfield;
}
.iew-product form.cart .iew-qty .qty::-webkit-outer-spin-button,
.iew-product form.cart .iew-qty .qty::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.iew-product form.cart .iew-qty__btn {
	width: 44px; min-height: 46px; margin: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none;
	font-family: var(--iew-font-sans); font-size: 20px; font-weight: var(--iew-w-regular); line-height: 1; color: var(--iew-olive-800); cursor: pointer;
}
.iew-product form.cart .iew-qty__btn:hover:not(:disabled) { background: var(--iew-paper-2); color: var(--iew-olive-900); }
.iew-product form.cart .iew-qty__btn:disabled { color: var(--iew-ink-300); cursor: default; }
.iew-product form.cart .iew-qty__btn:focus-visible,
.iew-product form.cart .iew-qty .qty:focus-visible { outline: 2px solid var(--iew-gold-500); outline-offset: -2px; }

/* Under the order button: when this customer last ordered it. */
.iew-product .iew-product__last-order { margin: 10px 0 0; font-size: 14px; line-height: 1.4; color: var(--iew-ink-700); }
/* Bestellijst control under the form (core Wishlist): a quiet link, not a second button. On the list,
   the status opens a small menu (view the list, or remove). Buttons are reset because the theme styles
   every <button>. */
.iew-wishlist { margin: 10px 0 0; font-size: 15px; line-height: 1.3; }
.iew-wishlist p { margin: 0; }
.iew-wishlist [hidden] { display: none !important; }
.iew-wishlist__on { position: relative; display: inline-block; }
.iew-wishlist svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.iew-product .iew-wishlist button {
	margin: 0; background: none; border: 0; border-radius: 0; box-shadow: none; cursor: pointer;
	font-family: var(--iew-font-sans); font-size: 15px; line-height: 1.3; letter-spacing: normal; text-transform: none; color: inherit;
}
.iew-product .iew-wishlist button:focus-visible,
.iew-wishlist__menu a:focus-visible { outline: 2px solid var(--iew-gold-500); outline-offset: 2px; }
.iew-product .iew-wishlist .iew-wishlist__add,
.iew-product .iew-wishlist .iew-wishlist__status { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 0; font-weight: var(--iew-w-semi); }
.iew-product .iew-wishlist .iew-wishlist__add { color: var(--iew-olive-700); }
.iew-product .iew-wishlist .iew-wishlist__status { color: var(--iew-olive-800); }
.iew-product .iew-wishlist .iew-wishlist__add:hover span,
.iew-product .iew-wishlist .iew-wishlist__status:hover span { text-decoration: underline; text-underline-offset: 4px; }
.iew-wishlist__status .iew-wishlist__caret { width: 16px; height: 16px; transition: transform var(--iew-dur-fast); }
.iew-wishlist__status[aria-expanded="true"] .iew-wishlist__caret { transform: rotate(180deg); }
.iew-wishlist__menu {
	position: absolute; top: 100%; left: 0; z-index: 20; min-width: 240px; margin: 6px 0 0; padding: 6px 0; list-style: none;
	background: #fff; border: 1px solid var(--iew-ink-100); border-radius: var(--iew-radius-sm); box-shadow: 0 8px 24px rgba(28, 28, 26, 0.12);
}
.iew-wishlist__menu li { margin: 0; }
.iew-wishlist__menu a,
.iew-product .iew-wishlist .iew-wishlist__menu button {
	display: block; width: 100%; padding: 10px 16px; text-align: left; font-weight: var(--iew-w-regular); color: var(--iew-ink-900); text-decoration: none;
}
.iew-wishlist__menu a:hover,
.iew-product .iew-wishlist .iew-wishlist__menu button:hover { background: var(--iew-paper-2); }
.iew-wishlist__msg:not(.is-error) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.iew-wishlist__msg.is-error { margin-top: 4px; font-size: 14px; color: var(--iew-error); }

/* Notes for Bourgogne Express and Allocatie. */
.iew-product__note { margin: 28px 0 0; padding: 18px 20px; background: var(--iew-paper-2); border-radius: var(--iew-radius-sm); }
.iew-product__note-title { margin: 0 0 8px; font-family: var(--iew-font-display); font-weight: var(--iew-w-medium); font-size: var(--iew-text-lg); line-height: 1.25; }
.iew-product__note p { margin: 0 0 6px; font-size: 15px; line-height: 1.55; color: var(--iew-ink-700); }
.iew-product__note p:last-child { margin-bottom: 0; }

/* Description. */
.iew-product__description { margin: 32px 0 0; max-width: 64ch; font-size: var(--iew-text-base); line-height: 1.65; color: var(--iew-ink-700); }
.iew-product__description p { margin: 0 0 14px; }
.iew-product__description > :last-child { margin-bottom: 0; }

/* Specifications. */
.iew-specs { margin: 32px 0 0; border-top: 1px solid var(--iew-ink-100); }
.iew-specs__row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--iew-ink-100); }
.iew-specs dt { padding-top: 2px; font-size: var(--iew-text-xs); font-weight: var(--iew-w-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--iew-ink-500); }
.iew-specs dd { margin: 0; font-size: 15px; color: var(--iew-ink-900); }
.iew-specs dd a { color: var(--iew-olive-700); text-decoration: underline; text-underline-offset: 2px; }

/* Photo: its own proportions, never taller than the screen allows. The placeholder bottle gets a
   fixed box, so the text below does not jump when it loads. */
.iew-product .woocommerce-product-gallery { margin: 0; }
/* The hover zoom covers its container; shrink the container to the photo so the zoom area is the photo.
   With more than one photo the slider sets the slide width itself (inline), so this only applies to single photos. */
.iew-product .woocommerce-product-gallery__image { width: fit-content; max-width: 100%; margin-inline: auto; }
/* WooCommerce sets div.images img to width 100%; with a max-height that stretched tall bottles. */
.iew-product div.product div.images .woocommerce-product-gallery__image img { display: block; width: auto; max-width: 100%; height: auto; max-height: 560px; margin: 0 auto; }
.iew-product .woocommerce-product-gallery__image--placeholder { display: flex; align-items: center; justify-content: center; height: 320px; }
/* No frame around the placeholder bottle (WooCommerce draws one): it stands on the page like a photo. */
.woocommerce .iew-product div.product div.images .woocommerce-product-gallery__image--placeholder { border: 0; }
.iew-product div.product div.images .woocommerce-product-gallery__image--placeholder img { width: auto; max-width: 100%; height: 100%; }

/* Related wines. */
.iew-related { margin: 72px 0 0; padding-top: 40px; border-top: 1px solid var(--iew-ink-100); }
.iew-related__title { margin: 0 0 24px; font-family: var(--iew-font-display); font-weight: var(--iew-w-medium); font-size: var(--iew-text-xl); line-height: 1.2; }
.iew-related__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.iew-related__link { display: flex; flex-direction: column; gap: 6px; color: var(--iew-ink-900); text-decoration: none; }
/* Same box for every card, the bottle contained inside it whatever its proportions. */
.iew-related__img { position: relative; display: block; aspect-ratio: 3 / 4; background: #fff; border: 1px solid var(--iew-ink-100); border-radius: var(--iew-radius-sm); overflow: hidden; }
.iew-related__img img { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); object-fit: contain; }
.iew-related__name { margin-top: 6px; font-size: 15px; font-weight: var(--iew-w-semi); line-height: 1.35; }
.iew-related__price { display: block; margin-top: 6px; font-size: 15px; font-weight: var(--iew-w-semi); color: var(--iew-ink-900); }
.iew-related__origin { font-size: 13px; color: var(--iew-ink-500); }
.iew-related__link:hover .iew-related__name,
.iew-related__link:focus-visible .iew-related__name { text-decoration: underline; }

/* The gold belongs to the product's own action; the header's "Bekijk assortiment" steps back here. */
.single-product .iew-site-header .iew-btn-primary { background: transparent; color: var(--iew-gold-400); border: 1px solid var(--iew-gold-500); }
.single-product .iew-site-header .iew-btn-primary:hover { background: rgba(241, 187, 71, 0.12); color: var(--iew-gold-400); }

@media (max-width: 1024px) {
	.iew-product__grid.product { gap: 36px; }
	.iew-product .product_title { font-size: 36px; }
}

/* Guests on phones: the top-bar promises under the price button (inc/product-page.php). */
.iew-product__usps { display: none; }

/* Phones: photo first and modest, so title, price and the order button fit the first screen. */
@media (max-width: 767px) {
	.iew-product .woocommerce-breadcrumb__current { display: none; } /* The title says it right below. */
	.iew-product__usps { display: grid; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.35; color: var(--iew-ink-700); }
	.iew-product__usps li { display: flex; gap: 8px; margin: 0; }
	.iew-product__usps li::before { content: "\2713"; flex: none; font-weight: var(--iew-w-bold); color: var(--iew-olive-700); }
	.iew-product__in { padding: 12px 20px 56px; }
	.iew-product .woocommerce-breadcrumb { margin-bottom: 16px; }
	.iew-product__grid.product { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.iew-product__summary { grid-row: 2; }
	.iew-product__media { grid-column: 1; grid-row: 1; }
	/* Notice: the button goes under the text. */
	.iew-product .woocommerce-message { grid-template-columns: auto 1fr; }
	.iew-product .woocommerce-message .button { grid-column: 2; }
	.iew-product div.product div.images .woocommerce-product-gallery__image img { max-height: 260px; }
	.iew-product .woocommerce-product-gallery__image--placeholder { height: 200px; }
	.iew-product .product_title { font-size: 30px; line-height: 1.15; }
	.iew-specs__row { grid-template-columns: 132px minmax(0, 1fr); gap: 12px; }
	.iew-related { margin-top: 48px; padding-top: 32px; }
	.iew-related__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

/* Small phones (360): a narrower amount field and button padding, so "Toevoegen aan winkelwagen" fits. */
@media (max-width: 380px) {
	.iew-product form.cart .quantity .qty { width: 72px; }
	.iew-product form.cart .single_add_to_cart_button { padding: 0 12px; font-size: 14px; }
}