/* The shop floor: what a card says, how far it stands from its neighbour, and
   what a finger does to it.

   Everything here answers something he asked for on 06/09/2026, and nothing
   here restyles the shop: the type, the colours and the layout are the theme's
   own. Where a colour is introduced it is one colour - the red of a reduction. */

:root {
	--tb-sale: #c1272d;          /* the reduced price, and only that */
	--tb-in-stock: #3f7d4e;
}

/* ------------------------------------------------------------------ in stock

   He asked for the shop to say so on the product, not only on the product
   page. It is a line of text under the price, not a sticker over the
   photograph - the photograph is what sells the garment. */

.tb-stock {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	letter-spacing: .04em;
	line-height: 1.4;
	color: var(--tb-in-stock);
}

.tb-stock--out {
	color: #9a9a9a;
}

.tb-stock:before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-inline-end: 5px;
	border-radius: 50%;
	background: currentColor;
	vertical-align: middle;
}

/* the rails carry the same card; there the line would crowd a small tile */
.ts-product-wrapper.ts-slider .tb-stock {
	font-size: 10px;
}

/* ------------------------------------------------------------- the reduction

   A price that has come down is two numbers, and a customer has to be able to
   tell them apart at a glance: the old one struck and stepped back, the new one
   heavier and in red. */

.woocommerce .products .price del,
.woocommerce .products .price del .amount,
.woocommerce .products .price del bdi,
.woocommerce div.product p.price del,
.woocommerce div.product p.price del .amount,
.woocommerce div.product p.price del bdi,
.tb-na__price del {
	color: #9a9a9a;
	font-weight: 400;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
	opacity: 1;
	margin-inline-end: 8px;
}

.woocommerce .products .price ins,
.woocommerce .products .price ins .amount,
.woocommerce .products .price ins bdi,
.woocommerce .products .price ins .woocommerce-Price-currencySymbol,
.woocommerce div.product p.price ins,
.woocommerce div.product p.price ins .amount,
.woocommerce div.product p.price ins bdi,
.woocommerce div.product p.price ins .woocommerce-Price-currencySymbol,
.tb-na__price ins {
	/* the theme colours the amount inside, not the <ins> around it */
	color: var(--tb-sale);
	font-weight: 700;
	text-decoration: none;
	background: none;
}

.woocommerce div.product p.price ins {
	font-size: 1.08em;
}

/* the theme's own "-16%" flag, now that there is something to flag */
.woocommerce .products .onsale.percent {
	background: var(--tb-sale);
	color: #fff;
	/* the page runs right to left, which turns "-16%" into "16%-" */
	direction: ltr;
	unicode-bidi: isolate;
}

/* the same flag on the front page rail */
.tb-na__tag {
	direction: ltr;
	unicode-bidi: isolate;
}


/* --------------------------------------------------------- room between cards

   The grid is a flex row: the list is pulled 5px wider than its container and
   every card gives 5px back as padding, so the gutter between two cards was
   10px and they read as one block. Widening it means widening both halves at
   once, or the row stops filling the line - so the card is put back to half the
   row and the two numbers are moved together. */

@media (max-width: 767px) {

	.woocommerce .main-products.products,
	.woocommerce .products {
		margin-left: -10px;
		margin-right: -10px;
		row-gap: 46px;
	}

	.woocommerce .products > .product {
		width: 50%;
		padding-left: 10px;
		padding-right: 10px;
	}

	/* the name and the price sat right under the photograph */
	.woocommerce .products .meta-wrapper {
		padding-top: 4px;
	}

	/* the front page rail, same hand */
	.tb-na__track {
		gap: 18px;
	}
}

@media (min-width: 768px) {
	.woocommerce .products {
		row-gap: 54px;
	}
}

/* ------------------------------------------------- the sizes, on a phone

   The theme slides the size row up on :hover. A phone has no hover: it fakes
   one on the first touch and keeps it there, so the row would jump out from
   under a finger that was only scrolling past, print itself over the garment
   below and swallow the tap that was meant to open the product.

   On a coarse pointer the row stays down until something asks for it, and the
   only thing that asks is the button below. */

@media (pointer: coarse), (max-width: 1024px) {

	.products .variable-quick-add-to-cart .product-wrapper:hover .variable-product-quick-add-to-cart {
		transform: translate(0, calc(100% + 10px));
		z-index: 0;
	}

	.products .variable-quick-add-to-cart .product-wrapper.tb-sizes .variable-product-quick-add-to-cart {
		transform: translate(0, 0);
		z-index: 5;
		bottom: 54px;
	}

	/* on a phone the theme never gives the row a ground of its own */
	.products .variable-product-quick-add-to-cart:after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 0;
		background: var(--loobek-main-bg, #fff);
		opacity: .96;
	}

	/* the second copy the theme keeps beside the price stays where it is */
	.products .product-group-button-meta .variable-product-quick-add-to-cart {
		display: none;
	}

	/* Quick view is a pointer's button - it opens a window a phone has no room
	   for, and it sits exactly where the thumb lands */
	.products .product-group-button .button-in.quickshop {
		display: none;
	}

	/* tb-touch.css widened the quantity stepper to 132px so a fingertip could
	   hit "+", but its box stayed 100px, so the stepper hung 32px over the
	   add-to-cart button beside it and swallowed the tap. The box takes the
	   same width; the form is a flex row, so the button gives up the space. */
	.woocommerce div.product form.cart .quantity,
	.summary .quantity {
		width: 132px;
		min-width: 132px;
	}

	/* the row is a two column grid, 110px for the stepper and 300px for the
	   button - and the stepper is now 132px, so it hung over the button. The
	   columns are restated: the stepper gets its width, the button gets the
	   rest of the line. */
	.woocommerce div.product .woocommerce-variation-add-to-cart,
	.woocommerce div.product form.cart .variations_button {
		grid-template-columns: 132px minmax(0, 1fr);
		gap: 10px;
	}

	.woocommerce div.product .woocommerce-variation-add-to-cart .single_add_to_cart_button,
	.woocommerce div.product form.cart button.single_add_to_cart_button {
		width: auto;
		min-width: 0;
	}

	.tb-qa {
		position: absolute;
		z-index: 7;
		bottom: 10px;
		left: 26px;
		right: 26px;
		height: 34px;
		border: 0;
		border-radius: 2px;
		background: rgba(255, 255, 255, .94);
		color: #161616;
		font-family: inherit;
		font-size: 11px;
		letter-spacing: .06em;
		line-height: 34px;
		padding: 0;
		cursor: pointer;
		box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
	}

	.tb-sizes .tb-qa {
		background: #161616;
		color: #fff;
	}
}

/* A full desktop keeps the theme's behaviour exactly as it was: the row opens
   on hover and there is no button. A narrow window on a desktop falls inside the
   block above, where hover no longer opens the row - so there the button stays,
   or the sizes would have no way of opening at all. */
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
	.tb-qa {
		display: none;
	}
}

/* --------------------------------------------------- delivery and collection

   The three terms, under the add-to-cart on the product page, where the
   decision is actually made. */

.tb-ship {
	margin: 22px 0 4px;
	padding: 14px 16px;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 2px;
}

.tb-ship__title {
	margin: 0 0 8px;
	font-size: 13px;
	letter-spacing: .06em;
	font-weight: 700;
}

.tb-ship__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tb-ship__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 5px 0;
	font-size: 13px;
	line-height: 1.5;
}

.tb-ship__row + .tb-ship__row {
	border-top: 1px solid rgba(0, 0, 0, .07);
}

.tb-ship__name:before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-inline-end: 8px;
	border-radius: 50%;
	background: #161616;
	vertical-align: middle;
}

.tb-ship__cost {
	white-space: nowrap;
	font-weight: 700;
}


/* ------------------------------------------------------------------ sold out

   Fifteen garments are gone (his list of 06/09/2026). A card that is gone keeps
   its photograph and its price - he still wants the garment seen - and only
   states the fact: the theme's own ribbon on the image, the grey line under the
   price, no size chips, and a page that cannot be ordered from. */

.woocommerce .product.outofstock .product-label .out-of-stock {
	font-size: 11px;
	letter-spacing: .04em;
	padding: 4px 8px;
}

/* nothing to open, so nothing to open it with */
.product.outofstock .tb-qa {
	display: none !important;
}

/* the product page: the button says what it is, and does nothing.
   The theme reaches its own button through form.cart, so this has to reach at
   least as far to be heard at all. */
.woocommerce div.product form.cart .single_add_to_cart_button.tb-soldout,
.woocommerce div.product form.cart .single_add_to_cart_button.tb-soldout:hover,
.woocommerce div.product form.cart .single_add_to_cart_button.tb-soldout:focus {
	background: #ececec;
	border-color: #ececec;
	color: #6b6b6b;
	cursor: not-allowed;
	pointer-events: none;
}

/* a quantity is meaningless when there is nothing to take */
.woocommerce div.product form.cart .tb-oos .quantity {
	display: none;
}

.woocommerce div.product .woocommerce-variation-add-to-cart.tb-oos,
.woocommerce div.product form.cart .variations_button.tb-oos {
	grid-template-columns: minmax(0, 1fr);
}

/* the availability line. The theme paints an out-of-stock line in the accent
   colour, which reads as something to look at; gone is not an offer. */
.woocommerce div.product .availability.out-of-stock span.availability-text {
	color: #6b6b6b !important;
}

/* ------------------------------------------------- the gallery on a phone

   The theme stands the small pictures in a column beside the big one. On a
   430px screen that column takes 70px of the width and puts the garment in
   340px, and a thumb cannot use a 60px picture anyway. On a narrow screen the
   column is put away and the picture takes the whole width; the slider is the
   theme's own and already answers a swipe, so the only thing added is where
   you are in the set, in dots, under the picture. Desktop is untouched. */

/* built on every width so that narrowing a window is not a trap; shown only
   where the column of small pictures has been put away */
.tb-gdots { display: none; }

@media only screen and (max-width: 991px) {
	body.single-product div.product.thumbnail-layout-vertical div.woocommerce-product-gallery,
	body.single-product .has-1-sidebar div.product.thumbnail-layout-vertical div.woocommerce-product-gallery {
		display: flex;
		flex-direction: column;
		padding-left: 0;
		padding-right: 0;
	}
	/* flexslider builds its own frame around the pictures and puts it last, so
	   the dots are held under it by order rather than by where they were put */
	body.single-product div.product div.woocommerce-product-gallery .tb-gdots {
		order: 9;
	}
	body.single-product div.product.thumbnail-layout-vertical div.woocommerce-product-gallery .flex-control-thumbs {
		display: none;
	}
	/* the magnifier sat on the corner of the picture; the corner has moved */
	body.single-product div.product.thumbnail-layout-vertical div.woocommerce-product-gallery .woocommerce-product-gallery__trigger {
		left: 0;
		right: auto;
	}

	#page .tb-gdots,
	.tb-gdots {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0;
		margin: 6px 0 0;
		padding: 0;
		list-style: none;
	}
	/* the dot is 8px because it is only an indicator; what a finger lands on is
	   the box around it, which is not */
	#page .tb-gdots li,
	.tb-gdots li {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 20px;
		height: 24px;
		margin: 0;
		padding: 0;
		line-height: 0;
		list-style: none;
	}
	#page .tb-gdots button,
	.tb-gdots button {
		display: block;
		width: 8px;
		height: 8px;
		min-width: 0;
		padding: 0;
		font-size: 0;
		line-height: 0;
		border: 1px solid var(--loobek-text-bold-color, #262320);
		border-radius: 50%;
		background: transparent;
		box-shadow: none;
		opacity: .35;
		transition: 200ms ease;
	}
	#page .tb-gdots li.tb-on button,
	.tb-gdots li.tb-on button {
		background: var(--loobek-text-bold-color, #262320);
		opacity: 1;
	}
}