/*
 * rl_itempage.css
 *
 * Styles for the item page (theme procs in modules/tcl/itempage.tcl, scripts in
 * js/itempage.mjs and js/itempic_zoom.mjs).  Loaded after rl_uiframework.css,
 * whose custom properties it uses.  Not in a layer, so it wins over the
 * framework's rules; rl_legacy.css still has the photos' older rules
 * (.itempics, .gallery_*), which these build on.
 *
 *   .itemscope_row     the photos and, beside them, the buy box
 *   .gallery_*         the photo on the page, an .itempic_open button
 *   .itempics_thumbs   a thumbnail of each photo, beside it (under it on a phone)
 *   .itempics_viewer   the viewer: a modal dialog, its controls, the zoom
 *   .bgchooser         in the viewer, the photos' background choice
 */

#item-title > h1 {
	margin: 0;
}

/* .rl-btn's display beats the browser's [hidden] rule */
.item_desc_more[hidden] {
	display: none;
}

/* The photos beside the buy box.  The photos' sizes attributes follow these
   widths and the thumbnails' (itempics): change them together */
.itemscope_row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--rl-spacing-md);
}
@media (min-width: 768px) {
	.itemscope_row {
		grid-template-columns: calc(59vw - 30px) 1fr;
	}
}
@media (min-width: 1271px) {
	.itemscope_row {
		grid-template-columns: 720px 1fr;
	}
}

/* The photos on the page */
.gallery_images .item_img {
	position: relative;
}
.itempic_open {
	display: block;
	margin: 0 auto;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: zoom-in;
}
.itempic_open:focus-visible {
	outline: 3px solid var(--rl-primary);
	outline-offset: 2px;
}
.gallery_images .item_img[hidden] {
	display: none;
}
/* The photo's frame: square, and no taller than the window less the header
   (so the photo and the thumbnail strip beside it, its "more" button
   included, fit on the first screen).  Its size doesn't wait for the photo,
   so nothing below moves as one loads or another is shown, and the shop's
   background fills it from the start rather than a thin line growing.  The
   photo is contained in it, so a tall one is narrower, and its sizes
   attribute (by width) asks for more than it shows, never less */
.gallery_images .item_img.image_primary {
	width: 100%;
	aspect-ratio: 1 / 1;
	max-height: max(360px, calc(100vh - 230px));
}
.gallery_images .item_img.image_primary .itempic_open {
	width: 100%;
	height: 100%;
}
.gallery_images .item_img.image_primary .product_image {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
}

/* A thumbnail of each photo: a row under it on a phone, and on a wider screen
   a strip down its left side, as tall as the photo, which scrolls when the
   thumbnails need more.  The photo's sizes attribute follows the strip's
   80px (72px and the gap) */
/* Over rl_legacy.css's .itempics flex column; stretched, so the strip is as
   tall as the photo */
.itempics.itempics--thumbs {
	display: grid;
	align-items: stretch;
	gap: var(--rl-spacing-sm);
}
.itempics_thumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0 var(--rl-spacing-xs) var(--rl-spacing-xs);
}
.itempics_thumb {
	flex: none;
	width: 64px;
	height: 64px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
}
.itempics_thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.itempics_thumb:hover {
	border-color: #999;
}
.itempics_thumb[aria-current="true"] {
	border-color: var(--rl-primary);
}
/* Inside the outline, as the strip's scrolling would clip it outside */
.itempics_thumb:focus-visible {
	outline: 3px solid var(--rl-primary);
	outline-offset: -3px;
}
@media (min-width: 768px) {
	.itempics.itempics--thumbs {
		grid-template-columns: 72px minmax(0, 1fr);
		gap: 8px;
	}
	.itempics--thumbs .gallery_images {
		grid-column: 2;
		grid-row: 1;
	}
	.itempics_thumbs {
		grid-column: 1;
		grid-row: 1;
		position: relative;
	}
	.itempics_thumbs__list {
		position: absolute;
		inset: 0;
		flex-direction: column;
		flex-wrap: nowrap;
		padding: 0;
		overflow-y: auto;
		/* No scrollbar: one would take the thumbnails' width and cut them off.
		   The more buttons, the wheel and focus scroll it */
		scrollbar-width: none;
	}
	.itempics_thumbs__list::-webkit-scrollbar {
		display: none;
	}
	.itempics_thumb {
		width: 72px;
		height: 72px;
	}
	/* More past either end of the strip: a fade over the thumbnails there,
	   and a button on it (the bottom one says how many) */
	.itempics_thumbs__more {
		position: absolute;
		left: 0;
		right: 0;
		z-index: 1;
		display: flex;
		justify-content: center;
		gap: 2px;
		height: 44px;
		padding: 4px 0;
		border: 0;
		color: #111;
		font-size: var(--rl-text-xs);
		font-weight: 700;
		line-height: 1.2;
		cursor: pointer;
	}
	.itempics_thumbs__more--up {
		top: 0;
		align-items: flex-start;
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 45%, rgba(255, 255, 255, 0));
	}
	.itempics_thumbs__more--down {
		bottom: 0;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		background: linear-gradient(to top, rgba(255, 255, 255, 0.95) 55%, rgba(255, 255, 255, 0));
	}
	.itempics_thumbs__more:hover {
		text-decoration: underline;
	}
}
.itempics_thumbs__more[hidden] {
	display: none;
}

/* The buy box beside the photos: the title, the deal, the price, the buttons and the shop */
#item-secondary-group {
	width: 100%;
}
@media (min-width: 768px) {
	#item-secondary-group {
		margin: 0 5%;
	}
}
.itempage_price_box {
	background-color: #f3f4f6;
}
.itempage_print_logo {
	margin-bottom: 1em;
	width: 100%;
}
.itempage_redtag__ending {
	text-wrap: pretty;
	margin-bottom: 0.5em;
}

/* Seller Information's head (itempage_seller_banner): the logo, then the
   name, tagline, a line of facts and the news, and the buttons at the right;
   on a phone the buttons go below */
.itempage_seller_banner {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) minmax(180px, auto);
	gap: var(--rl-spacing-md);
	align-items: start;
	margin-bottom: var(--rl-spacing-md);
	padding: var(--rl-spacing-md);
	border-radius: 8px;
	background: linear-gradient(135deg, #f5f2ed 0%, #ffffff 100%);
	border: 1px solid var(--rl-border);
}
.itempage_seller_banner .itempage_shop_logo .shoplogo,
.itempage_seller_banner .itempage_shop_logo img,
.itempage_seller_banner .itempage_shop_logo [data-letters] {
	display: block;
	width: 96px;
	height: 96px;
	max-width: none;
	margin: 0;
	object-fit: cover;
	border-radius: 8px;
}
.itempage_seller_banner__name {
	margin: 0;
	font-size: var(--rl-text-xl);
	line-height: 1.2;
}
.itempage_seller_banner__tagline {
	margin: 2px 0 0;
	font-family: var(--rl-font-serif);
	font-style: italic;
	color: var(--rl-text-medium);
}
.itempage_seller_banner__facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	row-gap: 4px;
	margin: var(--rl-spacing-sm) 0 0;
	font-size: var(--rl-text-sm);
}
/* The shop's badge pill, a size down to sit in the line */
.itempage_seller_banner .rl-badge--shop {
	padding: 0.25rem 0.625rem;
	font-size: 1em;
}
.itempage_seller_banner__fact + .itempage_seller_banner__fact::before {
	content: "·";
	margin: 0 0.5em;
	color: var(--rl-text-medium);
}
.itempage_seller_banner__news {
	margin: var(--rl-spacing-sm) 0 0;
	color: var(--rl-text-medium);
	text-wrap: pretty;
}
.itempage_seller_banner__actions {
	display: flex;
	flex-direction: column;
	gap: var(--rl-spacing-xs);
}
@media (max-width: 767px) {
	.itempage_seller_banner {
		grid-template-columns: 64px minmax(0, 1fr);
		gap: var(--rl-spacing-sm);
		padding: var(--rl-spacing-sm);
	}
	.itempage_seller_banner .itempage_shop_logo .shoplogo,
	.itempage_seller_banner .itempage_shop_logo img,
	.itempage_seller_banner .itempage_shop_logo [data-letters] {
		width: 64px;
		height: 64px;
	}
	.itempage_seller_banner__actions {
		grid-column: 1 / -1;
	}
}

/* The shop in one line, under the buttons (itempage_shopline) */
.itempage_shopline {
	display: flex;
	align-items: center;
	gap: var(--rl-spacing-sm);
	padding: var(--rl-spacing-sm) 0;
	border-top: 1px solid var(--rl-border);
	border-bottom: 1px solid var(--rl-border);
	line-height: 1.5;
}
.itempage_shopline .itempage_shop_logo {
	flex: none;
	width: 56px;
}
.itempage_shopline .itempage_shop_logo .shoplogo,
.itempage_shopline .itempage_shop_logo img,
.itempage_shopline .itempage_shop_logo [data-letters] {
	display: block;
	width: 56px;
	height: 56px;
	max-width: none;
	margin: 0;
	object-fit: cover;
	border-radius: 6px;
}
.itempage_shop_logo [data-letters]::before {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	line-height: 1;
	font-size: 22px;
}
.itempage_seller_banner .itempage_shop_logo [data-letters]::before {
	font-size: 38px;
}
@media (max-width: 767px) {
	.itempage_seller_banner .itempage_shop_logo [data-letters]::before {
		font-size: 26px;
	}
}
.itempage_shopline__text {
	min-width: 0;
}
.itempage_shopline__meta {
	font-size: var(--rl-text-sm);
	color: var(--rl-text-medium);
}

/* On a phone, the price and the buy box's first button along the bottom once that button has scrolled away */
.itempage_stickybar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rl-spacing-md);
	padding: var(--rl-spacing-sm) var(--rl-spacing-md);
	padding-bottom: calc(var(--rl-spacing-sm) + env(safe-area-inset-bottom));
	background: #fff;
	border-top: 1px solid var(--rl-border);
	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
}
.itempage_stickybar[hidden] {
	display: none;
}
.itempage_stickybar__price {
	font-size: var(--rl-text-lg);
	font-weight: bold;
}
.itempage_stickybar .rl-btn {
	flex: 0 1 60%;
	justify-content: center;
}
html.itempage-stickybar-shown {
	scroll-padding-bottom: 80px;
}
html.itempage-stickybar-shown body {
	padding-bottom: 72px;
}
/* The site's back-to-top button stays above it */
html.itempage-stickybar-shown .scrollup {
	bottom: 84px;
}
@media (min-width: 768px) {
	.itempage_stickybar {
		display: none !important;
	}
}

/* The shopper's deal in plain words: a flash sale's, a wish list offer's or a shop discount's box */
.itempage_deal {
	display: flex;
	flex-direction: column;
	gap: var(--rl-spacing-xs);
	font-size: var(--rl-text-lg);
}
.itempage_deal p,
.itempage_deal__ends {
	margin: 0;
}
.itempage_deal__headline {
	font-weight: bold;
}
.itempage_deal__ends {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35em;
	font-size: var(--rl-text-base);
}
.itempage_deal__ends .clockdiv {
	display: inline-flex;
	margin: 0;
	font-weight: bold;
}

/* Under the price: free or fixed shipping, and the return period */
.itempage_shipping_callout {
	margin: 0;
}
.itempage_shipping_callout__link {
	white-space: nowrap;
}

/* To the shop, above its own item (itempage_ownerbar) */
.itempage_ownerbar {
	display: flex;
	flex-direction: column;
	gap: var(--rl-spacing-sm);
	margin-bottom: var(--rl-spacing-md);
	padding: var(--rl-spacing-sm) var(--rl-spacing-md);
	border: 1px solid var(--rl-border);
	border-left: 4px solid var(--rl-primary);
	border-radius: 4px;
	background: #f8fafc;
}
.itempage_ownerbar__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rl-spacing-sm) var(--rl-spacing-md);
}
.itempage_ownerbar__title {
	margin: 0;
	font-size: var(--rl-text-lg);
}
.itempage_ownerbar__stats,
.itempage_ownerbar__deals {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rl-spacing-xs) var(--rl-spacing-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}
.itempage_shopperview p {
	margin: 0;
}
.itempage_ownerbar__notes {
	margin: 0;
	white-space: pre-line;
}
.itempage_ownerbar__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rl-spacing-xs);
}
.itempage_ownerbar__actions .rl-btn {
	min-height: 32px;
}

/* A sold or unavailable item, under its notice: follow the shop, save a search
   (itempage_next_finds) */
.itempage_nextfinds {
	margin: var(--rl-spacing-md) 0;
	text-align: center;
}
.itempage_nextfinds__title {
	margin: 0 0 var(--rl-spacing-xs);
	font-size: var(--rl-text-xl);
}
.itempage_nextfinds__lead {
	margin: 0 0 var(--rl-spacing-sm);
}
.itempage_nextfinds__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--rl-spacing-sm);
}
@media (max-width: 767px) {
	.itempage_nextfinds__actions .rl-btn {
		flex: 1 1 100%;
	}
}

/* The sections below the photos: each a <details> with its heading as the summary */
.itempage_sections {
	margin-top: var(--rl-spacing-lg);
	border-top: 1px solid var(--rl-border);
}
.itempage_section {
	border-bottom: 1px solid var(--rl-border);
}
/* Opening and closing, the content's height eases between nothing and its
   own (interpolate-size lets it reach auto), and stays laid out until it's
   shut (content-visibility, allow-discrete).  A browser without
   ::details-content or interpolate-size opens and closes at once */
.itempage_section {
	interpolate-size: allow-keywords;
}
.itempage_section::details-content {
	block-size: 0;
	overflow-y: clip;
	transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
}
.itempage_section[open]::details-content {
	block-size: auto;
}
@media (prefers-reduced-motion: reduce) {
	.itempage_section::details-content {
		transition: none;
	}
}
.itempage_section__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rl-spacing-sm);
	min-height: 44px;
	padding: var(--rl-spacing-sm) 0;
	list-style: none;
	cursor: pointer;
}
.itempage_section__summary::-webkit-details-marker {
	display: none;
}
/* Its chevron: an icon centered in its box, so it turns in place */
.itempage_section__chevron {
	flex: none;
	width: 1.1em;
	height: 1.1em;
	transition: transform 0.3s ease;
}
.itempage_section[open] > .itempage_section__summary .itempage_section__chevron {
	transform: rotate(180deg);
}
.itempage_section__summary:focus-visible {
	outline: 3px solid var(--rl-primary);
	outline-offset: 2px;
}
.itempage_section__title {
	margin: 0;
	font-size: var(--rl-text-xl);
}
.itempage_section__body {
	padding: 0 0 var(--rl-spacing-lg);
}
@media (prefers-reduced-motion: reduce) {
	.itempage_section__chevron {
		transition: none;
	}
}

/* Shipping & Returns' details while they load (shipfuncs.tcl's placeholder):
   about the room they take, so the section doesn't open small and then grow */
#item-shipping.is-loading {
	min-height: 12em;
}

/* A long description on a phone, cut short until Continue Reading (itempage.mjs):
   its last lines fade out, and the button has room below them */
@media (max-width: 767px) {
	#item-desc.item_desc--clamped {
		max-height: 375px;
		overflow: hidden;
		-webkit-mask-image: linear-gradient(to bottom, #000 75%, transparent);
		mask-image: linear-gradient(to bottom, #000 75%, transparent);
	}
	.item_desc_more {
		margin-top: var(--rl-spacing-md);
	}
}

/* The item's id and filters, beside its description */
#mygrid {
	max-width: 350px;
	height: min-content;
	grid-auto-rows: min-content;
}
#mygrid > * {
	overflow: hidden;
	text-overflow: ellipsis;
	min-height: 0;
	line-height: 1.2em;
}

/* The viewer: a modal dialog over the whole window */
dialog.itempics_viewer {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: #fff;
	overscroll-behavior: none;
}
dialog.itempics_viewer::backdrop {
	background: #fff;
}
html:has(dialog.itempics_viewer[open]) {
	overflow: hidden;
	overscroll-behavior: none;
}
#itempics_expand IMG.expanded {
	width: auto;
	max-width: 100%;
	height: 100%;
	object-fit: contain;
}
#itempics_expand .largepic {
	height: 100dvh;
	user-select: none;
}

/* Its controls, over the photo: close at the top right, the rest along the bottom */
.itempics_viewer button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--rl-spacing-xs);
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.9);
	color: #111;
	font-size: 1.25rem;
	cursor: pointer;
}
.itempics_viewer button:hover {
	background: #fff;
}
.itempics_viewer button:focus-visible {
	outline: 3px solid var(--rl-primary);
	outline-offset: 2px;
}
.itempics_close {
	position: fixed;
	top: var(--rl-spacing-sm);
	right: var(--rl-spacing-sm);
	z-index: 101;
}
.itempics_controls {
	position: fixed;
	left: 0;
	right: 0;
	bottom: var(--rl-spacing-sm);
	width: fit-content;
	margin-inline: auto;
	z-index: 101;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: var(--rl-spacing-xs);
	max-width: calc(100% - 2 * var(--rl-spacing-sm));
	padding: var(--rl-spacing-xs) var(--rl-spacing-sm);
	border-radius: 2rem;
	background: rgba(255, 255, 255, 0.85);
}
.itempics_status {
	white-space: nowrap;
	min-width: 6.5em;
	text-align: center;
	color: #111;
}
.itempics_pan {
	display: flex;
	gap: var(--rl-spacing-xs);
}
.itempics_pan[hidden] {
	display: none;
}

/* The background choice: the palette button in the controls reveals every
   background above them, scrolling when they don't fit */
.itempics_bg {
	display: contents;
}
#itempics_bgchooser {
	position: absolute;
	bottom: calc(100% + var(--rl-spacing-xs));
	left: 50%;
	transform: translateX(-50%);
	width: min(42rem, calc(100vw - 2 * var(--rl-spacing-sm)));
	max-height: min(60dvh, 28rem);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--rl-spacing-sm);
	border-radius: 1rem;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
	color: #111;
}
#itempics_bgchooser[hidden] {
	display: none;
}
/* The label centered, the close button at the right */
.bgchooser__head {
	display: grid;
	grid-template-columns: 36px 1fr 36px;
	align-items: center;
	margin-bottom: var(--rl-spacing-xs);
}
.bgchooser__label {
	grid-column: 2;
	margin: 0;
	text-align: center;
	font-weight: 700;
}
.itempics_viewer .bgchooser__close {
	grid-column: 3;
	min-width: 36px;
	min-height: 36px;
	font-size: 1rem;
}
.bgchooser__swatches {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
}
.itempics_viewer .bglink {
	min-width: 0;
	min-height: 0;
	padding: 2px;
	border: 2px solid transparent;
	border-radius: 4px;
	background: none;
}
.itempics_viewer .bglink:hover {
	background: none;
	border-color: #999;
}
/* The chosen one: a red border and a white ring inside; focus is a black ring
   outside, so the two never look alike */
.itempics_viewer .bglink.selected {
	border-color: var(--rl-primary);
}
.itempics_viewer .bglink.selected .bglink__swatch {
	box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px rgba(0, 0, 0, 0.25);
}
.itempics_viewer .bglink:focus-visible {
	outline: 2px solid #111;
	outline-offset: 2px;
}
.bglink__swatch {
	display: block;
	width: 32px;
	height: 32px;
	border-radius: 2px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.bglink__swatch.bg-transparent {
	background-color: #f5f5f5;
}
.itempics_bgtoggle[aria-expanded="true"] {
	border-color: var(--rl-primary);
}
/* Too narrow for one row: the move buttons go below */
@media (max-width: 640px) {
	.itempics_controls {
		flex-wrap: wrap;
		border-radius: 1.5rem;
	}
	.itempics_pan {
		flex-basis: 100%;
		justify-content: center;
	}
}

@media print {
	#maincontent {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}
	.itemscope_row {
		display: flex;
	}
	.item_content,
	.item_summaries {
		flex: 0 0 50%;
	}
	.shophero-header {
		border-bottom: none !important;
	}
	button.add_wl,
	button.edit_wl,
	.item_desc_more,
	.itempage_section__chevron {
		display: none;
	}
	#item-desc.item_desc--clamped {
		max-height: none;
	}
}