/* Golden Grading Site Quality - ui-fit.css
   Layout fixes from the 2026-10-22 phone / tablet / desktop review: less scrolling on phones, controls
   big enough for a thumb, a header that works on tablets, and a few spacing and contrast corrections.

   Rules of this file:
   - Pure CSS. No wording and no pictures change; where a repeated line is hidden on phones (the three
     identical bullets on the slab price cards) the same words stay on the page for everyone else.
   - It loads AFTER gg-site-chrome's stylesheet (see gg_quality_enqueue_fit(), priority 99), so it wins
     ties without touching that plugin. Delete this file (and its enqueue) and the site is exactly as before.
   - The tablet header (burger + Submit up to 1199px) switches on only when the Responsive Menu's own
     breakpoint is 1199 or more (the plugin adds body.gg-burger-1199), so the CSS and that setting can be
     deployed in either order without leaving a tablet with no menu.
   Section ids (HP-.., SI-.., LA-.., AL-..) match the review findings. */

/* =====================================================================================================
   1. Header, announcement bar and phone menu: thumb-size controls (<=1199px)
   ===================================================================================================== */
@media (max-width: 1199px) {
	/* the round close X of the announcement bar */
	.gg-bar .gg-bar__x { width: 44px; height: 44px; }
	/* menu button (hamburger / close X) and the black SUBMIT pill: 44px, still centred in the header */
	.gg-chrome-phone-submit {
		height: 44px;
		line-height: 44px;
		padding: 0 18px;
		top: calc(var(--gg-adm) + var(--gg-bar-h) + (var(--gg-hdr-h) - 44px) / 2);
		right: calc(5% + 56px);
	}
	html.gg-scrolled .gg-chrome-phone-submit { top: calc(var(--gg-adm) + (var(--gg-hdr-c) - 44px) / 2); }
	#rmp_menu_trigger-113 {
		width: 44px !important;
		height: 44px !important;
		top: calc(var(--gg-adm) + var(--gg-bar-h) + (var(--gg-hdr-h) - 44px) / 2) !important;
	}
	html.gg-scrolled #rmp_menu_trigger-113 { top: calc(var(--gg-adm) + (var(--gg-hdr-c) - 44px) / 2) !important; }
	/* open menu: the X sits in the panel's top corner, clear of the first row */
	html #rmp_menu_trigger-113.is-active { top: calc(var(--gg-adm) + 12px) !important; }
	/* menu rows 48px (the Submit and Sign in buttons keep their own 50px) */
	#rmp-menu-wrap-113 .rmp-menu-item-link { height: 48px; line-height: 48px; }
}
/* "Show info" in the bar: a 44px-tall tap area, the gold pill itself keeps its size and look */
@media (max-width: 767.98px) {
	.gg-bar .gg-bar__link {
		position: relative;
		z-index: 0;
		background: transparent;
		padding: 14px 14px 15px;
		margin: 0 0 -8px 6px;
	}
	.gg-bar .gg-bar__link::before {
		content: "";
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		top: 8px;
		bottom: 8px;
		border-radius: 999px;
		background: var(--gg-gold);
	}
	.gg-bar .gg-bar__link:hover::before, .gg-bar .gg-bar__link:focus-visible::before { background: #fff; }
	.gg-bar .gg-bar__link:hover, .gg-bar .gg-bar__link:focus-visible { background: transparent; }
	.gg-bar .gg-bar__x { right: 2px; }
}
@media (min-width: 768px) and (max-width: 1199px) {
	.gg-bar .gg-bar__link {
		position: relative;
		z-index: 0;
		background: transparent;
		padding: 14px 16px 15px;
		margin-top: -7px;
		margin-bottom: -7px;
	}
	.gg-bar .gg-bar__link::before {
		content: "";
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		top: 7px;
		bottom: 7px;
		border-radius: 999px;
		background: var(--gg-gold);
	}
	.gg-bar .gg-bar__link:hover::before, .gg-bar .gg-bar__link:focus-visible::before { background: #fff; }
	.gg-bar .gg-bar__link:hover, .gg-bar .gg-bar__link:focus-visible { background: transparent; }
}

/* ---- 1b. Tablet header (768-1199px): the phone header - logo, SUBMIT and a menu button - so SUBMIT is always
        in view and the header stays one row (it was two rows, 168px, with no Submit between 768 and 1199).
        Needs the Responsive Menu breakpoint at 1199 (body.gg-burger-1199, added by gg-site-quality). ---- */
@media (min-width: 768px) and (max-width: 1199px) {
	body.gg-burger-1199 nav#site-navigation { display: none; }
	body.gg-burger-1199 .gg-chrome-phone-submit {
		display: block;
		position: fixed;
		z-index: 1001;
		background: var(--gg-ink);
		color: #fff !important;
		font-family: 'd77', sans-serif;
		font-size: 17px;
		letter-spacing: .03em;
		text-transform: uppercase;
		border-radius: 6px;
		text-decoration: none !important;
		box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
		transition: top .25s ease;
	}
	body.gg-burger-1199 .gg-chrome-phone-submit:focus-visible { outline: 3px solid #111; outline-offset: 2px; }
	body.gg-burger-1199 #rmp_menu_trigger-113 { position: fixed !important; transition: top .25s ease; }
	body.gg-burger-1199 #rmp-container-113 { position: fixed !important; }
	/* the theme hides the HOME link on wide screens; in the menu panel it belongs */
	body.gg-burger-1199 #rmp-menu-wrap-113 li.home_link { display: block !important; }
	/* a full-width panel on a tablet: keep the rows a comfortable width */
	body.gg-burger-1199 #rmp-menu-wrap-113 .rmp-menu { max-width: 620px; margin-left: auto; margin-right: auto; }
}

/* =====================================================================================================
   2. Footer, back to top, small print
   ===================================================================================================== */
@media (max-width: 991.98px) {
	.gg-ft__social a { width: 44px; height: 44px; }
	.gg-signup__ok { min-height: 44px; align-items: center; }
	a#return-to-top { width: 44px; height: 44px; }
	.gg-ft__col ul { gap: 0; }
	.gg-ft__col li a { display: block; padding: 12px 4px; }
}
@media (max-width: 767.98px) {
	a#return-to-top { bottom: 14px; right: 14px; opacity: .94; }
}
.gg-signup__ok, .gg-signup__ok a, .gg-ft__copy, .gg-ft__copy p { font-size: 14px; }
@media (min-width: 1200px) {
	/* SI-17: the footer is as wide as the page and header above it, so the logo and text line up */
	.gg-ft__in, .gg-ft__copy { max-width: min(86.7vw, 1664px); }
}

/* =====================================================================================================
   3. Home
   ===================================================================================================== */
@media (max-width: 767.98px) {
	/* HP-01 (Rock 10-23: no swiping): the three flip slabs sit side by side in ONE row that fits the phone
	   width, no horizontal scroll, still tap to flip. */
	.vc_row:has(> .wpb_column .gg-flip) {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px;
		overflow: visible;
		margin: 0 !important;
		padding: 16px 12px 8px;
	}
	.vc_row:has(> .wpb_column .gg-flip)::before, .vc_row:has(> .wpb_column .gg-flip)::after { display: none; }
	.vc_row:has(> .wpb_column .gg-flip) > .wpb_column {
		width: auto !important;
		max-width: none;
		min-width: 0;
		float: none;
		padding: 0;
	}
	.vc_row:has(> .wpb_column .gg-flip) .gg-flip, .vc_row:has(> .wpb_column .gg-flip) .gg-flip img { max-width: 100%; height: auto; }
	.vc_row:has(> .wpb_column .gg-flip) .gg-flip__hint { font-size: 14px; }
	.vc_row:has(> .wpb_column .gg-flip) > .wpb_column > .vc_column-inner { padding-left: 0 !important; padding-right: 0 !important; }
	/* HP-07: the two text links under the hero buttons get a full-size tap area */
	.gg-quality-hero .gg-quality-details a { display: inline-block; padding: 12px 2px !important; }
}
/* HP-15: small print at least 14px (the accepted-cards chips list what is not accepted) */
.gg-pr-chip, .gg-pr-add__s, .gg-pr-ribbon, .gg-pr-tile__u { font-size: max(14px, .85rem); }
.gg-pr-note { font-size: max(14px, .9rem) !important; }
.gg-quality-hero .gg-quality-details a { font-size: max(14px, .95rem); }
/* the FRONT / BACK captions under the photos on a lookup result */
.gg-card-photos figcaption { font-size: 14px; }
/* HP-11: the example serial number in the Verify box fits at every width */
.gg-verify .gg-verify__form input[type="text"]::placeholder { font-size: 16px; }

/* =====================================================================================================
   4. Services & Pricing
   ===================================================================================================== */
@media (max-width: 767.98px) {
	/* HP-02: three slab price cards, compact: name and wait on the left, price on the right, then the button.
	   The three identical bullets are the same on every card, so they are not repeated on phones. */
	.gg-pr-cards--3 { gap: 1.2rem; margin-top: 1.2rem; }
	.gg-pr-cards--3 .gg-pr-inc { display: none; }
	.gg-pr-cards--3 .gg-pr-card {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: 1rem;
		align-items: center;
		padding: 1rem 1.1rem;
	}
	.gg-pr-cards--3 .gg-pr-name, .gg-pr-cards--3 .gg-pr-days { grid-column: 1; }
	.gg-pr-cards--3 .gg-pr-price {
		grid-column: 2;
		grid-row: 1 / span 2;
		margin: 0;
		padding: 0;
		border: 0;
		flex-direction: column;
		align-items: flex-end;
		gap: 0;
	}
	.gg-pr-cards--3 .gg-pr-price span { font-size: 14px; }
	.gg-pr-cards--3 .gg-pr-btn { grid-column: 1 / -1; margin-top: .8rem; padding: .65rem 1rem; }
	.gg-pr-fan img { max-width: 150px; margin-top: 4px; }
	#graded-slabs.gg-pr-sec { padding-top: 20px !important; }
	/* HP-04: Raw card review - the $3 card first, then the picture and the explanation */
	.vc_row.gg-pr-rcr { display: flex; flex-direction: column; }
	.vc_row.gg-pr-rcr::before, .vc_row.gg-pr-rcr::after { display: none; }
	.vc_row.gg-pr-rcr > .wpb_column { width: 100%; }
	.vc_row.gg-pr-rcr > .wpb_column:nth-child(3) { order: 1; }
	.vc_row.gg-pr-rcr > .wpb_column:nth-child(1) { order: 2; }
	.vc_row.gg-pr-rcr > .wpb_column:nth-child(2) { order: 3; }
	.gg-pr-rcr .gg-pr-cards { margin-top: .6rem; }
	.gg-pr-rcr__img { margin-top: 1.2rem !important; }
	/* HP-07 and HP-15: tap size and 14px small print */
}
@media (max-width: 600px) {
	/* HP-03: the ten grade rows as compact cards (the theme stacks every field on its own line under 600px) */
	.gg-scale-table tr {
		display: grid;
		grid-template-columns: 2.6rem minmax(0, 1fr);
		column-gap: .7rem;
		row-gap: .1rem;
		margin: 0 0 .6rem;
		padding: .65rem .8rem;
		border: 1px solid #E4DCC8;
		border-radius: 10px;
		background: #fff;
	}
	.gg-scale-table td { display: block; width: auto; padding: 0; border: 0; position: static; }
	.gg-scale-table td::before { content: none; }
	.gg-scale-table td:nth-child(1) { grid-row: 1 / span 3; align-self: center; font-family: 'd77', sans-serif; font-size: 2.1rem; line-height: 1; }
	.gg-scale-table td:nth-child(1) strong { font-weight: normal; }
	.gg-scale-table td:nth-child(2) { font-family: 'd77', sans-serif; text-transform: uppercase; font-size: 1.05rem; letter-spacing: .02em; }
	.gg-scale-table td:nth-child(3) { font-size: .95rem; line-height: 1.35; }
	.gg-scale-table td:nth-child(4) { font-size: 14px; color: #6B665C; }
}
@media (max-width: 1023.98px) {
	/* HP-06: the jump bar never loses its first tab: centred when it fits, scrolls from the left when it does not */
	.gg-jump__in { justify-content: flex-start; gap: .2rem; padding: 0 2px; }
	.gg-jump__in > a { padding-left: .7rem; padding-right: .7rem; }
	.gg-jump__in > a:first-child { margin-left: auto; }
	.gg-jump__in > a:last-child { margin-right: auto; }
}
@media (min-width: 992px) {
	/* HP-05: on a laptop or desktop the three prices are on the first screen */
	.banner__section { padding-top: 28px !important; padding-bottom: 22px !important; }
	#graded-slabs.gg-pr-sec { padding-top: 32px !important; }
	.gg-pr-head .gg-pr-lead { margin-top: .3rem !important; }
	.gg-pr-fan img { max-width: 230px; }
	.gg-pr-head + .gg-pr-cards { margin-top: 1.2rem; }
}
@media (min-width: 601px) {
	/* HP-18: the grading scale table in the same card look as the shipping table */
	.gg-scale-table { background: #fff; border: 1px solid #E4DCC8; border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
	.gg-scale-table th, .gg-scale-table td { border: 0; border-top: 1px solid #EFE7D3; padding: .45rem .9rem; }
	.gg-scale-table thead th { background: #F4EEDB; border-top: 0; }
}

/* =====================================================================================================
   5. Inner pages: banner, buttons, cards, stats, steps, links (How to Submit, Turn Times, Order Status,
      About, Contact, Serial Lookup)
   ===================================================================================================== */
/* AL-1: links inside page text use the site's black with a gold underline, not the browser blue (3.98:1) */
.gg-os a:not(.gg-os__submit), .gg-step__body a, .gg-note a, .gg-card__body a, .gg-pr-note a, .gg-pr-lead a, .gg-lead a, .gg-checklist a, .gg-faq__a a {
	color: #161616;
	/* !important: the theme removes underlines from content links with its own !important (verify 10-22) */
	text-decoration: underline !important;
	text-decoration-color: #E5B510 !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 4px !important;
}
.gg-os a:not(.gg-os__submit):hover, .gg-step__body a:hover, .gg-note a:hover, .gg-card__body a:hover, .gg-pr-note a:hover, .gg-pr-lead a:hover, .gg-lead a:hover, .gg-checklist a:hover, .gg-faq__a a:hover { color: #000; text-decoration-color: #161616; }

/* SI-02 / SI-03 / SI-15 / SI-18: Order Status - dark text on the gold button, 16px fields (no iPhone zoom), readable hints */
.gg-os .gg-os__submit { color: #161616; }
.gg-os .gg-os__field input { font-size: 16px; }
.gg-os .gg-os__field input::placeholder { color: #6f6e68; }
.gg-os .gg-os__foot { font-size: 14px; }
body .gg-os label[for^="gg-os-"] { font-size: 14px !important; }

/* SI-12: the four "What happens to your box" cards line their headings up */
.gg-steps--strip .gg-step { align-content: start; }

@media (max-width: 767.98px) {
	/* spacing: sections 28px apart instead of 40-100px, a tighter banner (SI-10, LA-04) */
	.gg-pr-sec { padding: 28px 0 !important; }
	.vc_row.gg-pr-sec.gg-first { padding-top: 24px !important; }
	.banner__section { padding: 20px 0 16px !important; }
	.gg-pr-sec .gg-os { padding: 1.25rem 0 2rem; }
	/* SI-05: step cards - the number badge sits on the title line, the text gets the full card width */
	.gg-step, .gg-step--video { display: block; position: relative; padding: 16px; }
	.gg-step__n { position: absolute; left: 16px; top: 16px; width: 34px; height: 34px; font-size: 18px; }
	.gg-step .gg-step__t { margin: 0 0 8px !important; min-height: 34px; padding-left: 46px; display: flex; align-items: center; }
	.gg-step__media { margin-top: 12px; }
	/* SI-19: buttons the same width, easy to hit */
	.gg-btns .gg-btn { flex: 1 1 100%; justify-content: center; text-align: center; }
	/* LA-05 / SI-08: cards - the icon beside the title instead of above it */
	.gg-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; align-items: center; padding: 16px; }
	.gg-card__ico { width: 44px; height: 44px; }
	.gg-card .gg-card__t { margin: 0 !important; font-size: 22px !important; }
	.gg-card > :not(.gg-card__ico):not(.gg-card__t) { grid-column: 1 / -1; }
	.gg-card__body, .gg-card__body p { font-size: 16px; }
	/* LA-06: the three numbers side by side */
	.gg-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	.gg-stat { padding: 14px 6px; }
	.gg-stat__n { font-size: 34px; }
	.gg-stat__l { font-size: 14px; margin-top: 6px; line-height: 1.3; }
	/* LA-07: breathing room between the paragraph and the slab picture */
	.gg-wall-fig { margin-top: 20px; }
	/* SI-08: the intro line a little tighter */
	.gg-tab p.gg-lead, p.gg-lead { font-size: 17px !important; line-height: 1.5 !important; margin-bottom: 14px !important; }
	.gg-note, .gg-os__foot { font-size: 14px; }
	/* LA-16: the slab-back picture on the lookup page a little smaller */
	.gg-lookup .gg-serial-fig { max-width: 210px; margin-top: 10px; }
	.gg-lookup .gg-serial-fig figcaption { font-size: 14px; margin-top: 8px; }
	/* LA-04: the lookup answer on the first screen */
	article:has(.gg-lookup) .gg-lookup #card_output td, article:has(.gg-lookup) .gg-lookup #card_output th { padding-top: 10px !important; padding-bottom: 10px !important; }
}
@media (max-width: 991.98px) {
	/* tap size on phones and tablets: the copy buttons, the links at the foot of cards, the Order Status sign-in link */
	.gg-copy, .gg-copy--link { min-height: 44px; padding-left: 16px; padding-right: 16px; }
	a.gg-card__link, .gg-os__account a { display: inline-flex; align-items: center; min-height: 44px; }
	.gg-pr-more { display: inline-block; padding: 11px 0; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
	/* SI-13 / LA-17: an odd card out spans the row instead of leaving a hole */
	.gg-cards--3 > .gg-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 768px) {
	/* SI-19: hero text on the video page starts at the top instead of floating mid-column */
	.vc_row.gg-about-lead:has(.gg-video) { align-items: flex-start; }
	/* LA-18: text bands keep a readable line length */
	.gg-pr-band .wpb_text_column p { max-width: 78ch; }
}

/* =====================================================================================================
   6. Pop report, player history
   ===================================================================================================== */
/* LA-08: Pop Report is two sentences - no full-screen blank before the footer */
body.page-id-124 main#primary { min-height: 0 !important; }
body.page-id-124 .vc-zigzag-wrapper { display: none; }
/* LA-03: the player-history template prints no page header, so its content and the footer sat under the fixed header */
body.page-template-player-history .table__section { padding: calc(var(--gg-hdr-h, 6rem) + var(--gg-bar-h, 0px) + 24px) max(16px, 5vw) 24px; }
body.page-template-player-history:not(:has(.table__section)) .gg-ft { margin-top: calc(var(--gg-hdr-h, 6rem) + var(--gg-bar-h, 0px)); }

/* =====================================================================================================
   7. My Account, Lost password (AL-.. = account pages)
   ===================================================================================================== */
/* short account pages: the footer follows the form instead of starting one screen down */
body.woocommerce-account main#primary { min-height: 0 !important; }
body.woocommerce-account .woocommerce .password-input .show-password-input { width: 44px; height: 46px; top: 0; right: 0; padding: 0; display: grid; place-items: center; }
body.woocommerce-account .woocommerce .woocommerce-form-login__rememberme { min-height: 44px; display: inline-flex; align-items: center; }
body.woocommerce-account .woocommerce .lost_password a { display: inline-block; padding: 12px 0; }
body.woocommerce-account .woocommerce .gg-acc__optin label { display: flex; gap: 8px; align-items: flex-start; padding: 10px 0; }
body.woocommerce-account .woocommerce .gg-acc__optin input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
@media (min-width: 1200px) {
	/* the signed-out cards line up with the page title */
	body.woocommerce-account main .woocommerce:not(:has(> .woocommerce-MyAccount-navigation)) { margin-left: 0; margin-right: auto; }
}

/* =====================================================================================================
   8. Desktop header: the page you are on is marked with dark text and an underline (white on gold was 1.92:1)
   ===================================================================================================== */
@media (min-width: 1200px) {
	html body #primary-menu > li.current-menu-item:not(.gg-chrome-submit):not(.gg-acc-nav) > a,
	html body #primary-menu > li:not(.gg-chrome-submit):not(.gg-acc-nav) > a:hover {
		color: var(--gg-ink);
		text-shadow: 0 .04rem #171717;
		box-shadow: inset 0 -4px 0 var(--gg-ink);
	}
	html body #primary-menu > li > a.gg-acc-nav__link, html body #primary-menu > li.gg-acc-nav .gg-acc-nav__text { font-size: max(.72rem, 13px); }
}

/* =====================================================================================================
   9. Legal pages (Terms, Privacy): sections fold into rows (ui-fit.js builds them); readable line length
   ===================================================================================================== */
body.page-id-55 .entry-content a, body.page-id-669 .entry-content a { color: #725607; text-decoration: underline; text-underline-offset: 2px; }
body.page-id-55 .entry-content a:hover, body.page-id-669 .entry-content a:hover { color: #161616; }
body.page-id-55 .entry-content h2, body.page-id-669 .entry-content h2 { font-size: clamp(24px, 2.1rem, 40px) !important; line-height: 1.15 !important; }
body.page-id-55 .entry-content h3, body.page-id-669 .entry-content h3 { font-size: clamp(20px, 1.6rem, 28px) !important; }
.gg-legal > * { max-width: 52rem; }
.gg-legal-tools { display: flex; justify-content: flex-end; margin: 18px 0 8px; }
.gg-legal-tools button {
	font: 600 15px/1 'D35', sans-serif;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid #d9d2bf;
	border-radius: 8px;
	background: #fff;
	color: #161616;
	cursor: pointer;
}
.gg-legal-tools button:hover { border-color: #161616; }
.gg-legal-tools button:focus-visible { outline: 3px solid #E5B510; outline-offset: 2px; }
.gg-legal-item { background: #fff; border: 1px solid #E4DCC8; border-radius: 12px; margin: 0 0 .6rem; }
.gg-legal-item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .85rem; padding: .35rem 1.1rem; min-height: 56px; }
.gg-legal-item > summary::-webkit-details-marker { display: none; }
.gg-legal-item > summary:focus-visible { outline: 3px solid #161616; outline-offset: 2px; border-radius: 12px; }
.entry-content .gg-legal .gg-legal-item.gg-legal-item > summary > h2 { flex: 1; margin: 0 !important; padding: 0; font-family: 'd77', sans-serif !important; text-transform: uppercase; color: #161616 !important; font-size: clamp(18px, 1.3rem, 26px) !important; line-height: 1.15 !important; letter-spacing: .01em; }
.gg-legal-item .gg-legal-chev { flex: none; width: 1.6rem; height: 1.6rem; border: 1.5px solid #161616; border-radius: 50%; position: relative; }
.gg-legal-item .gg-legal-chev::before { content: ''; position: absolute; left: 50%; top: 45%; width: .45rem; height: .45rem; border-right: 1.5px solid #161616; border-bottom: 1.5px solid #161616; transform: translate(-50%, -50%) rotate(45deg); }
.gg-legal-item[open] .gg-legal-chev { transform: rotate(180deg); }
.gg-legal-item[open] > summary { border-bottom: 1px solid #EFE7D3; }
.gg-legal-body { padding: 1rem 1.1rem 1.1rem; }
.gg-legal-body > :first-child { margin-top: 0; }
.gg-legal-body > :last-child { margin-bottom: 0; }
@media print {
	.gg-legal-tools { display: none; }
	.gg-legal-item { border: 0; }
}