/* GlobeMarket Shop page (Figma 1085:16439). Builds on gm-category.css. */

.gm-shop-sec { padding: 80px 0; }
.gm-shop-depts .gm-shop-lead { max-width: 1060px; } /* Figma breaks the departments lead after "nothing in it". */

/* ---------- Hero (1085:16531): 80px top and bottom, 10px between rows ---------- */
.gm-shop .gm-shop-hero { padding: 80px 0 5px; } /* Figma 1085:16531 is 401px: the trust row sits 5px above the next section. */
.gm-shop-hero .gm-cat-crumbs { margin-bottom: 10px; }
.gm-shop-hero__info { margin-bottom: 10px; }
.gm-shop-hero__lead { max-width: 1127px; }
.gm-shop-trust li { padding: 0; }
.gm-shop-trust a { display: flex; align-items: center; gap: 12px; padding: 4px 0; color: inherit; text-decoration: none; transition: color var(--gm-dur-fast, .15s) ease; }
.gm-shop-trust a:hover { color: var(--gm-color-text-primary); }
.gm-shop-trust a:focus-visible { outline: none; box-shadow: var(--gm-focus-ring); border-radius: 8px; }
.gm-shop .gm-shop-trust .gm-cat-trust__ic { background: var(--gm-color-bg-brand, #ff7a00); }

/* ---------- What are you shopping for? (1085:16553) ---------- */
.gm-shop-depts .gm-cat-head { margin-bottom: 40px; }
.gm-shop-depts__list { gap: 14px; }
.gm-shop-dept, .gm-shop-dept:hover, .gm-shop-dept:focus { display: block; color: #000; text-decoration: none; } /* Label stays black on hover (client 2026-10-17); main.css turns links orange. */
.gm-shop-dept:focus-visible { outline: none; box-shadow: var(--gm-focus-ring); }
.gm-shop-dept__img { position: absolute; left: 50%; max-width: none; transform: translateX(-50%); transition: transform .4s var(--gm-ease, ease); }
.gm-shop-dept:hover .gm-shop-dept__img { transform: translateX(-50%) scale(1.04); }
.gm-shop-dept--phones .gm-shop-dept__img { top: 30.5px; width: 239.746px; height: 236.189px; margin-left: -.13px; }
/* 1093:21926: two iPads in a 243px box, 23px down; the back one is drawn on top. */
.gm-shop-dept--ipad .gm-shop-dept__img { top: 28.7px; width: 210.81px; height: 231.61px; margin-left: -.01px; }
.gm-shop-dept__pair img { position: absolute; top: 0; display: block; }
.gm-shop-dept__pair .gm-shop-dept__pair-screen { left: 55.66px; width: 155.147px; height: 231.609px; }
.gm-shop-dept__pair .gm-shop-dept__pair-back { left: 0; width: 153.803px; height: 231.574px; }
/* 1093:21923 AirPods 212.92 × 225.94 in a 241px box, 25px down. */
.gm-shop-dept--airpods .gm-shop-dept__img { top: 32.53px; width: 212.92px; height: 225.938px; }
/* 1093:21920 Apple Watch 192.66 × 216.21 in a 239px box, 27px down. */
.gm-shop-dept--watch .gm-shop-dept__img { top: 38.4px; width: 192.662px; height: 216.21px; }
.gm-shop-dept__label {
	position: absolute; left: 0; top: 268px; display: flex; align-items: center; justify-content: center;
	width: 100%; height: 73px; padding: 10px; font-size: 20px; line-height: 28px; font-weight: 700; white-space: nowrap;
}

/* ---------- Shop tech by brand (1085:16639) ---------- */
.gm-shop-brands .gm-cat-h2 { margin-bottom: 40px; }
.gm-shop-brands__list { display: flex; flex-wrap: wrap; gap: 12px; }
.gm-shop-brand {
	position: relative; display: grid; place-items: center; width: 300px; height: 150px; overflow: hidden;
	background: #fff; border-radius: var(--gm-radius-md, 12px); box-shadow: 0 1px 3px rgba(13, 27, 42, .08);
	transition: transform var(--gm-dur, .25s) var(--gm-ease, ease), box-shadow var(--gm-dur, .25s) ease;
}
.gm-shop-brand:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(13, 27, 42, .1); }
.gm-shop-brand:focus-visible { outline: none; box-shadow: var(--gm-focus-ring); }
.gm-shop-brand img { display: block; max-width: none; }
.gm-shop-brand--samsung img { width: 192px; height: 29.44px; }
.gm-shop-brand--apple img { width: 58.56px; height: 72px; }
.gm-shop-brand--google img { width: 119.957px; height: 37.586px; }
.gm-shop-brand__mi { position: relative; display: block; width: 67.046px; height: 67.046px; }
.gm-shop-brand__mi img { position: absolute; inset: 0; width: 100%; height: 100%; }
.gm-shop-brand__mi .gm-shop-brand__mi-mark { inset: 30.89% 20% 30.71% 20.09%; width: auto; height: auto; }

/* ---------- All available products (1087:16719) ---------- */
.gm-shop-all__head { display: flex; flex-direction: column; gap: 16px; }
.gm-shop-all__count { font-size: 16px; line-height: normal; font-weight: 500; color: #62676c; }
.gm-shop-item[hidden] { display: none; }
.gm-shop .gm-cat-page--gap { display: flex; align-items: flex-end; justify-content: center; width: 24px; height: 48px; padding-bottom: 10px; font-weight: 600; color: var(--gm-color-text-disabled, #80858a); }
/* Real product photos are square: show the whole device. */
.gm-shop-card .gm-cat-card__img { padding: 0; }
.gm-shop-card .gm-cat-card__img img { width: 150px; height: 150px; object-fit: contain; }
.gm-shop-card .gm-pcard__was span:only-child { color: var(--gm-color-text-muted); }

/* ---------- Brand / type sections (1087:17056 …): 4 × 300px, 24px gaps ---------- */
.gm-shop-range .gm-cat-h2 { margin-bottom: 40px; }
.gm-shop-range__grid { display: grid; grid-template-columns: repeat(4, 300px); gap: 24px; padding-left: 4px; }
.gm-shop-range__none { font-size: 18px; line-height: 28px; color: var(--gm-color-text-secondary); }
.gm-shop-range__all { margin-top: 24px; padding: 0 4px; text-decoration: none; }
.gm-shop-range__all:hover .gm-cat-ghost__label { color: var(--gm-color-action-secondary-default); }
.gm-shop-range__all:focus-visible { outline: none; box-shadow: var(--gm-focus-ring); border-radius: 6px; }

/* ---------- What should you know before buying? (1087:21750) ---------- */
.gm-shop-info__in { display: flex; flex-direction: column; gap: 32px; }

/* ---------- Still deciding? (1087:21780) ---------- */
.gm-shop-chips__in { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.gm-shop-chips__row { display: flex; flex-wrap: wrap; gap: 10px; }
.gm-shop-chip {
	display: block; padding: 8px 14px; overflow: hidden;
	background: var(--gm-color-bg-inverse, #0d1b2a); border: 1px solid #d5d9dc; border-radius: 999px;
	font-size: 14px; line-height: normal; font-weight: 700; color: #fff; text-decoration: none; white-space: nowrap;
	transition: background-color var(--gm-dur-fast, .15s) ease, transform var(--gm-dur-fast, .15s) ease;
}
.gm-shop-chip:hover { background: #1f3247; color: #fff; transform: translateY(-1px); }
.gm-shop-chip:focus-visible { outline: none; box-shadow: var(--gm-focus-ring); }

/* ---------- Smaller screens ---------- */
@media (max-width: 1340px) {
	.gm-shop-range__grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); padding-left: 0; }
	.gm-shop-range__grid .gm-cat-card { width: 100%; }
}
@media (max-width: 768px) {
	.gm-shop-sec { padding: 48px 0; }
	.gm-shop .gm-shop-hero { padding: 40px 0 0; }
	.gm-shop .gm-cat-hero__title { font-size: 32px; line-height: 40px; }
	.gm-shop .gm-cat-trust { gap: 8px 24px; }
	.gm-shop-depts .gm-cat-head, .gm-shop-brands .gm-cat-h2, .gm-shop-range .gm-cat-h2 { margin-bottom: 24px; }
	.gm-shop-depts__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.gm-shop-dept { width: 100%; height: 220px; }
	.gm-shop-dept__img { transform: translateX(-50%) scale(.62); transform-origin: top center; }
	.gm-shop-dept:hover .gm-shop-dept__img { transform: translateX(-50%) scale(.65); }
	.gm-shop-dept--phones .gm-shop-dept__img, .gm-shop-dept--ipad .gm-shop-dept__img, .gm-shop-dept--airpods .gm-shop-dept__img, .gm-shop-dept--watch .gm-shop-dept__img { top: 14px; }
	.gm-shop-dept__label { top: auto; bottom: 0; height: 56px; font-size: 16px; line-height: 22px; white-space: normal; text-align: center; }
	.gm-shop-brands__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.gm-shop-brand { width: 100%; height: 110px; }
	.gm-shop-brand--samsung img { width: 128px; height: auto; }
	.gm-shop-range__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.gm-shop-chip { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
	.gm-shop-dept__img, .gm-shop-brand, .gm-shop-chip { transition: none; }
}