/**
 * TG Shop – product page, Store grid and lightbox.
 *
 * Every rule is scoped to body.tg-shop, which is only added on product pages,
 * product archives and the Store page (see TG_Shop::is_shop_context()).
 */

body.tg-shop {
	--tg-ink: #1c1e15;
	--tg-ink-soft: rgba(28, 30, 21, 0.8);
	--tg-muted: #807c78;
	--tg-accent: #ff4400;
	--tg-surface: #ffffff;
	--tg-pill: #e2e1df;
	--tg-rule: #e6e5e3;
	--tg-text: 20px;
	--tg-small: 16px;
	--tg-gap: 24px;
	--tg-space-title: 26px;
	--tg-space-tight: 11px;
	--tg-leading: 1.1;
	--tg-tracking: -0.03em;
	--tg-control-h: 64px;
	--tg-control-w: 410px;
}

/* ------------------------------------------------------------------ *
 * Shared
 * ------------------------------------------------------------------ */

body.tg-shop .tg-link,
body.tg-shop .tg-link:hover,
body.tg-shop .tg-link:focus {
	display: inline;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--tg-accent);
	font: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
	cursor: pointer;
}

body.tg-shop .tg-link:hover {
	text-decoration-thickness: 2px;
}

body.tg-shop .tg-link:focus-visible,
body.tg-shop .tg-back__link:focus-visible,
body.tg-shop .tg-select__toggle:focus-visible,
body.tg-shop .tg-select__option:focus-visible {
	outline: 2px solid var(--tg-accent);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------ *
 * Notices (added to cart, back-in-stock sign-up, errors)
 * Aligned with the product section (Elementor section: 14.7% padding,
 * 1140px boxed container, 10px column padding).
 * ------------------------------------------------------------------ */

body.tg-shop .woocommerce-notices-wrapper:not(:empty) {
	padding: 24px 14.7% 0;
}

body.tg-shop .woocommerce-notices-wrapper .woocommerce-message,
body.tg-shop .woocommerce-notices-wrapper .woocommerce-info,
body.tg-shop .woocommerce-notices-wrapper .woocommerce-error {
	max-width: 1120px;
	margin: 0 auto;
	border-top: 0;
	border-left: 3px solid var(--tg-accent);
	background: var(--tg-surface);
	color: var(--tg-ink);
	font-size: var(--tg-small);
	line-height: 1.4;
}

body.tg-shop .woocommerce-notices-wrapper .woocommerce-message::before,
body.tg-shop .woocommerce-notices-wrapper .woocommerce-info::before,
body.tg-shop .woocommerce-notices-wrapper .woocommerce-error::before {
	color: var(--tg-accent);
}

body.tg-shop .woocommerce-notices-wrapper .button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--tg-accent);
	font-size: inherit;
	font-weight: 400;
	text-decoration: underline;
}

/* ------------------------------------------------------------------ *
 * Single product – "Back to all"
 * ------------------------------------------------------------------ */

body.tg-shop .tg-back {
	padding: 32px 14.7% 0;
}

body.tg-shop .tg-back__inner {
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 10px;
}

body.tg-shop .tg-back__link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--tg-ink);
	font-size: var(--tg-text);
	line-height: 1.2;
	text-decoration: none;
}

body.tg-shop .tg-back__link:hover {
	color: var(--tg-accent);
}

body.tg-shop .tg-back__icon {
	flex: none;
	color: var(--tg-accent);
}

/* ------------------------------------------------------------------ *
 * Single product – gallery
 * ------------------------------------------------------------------ */

body.tg-shop div.product .woocommerce-product-gallery {
	position: relative;
}

body.tg-shop div.product .woocommerce-product-gallery__image {
	position: relative;
	background: var(--tg-surface);
}

body.tg-shop div.product .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Lightbox opens on image click; the magnifier icon isn't in the design. */
body.tg-shop div.product div.images .woocommerce-product-gallery__trigger {
	display: none;
}

body.tg-shop div.product div.images .flex-control-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}

body.tg-shop div.product div.images .flex-control-thumbs li {
	float: none;
	width: calc((100% - 3 * 8px) / 5.75);
	min-width: 56px;
}

body.tg-shop div.product div.images .flex-control-thumbs li img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--tg-surface);
	opacity: 1;
	box-sizing: border-box;
	border: 2px solid transparent;
}

body.tg-shop div.product div.images .flex-control-thumbs li img.flex-active {
	border-color: var(--tg-accent);
}

body.tg-shop div.product div.images .flex-control-thumbs li img:hover {
	border-color: var(--tg-pill);
}

body.tg-shop div.product div.images .flex-control-thumbs li img.flex-active:hover {
	border-color: var(--tg-accent);
}


/* Sold out: thin orange diagonal (top-left → bottom-right) across the
   product image(s), as in the Figma. An SVG line keeps a constant 1.5px
   stroke at any size. Toggle: TG_Shop::SOLD_OUT_LINE (body.tg-sold-out-line). */
body.tg-shop.tg-sold-out-line div.product.outofstock .woocommerce-product-gallery__image,
body.tg-shop.tg-sold-out-line ul.products li.product.outofstock .tg-loop-media {
	position: relative;
}

body.tg-shop.tg-sold-out-line div.product.outofstock .woocommerce-product-gallery__image::after,
body.tg-shop.tg-sold-out-line ul.products li.product.outofstock .tg-loop-media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cline x1='0' y1='0' x2='100' y2='100' stroke='%23ff4400' stroke-width='1.5' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* ------------------------------------------------------------------ *
 * Single product – summary
 * ------------------------------------------------------------------ */

body.tg-shop .tg-sold-out-label {
	color: var(--tg-accent);
	white-space: nowrap;
}

body.tg-shop div.product .elementor-widget-woocommerce-product-short-description,
body.tg-shop div.product .elementor-add-to-cart {
	max-width: var(--tg-control-w);
}

/*
 * Summary rhythm (Figma): title → description → price → stock message.
 *   --tg-space-title: title to description
 *   --tg-space-tight: description to price, price to stock message
 *   --tg-leading:     body text line height (tight, as in the mockup)
 *   --tg-tracking:    body text letter spacing (matches the title's -0.03em)
 */

/* Description: spacing, tighter leading and muted colour.
   body.single-product adds the specificity needed over Elementor's
   widget colour rule (.woocommerce .elementor-705 … = 0,5,0). */
body.tg-shop.single-product div.product .elementor-widget-woocommerce-product-short-description {
	margin-top: var(--tg-space-title);
}

body.tg-shop.single-product div.product .elementor-widget-woocommerce-product-short-description .woocommerce-product-details__short-description {
	color: var(--tg-muted);
	line-height: var(--tg-leading);
	letter-spacing: var(--tg-tracking);
}

body.tg-shop.single-product div.product .woocommerce-product-details__short-description p {
	margin: 0;
}

body.tg-shop.single-product div.product .woocommerce-product-details__short-description p + p {
	margin-top: 0.5em;
}

body.tg-shop div.product .elementor-add-to-cart {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	font-size: var(--tg-text);
	line-height: var(--tg-leading);
	letter-spacing: var(--tg-tracking);
	color: var(--tg-muted);
}

body.tg-shop div.product .elementor-add-to-cart > * {
	width: 100%;
}

/* Price */
body.tg-shop div.product .tg-price {
	margin: var(--tg-space-tight) 0 0;
	color: var(--tg-muted);
	font-size: var(--tg-text);
	line-height: var(--tg-leading);
}

body.tg-shop div.product .tg-price del {
	opacity: 0.6;
}

body.tg-shop div.product .tg-price ins {
	text-decoration: none;
}

/* Stock messages ("Sorry, this is currently sold out." sits directly above "Request a re-stock") */
body.tg-shop div.product p.stock,
body.tg-shop div.product .woocommerce-variation-availability p.stock {
	margin: var(--tg-space-tight) 0 0;
	color: var(--tg-muted);
	font-size: var(--tg-text);
	line-height: var(--tg-leading);
}

/* Low stock pill comes before the price: a little more room around the pill. */
body.tg-shop div.product p.stock.tg-low-stock {
	margin-top: var(--tg-gap);
}

body.tg-shop div.product p.stock.tg-low-stock {
	display: inline-block;
	width: auto;
	padding: 8px 16px;
	border-radius: 999px;
	background: var(--tg-pill);
	color: var(--tg-accent);
	font-size: var(--tg-small);
	line-height: 1.25;
}

/* Hide WooCommerce's duplicate variation price; the main price updates instead (JS). */
body.tg-shop div.product .woocommerce-variation-price {
	display: none;
}

body.tg-shop div.product .woocommerce-variation-availability:empty,
body.tg-shop div.product .woocommerce-variation-description:empty {
	display: none;
}

/* Form layout */
body.tg-shop div.product .elementor-add-to-cart form.cart {
	display: block;
	margin: var(--tg-gap) 0 0;
}

body.tg-shop div.product .elementor-add-to-cart form.cart::before,
body.tg-shop div.product .elementor-add-to-cart form.cart::after {
	display: none;
}

/* Quantity isn't part of the design; defaults to 1 (editable in the cart).
   !important: WooCommerce's variation script re-shows it with an inline style. */
body.tg-shop div.product .elementor-add-to-cart form.cart .quantity {
	display: none !important;
}

/* Variations table → plain stack (also removes theme table striping). */
body.tg-shop div.product form.cart table.variations,
body.tg-shop div.product form.cart table.variations tbody,
body.tg-shop div.product form.cart table.variations tr,
body.tg-shop div.product form.cart table.variations th,
body.tg-shop div.product form.cart table.variations td {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	line-height: inherit;
}

body.tg-shop div.product form.cart table.variations tr + tr {
	margin-top: 12px;
}

body.tg-shop div.product form.cart table.variations th.label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

body.tg-shop div.product form.cart .single_variation_wrap {
	margin: 0;
}

body.tg-shop div.product form.cart .woocommerce-variation {
	margin: 0;
}

/* Add to Cart */
body.tg-shop div.product form.cart .woocommerce-variation-add-to-cart,
body.tg-shop div.product form.cart:not(.variations_form) {
	display: block;
}

body.tg-shop div.product form.cart .single_add_to_cart_button,
body.tg-shop div.product form.cart .single_add_to_cart_button.button.alt {
	float: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 260px;
	min-height: var(--tg-control-h);
	margin: var(--tg-gap) 0 0;
	padding: 12px 32px;
	border: 0;
	border-radius: 0;
	background: var(--tg-accent);
	color: #ffffff;
	font-family: inherit;
	font-size: var(--tg-text);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.2;
	transition: background-color 0.15s ease;
}

body.tg-shop div.product form.cart .single_add_to_cart_button:hover,
body.tg-shop div.product form.cart .single_add_to_cart_button:focus-visible {
	background: var(--tg-ink);
	color: #ffffff;
}

body.tg-shop div.product form.cart .single_add_to_cart_button.disabled,
body.tg-shop div.product form.cart .single_add_to_cart_button:disabled {
	opacity: 0.4;
	background: var(--tg-accent);
	cursor: not-allowed;
}

/* No size chosen yet: keep the button solid (click opens the size list). */
body.tg-shop div.product form.cart .single_add_to_cart_button.wc-variation-selection-needed {
	opacity: 1;
	cursor: pointer;
}

/* Sold-out size selected: the restock form replaces the button. */
body.tg-shop div.product form.cart .single_add_to_cart_button.button.alt.wc-variation-is-unavailable {
	display: none;
}

/* "If your size is sold out, request a re-print" */
body.tg-shop div.product .tg-size-note {
	margin: var(--tg-gap) 0 0;
	color: var(--tg-ink-soft);
	font-size: var(--tg-small);
	line-height: 1.4;
}

/* ------------------------------------------------------------------ *
 * Size dropdown
 * ------------------------------------------------------------------ */

body.tg-shop div.product .tg-select__native {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
	clip-path: inset(50%);
	opacity: 0;
	pointer-events: none;
}

body.tg-shop div.product .tg-select {
	position: relative;
	width: 100%;
}

body.tg-shop div.product .tg-select .tg-select__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	min-height: var(--tg-control-h);
	margin: 0;
	padding: 12px 24px;
	border: 0;
	border-radius: 0;
	background: var(--tg-surface);
	box-shadow: inset 0 0 0 1px transparent;
	color: var(--tg-ink);
	font-family: inherit;
	font-size: var(--tg-text);
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
	transition: box-shadow 0.15s ease;
}

body.tg-shop div.product .tg-select .tg-select__toggle:hover,
body.tg-shop div.product .tg-select.is-open .tg-select__toggle {
	box-shadow: inset 0 0 0 1px var(--tg-accent);
	background: var(--tg-surface);
	color: var(--tg-ink);
}

body.tg-shop div.product .tg-select:not(.has-value) .tg-select__value {
	color: var(--tg-ink-soft);
}

body.tg-shop div.product .tg-select__icon {
	flex: none;
}

body.tg-shop div.product .tg-select__list {
	position: absolute;
	z-index: 20;
	top: 100%;
	left: 0;
	right: 0;
	max-height: min(60vh, 420px);
	overflow-y: auto;
	margin: 0;
	padding: 4px 24px;
	list-style: none;
	background: var(--tg-surface);
	box-shadow: 0 8px 24px rgba(28, 30, 21, 0.08);
}

body.tg-shop div.product .tg-select__list[hidden] {
	display: none;
}

body.tg-shop div.product .tg-select__option {
	margin: 0;
	padding: 16px 0;
	border-bottom: 1px solid var(--tg-rule);
	color: var(--tg-ink);
	font-size: var(--tg-text);
	line-height: 1.2;
	cursor: pointer;
	outline: none;
}

body.tg-shop div.product .tg-select__option:last-child {
	border-bottom: 0;
}

body.tg-shop div.product .tg-select__option:hover,
body.tg-shop div.product .tg-select__option:focus,
body.tg-shop div.product .tg-select__option[aria-selected="true"] {
	color: var(--tg-accent);
}

body.tg-shop div.product .tg-select__option.is-sold-out {
	color: var(--tg-muted);
	opacity: 0.6;
}

body.tg-shop div.product .tg-select__option.is-sold-out:hover,
body.tg-shop div.product .tg-select__option.is-sold-out:focus {
	color: var(--tg-ink);
	opacity: 1;
}

body.tg-shop div.product .tg-select__option.is-disabled {
	display: none;
}

/* ------------------------------------------------------------------ *
 * Back-in-stock form (Back In Stock Notifier for WooCommerce)
 * - Sold-out product: collapsed behind "Request a re-stock".
 * - Sold-out size: shown under the sold-out message when selected.
 * ------------------------------------------------------------------ */

body.tg-shop div.product .tg-restock {
	margin: 0;
	padding: 0;
}

body.tg-shop div.product .tg-restock__panel {
	margin-top: 16px;
}

body.tg-shop div.product .tg-restock__panel[hidden] {
	display: none;
}

body.tg-shop div.product .woocommerce-variation-availability .cwginstock-subscribe-form {
	margin-top: 16px;
}

body.tg-shop div.product .cwginstock-subscribe-form,
body.tg-shop div.product .cwginstock-subscribe-form .panel,
body.tg-shop div.product .cwginstock-subscribe-form .panel-heading,
body.tg-shop div.product .cwginstock-subscribe-form .panel-body {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: inherit;
	text-align: left;
}

body.tg-shop div.product .cwginstock-subscribe-form .row,
body.tg-shop div.product .cwginstock-subscribe-form [class*="col-"] {
	margin: 0;
	padding: 0;
	width: 100%;
	float: none;
}

body.tg-shop div.product .cwginstock-subscribe-form .panel-heading h4 {
	margin: 0 0 12px;
	color: var(--tg-ink-soft);
	font-family: inherit;
	font-size: var(--tg-small);
	font-weight: 400;
	line-height: 1.4;
	text-align: left !important; /* plugin sets inline text-align:center */
}

body.tg-shop div.product .cwginstock-subscribe-form__form {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

body.tg-shop div.product .cwginstock-subscribe-form .form-group {
	flex: 1 1 220px;
	margin: 0;
	text-align: left !important;
}

body.tg-shop div.product .cwginstock-subscribe-form .form-group:has(.cwgstock_button) {
	flex: 0 0 auto;
}

body.tg-shop div.product .cwginstock-subscribe-form .cwgstock_email {
	width: 100%;
	min-height: var(--tg-control-h);
	margin: 0;
	padding: 12px 20px;
	border: 1px solid transparent;
	border-radius: 0;
	background: var(--tg-surface);
	color: var(--tg-ink);
	font-family: inherit;
	font-size: var(--tg-small);
	line-height: 1.2;
	text-align: left !important; /* plugin sets inline text-align:center */
}

body.tg-shop div.product .cwginstock-subscribe-form .cwgstock_email:focus {
	border-color: var(--tg-accent);
	outline: none;
}

body.tg-shop div.product .cwginstock-subscribe-form .cwgstock_button {
	min-height: var(--tg-control-h);
	margin: 0;
	padding: 12px 28px;
	border: 0;
	border-radius: 0;
	background: var(--tg-accent);
	color: #ffffff;
	font-family: inherit;
	font-size: var(--tg-small);
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
}

body.tg-shop div.product .cwginstock-subscribe-form .cwgstock_button:hover,
body.tg-shop div.product .cwginstock-subscribe-form .cwgstock_button:focus-visible {
	background: var(--tg-ink);
	color: #ffffff;
}

body.tg-shop div.product .cwginstock-subscribe-form .cwgstock_output {
	flex: 1 0 100%;
	font-size: var(--tg-small);
	line-height: 1.4;
}

body.tg-shop div.product .cwginstock-subscribe-form .cwgstock_output:empty {
	display: none;
}

body.tg-shop div.product .cwginstock-subscribe-form .cwginstocksuccess {
	color: var(--tg-ink);
}

body.tg-shop div.product .cwginstock-subscribe-form .cwginstockerror {
	color: var(--tg-accent);
}

/* ------------------------------------------------------------------ *
 * Store grid
 * ------------------------------------------------------------------ */

body.tg-shop ul.products li.product .tg-loop-media {
	position: relative;
	margin-bottom: 10px;
}

/* Spacing moves to the wrapper so the sold-out line covers only the image
   (Elementor's "Image spacing" rule on the img is 0,5,0 specific). */
body.tg-shop ul.products li.product .tg-loop-media img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0 !important;
	background: var(--tg-surface);
}

body.tg-shop ul.products li.product .woocommerce-loop-product__title .tg-subtitle {
	color: var(--tg-muted);
}

body.tg-shop ul.products li.product .tg-loop-excerpt {
	max-width: 30em;
	margin: 6px 0 0;
	color: var(--tg-ink-soft);
	font-size: var(--tg-small);
	line-height: 1.35;
}

body.tg-shop ul.products li.product .tg-loop-excerpt p {
	margin: 0;
}

body.tg-shop ul.products li.product .tg-loop-excerpt p + p {
	margin-top: 0.4em;
}

body.tg-shop ul.products li.product .price {
	margin-top: 6px;
}

body.tg-shop ul.products li.product .tg-loop-low-stock {
	margin: 4px 0 0;
	color: var(--tg-accent);
	font-size: var(--tg-small);
	line-height: 1.35;
}

body.tg-shop ul.products li.product .tg-loop-sold-out {
	margin: 6px 0 0;
	color: var(--tg-ink-soft);
	font-size: var(--tg-small);
	line-height: 1.35;
}

body.tg-shop ul.products li.product .tg-loop-sold-out p {
	margin: 0;
}

/* ------------------------------------------------------------------ *
 * Lightbox (WooCommerce PhotoSwipe)
 *
 * Close top-left, thin orange arrows at the screen edges, counter at the
 * bottom. Image area keeps clear of the bars via PhotoSwipe's `barsSize`
 * option (TG_Shop::photoswipe_options()).
 * ------------------------------------------------------------------ */

body.tg-shop .pswp {
	--tg-pswp-close: 56px;
	--tg-pswp-close-icon: 22px;
	--tg-pswp-edge: 16px;
	--tg-pswp-arrow-w: 56px;
	--tg-pswp-arrow-h: 88px;
	--tg-pswp-arrow-icon-w: 20px;
	--tg-pswp-arrow-icon-h: 44px;
}

/* Full-screen modal, above the WP admin bar. WooCommerce offsets the
   lightbox by the admin bar height, but on phones the admin bar scrolls
   away with the page, which left the page showing above the overlay. */
body.tg-shop .pswp {
	top: 0;
	height: 100%;
	z-index: 100000;
}

body.tg-shop .pswp__bg {
	background: #1c1e15;
}

body.tg-shop .pswp__top-bar,
body.tg-shop .pswp__caption {
	background: none !important;
}

/* Reset the site's global button styles (Elementor kit: 13px 92px padding,
   radius, orange background; Hello theme: border, hover colour), which
   otherwise turn each lightbox control into a 184px-wide button. */
body.tg-shop .pswp .pswp__button,
body.tg-shop .pswp .pswp__button:hover,
body.tg-shop .pswp .pswp__button:focus,
body.tg-shop .pswp .pswp__button:active {
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background-color: transparent;
	color: transparent;
	font-size: 0;
	line-height: 0;
	opacity: 1;
	transition: opacity 0.15s ease;
}

body.tg-shop .pswp .pswp__button:hover {
	opacity: 0.7;
}

body.tg-shop .pswp .pswp__button:focus-visible {
	outline: 2px solid var(--tg-accent);
	outline-offset: -6px;
}

/* Close (top-left) */
body.tg-shop .pswp .pswp__button--close {
	position: absolute;
	z-index: 2;
	top: var(--tg-pswp-edge);
	left: var(--tg-pswp-edge);
	float: none;
	width: var(--tg-pswp-close);
	height: var(--tg-pswp-close);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M2 2l28 28M30 2L2 30' stroke='%23ff4400' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") center / var(--tg-pswp-close-icon) var(--tg-pswp-close-icon) no-repeat !important;
}

/* Arrows (screen edges, vertically centred; shown on touch devices too) */
body.tg-shop .pswp .pswp__button--arrow--left,
body.tg-shop .pswp .pswp__button--arrow--right {
	position: absolute;
	z-index: 2;
	/* Centred with top (not a negative margin) so hover/focus can't shift it. */
	top: calc(50% - var(--tg-pswp-arrow-h) / 2);
	width: var(--tg-pswp-arrow-w);
	height: var(--tg-pswp-arrow-h);
	background: none !important;
	visibility: visible;
}

body.tg-shop .pswp .pswp__button--arrow--left {
	left: 0;
	right: auto;
}

body.tg-shop .pswp .pswp__button--arrow--right {
	left: auto;
	right: 0;
}

body.tg-shop .pswp .pswp__button--arrow--left::before,
body.tg-shop .pswp .pswp__button--arrow--right::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='80' viewBox='0 0 40 80'%3E%3Cpath d='M38 2L2 40l36 38' stroke='%23ff4400' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") center / var(--tg-pswp-arrow-icon-w) var(--tg-pswp-arrow-icon-h) no-repeat !important;
}

body.tg-shop .pswp .pswp__button--arrow--right::before {
	transform: scaleX(-1);
}

/* Single image: no arrows. */
body.tg-shop .pswp--one-slide .pswp__button--arrow--left,
body.tg-shop .pswp--one-slide .pswp__button--arrow--right {
	display: none;
}

/* Counter (bottom centre) */
body.tg-shop .pswp .pswp__counter {
	position: fixed;
	top: auto;
	bottom: 20px;
	left: 50%;
	height: auto;
	padding: 0;
	transform: translateX(-50%);
	color: #ffffff;
	opacity: 0.75;
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0.05em;
}

@media (max-width: 767px) {
	body.tg-shop .pswp {
		--tg-pswp-close: 44px;
		--tg-pswp-close-icon: 18px;
		--tg-pswp-edge: 8px;
		--tg-pswp-arrow-w: 40px;
		--tg-pswp-arrow-h: 64px;
		--tg-pswp-arrow-icon-w: 13px;
		--tg-pswp-arrow-icon-h: 28px;
	}
}

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */

@media (max-width: 767px) {
	body.tg-shop {
		--tg-text: 18px;
		--tg-small: 15px;
		--tg-gap: 18px;
		--tg-space-title: 16px;
		--tg-space-tight: 10px;
		--tg-control-h: 56px;
	}

	body.tg-shop .tg-back {
		padding-top: 20px;
	}

	body.tg-shop div.product .elementor-widget-woocommerce-product-short-description,
	body.tg-shop div.product .elementor-add-to-cart {
		max-width: none;
	}

	body.tg-shop div.product form.cart .single_add_to_cart_button,
	body.tg-shop div.product form.cart .single_add_to_cart_button.button.alt {
		width: 100%;
	}
}