/*
 * 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 0 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: auto;                 /* left+right already span it; width:100% ADDED to that */
	box-sizing: border-box;      /* keep the padding inside the 390px, not outside it */
	padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
	background: var(--oo-ground, #fff);
	border-top: 1px solid var(--oo-line, #e6e8eb);
	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;
}
/* Label left, count and subtotal right. When the cart is empty there is only
   the label, so the button centres it instead. */
.oo-bar--filled .oo-bar__button { justify-content: space-between; padding: 0 18px; }
.oo-bar__meta {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}
.oo-bar__sep { opacity: .55; }
.oo-bar__total .woocommerce-Price-amount { font-weight: 600; }
/* WooCommerce wraps the price in its own markup; keep it inheriting the bar. */
.oo-bar__total, .oo-bar__total * { color: inherit; text-decoration: none; }
/* Clearance for the sticky bar belongs to the LAST block on the page only.
   This page renders two [orderable] shortcodes -- the carousel and the menu --
   and each is its own .orderable-main, so a blanket rule put 84px of dead space
   between the carousel and the first category heading. */
.orderable-main:last-of-type { padding-bottom: 84px; }
.oo-carousel { padding-bottom: 0; }

@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;
	         background: transparent; border-top: 0; box-shadow: none; }
	.oo-bar__button { min-width: 210px; padding: 0 22px; border-radius: 999px; }
	.orderable-main:last-of-type { 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;
}

/* ---------- flatten the plugin's card chrome at tablet and up ----------
   Below ~768px the plugin renders bare cards, but at wider widths it adds its
   own padding, white background, radius and shadow to .orderable-product. That
   left the carousel cards 88px taller than their content and put a raised card
   behind every list row, which is not the Owner treatment at any width.
   Both layouts want the card itself flat; the row keeps its own padding and
   rule, the carousel keeps none. */
.oo-carousel .orderable-product {
	padding: 0;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}
.orderable-products-list--list .orderable-product {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}

/* ---------- the round add button must actually be round ----------
   The plugin sets `.orderable-button { padding: 0 24px !important; }`. With
   border-radius:50% that made a 63x38 ellipse rather than a 38px circle, at
   every viewport. This is the ONE declaration in this theme that needs
   !important to win, and only because the plugin used it first. min-width is
   set too: `width` alone loses to the button's intrinsic content width. */
.oo-carousel .orderable-product__add-to-order,
.oo-carousel .orderable-button {
	padding: 0 !important;
	width: 38px;
	min-width: 38px;
	max-width: 38px;
	height: 38px;
	/* place-items alone lost the inline axis to a later plugin rule, which left
	   the "+" hugging the left edge of the circle. Both axes are set here. */
	display: grid;
	justify-content: center;
	align-content: center;
	line-height: 1;
	/* The circle is white on a photo; without a firmer edge it disappears
	   against a pale image and the glyph reads as floating loose. */
	border: 1px solid rgba(0, 0, 0, .12);
	box-shadow: 0 1px 6px rgba(0, 0, 0, .22);
}

/* ---------- close the gap between the carousel and the first section ----------
   The page renders two [orderable] shortcodes, so the theme inserts its own
   block spacing between them, and the first category heading adds its 30px
   margin on top of that. Together that left ~92px of white on a phone. The
   heading's margin is enough on its own once the block gap is removed. */
.oo-carousel { margin-bottom: 0; }
.orderable-main + .orderable-main { margin-top: 0; }
.orderable-main:last-of-type > .orderable-main__sections > .orderable-main__group:first-child .oo-cat {
	margin-top: 8px;
}

/* ---------- list rows: align the price with the title ----------
   The plugin pads .orderable-product__content by 24px on the left but pads
   .orderable-product__actions by nothing, so the item name sat 24px to the
   right of its own price. Measured gap was exactly 24px. Zeroing the content
   padding aligns the whole row to the card edge, which is what the reference
   design does; padding the actions instead would indent the row for no reason. */
.orderable-products-list--list .orderable-product__content,
.oo-carousel .orderable-product__content {
	padding-left: 0;
}

/* ---------- postcode locator: stop the input overflowing its row ----------
   The row is a flex container, but the input carries an intrinsic width (386px
   measured inside a 330px wrapper) and flex items default to min-width:auto, so
   it refused to shrink and the button ended up painted on top of it. Giving the
   wrapper permission to shrink and the button permission not to fixes both the
   overflow and the overlap. */
.opml-postcode-locator__row {
	flex-wrap: wrap;
}
.opml-store-locator-input {
	flex: 1 1 180px;
	min-width: 0;          /* the part that actually lets it shrink */
}
.opml-store-locator-input__input {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
.opml-postcode-locator__button {
	flex: 0 0 auto;
	white-space: nowrap;   /* it was allowed to wrap mid-label */
	padding-left: 22px;
	padding-right: 22px;
}

/* The "+" suffix should read as part of the price, not a separate token.
   Two adjacent inline spans still rendered a 7px gap (inline box spacing, not
   whitespace -- there is none in the source). inline-flex removes the inline
   layout entirely and makes the spacing an explicit 1px. */
.oo-price-from {
	display: inline-flex;
	align-items: baseline;
	gap: 1px;
	white-space: nowrap;
}
/* WooCommerce puts margin-right:6px on its price amount, which pushed the "+"
   away from the figure it belongs to. Only zeroed inside this wrapper, so
   prices everywhere else keep their normal spacing. */
.oo-price-from .woocommerce-Price-amount { margin-right: 0; }

/* Action buttons sat at 89px for "Select" and 137px for "Sold out today",
   which read as ragged down the column. A floor narrows the disparity without
   stretching the longer label. Their right edges already align. */
.orderable-products-list--list .orderable-product__actions-button > * {
	min-width: 118px;
}

/* No divider under the final row -- it was drawing a line with nothing beneath
   it at the end of the menu. */
.orderable-products-list--list .orderable-products-list__item:last-child .orderable-product {
	border-bottom: 0;
}