/**
 * Quote request page — The Tile Mob.
 * Palette and type from the 2021 brand sheet: charcoal #333, red #EB1B2E,
 * light grey #EFEFEF, Lora for display, Proxima Nova for everything else.
 */

.tmq-quote{--tmq-charcoal:#333;--tmq-red:#EB1B2E;--tmq-grey:#EFEFEF;--tmq-line:#DEDEDE;--tmq-muted:#7A7A7A}

.tmq-empty{color:#7A7A7A}

.tmq-table{width:100%;border-collapse:collapse;font-size:15px;margin:0}
.tmq-table thead th{
	text-align:left;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
	color:var(--tmq-muted);font-weight:700;padding:0 10px 8px;border-bottom:1px solid var(--tmq-line);background:none
}
.tmq-table td{padding:14px 10px;border-bottom:1px solid var(--tmq-grey);vertical-align:top}
.tmq-col-qty,.tmq-col-unit,.tmq-col-line{text-align:right;white-space:nowrap}
.tmq-col-remove{width:34px;text-align:right}

/* group headings — the whole point of the layout */
.tmq-grouphead td{
	background:var(--tmq-grey);font-size:11px;letter-spacing:.11em;text-transform:uppercase;
	font-weight:700;padding:9px 10px;border-bottom:1px solid var(--tmq-line);color:var(--tmq-charcoal)
}
.tmq-grouphead .tmq-hint{
	float:right;text-transform:none;letter-spacing:0;font-weight:400;color:var(--tmq-muted);font-size:12px
}
.tmq-grouphead--sale td{box-shadow:inset 3px 0 0 var(--tmq-red)}

.tmq-item{display:flex;gap:12px;align-items:flex-start}
.tmq-thumb{flex:0 0 46px;line-height:0}
.tmq-thumb img{width:46px;height:46px;object-fit:cover;border-radius:2px;display:block}
.tmq-item-text{min-width:0}
.tmq-name{display:block;font-weight:700;line-height:1.35;color:var(--tmq-charcoal);text-decoration:none}
.tmq-name:hover{color:var(--tmq-red)}
.tmq-sku{display:block;color:var(--tmq-muted);font-size:12px;letter-spacing:.04em}
.tmq-note{display:block;color:var(--tmq-muted);font-size:12px;margin-top:3px}

.tmq-qty{display:block;font-weight:700}
.tmq-qty-input{width:70px;margin-top:6px;text-align:right;border:1px solid var(--tmq-line);border-radius:0;padding:4px 6px}

.tmq-price{font-weight:700;white-space:nowrap}
.tmq-suffix{display:block;font-weight:400;color:var(--tmq-muted);font-size:12px}
.tmq-onreq{color:var(--tmq-muted);font-style:italic;white-space:nowrap}
.tmq-remove{color:var(--tmq-red);text-decoration:none;font-size:18px;line-height:1}

.tmq-row--sample .tmq-thumb img{opacity:.9}
.tmq-samplefee td{color:var(--tmq-muted);font-size:13px;text-align:right}
.tmq-samplefee .tmq-col-line{color:var(--tmq-charcoal)}
.tmq-nudge{color:var(--tmq-red);font-weight:700}

.tmq-foot{display:flex;justify-content:flex-end;margin-top:18px;padding-top:16px;border-top:2px solid var(--tmq-charcoal)}
.tmq-totals{font-size:15px;min-width:330px;border-collapse:collapse}
.tmq-totals td{padding:5px 0;border:0}
.tmq-totals .tmq-col-line{font-weight:700;padding-left:26px}
.tmq-sofar td{font-size:17px;padding-top:10px;border-top:1px solid var(--tmq-line)}

.tmq-actions{margin-top:22px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.tmq-update{
	background:#fff;color:var(--tmq-charcoal);border:1px solid var(--tmq-charcoal);border-radius:0;
	font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;padding:12px 22px;cursor:pointer
}
.tmq-update:hover{background:var(--tmq-red);border-color:var(--tmq-red);color:#fff}
.tmq-reassure{color:var(--tmq-muted);font-size:13px;margin-left:auto}

/* the sample button, wherever it appears */
.tmq-sample-btn{
	background:none;border:0;padding:0;color:var(--tmq-red);font-weight:700;font-size:14px;
	cursor:pointer;text-decoration:underline
}
.tmq-sample-btn[disabled]{color:var(--tmq-muted);text-decoration:none;cursor:default}
.tmq-sample-terms{color:var(--tmq-muted);font-size:13px;margin:8px 0 0}

@media (max-width:782px){
	.tmq-table thead{display:none}
	.tmq-table tr{display:block;border-bottom:1px solid var(--tmq-line)}
	.tmq-table td{display:flex;justify-content:space-between;gap:14px;border:0;padding:6px 0}
	.tmq-table td::before{content:attr(data-title);color:var(--tmq-muted);font-size:12px}
	.tmq-table td.tmq-col-item::before{content:none}
	.tmq-grouphead td{display:block;padding:9px 10px}
	.tmq-grouphead .tmq-hint{float:none;display:block}
	.tmq-foot{justify-content:stretch}
	.tmq-totals{min-width:0;width:100%}
}

/* add-to-quote control on the product page */
.tmq-add{margin:18px 0;padding:16px 0;border-top:1px solid var(--tmq-line,#DEDEDE);border-bottom:1px solid var(--tmq-line,#DEDEDE)}
.tmq-add-label{display:block;font-weight:700;font-size:14px;margin-bottom:8px}
.tmq-add-row{display:flex;align-items:center;gap:10px;flex-wrap:nowrap}
/* Hello Elementor sets input{width:100%}, which pushes the unit and the button
   onto their own lines and leaves the field looking like a search bar. */
.tmq-add-qty{
	width:110px!important;max-width:110px!important;flex:0 0 110px;
	padding:10px;border:1px solid #DEDEDE;border-radius:0;font-size:15px;margin:0
}
.tmq-add-unit{color:#7A7A7A;font-size:14px;flex:0 0 auto}
.tmq-add-btn{flex:0 0 auto;white-space:nowrap}
.tmq-add-btn{
	background:#333;color:#fff;border:0;border-radius:0;font-weight:700;font-size:12px;
	letter-spacing:.1em;text-transform:uppercase;padding:12px 22px;cursor:pointer
}
.tmq-add-btn:hover{background:#EB1B2E}
.tmq-add-hint{margin:8px 0 0;color:#7A7A7A;font-size:13px;min-height:1.2em}
.tmq-add-hint strong{color:#333}
.tmq-availability{color:#EB1B2E;font-size:14px;margin:6px 0 0}

/* size sits with the description — several ranges share a name across sizes */
.tmq-size{display:inline-block;margin-left:6px;padding:1px 6px;background:#EFEFEF;color:#333;
	border-radius:2px;font-size:11px;font-weight:700;letter-spacing:.02em;vertical-align:1px}
.tmq-grouphead--piece td{box-shadow:inset 3px 0 0 #7A7A7A}

/* temporary: ERP box maths, for fact-checking */
.tmq-boxmaths{display:block;margin-top:3px;font-size:11px;color:#B0641F;font-family:Consolas,monospace}


/* And give the × a hit area worth aiming at. */
.tmq-remove{display:inline-block;padding:4px 8px;line-height:1;position:relative;z-index:1}

/* While the table is being re-rendered after an add from elsewhere. */
.tmq-root.tmq-refreshing{opacity:.55;transition:opacity .15s ease}

/* --- tmq-brand-block ------------------------------------------------------
   Brand styling for this page, brought across from the sandbox file that used
   to hold it. Scoped to our own wrapper and to the form on this page, rather
   than the site-wide !important sweep it replaces — the old rules reached into
   every table and every button on the site.
   ------------------------------------------------------------------------ */
.tmq-root table.tmq-table thead th{background:#242424;color:#fff;font-family:Lora,Georgia,serif;border-radius:0}
.tmq-root table.tmq-table,.tmq-root table.tmq-table td,.tmq-root table.tmq-table th{border-color:#ece8e1;border-radius:0}
.tmq-root input,.tmq-root textarea,.tmq-root select{border-radius:0}
.tmq-root .tmq-remove{color:#EB1B2E}
.tmq-root button,.tmq-root input[type=submit]{border-radius:0}
.tmq-root .tmq-submit,.tmq-root .tmq-update{background:#EB1B2E;border:1.5px solid #EB1B2E;color:#fff;box-shadow:none}
.tmq-root .tmq-update{background:#fff;color:#EB1B2E}

/* The Elementor form that carries the contact fields sits outside our wrapper,
   so it is matched on the quote page template instead. */
.page-id-8341 .elementor-form .elementor-button,
.page-id-8341 .elementor-field-group input,
.page-id-8341 .elementor-field-group textarea{border-radius:0}
.page-id-8341 .elementor-form .elementor-button{background:#EB1B2E;color:#fff;border:1.5px solid #EB1B2E;box-shadow:none}
/* Once the request is lodged, the contact form has nothing left to do.
   Targets the container this plugin created, not every form on the page. */
.tmq-quote-sent .elementor-element-tmqformwrap{display:none}

/* Header quote entry point. Lives in the site header on every page, so it
   states its own type rather than inheriting whatever the header widget
   around it happens to set. */
.tmq-head{display:inline-flex;align-items:center;color:#333333;text-decoration:none;font-family:'Mulish',-apple-system,'Segoe UI',sans-serif;font-size:15px;line-height:1;transition:color .18s ease}
.tmq-head:hover,.tmq-head:focus{color:#EB1B2E;text-decoration:none}
.tmq-head-inner{display:inline-flex;align-items:center;gap:9px}
.tmq-head-icon{flex:0 0 auto;display:block}
.tmq-head-count{display:inline-flex;align-items:center;justify-content:center;min-width:21px;height:21px;padding:0 6px;border-radius:999px;background:#EB1B2E;color:#ffffff;font-size:12px;font-weight:700;line-height:1}
.tmq-head-count--empty{background:#c9c9c9}
@media(max-width:940px){.tmq-head-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}

.tmq-qty-input.tmq-at-cap{border-color:#c8102e;box-shadow:0 0 0 2px rgba(200,16,46,.12);}

.tmq-qty-field{display:inline-flex;align-items:center;gap:6px;}
.tmq-qty-unit{color:#6b6459;font-size:.85em;}

/* ==========================================================================
   Mobile: the quote table becomes a stack of cards

   WooCommerce's `shop_table_responsive` turns every cell into its own row with
   its column name printed beside it, which on this table meant one tile filled
   most of a phone screen with the words Quantity, Unit price and Line repeated
   down the page and a stray remove link on a line of its own. A quote line only
   needs to answer three questions -- what is it, how much, what does it come to
   -- so each row is laid out as a card instead: the tile up top with its remove
   control, then one strip carrying the quantity, the unit price and the line.
   ========================================================================== */
@media (max-width:782px){

	.tmq-quote .tmq-table,
	.tmq-quote .tmq-table tbody{display:block;width:100%;border:0}
	.tmq-quote .tmq-table thead{display:none}

	/* Group bands keep their full width. */
	.tmq-quote .tmq-table tr.tmq-grouphead{display:block;border:0}
	.tmq-quote .tmq-table tr.tmq-grouphead td{display:block!important;padding:10px 12px!important;text-align:left!important}
	.tmq-quote .tmq-table tr.tmq-grouphead td::before{content:none!important}
	.tmq-quote .tmq-grouphead .tmq-hint{display:block;float:none;margin:2px 0 0}

	/* One line, one card. */
	.tmq-quote .tmq-table tr.tmq-row{
		display:grid;
		grid-template-columns:1fr auto auto;
		grid-template-areas:"item item remove" "qty unit line";
		column-gap:12px;
		row-gap:12px;
		align-items:center;
		padding:14px 12px;
		border-bottom:1px solid #ece8e1
	}
	.tmq-quote .tmq-table tr.tmq-row td{
		display:block!important;width:auto;min-width:0;
		padding:0!important;border:0!important;text-align:left!important
	}
	.tmq-quote .tmq-table tr.tmq-row td::before{content:none!important;display:none!important}

	.tmq-quote .tmq-table tr.tmq-row .tmq-col-item{grid-area:item}
	.tmq-quote .tmq-table tr.tmq-row .tmq-col-remove{grid-area:remove;align-self:start}
	.tmq-quote .tmq-table tr.tmq-row .tmq-col-qty{grid-area:qty}
	.tmq-quote .tmq-table tr.tmq-row .tmq-col-unit{grid-area:unit;text-align:right!important}
	.tmq-quote .tmq-table tr.tmq-row .tmq-col-line{grid-area:line;text-align:right!important}

	/* The tile itself. */
	.tmq-quote .tmq-item{display:flex;gap:12px;align-items:flex-start}
	.tmq-quote .tmq-thumb{flex:0 0 54px;width:54px}
	.tmq-quote .tmq-thumb img{display:block;width:54px;height:54px;object-fit:cover}
	.tmq-quote .tmq-item-text{min-width:0}
	.tmq-quote .tmq-name{display:block;font-size:14px;line-height:1.35}
	.tmq-quote .tmq-sku,
	.tmq-quote .tmq-note{display:block;font-size:12px;line-height:1.5}
	.tmq-quote .tmq-size{margin:0 0 0 6px}

	/* The money strip. */
	.tmq-quote .tmq-qty-field{display:inline-flex;align-items:center;gap:6px}
	.tmq-quote .tmq-qty-input{width:88px!important;max-width:88px!important;min-height:42px;padding:0 10px;text-align:right}
	.tmq-quote .tmq-col-unit .tmq-price,
	.tmq-quote .tmq-col-unit .tmq-onreq{font-size:13px}
	.tmq-quote .tmq-col-unit .tmq-suffix{display:inline;margin-left:3px}
	.tmq-quote .tmq-col-line .tmq-price{font-weight:700;white-space:nowrap}

	/* A remove control worth aiming a thumb at, in the corner it belongs in. */
	.tmq-quote .tmq-remove{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;font-size:22px;line-height:1}

	/* The swatch fee reads as a label and a figure, not four empty cells. */
	.tmq-quote .tmq-table tr.tmq-samplefee{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px;border-bottom:1px solid #ece8e1}
	.tmq-quote .tmq-table tr.tmq-samplefee td{display:block!important;padding:0!important;border:0!important;text-align:left!important}
	.tmq-quote .tmq-table tr.tmq-samplefee td:empty{display:none!important}
	.tmq-quote .tmq-table tr.tmq-samplefee td::before{content:none!important}
	.tmq-quote .tmq-table tr.tmq-samplefee .tmq-col-line{text-align:right!important;white-space:nowrap}

	/* Totals and actions run the full width rather than hugging the right. */
	.tmq-quote .tmq-foot{justify-content:stretch}
	.tmq-quote .tmq-totals{min-width:0;width:100%}
	.tmq-quote .tmq-actions{flex-direction:column;align-items:stretch;gap:12px}
	.tmq-quote .tmq-update{width:100%}
	.tmq-quote .tmq-reassure{text-align:left}
}

@media (max-width:430px){
	/* Below this the three figures stop fitting on one line, so the unit price
	   moves under the quantity and the line total keeps the right-hand edge. */
	.tmq-quote .tmq-table tr.tmq-row{grid-template-areas:"item item remove" "qty line line" "unit unit unit";row-gap:8px}
	.tmq-quote .tmq-table tr.tmq-row .tmq-col-unit{text-align:left!important;font-size:12px}
	.tmq-quote .tmq-name{font-size:13px}
}

@media (max-width:782px){
	/* WooCommerce stripes alternate rows by shading the cells. Inside a card
	   that reads as grey blocks landing at random behind half the content. */
	.tmq-quote .tmq-table tr.tmq-row,
	.tmq-quote .tmq-table tr.tmq-row td,
	.tmq-quote .tmq-table tr.tmq-samplefee,
	.tmq-quote .tmq-table tr.tmq-samplefee td{background:transparent!important}

	/* Tiles sold by the piece print the count as well as the box. Beside it,
	   not stacked above it, or the card grows a line for no new information. */
	.tmq-quote .tmq-table tr.tmq-row .tmq-col-qty{display:flex!important;align-items:center;gap:8px;flex-wrap:wrap}
	.tmq-quote .tmq-table tr.tmq-row .tmq-col-qty .tmq-qty{order:2;font-size:12px;color:#7A7A7A}
}

@media (max-width:782px){
	/* A swatch is always one swatch, so the bare "1" under its name is a line
	   of card height spent saying nothing. The group band already names them. */
	.tmq-quote .tmq-table tr.tmq-row--sample .tmq-col-qty:not(:has(input)){display:none!important}
	.tmq-quote .tmq-reassure{text-align:left!important;font-size:12px;line-height:1.5}
}

/* =============================================================
   tmq-confirm type scale — match /request-quote/ exactly.
   The confirmation page had no styles of its own, so it inherited
   whatever the theme gave it and read as a different page. The kicker,
   H1 and 1160px container are Elementor widgets mirrored from
   /request-quote/; these are the pieces the shortcode renders.
   1 Sep 2026.
   ============================================================= */
.tmq-confirm .tmq-ref{margin:0 0 26px;font-size:16px;line-height:1.7;color:#6B6B6B}
.tmq-confirm .tmq-ref strong{color:#333333;font-weight:700}
.tmq-confirm .tmq-next{margin:0 0 30px}
.tmq-confirm .tmq-next h3,.tmq-confirm .tmq-summary-head{margin:30px 0 14px;font-family:"Lora",Georgia,serif;font-size:22px;font-weight:600;line-height:1.3;color:#333333}
.tmq-confirm .tmq-next h3{margin-top:0}
.tmq-confirm .tmq-next ol{margin:0;padding-left:22px}
.tmq-confirm .tmq-next ol li{margin:0 0 8px;font-size:16px;line-height:1.7;color:#4A4A4A}
.tmq-confirm .tmq-reassure{margin:16px 0 0;margin-left:0;font-size:15px;line-height:1.7;color:#6B6B6B;text-align:left}
.tmq-confirm .tmq-keepgoing{display:inline-block;margin:8px 0 0;font-size:15px;font-weight:700;color:#C4121F}
@media(max-width:600px){
	.tmq-confirm .tmq-next h3,.tmq-confirm .tmq-summary-head{font-size:19px}
	.tmq-confirm .tmq-ref,.tmq-confirm .tmq-next ol li{font-size:15px}
}


/* --- tmq-gutter ----------------------------------------------------------
   The quote pages are made of full-bleed blocks (dark table head, red submit),
   so at the shared 1320px page width they ran hard to the edge while every
   other page sat inside its own text margins. Inset the inner content rather
   than narrowing the container, so the page still lines up with About and
   Contact. 31 Aug 2026.
   ------------------------------------------------------------------------ */
.elementor-element-tmqbasket > .e-con-inner,
.elementor-element-tmqformwrap > .e-con-inner,
.elementor-element-tmqconfirm > .e-con-inner{padding-inline:32px !important}

@media(max-width:767px){
	.elementor-element-tmqbasket > .e-con-inner,
	.elementor-element-tmqformwrap > .e-con-inner,
	.elementor-element-tmqconfirm > .e-con-inner{padding-inline:0 !important}
}

/* Terms acceptance: the sentence belongs on one line beside the checkbox. */
.elementor-element-tmqform .elementor-field-type-acceptance .elementor-field-subgroup{display:block}
.elementor-element-tmqform .elementor-field-type-acceptance .elementor-field-option{display:flex;align-items:flex-start;gap:10px;width:100%}
.elementor-element-tmqform .elementor-field-type-acceptance .elementor-field-option input[type=checkbox]{flex:0 0 auto;margin-top:3px}
.elementor-element-tmqform .elementor-field-type-acceptance .elementor-field-option label{flex:1 1 auto;max-width:none;margin:0}

/* Keep browsing tiles reads as the next step, so give it a button. */
.tmq-confirm .tmq-keepgoing,.tmq-thanks .tmq-keepgoing{
	display:inline-block;margin-top:10px;background:#EB1B2E;border:1.5px solid #EB1B2E;
	color:#fff;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
	padding:14px 30px;text-decoration:none;border-radius:0;transition:background .15s,color .15s
}
.tmq-confirm .tmq-keepgoing:hover,.tmq-thanks .tmq-keepgoing:hover{background:#fff;color:#EB1B2E}


/* --- tmq-cell-gutter -----------------------------------------------------
   The quote table is full-bleed, so 10px of cell padding — and none at all on
   the totals — left the labels and the amounts sitting hard on the rules.
   16px reads as a margin without narrowing the columns. 31 Aug 2026.
   ------------------------------------------------------------------------ */
.tmq-table thead th,
.tmq-table td,
.tmq-grouphead td,
.tmq-totals td{padding-inline:16px}
.tmq-totals .tmq-col-line{padding-left:26px;padding-right:16px}

@media(max-width:767px){
	.tmq-table td,
	.tmq-totals td,
	.tmq-totals .tmq-col-line{padding-inline:0}
	.tmq-grouphead td{padding-inline:12px}
}

/* The head row carries a dark fill now, so its 0/8px padding read as text stuck
   to the top of the band. Centre it. 31 Aug 2026. */
.tmq-table thead th{padding-block:11px;vertical-align:middle;line-height:1.2}


/* --- tmq-qty-units --------------------------------------------------
   Customers think in m², not boxes, so the confirmation summary leads with the
   area and carries the box count underneath - the same two facts the emailed
   copy puts on one line. 14 Sep 2026.
   ------------------------------------------------------------------------ */
.tmq-confirm .tmq-col-qty{white-space:normal}
.tmq-confirm .tmq-qty-main{display:block}
.tmq-confirm .tmq-qty-sub{display:block;margin-top:2px;font-size:12px;line-height:1.5;color:#7A7A7A}