/*
 * The GST breakdown under the order total, on the cart page and the checkout.
 *
 * CartDisplay moves it out of the total's own table cell and into a row of its
 * own, written the way an invoice writes it: what was bought, then the tax it
 * carries, with CGST and SGST as column headings. This is what makes that row
 * read as a footnote rather than as more line items -- it sits under a total the
 * customer has already agreed to, and it is there to be checked, not to be read.
 *
 * In the look the cart, checkout and account pages share (owner, 2026-10-02):
 * a 13px muted line with a caret at its far end, 13px rows inside. The --tc-*
 * tokens come from tt-flow on <body> (motta-child/assets/flow.css); each is
 * read with its literal, so the note is right without that sheet too.
 */

/*
 * Full bleed across both columns. The !important is aimed at the theme's
 * `.shop_table td` padding, which indents this row to line up with a value
 * column it does not have -- and which a theme is free to make more specific
 * than anything reasonable here.
 */
.tt-gst-note > td {
	padding: 0 0 12px !important;
	border-top: 0 !important;
	font-size: 13px;
	line-height: 1.45;
	color: var(--tc-muted, #6B6660);
	/* The value column is shrink-to-fit and nowrap on checkout so amounts stop
	   wrapping; this cell spans both columns and must opt back out of that. */
	white-space: normal;
	text-align: left;
}

/* ------------------------------------------------- the disclosure */

/*
 * The summary is the whole control: closed, it is the only thing this row shows.
 * `list-style: none` plus the WebKit pseudo-element is what removes the native
 * triangle -- Safari ignores the standard property and needs its own -- so the
 * chevron below can sit at the far end of the row, under the amounts.
 *
 * The chevron is the summary's ::before, so it is first in the row; the row is
 * reversed and spread, which puts the words at the left and the chevron at the
 * right without an element for it.
 */
.tt-gst-note__intro {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 32px;
	padding: 0;
	font-weight: 400;
	color: var(--tc-muted, #6B6660);
	text-align: left;
	cursor: pointer;
	list-style: none;
	-webkit-tap-highlight-color: transparent;
}

.tt-gst-note__intro::-webkit-details-marker {
	display: none;
}

/*
 * A chevron drawn from two borders, so there is no glyph to go missing and no
 * image to load. It points down when closed and up when open. The margins
 * keep a turned square inside the row and sit its point on the text's middle.
 */
.tt-gst-note__intro::before {
	content: "";
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	margin: -3px 3px 0;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform .15s ease;
}

.tt-gst-note__details[open] > .tt-gst-note__intro::before {
	margin-top: 3px;
	transform: rotate(-135deg);
}

/*
 * Keyboard users get the focus ring back. Removing the marker does not remove
 * focusability -- a summary is focusable by default -- but the theme resets
 * outlines broadly enough that it needs restating.
 */
.tt-gst-note__intro:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* The rows are for reading, so they take the body colour; the line that opens them stays muted. */
.tt-gst-note__body {
	padding-top: 4px;
	color: var(--tc-body, #413E3C);
}

/* ------------------------------------------------------------- the table */

/*
 * A table inside a table cell. It needs its own `width: 100%` and collapsed
 * borders because it inherits neither from the shop_table it is sitting in, and
 * every one of the theme's `.shop_table th/td` rules is aimed at that outer
 * table, not this one -- hence the explicit padding and border reset below.
 */
.tt-gst-note__table {
	width: 100%;
	border-collapse: collapse;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.tt-gst-note__table th,
.tt-gst-note__table td {
	padding: 3px 0 3px 12px;
	border: 0;
	font-size: inherit;
	font-weight: 400;
	line-height: inherit;
	color: inherit;
	vertical-align: baseline;
}

.tt-gst-note__table th:first-child,
.tt-gst-note__table td:first-child {
	padding-left: 0;
}

/*
 * The description column takes whatever the amounts do not, and wraps inside
 * itself. Without the `width: auto` here and the `width: 1%` below, a long
 * coffee name pushes the amount columns off the end of the table.
 */
.tt-gst-note__table tbody th {
	width: auto;
	text-align: left;
	font-weight: 400;
}

/*
 * Shrink-to-fit: `width: 1%` plus nowrap makes each head column exactly as wide
 * as its widest cell. The nowrap is load-bearing -- an amount must never be
 * split from the rate bracketed after it.
 */
.tt-gst-note__table thead th,
.tt-gst-note__table tbody td {
	width: 1%;
	text-align: right;
	white-space: nowrap;
}

/* The empty corner above the description column. */
.tt-gst-note__table thead th:first-child {
	width: auto;
}

.tt-gst-note__table thead th {
	padding-bottom: 4px;
	border-bottom: 1px solid var(--tc-line, rgba(18, 17, 17, .1));
	font-weight: 600;
	color: var(--tc-body, #413E3C);
}

/* An amount is a figure to check: a shade heavier than the name it belongs to. */
.tt-gst-note__table tbody td {
	font-weight: 500;
}

.tt-gst-note__table tbody tr:first-child th,
.tt-gst-note__table tbody tr:first-child td {
	padding-top: 4px;
}

/* Quieter than the amount it qualifies: the figure is the point, the rate is
   why the figure is that size. The muted colour, not an opacity on top of one. */
.tt-gst-note__rate {
	color: var(--tc-muted, #6B6660);
	font-weight: 400;
}

/* --------------------------------------- the fallback, when a label will not parse */

/*
 * CartDisplay::plain_list() renders these instead of the table when a rate name
 * no longer looks like a tax head. Description left, heads right; the minmax
 * lets a long name wrap inside its own column rather than pushing the amounts
 * out.
 */
.tt-gst-note__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 4px 12px;
	align-items: baseline;
	padding: 2px 0;
}

.tt-gst-note__what {
	min-width: 0;
}

.tt-gst-note__heads {
	text-align: right;
	white-space: normal;
}

.tt-gst-note__head {
	display: inline-block;
	white-space: nowrap;
	margin-left: 8px;
}

.tt-gst-note__head:first-child {
	margin-left: 0;
}

/* ------------------------------------- inside WooCommerce's responsive table */

/*
 * On the cart page this table sits inside the totals table, which is
 * `shop_table_responsive`. Below 48em WooCommerce turns every such table into a
 * stack -- `thead { display: none }`, `tbody th { display: none }`, each `td` a
 * block labelled from data-title -- with descendant selectors, so they reach
 * this one too: on a phone the CGST and SGST headings and the name of what was
 * taxed vanished, and two bare amounts were left. This table is three narrow
 * columns at any width and stays a table.
 *
 * (0,2,2) each, over WooCommerce's (0,1,3).
 */
.shop_table_responsive .tt-gst-note__table thead {
	display: table-header-group;
}

/* The headings are in this table's thead, but that thead is inside the outer table's tbody. */
.shop_table_responsive .tt-gst-note__table thead th,
.shop_table_responsive .tt-gst-note__table tbody th,
.shop_table_responsive .tt-gst-note__table tr td {
	display: table-cell;
}

.shop_table_responsive .tt-gst-note__table tr td::before {
	display: none;
}

/*
 * The amounts and their headings stay at the right. WooCommerce sets every
 * cell left from 48em, and Motta sets the totals' cells left below it
 * (.woocommerce-cart .cart-collaterals table.shop_table tr td, (0,3,3)); the
 * second selector here is one class heavier than that.
 */
.shop_table_responsive .tt-gst-note__table thead th,
.shop_table_responsive .tt-gst-note__table tbody td,
.woocommerce-cart .cart-collaterals table.shop_table .tt-gst-note__table tbody td {
	text-align: right;
}

.shop_table_responsive .tt-gst-note__table thead th:first-child,
.shop_table_responsive .tt-gst-note__table tbody th {
	text-align: left;
}

/* ------------------------------------------- inside the checkout's review table */

/*
 * The same reach, from the theme's side. Motta styles the review table's rows
 * with descendant selectors -- `form.checkout table.shop_table tbody td
 * { padding: 5px 0 }` and a rule under `tbody` -- and this table's rows are
 * descendants of that table too: the two amounts lost the gap between them and
 * ran together, and a rule appeared under the last row. `.tt-gst-note` in the
 * selector makes these (0,3,1), over Motta's (0,2,4).
 */
.shop_table .tt-gst-note .tt-gst-note__table tbody {
	padding: 0;
	border: 0;
}

.shop_table .tt-gst-note .tt-gst-note__table th,
.shop_table .tt-gst-note .tt-gst-note__table td {
	padding: 3px 0 3px 12px;
	border: 0;
	font-size: inherit;
}

.shop_table .tt-gst-note .tt-gst-note__table th:first-child,
.shop_table .tt-gst-note .tt-gst-note__table td:first-child {
	padding-left: 0;
}