/* ==========================================================================
   Features workstream, 25 September 2026 (includes/sections/features.php)
   Loaded on every page, so everything here is scoped to its own classes,
   except the menu fit below, which is scoped to the shop's main menu row.
   ========================================================================== */

/* ---- 1. AUCTIONS stays at the right end of the menu row on laptops ----
   Brief page 2: AUCTIONS at the right end of the menu bar, after TODAY'S
   GOLD RATE. With twelve top level items the row needs about 1291px at the
   theme's 13px with 3px padding and 8px gaps (Jost 500, measured from the
   font's own widths; the result matched the live menu's measured end point
   to within 3px). The header is full width: 95% of the window, never under
   1222px, less 30px of container padding and the nav's own 20px. So the row
   wrapped below 1425px, which is most laptops (1366, 1280). Each band below
   is sized to leave spare room at its narrowest width even with a 17px
   Windows scrollbar (12px or more; 1440px keeps the theme sizes and gains
   20px from the nav padding, 31px spare). Section menus
   (gft-section-menu) are shorter and are left alone. */
@media (min-width: 1025px) and (max-width: 1599px) {
	.whb-header .whb-header-bottom .wd-header-main-nav { padding-inline: 0; }
	.whb-header .whb-header-bottom .wd-nav-main:not(.gft-section-menu) > li > a { white-space: nowrap; }
}
/* 1361 to 1439 (the 1366px laptop): 13px, 2px padding, 4px gaps: 1223px of 1246px or more, even with a 17px scrollbar */
@media (min-width: 1361px) and (max-width: 1439px) {
	.whb-header .whb-header-bottom .wd-nav-main:not(.gft-section-menu) { column-gap: 4px; }
	.whb-header .whb-header-bottom .wd-nav-main:not(.gft-section-menu) > li > a { font-size: 13px; padding-left: 2px; padding-right: 2px; }
}
/* 1222 to 1360 (the 1280px laptop): 12px, 3px, 4px: 1162px of 1192px */
@media (min-width: 1222px) and (max-width: 1360px) {
	.whb-header .whb-header-bottom .wd-nav-main:not(.gft-section-menu) { column-gap: 4px; }
	.whb-header .whb-header-bottom .wd-nav-main:not(.gft-section-menu) > li > a { font-size: 12px; padding-left: 3px; padding-right: 3px; letter-spacing: 0; }
}
/* 1160 to 1221: 12px, 1px, 2px: 1092px of 1130px */
@media (min-width: 1160px) and (max-width: 1221px) {
	.whb-header .whb-header-bottom .wd-nav-main:not(.gft-section-menu) { column-gap: 2px; }
	.whb-header .whb-header-bottom .wd-nav-main:not(.gft-section-menu) > li > a { font-size: 12px; padding-left: 1px; padding-right: 1px; letter-spacing: 0; }
}
/* 1100 to 1159: 11px, 2px, 2px: 1031px of 1070px */
@media (min-width: 1100px) and (max-width: 1159px) {
	.whb-header .whb-header-bottom .wd-nav-main:not(.gft-section-menu) { column-gap: 2px; }
	.whb-header .whb-header-bottom .wd-nav-main:not(.gft-section-menu) > li > a { font-size: 11px; padding-left: 2px; padding-right: 2px; letter-spacing: 0; }
}
/* 1025 to 1099: 10.5px, 1px, 2px: 964px of 995px */
@media (min-width: 1025px) and (max-width: 1099px) {
	.whb-header .whb-header-bottom .wd-nav-main:not(.gft-section-menu) { column-gap: 2px; }
	.whb-header .whb-header-bottom .wd-nav-main:not(.gft-section-menu) > li > a { font-size: 10.5px; padding-left: 1px; padding-right: 1px; letter-spacing: 0; }
}

/* ---- 2. Trade Account (Wholesale), next to My Account in the header ---- */
.gftf-header-trade { position: relative; }
.gftf-header-trade::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 16px; margin-top: -8px; background: #E3DACB; }
.gftf-header-trade > a { color: #A8802D; }
.gftf-header-trade > a:hover { color: #7F5F1F; }
.gftf-header-trade .gftf-ht-sub { font-weight: 400; opacity: .85; }
@media (max-width: 1279px) {
	.gftf-header-trade .gftf-ht-sub { display: none; }
}
.menu-item-gftf-trade > a .nav-link-text { color: #A8802D; }

/* ---- 3. The Click & Reserve poster on the product page ---- */
.gftf-crposter { margin: 34px 0 8px; }
.gftf-crposter-fig { position: relative; max-width: 1200px; margin: 0 auto; line-height: 0; container-type: inline-size; }
.gftf-crposter-fig img { display: block; width: 100%; height: auto; border: 1px solid #EFE7D6; }
.gftf-cr-btn {
	position: absolute; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
	font-family: "Jost", Arial, sans-serif; font-weight: 500; line-height: 1; letter-spacing: .1em; text-transform: uppercase;
	text-decoration: none !important; white-space: nowrap; font-size: 13px; font-size: clamp(10px, 1.3cqw, 18px);
	transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.gftf-cr-reserve {
	left: 6.22%; top: 63.66%; width: 19.86%; height: 8.61%;
	background: linear-gradient(135deg, #B8913F 0%, #E8D08F 52%, #C9A24A 100%); color: #1A1A1A; border: 1px solid #C6A44E;
	box-shadow: 0 2px 6px rgba(120, 90, 30, .18);
}
.gftf-cr-reserve:hover, .gftf-cr-reserve:focus { color: #1A1A1A; box-shadow: 0 4px 14px rgba(198, 164, 78, .45); }
.gftf-cr-chat { left: 27.75%; top: 63.76%; width: 19.62%; height: 8.5%; background: #FFFFFF; color: #23201A; border: 1px solid #C6A44E; }
.gftf-cr-chat:hover, .gftf-cr-chat:focus { background: #C6A44E; color: #FFFFFF; }
@media (max-width: 767px) {
	.gftf-crposter { margin: 24px 0 4px; }
	.gftf-cr-btn { font-size: 12px; font-size: clamp(10px, 3.5cqw, 17px); }
	.gftf-cr-reserve { left: 10.2%; top: 44.44%; width: 57.7%; height: 5.5%; }
	.gftf-cr-chat { left: 10.2%; top: 51.32%; width: 57.7%; height: 5.5%; }
}

/* ---- 4. The booking calendar on /book-an-appointment/ ---- */
.gfbk { max-width: 1080px; margin: 0 auto; font-family: "Jost", Arial, sans-serif; color: #23201A; }
.gfbk [hidden] { display: none !important; }
.gfbk-steps { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.gfbk-pane { background: #FFFFFF; border: 1px solid #E8E2D5; padding: 24px; }
.gfbk-pane-details { grid-column: 1 / -1; }
.gfbk-h { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 600; font-size: 24px; line-height: 1.2; color: #23201A; }
.gfbk-n { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: #A8802D; color: #FFFFFF; font-family: "Jost", Arial, sans-serif; font-size: 14px; font-weight: 500; }
.gfbk-cal-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.gfbk-cal-title { font-size: 15px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.gfbk button.gfbk-prev, .gfbk button.gfbk-next {
	width: 38px; height: 38px; min-height: 0; padding: 0; border: 1px solid #E8E2D5; border-radius: 0; background: #FBF7EF;
	color: #23201A; font-size: 22px; line-height: 1; text-transform: none; box-shadow: none;
}
.gfbk button.gfbk-prev:hover, .gfbk button.gfbk-next:hover { border-color: #A8802D; background: #FBF7EF; color: #23201A; }
.gfbk button.gfbk-prev[disabled], .gfbk button.gfbk-next[disabled] { opacity: .3 !important; }
.gfbk-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.gfbk-wd { padding: 4px 0; text-align: center; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #8A8172; }
.gfbk-d { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; min-height: 36px; border: 1px solid transparent; font-size: 15px; color: #BDB5A8; }
.gfbk-d.is-closed, .gfbk-d.is-full, .gfbk-d.is-shut { background: #F7F5F1; }
.gfbk-d.is-full { text-decoration: line-through; }
.gfbk button.gfbk-d {
	width: 100%; min-height: 36px; padding: 0; border: 1px solid #E8DCC0; border-radius: 0; background: #FBF7EF; box-shadow: none;
	color: #23201A; font-size: 15px; font-weight: 500; line-height: 1; text-transform: none; letter-spacing: 0;
}
.gfbk button.gfbk-d:hover { border-color: #A8802D; background: #FBF7EF; color: #23201A; }
.gfbk button.gfbk-d.is-picked, .gfbk button.gfbk-d.is-picked:hover { border-color: #A8802D; background: #A8802D; color: #FFFFFF; }
.gfbk-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 14px 0 0; font-size: 13px; color: #8A8172; }
.gfbk-key span { display: inline-block; width: 14px; height: 14px; border: 1px solid #E8DCC0; background: #FBF7EF; }
.gfbk-key .gfbk-key-full { margin-left: 10px; border-color: #EEEAE3; background: #F7F5F1; }
.gfbk-hours { margin: 14px 0 0; font-size: 14px; line-height: 1.6; color: #5A554B; }
.gfbk-day { margin: 0 0 12px; font-size: 15px; font-weight: 500; color: #5A554B; }
.gfbk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.gfbk button.gfbk-t {
	min-height: 0; padding: 12px 6px; border: 1px solid #E8DCC0; border-radius: 0; background: #FFFFFF; box-shadow: none;
	color: #23201A; font-size: 14px; font-weight: 500; line-height: 1.2; text-transform: none; letter-spacing: 0;
}
.gfbk button.gfbk-t:hover { border-color: #A8802D; background: #FFFFFF; color: #23201A; }
.gfbk button.gfbk-t.is-picked, .gfbk button.gfbk-t.is-picked:hover { border-color: #23201A; background: #23201A; color: #FFFFFF; }
.gfbk-summary { margin: 0 0 16px; padding: 12px 14px; background: #FBF7EF; border-left: 3px solid #A8802D; font-size: 15px; }
.gfbk-piece { margin: -6px 0 16px; font-size: 14px; }
.gfbk-piece a { color: #A8802D; }
.gfbk-msg { margin: 0; font-size: 14.5px; line-height: 1.6; color: #5A554B; }
.gfbk-msg a { color: #A8802D; }
.gfbk-loading { margin: 0; color: #8A8172; }
.gfbk-error { margin: 0 0 14px; padding: 10px 14px; background: #FBF0F0; border-left: 3px solid #B05050; color: #7A2E2E; font-size: 14.5px; }
.gfbk .gfbk-book { margin-top: 4px; }
.gfbk .gfbk-book[disabled] { opacity: .45 !important; cursor: not-allowed !important; }
.gfbk-done { max-width: 640px; margin: 0 auto; padding: 30px 28px; background: #FFFFFF; border: 1px solid #E8E2D5; border-top: 3px solid #A8802D; text-align: center; outline: none; }
.gfbk-done .gfbk-h { justify-content: center; }
.gfbk-done p { margin: 0 0 10px; font-size: 15px; line-height: 1.65; color: #5A554B; }
.gfbk-done-when strong { font-size: 19px; color: #23201A; }
.gfbk-done a { color: #A8802D; }
@media (max-width: 900px) {
	.gfbk-steps { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.gfbk-pane { padding: 18px 14px; }
	.gfbk-grid { gap: 4px; }
	.gfbk-slots { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}

/* ---- 5. Track my Order/Repair ---- */
.gft-tool.gftf-track { max-width: 760px; }
.gftf-track-card { margin: 0 0 22px; padding: 18px 20px; background: #FBF7EF; border: 1px solid #E8E2D5; border-left: 3px solid #A8802D; }
.gftf-track-card p { margin: 0 0 6px; }
.gftf-tc-kind { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #8A8172; }
.gftf-tc-title { font-family: "Cormorant Garamond", Georgia, serif; font-size: 24px; font-weight: 600; line-height: 1.2; color: #23201A; }
.gftf-tc-status { font-size: 15.5px; }
.gftf-tc-meta, .gftf-tc-line { font-size: 14px; color: #5A554B; }
.gftf-tc-sub { margin-top: 12px !important; font-weight: 500; }
.gftf-tc-items, .gftf-tc-notes { margin: 6px 0 10px; padding-left: 18px; font-size: 14.5px; color: #5A554B; }
.gftf-tc-notes { list-style: none; padding-left: 0; }
.gftf-tc-notes li { padding: 6px 0; border-top: 1px solid #EFE7D6; }
.gftf-tc-notes li span { display: block; font-size: 12.5px; color: #8A8172; }
.gftf-tc-notes li p { margin: 0; }
.gftf-steps { margin: 10px 0 12px; padding: 0; list-style: none; counter-reset: gftfstep; }
.gftf-steps li { position: relative; padding: 4px 0 4px 26px; font-size: 14.5px; color: #9A9287; }
.gftf-steps li::before { content: ""; position: absolute; left: 4px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border: 1px solid #CFC5B3; border-radius: 50%; background: #FFFFFF; }
.gftf-steps li.is-done { color: #5A554B; }
.gftf-steps li.is-done::before { border-color: #A8802D; background: #A8802D; }
.gftf-steps li.is-now { color: #23201A; font-weight: 600; }
.gftf-steps li.is-now::before { width: 14px; height: 14px; margin-top: -7px; left: 2px; border: 3px solid #A8802D; background: #FFFFFF; }
.gftf-track-login { margin: 16px 0 0; font-size: 14px; color: #5A554B; }
.gftf-track-login a { color: #A8802D; }