/*
 * Карточка каталога и Quickshop — CSS, перенесённый с mark (gucci-child).
 *
 * Правила скопированы как есть; изменена только палитра: переменные --gc-*
 * ниже замаплены на токены навy/белого скина Tory Burch, чтобы геометрия и
 * поведение совпадали с mark, а цвета — с этим сайтом.
 *
 * Источник: mark/wp-content/themes/gucci-child/assets/css/{main,shop,single-product}.css
 */

:root {
	--gc-black:     var(--vlt-ink);
	--gc-white:     #FFFFFF;
	--gc-cream:     var(--vlt-bg-2);
	--gc-beige:     var(--vlt-card);
	--gc-gold:      var(--vlt-ink);
	--gc-gold-deep: var(--vlt-ink);
	--gc-muted:     var(--vlt-text-mute);
	--gc-border:    var(--vlt-line);
	--gc-sale:      #8B0000;
	--gc-price-old: var(--vlt-text-mute-2);
	--gc-espresso:  var(--vlt-dk);
	--gc-brown:     var(--vlt-dim);
	--gc-serif:     var(--vlt-font-body);
	--gc-sans:      var(--vlt-font-body);
	--gc-transition: .25s ease;
}

/* ══════════════ из main.css ══════════════ */
/* =========================================================
   PRODUCT CARD IMAGE SLIDER (Swiper.js — global)
   ========================================================= */
/* Swiper container fills the image-wrap.
 * Use two-class specificity to beat Swiper bundle's `.swiper { position:relative }`. */
.gc-card__image-wrap .gc-card-swiper,
.gc-product-card__media .gc-card-swiper,
.gc-pdp-related__img-wrap .gc-card-swiper {
	position: absolute !important;
	top: 0; right: 0; bottom: 0; left: 0;
	overflow: hidden;
	width: auto;
	height: auto;
}
/* Before Swiper inits, show only the first slide (avoids blank multi-slide flash). */
.gc-card-swiper:not(.swiper-initialized) .swiper-slide:not(:first-child) {
	display: none;
}
.gc-card-swiper .swiper-wrapper {
	height: 100% !important;
}
.gc-card-swiper .swiper-slide {
	height: 100%;
	background: #fff;
	overflow: hidden;
}
.gc-card__slide-link {
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: auto;
	cursor: pointer;
}
.gc-card-swiper .swiper-slide img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
	pointer-events: none;
}
.gc-card-slide-img--deferred:not([src]) {
	visibility: hidden;
}
.gc-card-slide-img--deferred[data-gc-loaded="1"] {
	visibility: visible;
}
/* Thin pagination bars — bottom edge */
/* Desktop: dots inside the image, bottom-right. They read as "there are more
   photos" at rest and get out of the way once the arrows appear on hover. */
.gc-card__slider-bars {
	position: absolute;
	bottom: 14px;
	right: 14px;
	left: auto;
	display: flex;
	gap: 6px;
	padding: 0;
	z-index: 4;
	opacity: 1;
	transition: opacity .2s ease;
	pointer-events: none;
}
.gc-card__slider-bar {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .28);
	transition: background .25s ease, width .25s ease;
}
.gc-card__slider-bar.is-active {
	background: var(--gc-black);
	width: 16px;
	border-radius: 3px;
}
/* Arrow buttons — absolutely positioned over the card */
.gc-card__slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255,255,255,.85);
	border: none;
	cursor: pointer;
	padding: 0;
	opacity: 0;
	transition: opacity .2s ease, background .15s ease;
	border-radius: 50%;
}
.gc-card__slider-arrow--prev { left: 10px; }
.gc-card__slider-arrow--next { right: 10px; }
.gc-card__slider-arrow svg {
	display: block;
	pointer-events: none;
}
/* Desktop: arrows are always visible so the extra photos are discoverable
   without hovering; the dots stay put bottom-right. */
@media (min-width: 761px) {
.gc-card--slider .gc-card__slider-arrow { opacity: 1; }
.gc-card__slider-arrow:hover { background: #fff; }
}
/* Narrow screens: the dots become a full-width progress strip pinned to the
   bottom edge of the image. Keyed to width only — plenty of desktops report
   (hover: none) (touchscreen laptops, remote/emulated browsers) and they must
   keep the desktop treatment: dots bottom-right, arrows on hover. */
@media (max-width: 760px) {
.gc-card--slider .gc-card__slider-bars {
		opacity: 1;
		left: 10px;
		right: 10px;
		bottom: 8px;
		gap: 4px;
	}
.gc-card__slider-bar {
		flex: 1;
		width: auto;
		height: 3px;
		border-radius: 0;
		background: rgba(0, 0, 0, .14);
	}
.gc-card__slider-bar.is-active {
		width: auto;
		height: 3px;
		border-radius: 0;
		background: var(--gc-black);
	}
.gc-card__slider-arrow {
		display: none;
	}
}
.gc-card--slider.gc-product-card,
.gc-card--slider .gc-product-card__media {
	overflow: visible;
}
/* Only scale when no slider */
@media (hover: hover) {
.gc-product-card:not(.gc-card--slider):hover .gc-product-card__media img {
		transform: scale(1.03);
	}
}
/* Product-card box + image sizing. These normally live in shop.css, but the
   search panel is on EVERY page (incl. product/home where shop.css is NOT
   loaded). Without aspect-ratio the image container had no size, so images
   ballooned full-screen and Swiper mis-measured slides (next slide peeking on
   the right). Scoping the essentials here fixes both, everywhere. */
.gc-search .gc-card { position: relative; display: flex; flex-direction: column; background: transparent; overflow: hidden; min-width: 0; max-width: 100%; }
/* The 1px border is stated here, not left to shop.css: without it the frame —
   and with it the 1px inset every icon positioned inside this box inherits —
   differed between shop pages (shop.css loaded) and everywhere else. */
.gc-search .gc-card__image-wrap { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #fff; border: 1px solid var(--gc-border); }
.gc-search .gc-card--slider .gc-card__image-wrap { overflow: visible; }
/* NB: no max-width on the swiper/slides here — that clamped slides narrower than
   Swiper's translate width and made the next slide peek. Let the global swiper
   rules size them exactly like the shop. */
.gc-search .gc-card__body { padding: 12px 0 4px; display: flex; flex-direction: column; gap: 8px; background: transparent; flex: 1; }
.gc-search .gc-card__title { display: block; font-size: 14px; font-weight: 400; line-height: 1.4; letter-spacing: .02em; color: var(--gc-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.gc-search .gc-card__price, .gc-search .gc-card .price { font-size: 13px; }
.gc-search .gc-card .price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0; }
.gc-search .gc-card .price del { text-decoration: line-through; color: #9b9b9b; font-size: 12px; }
.gc-search .gc-card .price ins { text-decoration: none; color: var(--gc-black); font-weight: 500; }
/* Wishlist heart + sale badge (also shop.css-only → the SVG ballooned without a size). */
.gc-search .gc-card__wishlist { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; z-index: 4; color: var(--gc-black); cursor: pointer; background: transparent; border: none; padding: 0; }
.gc-search .gc-card__wishlist svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.gc-search .gc-card__wishlist.is-active, .gc-search .gc-card__wishlist[aria-pressed="true"] { color: #c00; }
.gc-search .gc-card__wishlist.is-active svg, .gc-search .gc-card__wishlist[aria-pressed="true"] svg { fill: #c00; stroke: #c00; }
.gc-search .gc-card__badge { position: absolute; top: 14px; left: 14px; font-size: 9px; letter-spacing: .22em; text-transform: uppercase; padding: 6px 10px; font-weight: 500; z-index: 3; pointer-events: none; line-height: 1; }
.gc-search .gc-card__badge--sale, .gc-search .gc-card__badge--oos { background: var(--gc-black); color: #fff; }
.gc-search .gc-card__cover-link { position: absolute; inset: 0; z-index: 1; }
.gc-search .gc-card__image-link { display: block; width: 100%; height: 100%; }
.gc-search .gc-card--oos .gc-card__image-wrap { opacity: .35; }
.gc-search .gc-card--oos .gc-card__title { color: #767676; }
@media (max-width: 900px) {
/* The panel styles the heart at 14px/32px — its own desktop treatment — while
	   quickshop sits at 6px/30px on touch. Match them so the two icons share a
	   line, the same as on the catalog card. */
.gc-search .gc-card__wishlist {
		/* 7px against quickshop's 6px: quickshop lives inside the image frame and
		   picks up its 1px border, the heart hangs off the card. */
		top: 7px;
		right: 7px;
		width: 30px;
		height: 30px;
	}
.gc-search .gc-card__wishlist svg { width: 21px; height: 21px; }
}
/* ============================================================
 * Collection product card — swatches / price / add-to-cart
 * Global (main.css) so it applies wherever .gc-card renders:
 * shop grid, full-screen search (any page), and the PDP
 * You May Also Like / Recently Viewed blocks.
 * Interactive bits re-enable pointer-events (card body is
 * pointer-events:none on desktop) and sit above the cover-link.
 * ========================================================== */
.gc-card__swatches {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 2px 0;
  min-height: 47px;      /* reserve the swatch row so prices + Add-To-Cart line up (incl. empty placeholder) */
  position: relative;
  z-index: 3;
  pointer-events: auto;
}
.gc-card__swatch {
  width: 47px;
  height: 47px;
  padding: 0;
  border: 1px solid #e6e3dd;
  border-radius: 0;
  overflow: hidden;
  background: #f4f2ee;
  cursor: pointer;
  flex: 0 0 auto;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.gc-card__swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gc-card__swatch:hover { border-color: #999; }
.gc-card__swatch.is-selected { border-color: var(--vlt-ink); box-shadow: 0 0 0 1px var(--vlt-ink); }
.gc-card__swatch-more { font-size: 12px; color: #8a8a8a; align-self: center; margin-left: 2px; }
.gc-card__swatch-more--mobile { display: none; }
/* desktop: shown via --desktop, mobile toggles below */
.gc-card__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.gc-card__price-now { font-size: 18px; font-weight: 700; color: var(--vlt-ink); }
.gc-card__price-old { font-size: 15px; color: #8a8a8a; text-decoration: line-through; }
.gc-card__price-now del, .gc-card__price-now ins,
.gc-card__price-old del, .gc-card__price-old ins { all: unset; }
.gc-card__atc {
  position: relative;
  z-index: 3;
  pointer-events: auto;
  margin-top: 10px;
  width: 100%;
  height: 42px;
  border: 1.5px solid var(--gc-black);
  border-radius: 0;
  background: #fff;
  color: var(--gc-black);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.gc-card__atc svg { width: 18px; height: 18px; }
.gc-card__atc-icon { display: inline-flex; }
.gc-card__atc:hover,
.gc-card__atc.is-added { background: var(--gc-black); color: #fff; }
.gc-card__atc.is-loading,
.gc-card__atc.loading { opacity: .6; pointer-events: none; }
/* Switchable card showing a single image has no slider chrome */
.gc-card:not(.gc-card--slider) .gc-card__slider-arrow,
.gc-card:not(.gc-card--slider) .gc-card__slider-bars { display: none; }
.gc-card-swiper:not(.swiper-initialized) .swiper-wrapper { display: block; }
.gc-card-swiper:not(.swiper-initialized) .swiper-slide { width: 100%; }
@media (max-width: 767px) {
.gc-card__swatches { min-height: 36px; flex-wrap: nowrap; gap: 4px; }
.gc-card__swatch { width: 36px; height: 36px; }
/* Cap at 4 swatches on mobile; the rest collapse into the +N counter. */
.gc-card__swatches .gc-card__swatch:nth-child(n+5) { display: none; }
.gc-card__swatch-more--desktop { display: none; }
.gc-card__swatch-more--mobile { display: inline; }
.gc-card__price { gap: 6px; }
.gc-card__price-now { font-size: 14px; }
.gc-card__price-old { font-size: 12px; }
.gc-card__atc { height: 42px; font-size: 10px; letter-spacing: .06em; }
}
@media (max-width: 400px) {
.gc-card__price-now { font-size: 13px; }
.gc-card__price-old { font-size: 11px; }
}
/* =========================================================
   QUICKSHOP
   ========================================================= */
/* Trigger on the card — appears over the image, bottom-left. */
.gc-card__quick {
	position: absolute;
	bottom: 10px;
	left: 10px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--gc-sans);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--gc-black);
	/* Always visible, as in the design — it is a primary action, not a
	   hover-only affordance. */
	opacity: 1;
	transition: color var(--gc-transition);
}
.gc-card__quick svg { width: 15px; height: 15px; }
.gc-card__quick:hover { color: var(--gc-gold-deep); }
/* Touch devices have no hover, so the trigger would never appear. The width
   query is the fallback for hybrid devices that still report hover support.
   There the label is dropped and the button becomes an icon in the top-left —
   the bottom edge belongs to the slider strip on mobile. */
@media (max-width: 760px) {
.gc-card__quick {
		opacity: 1;
		/* 6, not 7: the button anchors inside .gc-card__image-wrap, whose 1px
		   border pushes its padding box in — the wishlist heart hangs off the
		   card itself. Without the -1px the two icons sat a pixel apart. */
		top: 6px;
		left: 6px;
		bottom: auto;
		gap: 0;
		width: 30px;
		height: 30px;
		justify-content: center;
	}
.gc-card__quick-label { display: none; }
.gc-card__quick svg { width: 21px; height: 21px; }
}
/* ── Dialog ─────────────────────────────────────────────── */
.gc-quick {
	position: fixed;
	inset: 0;
	/* Выше панели поиска (1000): Quickshop открывается и из результатов поиска
	   на мобильном, и со z-index 990 попап уезжал под панель. Мини-корзина
	   (9998) по-прежнему выше — добавление в сумку открывает её поверх. */
	z-index: 1100;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.gc-quick.is-open { display: flex; }
.gc-quick__bd {
	position: absolute;
	inset: 0;
	background: rgba(28, 23, 16, .5);
	backdrop-filter: blur(3px);
}
.gc-quick__panel {
	position: relative;
	z-index: 2;
	background: var(--gc-white);
	border: 1px solid var(--gc-border);
	width: min(860px, 94vw);
	max-height: 90vh;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr 1fr;
	box-shadow: 0 40px 90px rgba(0, 0, 0, .28);
}
.gc-quick__img {
	position: relative;
	background: var(--gc-white);
	overflow: hidden;
	/* Square, like the catalogue cards: the column sets the panel height instead
	   of stretching to whatever the text side happens to be, which cropped the
	   photo to a letterbox strip. */
	aspect-ratio: 1 / 1;
	min-height: 0;
}
.gc-quick__slides {
	position: absolute;
	inset: 0;
	display: flex;
	transition: transform .42s cubic-bezier(.4, 0, .15, 1);
}
.gc-quick__slide { min-width: 100%; height: 100%; }
.gc-quick__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.gc-quick__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	border: 1px solid var(--gc-border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--gc-black);
	cursor: pointer;
	transition: background var(--gc-transition);
}
.gc-quick__nav--prev { left: 16px; }
.gc-quick__nav--next { right: 16px; }
.gc-quick__nav:hover { background: #fff; }
.gc-quick__nav[hidden] { display: none; }
.gc-quick__dots {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	gap: 7px;
}
.gc-quick__dots[hidden] { display: none; }
.gc-quick__dot {
	width: 7px;
	height: 7px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, .25);
	cursor: pointer;
	transition: width .25s ease, background .25s ease;
}
.gc-quick__dot.is-on {
	background: var(--gc-black);
	width: 20px;
	border-radius: 4px;
}
.gc-quick__body {
	padding: 44px 40px;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}
.gc-quick__brand {
	font-size: 10px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--gc-gold-deep);
	margin-bottom: 10px;
}
.gc-quick__name {
	font-family: var(--gc-serif);
	font-weight: 800;
	font-size: 26px;
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: -.01em;
}
.gc-quick__price {
	margin: 16px 0 4px;
	font-size: 18px;
	display: flex;
	gap: 12px;
	align-items: baseline;
}
.gc-quick__now { color: var(--gc-gold-deep); font-weight: 700; }
.gc-quick__was {
	color: var(--gc-price-old);
	text-decoration: line-through;
	font-size: 15px;
}
.gc-quick__lbl {
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--gc-muted);
	margin: 20px 0 10px;
}
.gc-quick__lbl[hidden],
.gc-quick__sw[hidden] { display: none; }
.gc-quick__sw {
	display: flex;
	gap: 10px;
	margin-bottom: 22px;
	flex-wrap: wrap;
}
.gc-quick__swatch {
	width: 48px;
	height: 58px;
	padding: 0;
	border: 1px solid var(--gc-border);
	background: var(--gc-white);
	cursor: pointer;
	transition: border-color var(--gc-transition);
}
.gc-quick__swatch img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gc-quick__swatch:hover { border-color: var(--gc-black); }
.gc-quick__swatch.is-selected {
	outline: 1.5px solid var(--gc-black);
	outline-offset: 1px;
}
.gc-quick__add {
	margin-top: auto;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--gc-gold);
	color: #fff;
	border: none;
	cursor: pointer;
	font-family: var(--gc-sans);
	font-weight: 700;
	padding: 16px;
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	transition: background var(--gc-transition);
}
.gc-quick__add svg { width: 16px; height: 16px; }
.gc-quick__add:hover { background: var(--gc-gold-deep); }
.gc-quick__view {
	display: block;
	text-align: center;
	margin-top: 14px;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gc-muted);
	transition: color var(--gc-transition);
}
.gc-quick__view:hover { color: var(--gc-black); }
.gc-quick__close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 4;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--gc-border);
	border-radius: 50%;
	background: var(--gc-white);
	color: var(--gc-black);
	cursor: pointer;
	/* The × was a text glyph: its optical centre sits above the type baseline,
	   so it never looked centred in the circle. Two strokes instead — same
	   construction and weight as the filter-drawer close. */
	font-size: 0;
	line-height: 0;
	transition: border-color .2s ease;
}
.gc-quick__close::before,
.gc-quick__close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 14px;
	height: 1.5px;
	background: currentColor;
	border-radius: 1px;
}
.gc-quick__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.gc-quick__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.gc-quick__close:hover { border-color: var(--gc-black); }
@media (max-width: 720px) {
.gc-quick { padding: 0; }
.gc-quick__panel {
		grid-template-columns: 1fr;
		width: 100vw;
		max-height: 100vh;
		height: 100%;
		overflow-y: auto;
	}
.gc-quick__img { height: auto; aspect-ratio: 1 / 1; min-height: 0; }
.gc-quick__body { padding: 24px 22px 28px; }
.gc-quick__name { font-size: 21px; }
.gc-quick__add { margin-top: 24px; }
}
/* ============================================================
 * Card body — MJ Outlet layout: centred, uppercase name,
 * gold price. Loaded after the legacy card rules above so it
 * wins without !important.
 * ========================================================== */
.gc-card__body {
	text-align: center;
	padding: 16px 2px 0;
}
.gc-card__title {
	display: block;
	font-family: var(--gc-serif);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: .02em;
	color: var(--gc-black);
	margin-bottom: 10px;
}
.gc-card__swatches {
	justify-content: center;
	margin: 0 0 10px;
	/* Cards without colour options keep the same gap, otherwise their price and
	   Add-To-Cart sit higher than their neighbours' in the same row. */
	min-height: 15px;
}
.gc-card__swatches--placeholder { min-height: 15px; }
.gc-card__price {
	justify-content: center;
	font-size: 14px;
	letter-spacing: .06em;
	gap: 10px;
}
.gc-card__price-now {
	font-size: 14px;
	font-weight: 700;
	color: var(--gc-gold-deep);
}
.gc-card__price-old {
	font-size: 13px;
	color: var(--gc-muted);
	text-decoration: line-through;
}
@media (max-width: 767px) {
.gc-card__price-now { font-size: 13px; }
.gc-card__price-old { font-size: 12px; }
}
/* Colour swatches: small round dots, as in the MJ Outlet design. The variation
   photo still fills the dot, so it reads as the actual colourway. */
.gc-card__swatches {
	gap: 9px;
	min-height: 0;
}
.gc-card__swatch {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, .25);
	transition: transform .15s ease;
}
.gc-card__swatch:hover { transform: scale(1.18); border-color: rgba(0, 0, 0, .25); }
.gc-card__swatch.is-selected {
	border-color: rgba(0, 0, 0, .25);
	box-shadow: none;
	outline: 1.5px solid var(--gc-black);
	outline-offset: 2px;
}
@media (max-width: 767px) {
.gc-card__swatches { min-height: 0; gap: 8px; }
.gc-card__swatch { width: 18px; height: 18px; }
}
.gc-rail .gc-card { flex: none; max-width: none; width: auto; }
@media (max-width: 767px) {
.gc-rail .gc-card { flex: none; max-width: none; width: auto; }
}
/* Colour swatches are flat colour chips; only unmapped colours keep a photo. */
.gc-card__swatch--color img { display: none; }
.gc-card__swatch--color { background-size: cover; background-position: center; }
/* Cards stretch to the tallest in their row; pushing the button down keeps the
   Add-To-Cart line straight even when a title wraps onto two lines. */
.gc-card { height: 100%; }
.gc-card__body { display: flex; flex-direction: column; flex: 1; }
.gc-card__atc { margin-top: auto; }
/* Swiper's own `.swiper-horizontal > .swiper-pagination-bullets` (left: 0;
   width: 100%; bottom: 8px) outranks a single-class selector, which dragged
   the dots across the whole card. Two classes win it back. */
.gc-card .gc-card__slider-bars {
	left: auto;
	right: 14px;
	bottom: 14px;
	width: auto;
}
@media (max-width: 760px) {
.gc-card .gc-card__slider-bars {
		left: 0;
		right: 0;
		bottom: 0;
		width: auto;
	}
}
/* Real swatch rows keep a reserved height; cards WITHOUT colour options
   collapse the placeholder entirely so their price sits right under the
   title instead of floating in reserved swatch space. */
.gc-card .gc-card__swatches { min-height: 18px; }
.gc-card .gc-card__swatches--placeholder { min-height: 0; margin: 0; }
/* A collapsed placeholder is still a flex item, so the body's 8px gap was paid
   twice between the title and the price. Drop it when it holds nothing. */
.gc-card .gc-card__swatches--placeholder:empty { display: none; }
/* The design ends the card at the price — buying happens through Quickshop or
   the product page. Hidden rather than removed: the quickshop dialog reads the
   target product id off this button for simple products. */
.gc-card__atc { display: none; }
/* Mobile: catalog/card photo is a true 1:1 square — drop the quickshop strip
   reservation so the image fills the square instead of being cropped shorter
   than the slide. Quickshop itself stays: it rides over the photo as an
   icon-only button in the top-left (see the QUICKSHOP block above). */
@media (max-width: 760px) {
.gc-card .gc-card__image-wrap { padding-bottom: 0; }
.gc-card .gc-card__image-wrap > .gc-card-swiper,
	.gc-card .gc-card__image-wrap > .gc-card__image-link { inset: 0; }
}
/* Cart recommendation cards are catalog cards — shop.css is enqueued on /cart/
   for exactly that (see gucci_child_enqueue_shop_assets). Nothing is restated
   here on purpose: the old copies of these rules were more specific than
   shop.css's, so they overrode the real card (square photo + quickshop strip
   under it) with a stretched image and quickshop sitting on the photo. */
.gc-cart-rec .gc-card { min-width: 0; }

/* ══════════════ из shop.css ══════════════ */
/* =========================================================
   PRODUCT CARD  (.gc-card)
   ========================================================= */
.gc-card {
  position: relative;
  background: transparent;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;            /* let the 1-line title clip instead of stretching the grid track */
}
/* Desktop: entire card navigates to product (wishlist + slider stay interactive) */
@media (hover: hover) {
.gc-card {
    cursor: pointer;
  }
.gc-card__cover-link {
    position: absolute;
    inset: 0;
    z-index: 1;
  }
.gc-card__image-wrap {
    z-index: 2;
  }
.gc-card__body {
    position: relative;
    z-index: 2;
    pointer-events: none;
  }
}
.gc-card__image-wrap {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #F5F3EF;
  /* The design frames the media — without it cards blur into the page on
     products shot against a white backdrop. */
  border: 1px solid var(--gc-border);
}
.gc-card--slider {
  overflow: visible;
}
.gc-card--slider .gc-card__image-wrap {
  overflow: visible;
}
/* Full-cover link — only shown in non-slider cards */
.gc-card__image-link {
  display: block;
  width: 100%;
  height: 100%;
}
/* Slider styles are in main.css (loaded globally) */
/* Sale badge */
.gc-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 6px 10px;
  font-weight: 500;
  z-index: 3;
  pointer-events: none;
  line-height: 1;
}
.gc-card__badge--sale { background: var(--gc-gold); color: #fff; }
.gc-card__badge--oos  { background: var(--gc-black); color: #fff; }
/* Catalog cards drop the "−N %" flag: the struck-through old price under the
   card already says it is on sale, and the gold block fought the photo. The
   sold-out badge stays — that one carries information the price can't. */
.gc-card__badge--sale { display: none; }
/* Sold-out card: heavily dim the imagery, keep title/price legible */
.gc-card--oos .gc-card__image-wrap { opacity: .35; }
.gc-card--oos .gc-card__title { color: #767676; }
/* Wishlist button */
.gc-card__wishlist {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 4;
  color: var(--gc-black);
  cursor: pointer;
  transition: transform .2s ease, color .2s ease;
  background: transparent;
  border: none;
  padding: 0;
  pointer-events: auto;
}
.gc-card__wishlist svg {
  width: 21px;
  height: 21px;
  stroke: currentColor;
  fill: none;
  transition: fill .2s ease, stroke .2s ease, transform .2s ease;
}
@media (hover: hover) {
.gc-card__wishlist:hover svg { transform: scale(1.15); }
}
/* Active / saved state — matches homepage style */
.gc-card__wishlist.is-active,
.gc-card__wishlist[aria-pressed="true"] {
  color: #c00;
}
.gc-card__wishlist.is-active svg,
.gc-card__wishlist[aria-pressed="true"] svg {
  fill: #c00;
  stroke: #c00;
}
/* Card body */
.gc-card__body {
  padding: 12px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: transparent;
  flex: 1;
}
.gc-card__title {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .02em;
  color: var(--gc-black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .2s ease;
  margin: 0;
}
.gc-card__title:hover { color: #555; }
/* ── Corner tags (sale + random highlight) stacked over the image ── */
.gc-card__tags {
  position: absolute;
  top: 14px;
  left: 14px;
  min-height: 32px;          /* match the wishlist button so both sit on one row */
  z-index: 3;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;       /* vertically centre badges against the heart */
  gap: 6px;
  pointer-events: none;
  max-width: calc(100% - 60px); /* keep clear of the wishlist heart; wraps if too wide */
}
.gc-card__tags .gc-card__badge {
  position: static;   /* stack inside the wrapper instead of pinning to the corner */
  top: auto;
  left: auto;
}
/* Random highlight labels — same shape as the sale badge, distinct accents */
.gc-card__highlight--stock { background: #8a2b21; color: #fff; }
.gc-card__highlight--offer { background: #7a6326; color: #fff; }
.gc-card__highlight--best  { background: var(--gc-black);    color: #fff; }
/* Price */
.gc-card__price { font-size: 13px; }
.gc-card .price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  margin: 0;
}
.gc-card .price del {
  text-decoration: line-through;
  color: #9b9b9b;
  font-size: 12px;
}
.gc-card .price del .woocommerce-Price-amount { color: #9b9b9b; }
.gc-card .price ins {
  text-decoration: none;
  color: var(--gc-black);
  font-weight: 500;
}
.gc-card .price ins .woocommerce-Price-amount { color: var(--gc-black); }
.gc-card .price .woocommerce-Price-amount { font-size: 13px; }
@media (max-width: 479px) {
.gc-card__body { padding: 10px 12px 14px; }
.gc-card__title { font-size: 12px; }
}
/* The media box declares 4/5, but a taller image still stretches it — the
   intrinsic height acts as a min-height. Pin the image to the box and crop. */
.gc-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.gc-card__image-link { min-height: 0; }
/* Quickshop + slider dots sit BELOW the photo, on their own white strip, not
   over the image. The photo stays a true 1:1 square: aspect-ratio would include
   the strip (box-sizing is border-box), so the square is held by a ::before
   spacer instead and the strip is added under it as padding.
   The media is absolutely positioned, so padding alone wouldn't move it — its
   bottom edge has to be lifted by the same amount. */
.gc-card__image-wrap {
  aspect-ratio: auto;
  padding-bottom: 44px;
  background: #fff;
}
.gc-card__image-wrap::before {
  content: "";
  display: block;
  padding-top: 100%;      /* 1:1 box for the photo alone */
}
.gc-card__image-wrap > .gc-card-swiper,
.gc-card__image-wrap > .gc-card__image-link {
  position: absolute;
  inset: 0 0 44px;
  height: auto;
}
/* Desktop only — on phones the strip is dropped (main.css) and the dots go back
   to a full-width bar over the bottom of the photo. shop.css loads after
   main.css, so without this guard these would win there too. */
@media (min-width: 761px) {
/* Arrows centre on the photo, not on photo + strip. */
.gc-card__slider-arrow { top: calc((100% - 44px) / 2); }
/* Both live in the strip now. */
.gc-card .gc-card__quick { bottom: 13px; }
.gc-card .gc-card__slider-bars { bottom: 17px; }
}

/* ══════════════ из single-product.css ══════════════ */
.gc-related-swiper .swiper-slide > .gc-card { height: 100%; }
.gc-pdp-related__item.gc-card--slider {
	overflow: visible;
}
.gc-card--slider .gc-pdp-related__img-wrap {
	overflow: visible;
}
@media (hover: hover) {
.gc-pdp-related__item:not(.gc-card--slider):hover .gc-pdp-related__img-wrap img {
		transform: scale(1.04);
	}
}
/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 767px) {
/* Related carousels on phones: one image per card. The inner per-product
	 * image swiper is not mounted here (see main.js) — the outer card carousel
	 * owns the horizontal swipe, and a nested swiper only fights it. So pin the
	 * first photo and hide the now-dead gallery chrome. */
.gc-related-swiper .gc-card-swiper .swiper-wrapper { display: block; }
.gc-related-swiper .gc-card-swiper .swiper-slide { width: 100% !important; }
.gc-related-swiper .gc-card-swiper .swiper-slide:not(:first-child) { display: none; }
.gc-related-swiper .gc-card__slider-bars,
	.gc-related-swiper .gc-card__slider-arrow { display: none; }
}

/* ── Отличие от оригинала: на мобиле кнопки вынесены НАД фото ──────────────
 * В mark на узком экране Quickshop и вишлист лежат поверх снимка. Здесь они
 * стоят своей строкой сверху, внутри рамки. Полосу отводим паддингом обёртки
 * (квадрат снимка держит ::before-спейсер, он к паддингу не относится), а
 * абсолютно позиционированное медиа опускаем на ту же высоту — иначе фото
 * растянулось бы на полосу и перестало быть 1:1. */
@media (max-width: 760px) {
	.gc-card .gc-card__image-wrap {
		padding-top: 34px;
		background: var(--gc-white);
	}

	/* Нижней полосы на мобиле нет (её media-правило её снимает), поэтому
	   опускаем только верхнюю границу — фото остаётся квадратом и прижато
	   к низу обёртки. */
	.gc-card .gc-card__image-wrap > .gc-card-swiper,
	.gc-card .gc-card__image-wrap > .gc-card__image-link {
		inset: 34px 0 0;
	}

	.gc-card .gc-card__quick {
		top: 4px;
		bottom: auto;
		left: 6px;
		transform: none;
	}

	.gc-card .gc-card__wishlist {
		top: 4px;
		right: 6px;
	}
}

/* ── Отличие от оригинала: Quickshop на телефоне — окно, а не фуллскрин ────
 * В mark панель на узком экране разворачивается во весь экран (width: 100vw,
 * height: 100%), из-за чего её grid растягивал строки и под квадратным снимком
 * повисало ~100px пустоты. Здесь просили обычный попап: ширину и высоту ведём
 * по контенту, панель центрируется, а длинный текст добирает скролл. */
@media (max-width: 720px) {
	.gc-quick {
		padding: 16px;
	}

	/* Колонкой на flex, а не гридом: на iOS квадратная картинка с aspect-ratio
	   внутри скроллящегося грида получала строку меньше себя и наезжала на
	   название товара — верхняя половина строки уходила под фото. Во flex-потоке
	   блок с flex: 0 0 auto занимает свою высоту и наехать не может. */
	/* Уже, чем было (420px): фото квадратное и растёт вместе с шириной панели,
	   из-за чего на текст не оставалось высоты и название уезжало в скролл. */
	.gc-quick__panel {
		width: min(340px, 86vw);
		height: auto;
		max-height: 88vh;
		max-height: 88dvh;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* На низких экранах одной ширины мало — подрезаем фото по высоте, чтобы
	   название и кнопка помещались без скролла. */
	.gc-quick__img {
		flex: 0 0 auto;
		width: 100%;
		max-height: 42vh;
		max-height: 42dvh;
	}

	.gc-quick__body {
		flex: 1 1 auto;
		padding: 18px 18px 22px;
	}
}