/* Royal Combine — front-end picker
 *
 * Restyled to the gattefosse-lean theme. Values read from the theme's custom properties with
 * literal fallbacks so the plugin still looks composed under any other theme.
 *
 * Two judgements worth stating, because they are not mechanical translations:
 *
 * 1. THE STEPPER IS REBUILT TO MATCH THE THEME'S OWN. The theme draws its quantity control with
 *    border:0 plus an inset 1px shadow and overflow:hidden, rather than a real border — that is how
 *    it gets a rounded box whose inner divider lines stop cleanly at the curve instead of poking
 *    through it. Copying the technique, not just the colours, is what makes this stepper and the
 *    one on a normal product page look like the same control.
 *
 * 2. THE STATUS COLOURS LOSE THEIR GREEN AND ORANGE. This is a monochrome site; a green success
 *    line would be the only saturated colour on the page and would read as a system message rather
 *    than part of the product. "Ready" is therefore stated in ink — full-strength text against the
 *    muted body copy is itself the signal — while anything the shopper must fix keeps a real
 *    warning colour, reusing the same deep red the theme's checkout validation already uses so the
 *    two feel like one language.
 */

/* This element is <form class="cart rcb-form">, and that `cart` class means themes aim their
   add-to-cart layout at it. gattefosse-lean makes .single-product form.cart a horizontal flex row
   so a normal product can sit its quantity box beside its button — but this plugin's form holds a
   note, a table and a footer that must stack, and as flex items in a row they collapsed to
   shrink-to-fit: the footer measured 183px inside a 295px column, taking the add-to-cart button
   down with it on desktop as well as on mobile.

   Two selectors: the bare one for any other context, and the .single-product one to outrank the
   theme's own (0,2,1) rule rather than relying on which stylesheet happens to load last.
   .single-product is a WooCommerce core body class, so this is not a theme-specific hack. */
.rcb-form,
form.cart.rcb-form,
.single-product form.cart.rcb-form {
	display: block;
	margin-top: 1.4em;
	font-family: var(--sans, "Jost", system-ui, sans-serif);
}

/* ---- note / rule ---- */

/* A plain soft-grey panel on the theme's own radius — no accent bar down one side.
   The earlier version had a 2px ink rule on the left and square corners there, which is the shape
   WooCommerce gives its own notices; on a page where nothing else is marked that way it read as a
   system message rather than as part of the product. One radius on all four corners is what the
   rest of this theme does with every panel it draws. */
.rcb-form .rcb-note {
	background: var(--soft, #f4f3f1);
	border: 0;
	border-radius: var(--radius, 10px);
	padding: 12px 16px;
	margin-bottom: 1.2em;
	font-size: .85rem;
	font-weight: 300;
	line-height: 1.7;
	color: var(--ink-soft, #3a3a38);
}

/* The note's text is stored as plain lines and run through wpautop(), so what actually lands in
   this box is one or more <p> — and a <p> arrives carrying whatever bottom margin the theme gives
   paragraphs. Styling only the container left that margin inside the padding: MEASURED on the
   product page, 12px of space above the text and 26px below it, so the panel sat visibly
   bottom-heavy and looked like the styling had not been applied at all.
   Zero on the outer paragraphs, and the gap between them restated here, so the rhythm belongs to
   this box rather than to whatever the surrounding theme happens to set. */
.rcb-form .rcb-note > p {
	margin: 0;
}

.rcb-form .rcb-note > p + p,
.rcb-form .rcb-note > ul,
.rcb-form .rcb-note > ol {
	margin: .7em 0 0;
}

.rcb-form .rcb-note ul,
.rcb-form .rcb-note ol {
	padding-left: 1.2em;
}

.rcb-form .rcb-note li + li {
	margin-top: .25em;
}

.rcb-form .rcb-note strong,
.rcb-form .rcb-note b {
	font-weight: 500;
	color: var(--ink, #111111);
}

.rcb-form .rcb-note a {
	color: var(--ink, #111111);
	text-decoration: underline;
	text-underline-offset: .18em;
	text-decoration-thickness: 1px;
}

.rcb-form .rcb-rule {
	margin-bottom: .9em;
	font-size: .68rem;
	font-weight: 400;
	letter-spacing: var(--upper, .2em);
	text-transform: uppercase;
	color: var(--ink-soft, #3a3a38);
}

/* ---- picker table ----
   Hairline row rules and a small uppercase head, the same shape the theme gives its order-details
   table. !important on the table borders only: the .shop_table class on this element pulls in
   WooCommerce's own bordered-table rules, which are more specific than a plain class selector. */

table.rcb-picker {
	width: 100%;
	margin: 0 0 1.2em;
	border: 0 !important;
	border-collapse: collapse;
	border-radius: 0;
}

/* The padding carries !important for the same reason the borders do, and it is not decoration:
   `.woocommerce table.shop_table th` is (0,2,2) and this selector is (0,1,3), so WooCommerce's
   `padding: 9px 12px` was winning outright. MEASURED: the 款式 label started 12px to the RIGHT of
   the thumbnail it heads, while the body cells only inherited the 12px on their right — so the
   head and the body were indented by different amounts and no alignment value could reconcile
   them. Stating both here puts the two rows back on the same grid. */
table.rcb-picker thead th {
	padding: 0 0 10px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--line, #e6e3de) !important;
	background: transparent;
	font-size: .66rem;
	font-weight: 400;
	letter-spacing: var(--upper, .2em);
	text-transform: uppercase;
	color: var(--muted, #8d8d87);
	/* Centred over the pair of cells it spans, rather than pinned to the far left. */
	text-align: center;
	/* letter-spacing leaves a trailing gap after the last glyph, which drags centred text left by
	   half of it; the indent pays that back. */
	text-indent: var(--upper, .2em);
}

/* Centred, not right-aligned. Flush right put the word 數量 over the + button rather than over the
   control as a whole — MEASURED 48px from the stepper's centre — which is what read as "the
   headings don't line up with anything". The body cell below is centred to match, so the label and
   the stepper share one centre line. */
table.rcb-picker thead th.rcb-col-qty {
	text-align: center;
}

table.rcb-picker td {
	padding: 12px 0 !important;
	border: 0 !important;
	border-bottom: 1px solid var(--line, #e6e3de) !important;
	background: transparent;
	vertical-align: middle;
}

table.rcb-picker tbody tr:last-child td {
	border-bottom: 0 !important;
}

table.rcb-picker .rcb-thumb {
	width: 64px;
	padding-right: 14px;
}

table.rcb-picker .rcb-thumb img {
	display: block;
	width: 52px;
	height: 52px;
	object-fit: contain;
	background: var(--soft, #f4f3f1);
	border-radius: var(--radius, 10px);
}

table.rcb-picker .rcb-name {
	font-family: var(--serif, "Cormorant Garamond", "Noto Serif TC", Georgia, serif);
	font-size: 1.05rem;
	font-weight: 400;
	line-height: 1.35;
	color: var(--ink, #111111);
}

table.rcb-picker .rcb-qty {
	text-align: center;
	white-space: nowrap;
	width: 1%;
}

.rcb-row.rcb-soldout {
	opacity: .45;
}

.rcb-soldout-label {
	display: block;
	margin-top: 2px;
	font-family: var(--sans, "Jost", system-ui, sans-serif);
	font-size: .68rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #7a2e2a;
}

/* ---- stepper ----
   border:0 + inset shadow + overflow:hidden, exactly as the theme's .gfl-qty does it. A real
   border would square off against the radius and the two divider lines would run past the curve. */

.rcb-stepper {
	display: inline-flex;
	align-items: stretch;
	border: 0;
	border-radius: var(--radius, 10px);
	background: var(--bg, #ffffff);
	box-shadow: inset 0 0 0 1px var(--line, #e6e3de);
	overflow: hidden;
}

.rcb-stepper button {
	width: 38px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--ink, #111111);
	font-family: var(--sans, "Jost", system-ui, sans-serif);
	font-size: 1.05rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .25s, color .25s;
}

.rcb-stepper button:first-of-type {
	border-right: 1px solid var(--line, #e6e3de);
}

.rcb-stepper button:last-of-type {
	border-left: 1px solid var(--line, #e6e3de);
}

/* Gated on a pointer that can hover, with :active carrying the touch feedback instead.
   A finger cannot leave an element the way a cursor does, so on a phone the ink fill applied on tap
   and stayed applied: the + button sat inverted, looking like a selected state, until the visitor
   tapped somewhere else. On the one control people press several times in a row that is especially
   wrong — after three taps + is black and − is not, which reads as meaning something.
   :active lasts only while the finger is down, so the tap still confirms itself and then releases. */
@media (hover: hover) {
	.rcb-stepper button:hover {
		background: var(--ink, #111111);
		color: #fff;
	}
}

.rcb-stepper button:active {
	background: var(--ink, #111111);
	color: #fff;
}

.rcb-stepper button:focus-visible,
.rcb-stepper .rcb-input:focus-visible {
	outline: 2px solid var(--ink, #111111);
	outline-offset: -2px;
}

.rcb-stepper .rcb-input {
	width: 46px;
	height: 44px;
	margin: 0;
	padding: 0;
	text-align: center;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-family: var(--sans, "Jost", system-ui, sans-serif);
	font-size: .95rem;
	color: var(--ink, #111111);
	-moz-appearance: textfield;
	appearance: textfield;
}

.rcb-stepper .rcb-input::-webkit-outer-spin-button,
.rcb-stepper .rcb-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ---- live summary ---- */

.rcb-summary {
	margin: .5em 0 1em;
	min-height: 1.4em;
	font-size: .85rem;
	font-weight: 300;
	letter-spacing: .02em;
	color: var(--ink-soft, #3a3a38);
}

.rcb-summary.rcb-ok {
	color: var(--ink, #111111);
}

.rcb-summary.rcb-warn {
	color: #7a2e2a;
}

/* ---- cart / order grouping ---- */

.rcb-cart-child td.product-name {
	padding-left: 2.2em;
	position: relative;
}

.rcb-cart-child td.product-name::before {
	content: "\21B3"; /* ↳ */
	position: absolute;
	left: .8em;
	color: var(--muted, #8d8d87);
}

.rcb-cart-contents {
	margin: .4em 0 0;
	padding-left: 1.1em;
	list-style: disc;
	font-family: var(--sans, "Jost", system-ui, sans-serif);
	font-size: .8rem;
	font-weight: 300;
	line-height: 1.7;
	color: var(--ink-soft, #3a3a38);
}

/* ---- actions ---- */

.rcb-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: .5em;
}

.rcb-submit.single_add_to_cart_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* Disabled: flat grey with no border, and the pointer/focus states are repeated because
   WooCommerce ships button.button.alt.disabled:hover at (0,5,1) — its purple would otherwise come
   back even though the resting state here looks correct.
   :focus and :active are in the list for touch. A phone passes no hover media query, but a tap
   still leaves :hover AND :focus on the button, and whatever the theme declares for those states
   then repaints it. Covering hover alone made the button change colour the moment it was tapped. */
.rcb-submit:disabled,
.rcb-submit.disabled,
.rcb-submit:disabled:hover,
.rcb-submit.disabled:hover,
.rcb-submit:disabled:focus,
.rcb-submit.disabled:focus,
.rcb-submit:disabled:focus-visible,
.rcb-submit:disabled:active,
.rcb-submit.disabled:active {
	background-color: var(--soft2, #ecebe7) !important;
	border: 1px solid var(--soft2, #ecebe7) !important;
	color: var(--muted, #8d8d87) !important;
	box-shadow: none !important;
	cursor: not-allowed;
	opacity: 1;
}

.rcb-footer {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: .75em;
}

.rcb-footer .rcb-summary {
	margin: 0;
	flex: 1 1 220px;
}

.rcb-footer .rcb-actions {
	margin: 0;
	flex: 0 0 auto;
}

.rcb-footer .rcb-submit {
	width: auto; /* keep the button inline even if the theme forces full width */
}

/* ---- narrow screens ----
   The three columns are thumb + name + stepper. At 375px the first and last are fixed, so every
   pixel spent on them is taken from the product name — which is the only column whose content
   cannot be abbreviated. The thumb and the stepper both shrink here for that reason, and the
   footer stops trying to sit summary and button on one line. */

@media (max-width: 600px) {
	table.rcb-picker .rcb-thumb {
		width: 52px;
		padding-right: 10px;
	}
	table.rcb-picker .rcb-thumb img {
		width: 42px;
		height: 42px;
	}
	table.rcb-picker .rcb-name {
		font-size: .98rem;
		/* Long Chinese product names have no spaces to break at; without this a single name can
		   push the stepper off the right edge. */
		word-break: break-word;
	}
	table.rcb-picker td {
		padding: 10px 0;
	}

	.rcb-stepper button {
		width: 34px;
		height: 42px;
	}
	.rcb-stepper .rcb-input {
		width: 38px;
		height: 42px;
	}

	.rcb-footer {
		align-items: stretch;
		flex-direction: column;
		gap: 12px;
	}
	.rcb-footer .rcb-actions,
	.rcb-footer .rcb-submit {
		width: 100%;
	}
	.rcb-footer .rcb-summary {
		flex: 0 0 auto;
	}
}