/*
Theme Name: Motta Child Theme
Theme URI: http://motta.uix.store/
Author: UIX Themes
Author URI: http://uix.store
Description: A fully responsive Premium WordPress Theme with a pixel perfect design and extensive functionality
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: motta
Tags: one-column, two-columns, right-sidebar, custom-colors, custom-menu, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Template: motta
*/

/* Tapper Brews entry point: mark the bottom-bar item while the customer is in
   the cafe. No other navigation bar item has an active state, so this is the
   only rule the feature needs -- layout comes from the shared icon class. */
.motta-mobile-navigation-bar__icon.tapper-cafe-icon.is-active {
	color: var(--mt-color__primary);
}

/* The cafe item in the bottom bar is a brand badge rather than one of Motta's
   monochrome glyphs, so it needs the sizing and label spacing that
   .motta-svg-icon would otherwise have given it. */
.motta-mobile-navigation-bar__icon.tapper-cafe-icon img {
	width: 20px;
	height: 20px;
}

.motta-mobile-navigation-bar__icon.tapper-cafe-icon img + em {
	margin-top: 5px;
}

/* The page title carried a 54px top margin from `.page-header .page-header__title`
   in the parent theme, on top of the 12px margin and 16px padding its own
   wrapper already contributes. Scoped past the blog, which sets its own 35px
   deliberately (`.motta-blog-page` is a body class), so only the general case
   changes. */
body:not(.motta-blog-page) .page-header .page-header__title {
	margin-top: 0;
}

/* ---------------------------------------------------------------------------
 * The journal.
 *
 * The standfirst row on the posts index (inc/journal.php) and the empty-state
 * links (template-parts/content/content-none.php). Motta styles the post list
 * itself; these are the two pieces of chrome the parent has no rule for.
 * ------------------------------------------------------------------------- */

.journal-standfirst {
	margin: 0 0 2.5rem;
}

.journal-standfirst__intro {
	margin: 0 0 1rem;
	max-width: 46rem;
	font-size: 1.0625rem;
	line-height: 1.6;
}

.journal-standfirst__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.journal-standfirst__link {
	display: inline-block;
	padding: 0.375rem 0.875rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: 0.875rem;
	line-height: 1.4;
	text-decoration: none;
}

.journal-standfirst__link--brew {
	font-weight: 600;
}

.no-results__links {
	margin-top: 0.75rem;
}

/* ---------------------------------------------------------------------------
 * The homepage quick-access strip.
 *
 * Motta already draws these titles bold -- `.motta-image-box-grid__title` is
 * font-weight 700 in the parent sheet. The top strip does not get it because
 * the widget carries a per-widget typography override saved in Elementor,
 * `title_typography_font_weight: 500`, which the generated page stylesheet
 * emits four classes deep as
 *
 *     .elementor-4444 .elementor-element.elementor-element-91ab5fe
 *         .motta-image-box-grid__title
 *
 * so the parent rule never reaches it. Hence both the weight below and the
 * specificity needed to get past it. It is the only font-weight rule in play
 * for these titles and it has no responsive variant, so this needs no
 * breakpoint of its own.
 *
 * Anchored on the desktop scroll class rather than on the Elementor element
 * id: the id is database content that a rebuilt widget would change, while
 * `motta-image-box-grid-scroll--yes` is what tells the top strip apart from
 * the category grid lower down the page, which scrolls only at tablet and is
 * already 700.
 * ------------------------------------------------------------------------- */

body.home
	.elementor-widget-motta-image-box-grid.motta-image-box-grid-scroll--yes
	.motta-image-box-grid__title {
	font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * The cart totals on a phone.
 *
 * Below 768px WooCommerce's responsive table hides every `tbody th`
 * (`table.shop_table_responsive tbody th { display: none }`) and puts the label
 * back through `td::before { content: attr(data-title) }`. Motta then switches
 * that `::before` off for the whole cart-collaterals table and restores the
 * label properly -- as a flex row with the `th` shown again -- for exactly two
 * rows: `.cart-subtotal` and `.order-total`.
 *
 * Every other row in that table is left with neither. The delivery fee and any
 * discount render as a bare left-aligned amount with nothing saying what it is.
 * On this store `.tax-rate` and `.tax-total` do not render at all, because
 * cart-totals.php only emits them when prices display tax-exclusive, but they
 * are named here so the row is labelled if that setting ever changes.
 *
 * Tapper Brews carts reach the checkout without passing the cart page
 * (TC_Checkout_Handler::maybe_skip_cart), so this is an Across India bug.
 *
 * `.tt-gst-note` is deliberately not in this list: it is a single `colspan=2`
 * cell, and making it a flex row would stretch that one cell into a flex item.
 * ------------------------------------------------------------------------- */

@media (max-width: 767px) {

	.woocommerce-cart .cart-collaterals table.shop_table tbody tr.fee,
	.woocommerce-cart .cart-collaterals table.shop_table tbody tr.cart-discount,
	.woocommerce-cart .cart-collaterals table.shop_table tbody tr.tax-rate,
	.woocommerce-cart .cart-collaterals table.shop_table tbody tr.tax-total {
		display: flex;
		justify-content: space-between;
		gap: 16px;
	}

	.woocommerce-cart .cart-collaterals table.shop_table tbody tr.fee th,
	.woocommerce-cart .cart-collaterals table.shop_table tbody tr.cart-discount th,
	.woocommerce-cart .cart-collaterals table.shop_table tbody tr.tax-rate th,
	.woocommerce-cart .cart-collaterals table.shop_table tbody tr.tax-total th {
		display: block;
	}

	/* The label wraps; the amount never does. */
	.woocommerce-cart .cart-collaterals table.shop_table tbody tr.fee td,
	.woocommerce-cart .cart-collaterals table.shop_table tbody tr.cart-discount td,
	.woocommerce-cart .cart-collaterals table.shop_table tbody tr.tax-rate td,
	.woocommerce-cart .cart-collaterals table.shop_table tbody tr.tax-total td {
		flex: 0 0 auto;
		text-align: right;
		white-space: nowrap;
	}
}

/* ---------------------------------------------------------------------------
 * "Order updates come on WhatsApp · Turn off" on a Tapper Brews checkout
 * (TC_WA_Optin::render_field()). A sentence and a text button, not a form
 * row: the button is reset from Motta's 160px button slab to read as a link.
 * ------------------------------------------------------------------------- */

.woocommerce-checkout .tc-wa-line {
	margin: 0 0 16px;
	font-size: 14px;
	color: #413E3C;
}

.woocommerce-checkout .tc-wa-line button.tc-wa-line__toggle {
	display: inline;
	width: auto;
	min-width: 0;
	height: auto;
	min-height: 0;
	margin: 0 0 0 4px;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: #29594B;
	font: inherit;
	line-height: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.woocommerce-checkout .tc-wa-line button.tc-wa-line__toggle:focus-visible {
	outline: 2px solid #29594B;
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Section tabs.
 *
 * The header's second row: Coffee, Tea, Cocoa, Gear & Accessories
 * (inc/section-tabs.php). Colours come from the header's own variables, which
 * Motta sets from the header background, so the tabs follow it if it changes.
 * On phones the same row sits under the header and scrolls sideways.
 * ------------------------------------------------------------------------- */

.tt-section-tabs {
	width: 100%;
	height: 100%;
}

.tt-section-tabs__list {
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 2.5rem;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tt-section-tabs__item {
	display: flex;
	margin: 0;
}

.tt-section-tabs__link {
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 2px;
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	color: var(--mt-header-sub-text-color);
	transition: color 0.2s;
}

.tt-section-tabs__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	border-radius: 2px 2px 0 0;
	background-color: currentColor;
	transform: scaleX(0);
	transition: transform 0.2s;
}

.tt-section-tabs__link:hover,
.tt-section-tabs__link:focus-visible,
.tt-section-tabs__item.is-active .tt-section-tabs__link {
	color: var(--mt-header-color);
}

.tt-section-tabs__item.is-active .tt-section-tabs__link {
	font-weight: 600;
}

.tt-section-tabs__item.is-active .tt-section-tabs__link::after {
	transform: scaleX(1);
}

.header-mobile-bottom .header-center-items {
	width: 100%;
	padding: 0;
	border-top: 1px solid var(--mt-header-border-color);
}

.header-mobile-bottom .header-center-items > * {
	margin: 0;
}

.header-mobile-bottom .site-header__container {
	padding-left: 0;
	padding-right: 0;
}

.header-mobile-bottom .tt-section-tabs__list {
	justify-content: flex-start;
	gap: 1.75rem;
	padding: 0 16px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.header-mobile-bottom .tt-section-tabs__list::-webkit-scrollbar {
	display: none;
}

.header-mobile-bottom .tt-section-tabs__link {
	min-height: 44px;
	font-size: 0.875rem;
}

/* A section page is blank for now: just its heading. */
.tt-section-page__main {
	min-height: 40vh;
	padding: 2.5rem 0;
}

.tt-section-page__title {
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * Coffee navigation (inc/coffee-nav.php).
 *
 * On coffee pages the header's second row holds the four coffee destinations
 * (in the section tabs' look),
 * the phone gets a bar of its own and the hamburger short coffee lists, and
 * the footer is ours. Brand colours as on the Cafe pages (home.css): green
 * #29594B, amber #F3AA22, green-soft #E4EEE9, cream-deep #F5EFE3.
 * ------------------------------------------------------------------------- */

/* The section tabs beside the logo, when a second section is on: pills on the
   main row rather than underlined tabs on their own. */
.tt-section-tabs--inline {
	height: auto;
	margin-left: 2rem;
}

.tt-section-tabs--inline .tt-section-tabs__list {
	justify-content: flex-start;
	align-items: center;
	gap: 0.25rem;
}

.tt-section-tabs--inline .tt-section-tabs__link {
	min-height: 40px;
	padding: 0 1rem;
	border-radius: 999px;
}

.tt-section-tabs--inline .tt-section-tabs__link::after {
	display: none;
}

.tt-section-tabs--inline .tt-section-tabs__item.is-active .tt-section-tabs__link {
	background-color: #E4EEE9;
	color: #1F463B;
}

/* The phone bar: mark where you are. Motta's own items have no active state;
   the Cafe badge item above has its own rule. */
.motta-mobile-navigation-bar__icon.tt-coffee-bar__item.is-active,
.motta-mobile-navigation-bar__icon.home-icon.is-active {
	color: #29594B;
	font-weight: 600;
}

.motta-mobile-navigation-bar__icon.tt-coffee-bar__item {
	white-space: nowrap;
}

/* Equal slots, not equal gaps: Motta spaces the bar with space-between, so
   each icon's centre moved with its label's width. One share each puts every
   icon at the centre of its own slot. Appearance -> Tapper UI -> Phone bottom
   bar can turn it off (the body class goes). */
.tt-bar-even .motta-mobile-navigation-bar > .motta-mobile-navigation-bar__icon {
	flex: 1 1 0;
	min-width: 0;
	text-align: center;
}

/* Coffee and Roasteries wear the front page's section icons (the cup, the
   bean in its flame). Sized here rather than by home.css, which not every
   coffee page loads; the lines take the bar's colour, so the active item's
   green shows, over home.css's black. The flame a size up, as on the page. */
.tt-coffee-bar__icon {
	display: block;
	line-height: 1;
}

.tt-coffee-bar__icon .tc-home__title-icon {
	display: block;
	width: 22px;
	height: 22px;
	color: currentColor;
}

/* Their amber and pale green, stated here. home.css paints them with
   var(--tc-amber) / var(--tc-green-soft), tokens it defines only on
   body.tc-home-page and .tc-cards. On a page that loads home.css without
   either -- the finder at /near-me/ -- the variable is undefined, the fill
   rule is invalid, and the icon falls back to the SVG's fill="none": no
   colour at all. */
.tt-coffee-bar__icon .tc-home__title-icon-amber {
	fill: #F3AA22;
}

.tt-coffee-bar__icon .tc-home__title-icon-bean {
	fill: #E4EEE9;
}

.tt-coffee-bar__icon--roasters .tc-home__title-icon {
	width: 24px;
	height: 24px;
	margin: -1px 0;
}

.tt-coffee-bar__icon + em {
	margin-top: 4px;
}

/* The seller dashboard's bar (inc/dashboard-nav.php) borrows the coffee bar's
   items; all it adds is a count, on Live, of the orders waiting there. Ink
   with white, as the dashboard's other counts are, sat on the icon's corner. */
.tt-dash-bar__item {
	position: relative;
}

.tt-dash-bar__count {
	position: absolute;
	top: 4px;
	left: calc(50% + 6px);
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 999px;
	background-color: #121111;
	color: #FFFFFF;
	font-size: 11px;
	font-style: normal;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

/* The hamburger's coffee lists: a quiet label over rows that borrow the
   account list's markup, and so its spacing. */
.tt-coffee-menu__title {
	margin: 0 0 0.25rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #6B6660;
}

/* The footer. */
.tt-coffee-footer {
	background-color: #F5EFE3;
	color: #121111;
}

/* As many link columns as Appearance -> Tapper UI -> Footer leaves on (the
   template sets --tt-footer-cols; four by default), after a wider brand
   column unless that is switched off. */
.tt-coffee-footer__inner {
	display: grid;
	grid-template-columns: 1.4fr repeat(var(--tt-footer-cols, 4), minmax(0, 1fr));
	gap: 2.5rem;
	padding-top: 4rem;
	padding-bottom: 3rem;
}

.tt-coffee-footer__inner--no-brand {
	grid-template-columns: repeat(var(--tt-footer-cols, 4), minmax(0, 1fr));
}

.tt-coffee-footer__logo {
	display: inline-block;
}

.tt-coffee-footer__logo img {
	display: block;
	width: auto;
	height: 52px;
}

.tt-coffee-footer__tagline {
	max-width: 15rem;
	margin: 1rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: #413E3C;
}

.tt-coffee-footer__title {
	margin: 0 0 0.875rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #121111;
}

.tt-coffee-footer__links,
.tt-coffee-footer__legal-links {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tt-coffee-footer__links li + li {
	margin-top: 0.625rem;
}

.tt-coffee-footer a {
	color: #413E3C;
	text-decoration: none;
}

.tt-coffee-footer a:hover,
.tt-coffee-footer a:focus-visible {
	color: #29594B;
	text-decoration: underline;
}

.tt-coffee-footer__legal {
	border-top: 1px solid rgba(18, 17, 17, 0.12);
}

.tt-coffee-footer__legal-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.75rem;
	min-height: 4.5rem;
	font-size: 0.875rem;
	color: #6B6660;
}

.tt-coffee-footer__copy {
	flex-grow: 1;
}

.tt-coffee-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
}

@media (max-width: 1024px) {
	.tt-coffee-footer__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2rem 1.5rem;
		padding-top: 2.5rem;
		padding-bottom: 2rem;
	}

	.tt-coffee-footer__brand {
		grid-column: 1 / -1;
	}

	.tt-coffee-footer__links a,
	.tt-coffee-footer__legal-links a {
		display: inline-flex;
		align-items: center;
		min-height: 36px;
	}

	.tt-coffee-footer__links li + li {
		margin-top: 0.25rem;
	}

	.tt-coffee-footer__legal-inner {
		padding-top: 1rem;
		padding-bottom: 1rem;
	}
}

/* The secondary header's links in white (owner, 2026-09-30), on every page
   that row is drawn -- the coffee links and the section tabs share it. The
   page you are on keeps its weight and its underline, which is currentColor,
   so white too. Scoped to .header-bottom: the phone's own row is
   .header-mobile-bottom and keeps the header's colours. */
.site-header .header-bottom .tt-section-tabs__link,
.site-header .header-bottom .tt-section-tabs__link:hover,
.site-header .header-bottom .tt-section-tabs__link:focus-visible,
.site-header .header-bottom .tt-section-tabs__item.is-active .tt-section-tabs__link {
	color: #FFFFFF;
}

.tt-coffee-chrome .motta-mobile-navigation-bar__icon:not(.is-active) {
	color: #767069;
}

/* The footer sits at the bottom of the screen when the page is shorter than
   it (owner, 2026-10-01). Motta's `.site` is already `min-height: 100vh`, but
   nothing in it grows, so the spare height fell below the footer. The wrapper
   becomes a column and the content takes the slack -- the content rather than
   a margin on #site-footer, because Elementor's footer location replaces that
   element. `dvh` after `vh`: on a phone 100vh is taller than the screen while
   the URL bar shows, which would put the footer just under the fold. */
.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

.site > #site-content {
	flex: 1 0 auto;
}

/* The toolbar pushes <html> down by its own height, which made every short
   page scroll by exactly that much for a signed-in admin. 782px is where
   WordPress swaps the 32px toolbar for the 46px one. */
.admin-bar .site {
	min-height: calc(100vh - 32px);
	min-height: calc(100dvh - 32px);
}

@media screen and (max-width: 782px) {
	.admin-bar .site {
		min-height: calc(100vh - 46px);
		min-height: calc(100dvh - 46px);
	}
}

/* The 404 (404.php, storefront review 2026-10-08): centred, two ways back to
   coffee. Buttons stack on a phone so neither label is cut off at 390px. */
.tt-not-found {
	max-width: 36rem;
	margin: 0 auto;
	padding: clamp(3rem, 10vw, 6rem) 16px;
	text-align: center;
}

.tt-not-found__code {
	margin: 0 0 0.5rem;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: #767069;
}

.tt-not-found__title {
	margin: 0 0 0.75rem;
	font-size: clamp(1.75rem, 6vw, 2.5rem);
	line-height: 1.15;
}

.tt-not-found__text {
	margin: 0 0 1.75rem;
	color: #4A4540;
}

.tt-not-found__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
	margin: 0;
}

.tt-not-found__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 1.5rem;
	border: 1px solid #1F1B16;
	border-radius: 999px;
	color: #1F1B16;
	font-weight: 600;
	text-decoration: none;
}

.tt-not-found__button--primary {
	background: #1F1B16;
	color: #FFFFFF;
}

@media (max-width: 480px) {
	.tt-not-found__button {
		flex: 1 1 100%;
	}
}