/*
 * Owner-style ordering page, built entirely from the theme layer.
 *
 * Orderable ships no CSS custom properties, so every colour below is a rule
 * override rather than a token swap. Rules marked NEEDS-IMPORTANT are the ones
 * where the plugin's own stylesheet wins on specificity and there is no other
 * way to take the declaration; they are counted in the customization verdict.
 */

/* ---------- palette ---------- */
.orderable-main {
	--oo-ink: #16181c;
	--oo-muted: #6b7280;
	--oo-ground: #ffffff;
	--oo-sunk: #f7f8f9;
	--oo-line: #e6e8eb;
	--oo-accent: #d92d20;
	--oo-radius: 14px;
	color: var(--oo-ink);
}

/* ---------- category headings (test 14) ---------- */
.oo-cat { margin: 30px 0 12px; }
.oo-cat__title { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 2px; }
.oo-cat__sub { color: var(--oo-muted); margin: 0; font-size: 0.95rem; }

/* ---------- "most ordered" carousel (test 13) ----------
   The row is the plugin's own grid; only the flow changes. Horizontal scroll
   with snap, so it behaves like the reference on a phone. */
.oo-carousel .orderable-products-list--grid {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: 12px;
	padding-bottom: 6px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.oo-carousel .orderable-products-list--grid::-webkit-scrollbar { display: none; }
.oo-carousel .orderable-products-list__item {
	flex: 0 0 46%;
	max-width: 200px;
	scroll-snap-align: start;
}
@media (min-width: 782px) {
	.oo-carousel .orderable-products-list__item { flex-basis: 200px; }
}

/* ---------- photo-first card with an overlaid round add button (test 11) ----
   No template override needed: the plugin already renders hero-then-content,
   so the button is lifted onto the photo with position alone. */
.oo-carousel .orderable-product {
	position: relative;
	background: transparent;
	border: 0;
	/* The plugin lays the card out as a row with a fixed 60px thumbnail at
	   mobile widths. The Owner carousel is photo-above, so the direction and
	   the hero width are both taken back here. */
	flex-direction: column;
}
/* The plugin caps every list item's hero at `max-width: 95px`; the carousel
   wants a full-bleed square, so the cap is lifted rather than out-specified.
   Its grid rule also sets `object-fit: fill`, which stretches a non-square
   photo -- `cover` is restored so uploads are not distorted. */
.oo-carousel .orderable-product__hero { width: 100%; max-width: none; }
.oo-carousel .orderable-product__hero img { object-fit: cover; height: 100%; }
.oo-carousel .orderable-product__hero {
	border-radius: var(--oo-radius);
	overflow: hidden;
	background: var(--oo-sunk);
	aspect-ratio: 1 / 1;
}
.oo-carousel .orderable-product__image { width: 100%; height: 100%; object-fit: cover; }
.oo-carousel .orderable-product__content-wrap { padding: 8px 2px 0; }
.oo-carousel .orderable-product__title { font-size: 0.98rem; font-weight: 600; margin: 0 0 2px; line-height: 1.3; }
.oo-carousel .orderable-product__description { display: none; }
.oo-carousel .orderable-product__actions { display: block; padding: 0; }
.oo-carousel .orderable-product__actions-price { font-size: 0.95rem; font-weight: 600; }

/* The add button is a sibling of the hero, not a child, so it is anchored to
   the card and pushed down by the hero's height. A percentage margin resolves
   against the containing block's WIDTH, and the hero is square, so
   `calc(100% - 46px)` lands it neatly inside the photo's bottom-right corner
   without hard-coding a pixel height. */
.oo-carousel .orderable-product__actions-button {
	position: absolute;
	right: 8px;
	top: 0;
	margin-top: calc(100% - 46px);
}
.oo-carousel .orderable-button,
.oo-carousel .orderable-product__add-to-order {
	width: 38px; height: 38px; padding: 0;
	border-radius: 50%;
	background: var(--oo-ground);
	border: 1px solid var(--oo-line);
	box-shadow: 0 2px 8px rgba(0,0,0,.14);
	display: grid; place-items: center;
	font-size: 0; line-height: 0;
}
.oo-carousel .orderable-product__add-to-order::after {
	content: "+";
	font-size: 22px; line-height: 1; font-weight: 400;
	color: var(--oo-ink);
}

/* ---------- list rows: text left, thumbnail right (test 12) ---------- */
.orderable-products-list--list .orderable-product {
	display: grid;
	grid-template-columns: 1fr 92px;
	gap: 14px;
	align-items: start;
	padding: 14px 0;
	border-bottom: 1px solid var(--oo-line);
	background: transparent;
}
.orderable-products-list--list .orderable-product__hero {
	order: 2;
	width: 92px; height: 92px;
	border-radius: 10px; overflow: hidden;
	background: var(--oo-sunk);
	position: relative;
}
.orderable-products-list--list .orderable-product__image { width: 100%; height: 100%; object-fit: cover; }
.orderable-products-list--list .orderable-product__content-wrap { order: 1; display: flex; flex-direction: column; gap: 4px; }
.orderable-products-list--list .orderable-product__title { font-size: 1rem; font-weight: 600; margin: 0; }
.orderable-products-list--list .orderable-product__description {
	color: var(--oo-muted); font-size: 0.9rem; margin: 0;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.orderable-products-list--list .orderable-product__actions {
	display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0 0;
}
.orderable-products-list--list .orderable-product__actions-price { font-weight: 600; }

/* ---------- out-of-stock button clipping (test 16) ----------
   The plugin gives the button a fixed width that a longer label overruns; the
   card also clipped it. Both are taken back here. */
.orderable-product__actions-button { min-width: 0; flex: 0 0 auto; }
.orderable-product__actions-button .orderable-button,
.orderable-product__add-to-order,
.orderable-product__out-of-stock {
	white-space: nowrap;
	width: auto;
	max-width: 100%;
	overflow: visible;
}
.orderable-product { overflow: visible; }

/* ---------- desktop (test 18) ---------- */
@media (min-width: 900px) {
	.orderable-products-list--list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 32px;
	}
	.oo-cat { grid-column: 1 / -1; }
	.orderable-main--sections-side .orderable-main__sections { padding-left: 8px; }
}

/* ---------- sticky order bar (mobile) ----------
   Reuses the plugin's floating cart element, reshaped by the template override
   in orderable/drawer/floating-cart.php. Nothing new is injected into the DOM,
   so the plugin's own drawer JavaScript still drives it. */
.oo-bar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	top: auto;
	width: 100%;
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
	background: transparent;
	box-shadow: 0 -8px 20px rgba(0, 0, 0, .06);
	z-index: 60;
}
.oo-bar__button {
	width: 100%;
	min-height: 52px;
	border: 0;
	border-radius: 10px;
	background: var(--oo-accent, #d92d20);
	color: #fff;
	font-size: 1.02rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	cursor: pointer;
}
.oo-bar__count {
	background: rgba(255, 255, 255, .22);
	border-radius: 999px;
	min-width: 24px;
	padding: 1px 8px;
	font-size: .9rem;
}
/* The list is the last thing above the bar; give it room to clear. */
.orderable-main { padding-bottom: 84px; }

@media (min-width: 900px) {
	/* On desktop the bar returns to a compact control rather than spanning the
	   full width, since the drawer opens as a side panel there. */
	.oo-bar { left: auto; right: 24px; bottom: 24px; width: auto; padding: 0; box-shadow: none; }
	.oo-bar__button { min-width: 210px; padding: 0 22px; border-radius: 999px; }
	.orderable-main { padding-bottom: 0; }
}

/* ---------- carousel: pin the button's containing block ----------
   The overlaid add button is positioned with a percentage margin, which
   resolves against its containing block's WIDTH. The plugin makes an
   intermediate wrapper positioned at desktop widths, so the same rule anchored
   to a 128px box there and a 152px box on mobile -- the button landed in the
   right place only by accident. Forcing the intermediate wrappers back to
   `static` makes the card itself the containing block at every width, so one
   rule holds everywhere instead of needing a breakpoint per card size. */
.oo-carousel .orderable-product__content-wrap,
.oo-carousel .orderable-product__actions { position: static; }

/* The plugin styles the list ITEM as the card at desktop widths -- background,
   border and shadow all sit there, not on .orderable-product -- so the
   carousel's flat treatment has to be taken on the item too. */
.oo-carousel .orderable-products-list__item {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
}