/* Gold Factory Toolkit front-end styles */
.gft-tool { max-width: 640px; margin: 0 auto; padding: 28px; background: #fff; border: 1px solid #e8e2d5; }
.gft-field { margin-bottom: 16px; }
.gft-field label { display: block; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: #6a6156; margin-bottom: 6px; }
.gft-field input, .gft-field select, .gft-field textarea { width: 100%; padding: 11px 14px; border: 1px solid #d8d0c0; background: #fff; font-size: 15px; }
.gft-field input:focus, .gft-field select:focus, .gft-field textarea:focus { outline: none; border-color: #c6a44e; }
.gft-row { display: flex; gap: 16px; }
.gft-row .gft-field { flex: 1; }
.gft-row-inline { display: flex; align-items: center; gap: 12px; }
.gft-row-inline label { margin: 0; flex: 1; }
.gft-row-inline input { width: 140px; }
.gft-btn { display: inline-block; background: #1a1a1a; color: #fff; border: none; padding: 13px 30px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .2s; }
.gft-btn:hover { background: #c6a44e; color: #fff; }
.gft-result { margin-top: 18px; padding: 14px 16px; background: #faf6ec; border-left: 3px solid #c6a44e; font-size: 16px; }
.gft-result-trad { background: #fdf9f0; }
.gft-success { margin: 0 0 18px; padding: 14px 16px; background: #f0f7ef; border-left: 3px solid #5a9a58; }
.gft-error { background: #fbf0f0 !important; border-left-color: #b05050 !important; }
.gft-note { font-size: 13px; color: #8a8172; margin-top: 14px; line-height: 1.5; }
.gft-table { width: 100%; border-collapse: collapse; }
.gft-table th, .gft-table td { padding: 12px 14px; border-bottom: 1px solid #eee6d8; text-align: left; }
.gft-table thead th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #6a6156; border-bottom: 2px solid #c6a44e; }
.gft-price-table td.gft-price-cell { font-weight: 600; }
.gft-price-updated { font-size: 12px; color: #8a8172; margin-top: 10px; }
.gft-breakup-total td { font-weight: 700; border-top: 2px solid #c6a44e; }
.gft-price-breakup { margin: 30px 0; }
.gft-price-breakup h3 { font-size: 20px; margin-bottom: 14px; }
.gft-reserve-wrap { margin-top: 14px; }
.gft-reserve-btn.button { width: 100%; text-align: center; background-image: linear-gradient(134deg,#A8802D 0%,#FBF3A1 47%,#CDA42D 100%); background-color: transparent; color: #1a1a1a; border: 1px solid #c6a44e; transition: box-shadow .3s ease; }
.gft-reserve-btn.button:hover { background-image: linear-gradient(134deg,#A8802D 0%,#FBF3A1 67%,#CDA42D 100%); background-color: transparent; color: #1a1a1a; box-shadow: 0 4px 16px rgba(198,164,78,.45); }
.gft-reserve-note { display: block; margin-top: 8px; font-size: 12px; color: #8a8172; line-height: 1.5; }
/* ---- Zakat al-Mal calculator ---- */
.gft-zakat2 { max-width: 760px; }
.gft-zk2-section { border: 1px solid #E8E2D5; background: #FAF6EF; padding: 22px; margin-bottom: 18px; }
.gft-zk2-section h3 { font-size: 19px; margin: 0 0 14px; color: #23201A; }
.gft-zk2-choice label { display: block; margin-bottom: 10px; font-size: 14px; color: #5A554B; cursor: pointer; }
.gft-zk2-choice input { margin-right: 8px; }
.gft-zk2-goldrow { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.gft-zk2-goldrow input[type=number] { width: 130px; padding: 9px 10px; border: 1px solid #E8E2D5; background: #fff; }
.gft-zk2-goldrow select { padding: 9px 10px; border: 1px solid #E8E2D5; background: #fff; }
.gft-zk2-personal { font-size: 13px; color: #8A8172; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.gft-zk2-remove { border: 1px solid #E8E2D5; background: #fff; color: #8A8172; width: 30px; height: 30px; line-height: 1; cursor: pointer; }
.gft-zk2-remove:hover { color: #C6A44E; border-color: #C6A44E; }
.gft-btn-ghost { background: none; border: 1px dashed #C6A44E; color: #C6A44E; padding: 8px 16px; font-size: 13px; cursor: pointer; }
.gft-btn-ghost:hover { background: #C6A44E; color: #fff; }
.gft-zk2-calc { background-image: linear-gradient(134deg,#A8802D 0%,#FBF3A1 47%,#CDA42D 100%); background-color: transparent; color: #1a1a1a; border: 0; transition: box-shadow .3s ease; }
.gft-zk2-calc:hover { background-image: linear-gradient(134deg,#A8802D 0%,#FBF3A1 67%,#CDA42D 100%); background-color: transparent; color: #1a1a1a; box-shadow: 0 4px 16px rgba(198,164,78,.45); }
.gft-zk2-result { margin-top: 22px; border: 1px solid #E8E2D5; padding: 22px; }
.gft-zk2-result h3 { font-size: 19px; margin: 0 0 14px; }
.gft-zk2-result td:last-child { text-align: right; font-weight: 600; }
@media (max-width: 600px) {
.gft-zk2-goldrow input[type=number] { width: 100%; }
.gft-zk2-goldrow select { width: 100%; }
.gft-row { flex-direction: column; gap: 0; }
.gft-tool { padding: 18px; }
}
/* ---- traditional weight breakdown (converter + product page) ---- */
.gft-result-trad { background: #FAF6EF; border-left: 3px solid #C6A44E; padding: 16px 20px; }
.gft-bd-title { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #8A8172; margin-bottom: 10px; }
.gft-bd-row { display: flex; justify-content: space-between; gap: 18px; padding: 7px 0; border-bottom: 1px solid #E8E2D5; font-size: 15px; color: #5A554B; }
.gft-bd-row:last-child { border-bottom: 0; }
.gft-bd-row strong { color: #23201A; text-align: right; }
.gft-local-weights { margin: 26px 0 8px; }
.gft-local-weights h3 { font-size: 20px; margin-bottom: 14px; }
.gft-local-weights td:last-child { text-align: right; font-weight: 600; color: #23201A; }
.gft-weight-converter optgroup { font-style: normal; font-weight: 600; color: #8A8172; }
/* ---- loyalty points ---- */
.gft-points-row th { vertical-align: top; }
.gft-points-row td { text-align: right; }
.gft-points-note { display: block; margin-top: 6px; font-size: 13px; font-weight: 400; color: #8A8172; line-height: 1.55; }
.gft-points-panel { margin: 0 0 26px; padding: 22px 26px; background: #FAF6EF; border-left: 3px solid #C6A44E; }
.gft-points-panel h3 { margin: 0 0 6px; font-size: 22px; color: #23201A; }
.gft-points-panel p { margin: 0; color: #5A554B; font-size: 15px; line-height: 1.6; }
/* ---- membership rewards ---- */
.gft-tier-badge { display: inline-block; margin-bottom: 10px; padding: 5px 14px; background: linear-gradient(134deg,#A8802D 0%,#FBF3A1 47%,#CDA42D 100%); color: #1A1A1A; font-size: 11px; font-weight: 600; letter-spacing: .16em; }
.gft-tier-upgrade { margin: 0 0 12px; padding: 10px 14px; background: #1A1A1A; color: #FBF3A1; font-size: 14px; }
.gft-tier-bar { height: 8px; margin: 14px 0 8px; background: #E8E2D5; border-radius: 4px; overflow: hidden; }
.gft-tier-bar span { display: block; height: 100%; background: linear-gradient(90deg,#A8802D,#CDA42D); }
.gft-product-points { margin: 10px 0 16px; padding: 10px 14px; background: #FAF6EF; border-left: 3px solid #C6A44E; font-size: 14px; color: #5A554B; }
.gft-product-points a { color: #A8802D; text-decoration: underline; }
/* ---- checkout payment options + returns notices ---- */
.gft-pay-options { margin: 0 0 26px; padding: 22px 26px; border: 1px solid #E8E2D5; background: #FFFFFF; }
.gft-pay-options h3 { margin: 0 0 14px; font-size: 19px; color: #23201A; }
.gft-pay-alert { margin: 0 0 14px; padding: 12px 16px; background: #1A1A1A; color: #FBF3A1; font-size: 14px; line-height: 1.55; }
.gft-pay-list { list-style: none; margin: 0; padding: 0; }
.gft-pay-list li { padding: 12px 0; border-bottom: 1px solid #F1EAD9; }
.gft-pay-list li:last-child { border-bottom: 0; }
.gft-pay-name { display: block; font-size: 14px; font-weight: 600; letter-spacing: .06em; color: #23201A; text-transform: uppercase; }
.gft-pay-note { display: block; margin-top: 4px; font-size: 13.5px; color: #5A554B; line-height: 1.6; }
.gft-pay-returns { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid #E8E2D5; font-size: 13.5px; color: #5A554B; line-height: 1.6; }
.gft-no-return { margin: 12px 0 16px; padding: 12px 16px; background: #FBF4F0; border-left: 3px solid #B0764A; font-size: 14px; color: #5A554B; line-height: 1.6; }
.gft-can-return { margin: 8px 0 14px; font-size: 13.5px; color: #8A8172; }
.gft-loop-flag { display: block; margin-top: 4px; font-size: 11px; letter-spacing: .08em; color: #B0764A; text-transform: uppercase; }
.gft-track-login { margin-top: 14px; font-size: 14px; color: #5A554B; }
.gft-track-login a { color: #A8802D; text-decoration: underline; }
.gft-hygiene-note { padding: 12px 16px; background: #FBF4F0; border-left: 3px solid #B0764A; color: #5A554B; }
.gft-check { display: block; margin: 14px 0 18px; font-size: 14px; color: #5A554B; line-height: 1.55; }
.gft-check input { margin-right: 8px; }
/* ---- showroom availability + viewing button ---- */
.gft-showroom { margin: 6px 0 12px; font-size: 14px; line-height: 1.55; }
.gft-showroom-yes { color: #3E7D4E; }
.gft-showroom-yes:before { content: "\2713"; margin-right: 7px; font-weight: 700; }
.gft-showroom-made { color: #8A6D2F; }
.gft-viewing-btn.button { display: inline-block; margin-top: 10px; width: 100%; text-align: center; background: transparent; color: #1A1A1A; border: 1px solid #1A1A1A; }
.gft-viewing-btn.button:hover { background: #1A1A1A; color: #FFFFFF; }
/* ---- gold weight (gross) + payment options on the product page ---- */
.gft-weight-line { margin: 0 0 12px; display: flex; align-items: baseline; gap: 10px; font-size: 15px; color: #5A554B; }
.gft-weight-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8A8172; }
.gft-weight-line strong { color: #23201A; font-weight: 600; }
.gft-pay-line { margin: 0 0 18px; padding: 11px 15px; background: #FAF6EF; border-left: 3px solid #C6A44E; font-size: 13px; line-height: 1.8; color: #5A554B; }
.gft-pay-line-label { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8A8172; margin-bottom: 2px; }
.gft-pay-sep { display: inline-block; width: 4px; height: 4px; margin: 0 9px; border-radius: 50%; background: #C6A44E; vertical-align: middle; }
.gft-pay-line a { color: #A8802D; text-decoration: underline; }
.gft-pay-choose { margin: 14px 0 0 !important; color: #8A8172 !important; }
/* ---- pricing engine, pre orders and sizing ---- */
.gft-enquire-price { display: inline-flex; align-items: baseline; gap: 5px; }
.gft-enquire-price .gft-enquire-symbol { color: #23201A; font-weight: 600; }
.gft-enquire-price a { color: #A8802D; font-weight: 600; text-decoration: underline; letter-spacing: .04em; }
.gft-enquire-price a:hover { color: #23201A; }
.gft-preorder-note { margin: 12px 0 0; padding: 11px 15px; background: #FAF6EF; border-left: 3px solid #C6A44E; font-size: 13.5px; line-height: 1.6; color: #5A554B; }
.gft-preorder-note strong { color: #23201A; }
.gft-loop-preorder { color: #A8802D; }
.gft-size-specs { margin: 4px 0 16px; }
.gft-size-specs table { width: 100%; }
.gft-size-specs td { padding: 7px 0; border-bottom: 1px solid #F1EAD9; font-size: 14px; color: #5A554B; }
.gft-size-specs td:last-child { text-align: right; color: #23201A; }
.gft-bangle-sizes { margin: 0 0 18px; padding: 12px 15px; background: #FAF6EF; border-left: 3px solid #C6A44E; }
.gft-bangle-sizes summary { cursor: pointer; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #8A8172; }
.gft-bangle-sizes table { margin-top: 12px; }
.gft-bangle-sizes .gft-note { margin: 10px 0 0; font-size: 13px; color: #8A8172; }
.gft-resize { margin: 0 0 18px; }
.gft-resize label { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8A8172; margin-bottom: 6px; }
.gft-resize select, .gft-resize input[type=text] { width: 100%; max-width: 340px; padding: 10px 12px; border: 1px solid #E8E2D5; background: #fff; font-size: 15px; }
.gft-resize-note { margin: 8px 0 0; font-size: 13px; color: #8A8172; line-height: 1.6; }
.gft-size-table td, .gft-size-table th { white-space: nowrap; }
/* ---- gold bank, trade portal and collections ---- */
.gft-bank-panel { margin: 0 0 26px; padding: 22px 26px; background: #FAF6EF; border-left: 3px solid #C6A44E; }
.gft-bank-panel h3 { margin: 0 0 10px; font-size: 20px; color: #23201A; }
.gft-bank-balance { font-size: 17px; color: #23201A; margin: 0 0 8px; }
.gft-bank-balance strong { color: #A8802D; }
.gft-bank-note { font-size: 13.5px; color: #5A554B; line-height: 1.6; margin: 0 0 12px; }
.gft-bank-panel .gft-table { margin-top: 14px; background: #fff; }
.gft-collection { margin: 0 0 6px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #A8802D; }
.gft-trade-form .gft-check { margin: 16px 0; }
.gft-worksheet-item img { max-width: 100%; height: auto; }
/* ---- gold buying calculator, buying prices, valuations ---- */
.gft-gold-calc { max-width: 860px; }
.gft-calc-row { display: grid; grid-template-columns: 1.4fr 1fr auto auto 36px; gap: 10px; align-items: center; margin-bottom: 10px; }
.gft-calc-row select, .gft-calc-row input { padding: 10px 12px; border: 1px solid #E8E2D5; background: #fff; font-size: 15px; width: 100%; }
.gft-calc-rate { font-size: 13px; color: #8A8172; white-space: nowrap; }
.gft-calc-value { font-size: 15px; font-weight: 600; color: #23201A; white-space: nowrap; }
.gft-calc-remove { border: 1px solid #E8E2D5; background: #fff; color: #8A8172; width: 34px; height: 34px; line-height: 1; font-size: 18px; cursor: pointer; }
.gft-calc-remove:hover { color: #C6A44E; border-color: #C6A44E; }
.gft-calc-result { margin-top: 24px; border-top: 1px solid #E8E2D5; padding-top: 20px; }
.gft-calc-total { font-size: 19px; color: #5A554B; margin: 16px 0 20px; }
.gft-calc-total strong { color: #A8802D; font-size: 26px; }
.gft-calc-options { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gft-calc-option { padding: 18px 20px; background: #FAF6EF; border-left: 3px solid #C6A44E; }
.gft-calc-option h4 { margin: 0 0 8px; font-size: 17px; color: #23201A; }
.gft-calc-option p { font-size: 14px; line-height: 1.6; color: #5A554B; margin: 0 0 14px; }
.gft-calc-charge { font-size: 13px; color: #8A8172; }
.gft-buying-prices { max-width: 620px; }
.gft-buying-prices td:last-child { text-align: right; }
.gft-val-print { border: 1px solid #E8E2D5; padding: 26px; background: #fff; }
.gft-val-print h2 { margin: 0 0 4px; font-size: 22px; }
.gft-val-ref { font-size: 18px; letter-spacing: .1em; color: #A8802D; margin: 0 0 18px; }
.gft-val-items { white-space: pre-wrap; font-family: inherit; background: #FAF6EF; padding: 12px 14px; font-size: 14px; }
.gft-val-small { font-size: 13px; color: #8A8172; line-height: 1.6; }
@media (max-width: 720px) {
.gft-calc-row { grid-template-columns: 1fr 1fr; }
.gft-calc-rate, .gft-calc-value { grid-column: span 1; }
.gft-calc-options { grid-template-columns: 1fr; }
}
@media print {
body * { visibility: hidden; }
.gft-val-print, .gft-val-print * { visibility: visible; }
.gft-val-print { position: absolute; left: 0; top: 0; width: 100%; border: 0; }
}
/* ---- frequently asked questions ---- */
.gft-faq { max-width: 860px; }
.gft-faq-search { margin: 0 0 22px; }
.gft-faq-search input { width: 100%; padding: 13px 16px; border: 1px solid #E8E2D5; background: #fff; font-size: 16px; }
.gft-faq-search input:focus { outline: none; border-color: #C6A44E; }
.gft-faq-count { margin: 8px 0 0; font-size: 13px; color: #8A8172; }
.gft-faq-group { margin: 30px 0 12px; font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: #A8802D; }
.gft-faq-group:first-of-type { margin-top: 8px; }
.gft-faq-item { border-bottom: 1px solid #F1EAD9; }
.gft-faq-item summary { padding: 15px 30px 15px 0; cursor: pointer; font-size: 16px; color: #23201A; position: relative; list-style: none; }
.gft-faq-item summary::-webkit-details-marker { display: none; }
.gft-faq-item summary:after { content: "+"; position: absolute; right: 4px; top: 13px; font-size: 20px; color: #C6A44E; }
.gft-faq-item[open] summary:after { content: "\2212"; }
.gft-faq-item summary:hover { color: #A8802D; }
.gft-faq-answer { padding: 0 30px 18px 0; }
.gft-faq-answer p { font-size: 15px; line-height: 1.7; color: #5A554B; margin: 0 0 10px; }
.gft-faq-where { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #8A8172; }
.gft-faq-empty { padding: 18px 0; color: #8A8172; }
.gft-faq-index { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.gft-faq-card { display: block; padding: 20px 22px; background: #FAF6EF; border-left: 3px solid #C6A44E; text-decoration: none; transition: box-shadow .25s ease, transform .25s ease; }
.gft-faq-card:hover { box-shadow: 0 6px 20px rgba(35,32,26,.10); transform: translateY(-2px); }
.gft-faq-card-name { display: block; font-size: 16px; color: #23201A; line-height: 1.45; }
.gft-faq-card-count { display: block; margin-top: 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #8A8172; }
@media (max-width: 900px) { .gft-faq-index { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .gft-faq-index { grid-template-columns: 1fr; } }
/* ---- product options ---- */
.gft-options { margin: 0 0 20px; }
.gft-option { margin: 0 0 14px; }
.gft-option label { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #8A8172; margin-bottom: 6px; }
.gft-option select, .gft-option input[type=text] { width: 100%; max-width: 340px; padding: 10px 12px; border: 1px solid #E8E2D5; background: #fff; font-size: 15px; }
.gft-option select:focus, .gft-option input[type=text]:focus { outline: none; border-color: #C6A44E; }
.gft-option-note { margin: 6px 0 0; font-size: 13px; color: #8A8172; line-height: 1.6; }
.gft-options-total { margin: 4px 0 0; padding: 10px 14px; background: #FAF6EF; border-left: 3px solid #C6A44E; font-size: 14px; color: #23201A; }
/* Repair form: work-needed checkbox grid */
.gft-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2px 18px; margin-top: 6px; }
.gft-checks .gft-check { margin: 6px 0; }
@media (max-width: 600px) { .gft-checks { grid-template-columns: 1fr; } }
/* Gift cards */
.gft-gc-fields { margin: 18px 0 4px; padding: 18px 20px; background: #FAF6EF; border: 1px solid #EDE4D2; }
.gft-gc-apply { margin: 0 0 20px; }
.gft-gc-apply label { display: block; font-size: 14px; margin-bottom: 6px; color: #5A554B; }
.gft-gc-row { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.gft-gc-row input { flex: 1 1 200px; }
.gft-gc-applied { margin: 10px 0 0; font-size: 14px; color: #5A554B; }
.gft-gc-applied a { color: #8A8172; text-decoration: underline; }
/* Collections and Styles filter */
.gft-tax-filter { margin: 0 0 24px; }
.gft-tax-filter h5 { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 10px; color: #23201A; }
.gft-tax-filter ul { list-style: none; margin: 0; padding: 0; }
.gft-tax-filter li { margin: 0 0 6px; }
.gft-tax-filter a { font-size: 14px; color: #5A554B; }
.gft-tax-filter a:hover { color: #C6A44E; }
.gft-tax-filter span { color: #8A8172; }
/* Product video */
.gft-product-video-wrap { margin: 34px 0; }
.gft-product-video-wrap h3 { font-size: 20px; margin: 0 0 14px; }
.gft-product-video video { width: 100%; max-width: 720px; height: auto; display: block; background: #1A1A1A; }
/* Recently viewed */
.gft-recently-viewed { margin: 40px 0 10px; clear: both; }
.gft-recently-viewed > h2 { font-size: 22px; margin: 0 0 18px; color: #23201A; }
.gft-recent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; }
.gft-recent-card { display: block; text-decoration: none; color: #23201A; }
.gft-recent-card img, .gft-recent-noimg { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; background: #FAF6EF; }
.gft-recent-name { display: block; font-size: 14px; margin-top: 10px; line-height: 1.4; }
.gft-recent-price { display: block; font-size: 14px; color: #5A554B; margin-top: 4px; }
.gft-recent-card:hover .gft-recent-name { color: #C6A44E; }
/* ---- price sections, for example Under £200 ---- */
.gft-price-band { margin: 0 0 30px; }
.gft-band-count { margin: 0 0 18px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #8A8172; }
.gft-band-empty { padding: 26px 22px; background: #FAF6EF; border-left: 3px solid #C6A44E; color: #5A554B; }
.gft-band-empty a { color: #A8802D; }
.gft-band-pages { display: flex; flex-wrap: wrap; gap: 6px; margin: 26px 0 0; }
.gft-band-pages a,
.gft-band-pages .current { min-width: 38px; padding: 8px 10px; text-align: center; border: 1px solid #E7DFCC; font-size: 14px; }
.gft-band-pages a { color: #5A554B; text-decoration: none; }
.gft-band-pages a:hover { border-color: #C6A44E; color: #23201A; }
.gft-band-pages .current { background: #C6A44E; border-color: #C6A44E; color: #1A1A1A; font-weight: 600; }
/* ---- several photos on the contact form ---- */
.gft-photos { margin: 0 0 6px; }
.gft-photos.is-enhanced .gft-photos-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.gft-photos-drop { display: flex; flex-direction: column; gap: 4px; padding: 20px 22px; text-align: center; cursor: pointer; background: #FAF6EF; border: 1px dashed #C6A44E; border-radius: 2px; transition: background .2s ease, border-color .2s ease; }
.gft-photos-drop strong { font-size: 15px; color: #23201A; letter-spacing: .02em; }
.gft-photos-drop span { font-size: 13px; color: #8A8172; }
.gft-photos-drop:hover, .gft-photos-drop:focus-visible, .gft-photos-drop.is-over { background: #F3ECDD; border-color: #A8802D; outline: none; }
.gft-photos-drop.is-full { opacity: .55; cursor: not-allowed; }
.gft-photos-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.gft-photos-list li { position: relative; width: 92px; }
.gft-photos-list img { display: block; width: 92px; height: 92px; object-fit: cover; border: 1px solid #E7DFCC; border-radius: 2px; }
.gft-photos-meta { display: block; margin-top: 3px; font-size: 11px; color: #8A8172; text-align: center; }
.gft-photos-remove { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; padding: 0; line-height: 20px; font-size: 12px; color: #FFFFFF; background: #1A1A1A; border: 0; border-radius: 50%; cursor: pointer; }
.gft-photos-remove:hover { background: #A6402F; }
.gft-photos-note { margin: 8px 0 0; font-size: 13px; color: #5A554B; min-height: 1em; }
.gft-photos-note.is-warn { color: #A6402F; }
/* ---- gold price in gram, tola and ounce ---- */
.gft-gold-units { margin: 0 0 22px; }
.gft-units-head { margin: 0 0 12px; font-size: 18px; color: #23201A; }
.gft-units-scroll { overflow-x: auto; }
.gft-units-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.gft-units-table th, .gft-units-table td { padding: 10px 14px; text-align: right; border-bottom: 1px solid #EDE3CE; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gft-units-table thead th { text-align: right; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8A8172; font-weight: 500; background: #FAF6EF; }
.gft-units-table th[scope="row"], .gft-units-table thead th:first-child { text-align: left; color: #23201A; font-weight: 600; }
.gft-units-table tbody tr:last-child th, .gft-units-table tbody tr:last-child td { border-bottom: 0; }
.gft-units-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; color: #8A8172; }
.gft-units-empty { padding: 14px 16px; background: #FAF6EF; border-left: 3px solid #C6A44E; color: #5A554B; }
.gft-ticker-units { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 12px; font-size: .86em; opacity: .82; }
.gft-ticker-sep { opacity: .5; }
/* ---- category tags under the product title ---- */
.gft-single-cats { margin: -2px 0 14px; font-size: 12.5px; line-height: 1.6; letter-spacing: .05em; text-transform: uppercase; color: #8A8172; }
.gft-single-cats a { color: #8A8172; text-decoration: none; }
.gft-single-cats a:hover { color: #C6A44E; }
/* ---- a poster that goes somewhere ---- */
.gft-slide-link { display: block; }
.gft-slide-link img { display: block; }
/* ---- ask about this piece ---- */
.gft-ask-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 18px 0 0; }
.gft-ask-btn { background: none; border: 1px solid #C6A44E; color: #8A6A1F; padding: 11px 22px; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .2s ease, color .2s ease; }
.gft-ask-btn:hover { background: #C6A44E; color: #fff; }
.gft-ask-note { font-size: 13px; color: #8A8172; }
body.gft-ask-open { overflow: hidden; }
.gft-ask { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.gft-ask-backdrop { position: absolute; inset: 0; background: rgba(26,26,26,.62); }
.gft-ask-panel { position: relative; width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; background: #fff; border: 1px solid #EDE3CE; padding: 30px 30px 26px; box-shadow: 0 24px 60px rgba(26,26,26,.28); }
.gft-ask-x { position: absolute; top: 10px; right: 14px; background: none; border: 0; font-size: 26px; line-height: 1; color: #8A8172; cursor: pointer; }
.gft-ask-x:hover { color: #23201A; }
.gft-ask-title { margin: 0 0 18px; font-size: 21px; color: #23201A; }
.gft-ask-piece { display: flex; gap: 16px; align-items: flex-start; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid #EDE3CE; }
.gft-ask-img { width: 96px; height: 96px; object-fit: cover; border: 1px solid #EDE3CE; flex: none; }
.gft-ask-facts { display: flex; flex-direction: column; gap: 3px; font-size: 14px; color: #8A8172; min-width: 0; }
.gft-ask-facts strong { font-size: 16px; color: #23201A; font-weight: 600; }
.gft-ask-grid { display: grid; gap: 14px; }
.gft-ask-grid label { display: block; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: #6A6156; }
.gft-ask-grid input, .gft-ask-grid textarea { display: block; width: 100%; margin-top: 6px; padding: 11px 13px; border: 1px solid #D8D0C0; background: #fff; font-size: 15px; font-family: inherit; text-transform: none; letter-spacing: normal; color: #23201A; }
.gft-ask-grid input:focus, .gft-ask-grid textarea:focus { outline: none; border-color: #C6A44E; }
.gft-ask-form .gft-btn { margin-top: 18px; }
.gft-ask-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gft-ask-small { margin: 12px 0 0; font-size: 12.5px; line-height: 1.6; color: #8A8172; }
.gft-ask-sent { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 100001; max-width: 92vw; padding: 14px 22px; background: #1A1A1A; color: #fff; font-size: 14px; box-shadow: 0 12px 30px rgba(26,26,26,.3); transition: opacity .6s ease; }
.gft-ask-sent.gft-ask-fade { opacity: 0; pointer-events: none; }
@media (max-width: 600px) {
.gft-ask-panel { padding: 24px 20px 20px; }
.gft-ask-img { width: 72px; height: 72px; }
}
/* ---- the gallery ---- */
.gft-gallery { --gft-gal-cols: 4; }
.gft-gal-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.gft-gal-f { background: none; border: 1px solid #EDE3CE; color: #6A6156; padding: 8px 15px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: all .2s ease; }
.gft-gal-f:hover { border-color: #C6A44E; color: #8A6A1F; }
.gft-gal-f.is-on { background: #1A1A1A; border-color: #1A1A1A; color: #fff; }
.gft-gal-grid { display: grid; grid-template-columns: repeat(var(--gft-gal-cols), minmax(0, 1fr)); gap: 14px; }
.gft-gal-tile { position: relative; display: block; padding: 0; border: 1px solid #EDE3CE; background: #FAF6EF; cursor: pointer; overflow: hidden; }
.gft-gal-tile img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transition: transform .5s ease; }
.gft-gal-tile:hover img, .gft-gal-tile:focus-visible img { transform: scale(1.05); }
.gft-gal-over { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: 3px; padding: 34px 14px 13px; text-align: left; background: linear-gradient(to top, rgba(26,26,26,.86), rgba(26,26,26,0)); color: #fff; opacity: 0; transition: opacity .3s ease; }
.gft-gal-tile:hover .gft-gal-over, .gft-gal-tile:focus-visible .gft-gal-over { opacity: 1; }
.gft-gal-name { font-size: 14px; font-weight: 600; line-height: 1.3; }
.gft-gal-meta { font-size: 12px; opacity: .8; }
.gft-gal-cta { margin-top: 5px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #E3C877; }
.gft-gal-note { margin: 22px 0 0; font-size: 13.5px; line-height: 1.7; color: #8A8172; max-width: 60ch; }
@media (max-width: 1024px) { .gft-gal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) { .gft-gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .gft-gal-over { opacity: 1; padding-top: 26px; } }
/* the panel is display:flex when open, which beats the browser's [hidden] */
.gft-ask[hidden] { display: none; }
/* two columns for the short fields once there is room, so the panel does not
fill the screen on a laptop */
@media (min-width: 560px) {
.gft-ask-grid { grid-template-columns: 1fr 1fr; column-gap: 16px; }
.gft-ask-grid label:nth-child(1) { grid-column: 1 / -1; }
.gft-ask-grid label:nth-child(4) { grid-column: 1 / -1; }
}
/* ---- members only prices and confirming an address ---- */
.gft-gate-price a { color: #8A6A1F; text-decoration: none; border-bottom: 1px solid rgba(198,164,78,.45); font-size: .92em; letter-spacing: .02em; }
.gft-gate-price a:hover { color: #C6A44E; }
.gft-verify-nudge { margin: 14px 0 0; padding: 12px 15px; background: #FAF6EF; border-left: 3px solid #C6A44E; font-size: 14px; line-height: 1.6; color: #5A554B; }
.gft-verify { margin: 0 0 30px; padding: 22px 24px; background: #FAF6EF; border: 1px solid #EDE3CE; }
.gft-verify h3 { margin: 0 0 14px; font-size: 18px; color: #23201A; }
.gft-verify-table { width: 100%; border-collapse: collapse; }
.gft-verify-table th, .gft-verify-table td { padding: 9px 0; text-align: left; border-bottom: 1px solid #EDE3CE; font-size: 14.5px; vertical-align: middle; }
.gft-verify-table th { font-weight: 600; color: #23201A; width: 40%; }
.gft-verify-table tr:last-child th, .gft-verify-table tr:last-child td { border-bottom: 0; }
.gft-verify-yes { color: #2E6B3E; font-weight: 600; }
.gft-verify-no { color: #8A6A1F; }
.gft-verify-off { color: #8A8172; font-size: 13px; }
.gft-verify-note { margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: #8A8172; }
.gft-verify-ok, .gft-verify-warn { margin: 0 0 18px; padding: 13px 16px; font-size: 14.5px; line-height: 1.6; }
.gft-verify-ok { background: #F1F6F1; border-left: 3px solid #2E6B3E; color: #2C4A34; }
.gft-verify-warn { background: #FAF6EF; border-left: 3px solid #C6A44E; color: #5A554B; }
.gft-btn-small { padding: 7px 15px; font-size: 11.5px; }
/* ---- the bar price on the home page ---- */
.gft-bars { margin: 0; }
.gft-bar-head { margin: 0 0 14px; font-size: 18px; color: #23201A; }
.gft-bar-row { display: flex; flex-wrap: wrap; gap: 14px; }
.gft-bar { flex: 1 1 260px; display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; background: #FAF6EF; border: 1px solid #EDE3CE; border-left: 3px solid #C6A44E; text-decoration: none; transition: background .25s ease, border-color .25s ease, transform .25s ease; }
.gft-bar:hover { background: #fff; border-color: #C6A44E; transform: translateY(-2px); }
.gft-bar-label { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: #8A8172; }
.gft-bar-price { font-size: 30px; line-height: 1.15; color: #23201A; font-variant-numeric: tabular-nums; }
.gft-bar-quiet .gft-bar-price { font-size: 20px; color: #8A8172; }
.gft-bar-note { font-size: 12.5px; line-height: 1.6; color: #8A8172; }
.gft-bar-cta { margin-top: 6px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: #8A6A1F; }
.gft-bar:hover .gft-bar-cta { color: #C6A44E; }
.gft-bar-foot { margin: 12px 0 0; font-size: 12.5px; line-height: 1.6; color: #8A8172; }
@media (max-width: 600px) { .gft-bar { flex: 1 1 100%; padding: 18px 20px; } .gft-bar-price { font-size: 26px; } }
.gft-bars { text-align: center; }
.gft-bar { text-align: left; }
/* ---- the rate tables written out for a customer ---- */
.gft-matrix { margin: 0 0 8px; }
.gft-matrix-head { margin: 0 0 12px; font-size: 18px; color: #23201A; }
.gft-matrix-scroll { overflow-x: auto; }
.gft-matrix-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.gft-matrix-table th, .gft-matrix-table td { padding: 11px 16px; text-align: right; border-bottom: 1px solid #EDE3CE; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gft-matrix-table thead th { text-align: right; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #8A8172; font-weight: 500; background: #FAF6EF; }
.gft-matrix-table th[scope="row"], .gft-matrix-table thead th:first-child { text-align: left; color: #23201A; font-weight: 600; }
.gft-matrix-table tbody tr:last-child th, .gft-matrix-table tbody tr:last-child td { border-bottom: 0; }
.gft-matrix-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.7; color: #8A8172; }
.gft-matrix-cta { margin: 12px 0 0; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
.gft-matrix-cta a { color: #8A6A1F; text-decoration: none; }
.gft-matrix-cta a:hover { color: #C6A44E; }
.gft-matrix-set { display: flex; flex-direction: column; gap: 42px; }
.gft-matrix-block h2 { margin: 0 0 6px; font-size: 22px; color: #23201A; }
.gft-matrix-intro { margin: 0 0 16px; font-size: 14.5px; line-height: 1.7; color: #5A554B; max-width: 62ch; }
.gft-matrix-foot { margin: 0; padding-top: 24px; border-top: 1px solid #EDE3CE; font-size: 13px; line-height: 1.7; color: #8A8172; }
.gft-matrix-foot a { color: #8A6A1F; }
/* the buying table predates the matrix set and is narrower; match it up only
where the four sit together, so its own page is left as it was */
.gft-matrix-block .gft-buying-prices .gft-table { width: 100%; }
.gft-matrix-block .gft-buying-prices .gft-table td:last-child,
.gft-matrix-block .gft-buying-prices .gft-table th:last-child { text-align: right; }
/* ---- chat, WhatsApp and the shop's accounts ---- */
.gft-social { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.gft-social-title { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; color: #8A8172; }
.gft-social-links { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.gft-social-links a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid #EDE3CE; color: #8A8172; text-decoration: none; transition: all .2s ease; }
.gft-social-links a:hover { border-color: #C6A44E; color: #C6A44E; background: rgba(198,164,78,.08); }
.gft-social-links svg { fill: currentColor; }
.gft-social-stack { flex-direction: column; align-items: flex-start; }
.wd-footer .gft-social-links a, .footer-container .gft-social-links a { border-color: rgba(255,255,255,.18); color: #A9A296; }
.wd-footer .gft-social-links a:hover, .footer-container .gft-social-links a:hover { border-color: #C6A44E; color: #C6A44E; }
/* The lift keeps the button clear of the theme's sticky bottom bar on phones,
which otherwise puts the WhatsApp circle straight on top of the Shop icon.
Its height is measured in JS rather than guessed from a breakpoint, so the
button drops back down on its own if the shop ever turns the bar off. */
.gft-wa { position: fixed; left: 20px; bottom: calc(20px + var(--gft-float-lift, 0px)); z-index: 9998; display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px 12px 14px; border-radius: 999px; background: #25D366; color: #fff; text-decoration: none; font-size: 14px; font-weight: 600; box-shadow: 0 8px 22px rgba(26,26,26,.26); transition: transform .2s ease, box-shadow .2s ease, bottom .2s ease; }
.gft-wa:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(26,26,26,.32); }
.gft-wa svg { fill: currentColor; flex: none; }
@media (max-width: 768px) {
.gft-wa { left: 14px; bottom: calc(14px + var(--gft-float-lift, 0px)); padding: 12px; }
.gft-wa-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media print { .gft-wa { display: none; } }
/* ---- rows that drift slowly ---- */
/* a real scroller, which is what makes it draggable and swipeable; the drift
is a scroll position nudged each frame rather than a transform */
.gft-marquee-view { overflow-x: auto; overflow-y: hidden; width: 100%; min-width: 0; flex: 1 1 100%; grid-column: 1 / -1; scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain; cursor: grab; }
.gft-marquee-view::-webkit-scrollbar { display: none; }
.gft-marquee-view.is-dragging { cursor: grabbing; user-select: none; }
.gft-marquee-belt { display: flex; gap: var(--gft-gap, 20px); width: max-content; }
.gft-marquee { display: flex; flex: none; gap: var(--gft-gap, 20px); }
.gft-marquee > * { flex: 0 0 auto; margin: 0; }
/* ---- a category that has nothing in it yet ---- */
.gft-landing { max-width: 760px; margin: 0 auto; padding: 8px 0 40px; }
.gft-landing-lead { margin: 0 0 26px; font-size: 19px; line-height: 1.6; color: #23201A; }
.gft-landing h2 { margin: 0 0 12px; font-size: 17px; letter-spacing: .04em; text-transform: uppercase; color: #8A8172; font-weight: 500; }
.gft-landing-does { margin: 0 0 30px; }
.gft-landing-does ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.gft-landing-does li { position: relative; padding-left: 20px; font-size: 15.5px; line-height: 1.65; color: #5A554B; }
.gft-landing-does li::before { content: ""; position: absolute; left: 0; top: 10px; width: 7px; height: 7px; background: #C6A44E; }
.gft-landing-ask { padding: 24px 26px; background: #FAF6EF; border-left: 3px solid #C6A44E; margin: 0 0 30px; }
.gft-landing-ask p { margin: 0 0 16px; font-size: 15px; line-height: 1.7; color: #5A554B; }
.gft-landing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0 !important; }
.gft-landing-tel { font-size: 14.5px; color: #8A6A1F; text-decoration: none; }
.gft-landing-tel:hover { color: #C6A44E; }
.gft-landing-links { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 20px; }
.gft-landing-links li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid #EDE3CE; font-size: 15px; }
.gft-landing-links a { color: #23201A; text-decoration: none; }
.gft-landing-links a:hover { color: #C6A44E; }
.gft-landing-links span { color: #8A8172; font-size: 13px; white-space: nowrap; }
.gft-landing-all { margin: 18px 0 0; font-size: 14px; }
.gft-landing-all a { color: #8A6A1F; }
/* ---- every category, as a strip ---- */
.gft-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px; }
.gft-cat { display: flex; flex-direction: column; gap: 2px; text-decoration: none; width: 210px; }
/* every third tile is wider: a long row of identical squares is the thing the
client called boring, and a rhythm costs nothing */
.gft-cat-wide { width: 330px; }
/* The tiles are deliberately two widths, which is what the client asked for.
The picture box therefore has to be a fixed HEIGHT, not a fixed ratio: with a
ratio, a 330px tile got a 248px picture and a 210px tile got a 158px one, so
the names underneath sat 90px apart and the row read as broken. */
.gft-cat-img { display: block; background: #FAF6EF; overflow: hidden; margin-bottom: 12px; height: 200px; }
.gft-cat-img img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 12px; box-sizing: border-box; transition: transform .45s ease, opacity .26s ease; }
.gft-cat:hover .gft-cat-img img { transform: scale(1.05); }
.gft-cat-name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; font-weight: 600; line-height: 1.3; color: #23201A; }
.gft-cat:hover .gft-cat-name { color: #8A6A1F; }
.gft-cat-count { font-size: 12.5px; color: #8A8172; }
.gft-marquee-view .gft-cat img { pointer-events: none; }
@media (max-width: 767px) {
.gft-cat { width: 150px; }
.gft-cat-wide { width: 230px; }
.gft-cat-img { height: 140px; }
.gft-cat-name { font-size: 17px; }
}
/* ---- the rate cards ---- */
/* Replaces the four column table. The client asked for tola, ten grams and the
ounce on 24ct and 22ct only, which a shared heading row cannot express: the
lesser purities would each show three blanks. Cards let a purity carry the
figures it is actually quoted in, which is what their own design does. */
.gft-rates { margin: 0; }
.gft-rates-major { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.gft-rates-minor { display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); gap: 14px; margin-top: 14px; }
.gft-rate { display: flex; align-items: stretch; gap: 0; border: 1px solid #E4D7BC; border-radius: 3px; background: #fff; overflow: hidden; min-width: 0; }
.gft-rate-pic { flex: 0 0 38%; max-width: 38%; display: block; position: relative; overflow: hidden; background: #FAF6EF; }
/* .elementor img { height: auto } is specificity 0,1,1 and these pages are
Elementor rendered, so a single class loses to it and the photograph collapses
to its own aspect ratio inside a taller panel. Two classes, not !important. */
.gft-rate .gft-rate-photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.gft-rate-body { flex: 1 1 auto; min-width: 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.gft-rate-name { margin: 0; font-size: 21px; font-weight: 600; color: #23201A; letter-spacing: .01em; }
.gft-rate-name::after { content: ""; display: block; width: 34px; height: 2px; margin-top: 7px; background: #C6A44E; }
.gft-rate-lines { display: flex; flex-direction: column; }
.gft-rate-line { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 8px 0; border-top: 1px solid #F0E8D8; }
.gft-rate-line:first-child { border-top: 0; }
.gft-rate-unit { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: #8A8172; }
.gft-rate-value { font-size: 19px; font-weight: 600; color: #23201A; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gft-rate-minor { }
.gft-rate-minor .gft-rate-body { padding: 13px 15px; gap: 7px; }
.gft-rate-minor .gft-rate-name { font-size: 17px; }
.gft-rate-minor .gft-rate-value { font-size: 17px; }
/* the countries that weigh in tola or bori, drawn rather than set as emoji
because emoji flags do not render on Windows at all */
.gft-flags { display: inline-flex; align-items: center; gap: 3px; }
.gft-flag { display: block; width: 18px; height: 12px; border: 1px solid rgba(35,32,26,.16); border-radius: 1px; }
.gft-rates-tool { margin: 16px 0 0; }
.gft-btn-rate { display: inline-flex; align-items: center; gap: 8px; }
.gft-vat-note { display: inline-block; margin-left: 4px; }
@media (max-width: 560px) {
.gft-rate-pic { flex-basis: 32%; max-width: 32%; }
.gft-rate-body { padding: 13px 14px; }
.gft-rate-name { font-size: 18px; }
.gft-rate-value { font-size: 17px; }
.gft-rate-unit { font-size: 10.5px; letter-spacing: .07em; }
}
/* a purity the client's artwork does not cover keeps the card's shape */
.gft-rate-pic-blank { display: flex; align-items: center; justify-content: center; background: linear-gradient(140deg, #FAF6EF 0%, #F1E6CE 100%); border-right: 1px solid #EDE3CE; }
.gft-rate-pic-blank span { font-size: 26px; font-weight: 600; color: #C6A44E; letter-spacing: .01em; line-height: 1; }
.gft-rate-pic-blank small { font-size: 13px; font-weight: 500; }
/* the weight converter button, gold rather than the site's default black,
to match the bar in the client's own design */
.gft-btn-rate { justify-content: center; width: 100%; max-width: 520px; padding: 15px 26px; background-image: linear-gradient(134deg,#A8802D 0%,#FBF3A1 47%,#CDA42D 100%); background-color: transparent; color: #1A1A1A; border: 1px solid #C6A44E; text-decoration: none; transition: box-shadow .3s ease; }
.gft-btn-rate:hover { background-image: linear-gradient(134deg,#A8802D 0%,#FBF3A1 67%,#CDA42D 100%); background-color: transparent; color: #1A1A1A; box-shadow: 0 4px 16px rgba(198,164,78,.45); }
/* a single line card has room for its label on one line, and "PER / GRAM"
broken across two reads as a squeeze */
.gft-rate-minor .gft-rate-line { gap: 10px; }
.gft-rate-minor .gft-rate-unit { white-space: nowrap; flex-wrap: nowrap; }
/* On a phone the two headline cards carry four rows of figures, which makes
the side photograph column tall and narrow: a 102 by 263 box holding a
landscape photograph, so object-fit crops away everything except a pale
sliver of background. The photograph goes on top instead, in a band whose
shape matches the picture. The single line cards stay side by side, because
their panel is close to the picture's own proportions. */
@media (max-width: 560px) {
.gft-rate-major { flex-direction: column; }
.gft-rate-major .gft-rate-pic { flex: 0 0 auto; max-width: none; width: 100%; height: 132px; border-right: 0; border-bottom: 1px solid #EDE3CE; }
.gft-rate-major .gft-rate-body { padding: 14px 16px 16px; }
}
/* ---- the gold price banner ---- */
/* The client sent this as a finished picture with the figures painted in. Built
as markup over the photograph instead, so every number is the live one and
the panel reflows on a phone rather than needing a second picture. Colours
sampled from their artwork: ground #0B0C0C, price gold #EDBA3C, heading
#F8DF89. */
.gft-bn { position: relative; margin: 28px 0; padding: 0; background-color: #0B0C0C; background-repeat: no-repeat; background-position: right top; background-size: cover; overflow: hidden; border: 1px solid #2A2318; }
/* Two scrims, not one. The client artwork shows the bar photographed top right
with everything below it on a flat black ground, so a single left to right
fade leaves the 22ct tiles sitting on bright metal and unreadable. The
vertical layer takes the lower half back to black; the horizontal one keeps
the heading side dark. */
.gft-bn-has-bg::before { content: ""; position: absolute; inset: 0; background-image:
linear-gradient(to bottom, rgba(11,12,12,0) 26%, rgba(11,12,12,.72) 52%, #0B0C0C 68%),
linear-gradient(90deg, #0B0C0C 0%, #0B0C0C 42%, rgba(11,12,12,.72) 62%, rgba(11,12,12,.28) 82%, rgba(11,12,12,.12) 100%); }
.gft-bn-inner { position: relative; padding: 30px 32px; max-width: 760px; }
.gft-bn-title { margin: 0; font-size: 34px; line-height: 1.1; color: #fff; font-weight: 600; letter-spacing: -.01em; }
.gft-bn-sub { margin: 7px 0 0; font-size: 13.5px; color: #B9B2A4; }
.gft-bn-head { margin-bottom: 22px; }
.gft-bn-head::after { content: ""; display: block; width: 54px; height: 2px; margin-top: 14px; background: linear-gradient(90deg,#F8DF89,#C6A44E); }
.gft-bn-block { margin-bottom: 20px; }
.gft-bn-tag { display: inline-block; margin-bottom: 10px; padding: 6px 16px; background: linear-gradient(134deg,#A8802D 0%,#FBF3A1 47%,#CDA42D 100%); color: #17140E; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.gft-bn-bar { border: 1px solid rgba(198,164,78,.4); padding: 18px 20px; background: rgba(0,0,0,.42); }
.gft-bn-bar-label { display: block; font-size: 12.5px; letter-spacing: .13em; text-transform: uppercase; color: #D8CFBB; }
.gft-bn-bar-price { display: block; margin: 6px 0 8px; font-size: 40px; line-height: 1.05; font-weight: 700; color: #EDBA3C; font-variant-numeric: tabular-nums; }
.gft-bn-bar-note { display: block; font-size: 13px; line-height: 1.6; color: #B9B2A4; }
.gft-bn-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; padding: 11px 22px; background: linear-gradient(134deg,#A8802D 0%,#FBF3A1 47%,#CDA42D 100%); color: #17140E; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: box-shadow .3s ease; }
.gft-bn-cta:hover { color: #17140E; box-shadow: 0 4px 16px rgba(198,164,78,.45); }
.gft-bn-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.gft-bn-tile { border: 1px solid rgba(198,164,78,.34); background: rgba(0,0,0,.42); padding: 12px 14px; }
.gft-bn-tile-label { display: block; font-size: 11.5px; letter-spacing: .11em; text-transform: uppercase; color: #B9B2A4; }
/* on its own line for every tile, because inline it wrapped for the tola and
not for the ounce, which left the two prices sitting at different heights */
.gft-bn-tile-sub { display: block; margin-top: 2px; letter-spacing: .04em; text-transform: none; opacity: .72; }
.gft-bn-tile { display: flex; flex-direction: column; justify-content: space-between; }
.gft-bn-tile-value { display: block; margin-top: 5px; font-size: 21px; font-weight: 700; color: #EDBA3C; font-variant-numeric: tabular-nums; }
.gft-bn-trust { display: flex; flex-wrap: wrap; gap: 10px 26px; list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(198,164,78,.26); }
.gft-bn-trust li { position: relative; padding-left: 20px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: #D8CFBB; }
.gft-bn-trust li::before { content: ""; position: absolute; left: 0; top: 4px; width: 10px; height: 6px; border-left: 2px solid #C6A44E; border-bottom: 2px solid #C6A44E; transform: rotate(-45deg); }
.gft-bn-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 22px; margin: 16px 0 0; font-size: 11.5px; line-height: 1.6; color: #8E877A; }
@media (max-width: 860px) {
/* the photograph is no longer removed on a phone: see "the price banner
on a phone" further down */
.gft-bn-inner { padding: 24px 20px; max-width: none; }
.gft-bn-title { font-size: 27px; }
.gft-bn-bar-price { font-size: 33px; }
}
/* ---- Stay Connected ---- */
/* The client's reference shows a grid of social posts badged by network. These
tiles carry the shop's own jewellery instead, because showing live posts
needs an access token only the shop can issue. Same shape, honest source. */
.gft-wall { margin: 0; }
.gft-wall-head { text-align: center; margin-bottom: 22px; }
.gft-wall-title { margin: 0; font-family: "Cormorant Garamond", serif; font-size: 40px; font-style: italic; font-weight: 600; line-height: 1.15; color: #23201A; }
.gft-wall-title::after { content: ""; display: block; width: 46px; height: 2px; margin: 12px auto 0; background: linear-gradient(90deg,#F8DF89,#C6A44E); }
.gft-wall-sub { margin: 12px 0 0; font-size: 14.5px; color: #8A8172; }
.gft-wall-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.gft-wall-tile { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid #E4D7BC; background: #FAF6EF; text-decoration: none; }
.gft-wall .gft-wall-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gft-wall-tile:hover .gft-wall-photo { transform: scale(1.06); }
.gft-wall-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(26,26,26,0) 42%, rgba(26,26,26,.72) 100%); }
/* the shop photographs pale jewellery on white, so a plain white disc
disappears; the ring and the shadow are what make the badge readable */
.gft-wall-badge { position: absolute; top: 12px; left: 12px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid rgba(35,32,26,.14); box-shadow: 0 2px 8px rgba(26,26,26,.22); color: #23201A; }
.gft-wall-badge svg { fill: currentColor; }
.gft-wall-name { position: absolute; left: 14px; bottom: 12px; z-index: 2; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .05em; }
/* each network keeps its own badge colour, which is how a customer recognises it */
.gft-wall-facebook .gft-wall-badge { color: #1877F2; }
.gft-wall-instagram .gft-wall-badge { color: #C13584; }
.gft-wall-youtube .gft-wall-badge { color: #FF0000; }
.gft-wall-tiktok .gft-wall-badge { color: #010101; }
@media (max-width: 560px) {
.gft-wall-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.gft-wall-title { font-size: 22px; }
.gft-wall-name { font-size: 12px; }
}
/* ---- guide cards ---- */
.gft-guides { margin: 0; }
/* the page sets its section headings in Cormorant Garamond at 34px and centres
the editorial ones. These are editorial sections, so they follow that rather
than inventing a third voice at the bottom of the page. */
.gft-guides-head { margin-bottom: 22px; text-align: center; }
.gft-guides-title { margin: 0; font-family: "Cormorant Garamond", serif; font-size: 40px; font-style: italic; font-weight: 600; line-height: 1.15; color: #23201A; }
.gft-guides-title::after { content: ""; display: block; width: 46px; height: 2px; margin: 12px auto 0; background: linear-gradient(90deg,#F8DF89,#C6A44E); }
.gft-guides-sub { margin: 12px auto 0; font-size: 14.5px; color: #8A8172; max-width: 62ch; }
.gft-guides-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.gft-guide-card { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid #E4D7BC; background: #FAF6EF; text-decoration: none; }
.gft-guides .gft-guide-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gft-guide-card:hover .gft-guide-photo { transform: scale(1.05); }
.gft-guide-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(26,26,26,0) 38%, rgba(26,26,26,.78) 100%); }
.gft-guide-name { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; color: #fff; font-size: 15px; font-weight: 600; line-height: 1.35; }
/* ---- the returns band ---- */
/* One promise standing alone, not a second row of four. The page already has a
four column row of assurances and this is the one it was missing. */
.gft-promise { margin: 0; }
.gft-promise-item { display: flex; align-items: center; gap: 18px; max-width: 780px; margin: 0 auto; padding: 20px 26px; border: 1px solid #E4D7BC; background: #FAF6EF; text-decoration: none; color: inherit; transition: border-color .2s ease, background .2s ease; }
a.gft-promise-item:hover { border-color: #C6A44E; background: #FDFAF3; }
.gft-promise-icon { flex: none; color: #C6A44E; line-height: 0; }
.gft-promise-icon svg { fill: currentColor; }
.gft-promise-words { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gft-promise-name { font-size: 16.5px; font-weight: 600; color: #23201A; }
.gft-promise-note { font-size: 13.5px; line-height: 1.6; color: #8A8172; }
.gft-promise-more { flex: none; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #C6A44E; white-space: nowrap; }
@media (max-width: 620px) {
.gft-promise-item { flex-wrap: wrap; gap: 12px; padding: 16px 18px; }
.gft-promise-words { flex-basis: calc(100% - 48px); }
.gft-promise-more { flex-basis: 100%; }
}
/* ---- customer films ---- */
.gft-films { margin: 0; }
/* films sit between two centred editorial sections, so they centre too */
.gft-films-head { margin-bottom: 22px; text-align: center; }
.gft-films-title { margin: 0; font-family: "Cormorant Garamond", serif; font-size: 40px; font-style: italic; font-weight: 600; line-height: 1.15; color: #23201A; }
.gft-films-sub { margin: 10px 0 0; font-size: 14.5px; color: #8A8172; }
.gft-films-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.gft-film { position: relative; display: block; padding: 0; border: 1px solid #E4D7BC; background: #1A1A1A; cursor: pointer; overflow: hidden; aspect-ratio: 16 / 9; }
.gft-film img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: opacity .3s ease; }
.gft-film:hover img { opacity: 1; }
.gft-film-play { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(255,255,255,.92); }
.gft-film-play::after { content: ""; position: absolute; left: 21px; top: 16px; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent #1A1A1A; }
.gft-film-cap { position: absolute; left: 14px; right: 14px; bottom: 12px; color: #fff; font-size: 13px; text-align: left; }
.gft-film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 560px) {
.gft-guides-title, .gft-films-title, .gft-wall-title { font-size: 26px; }
.gft-guides-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.gft-guide-name { font-size: 13px; left: 12px; right: 12px; }
.gft-promise-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
/* a sub heading inside a footer column, for the Media group the client asked for */
.gf-footer-sub { margin: 18px 0 8px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #C6A44E; font-weight: 600; }
/* ---- the redesign pass, 10 September 2026 ---- */
/* Calibrated against Pragnell and PureJewels: the craft is in air, hairlines
and hover finesse, not in new colours. Everything here is decoration with no
native Elementor control; every value that HAS a control was set natively. */
/* the home price band measures its photograph layers (see "the price banner
on a wide screen"); the inset gold hairline it once carried was taken off
at the client's request on 19 September */
.elementor-element-e14786d0 { position: relative; }
/* cards lift very slightly to the hand; stilled for people who ask for still */
.gft-guide-card, .gft-wall-tile, .gft-film { transition: transform .35s ease, box-shadow .35s ease; }
.gft-guide-card:hover, .gft-wall-tile:hover, .gft-film:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(35,32,26,.10); }
@media (prefers-reduced-motion: reduce) {
.gft-guide-card, .gft-wall-tile, .gft-film,
.gft-guide-card:hover, .gft-wall-tile:hover, .gft-film:hover { transform: none; box-shadow: none; transition: none; }
}
/* the category row breathes a little wider and its names sit like captions */
.gft-cats { --gft-gap: 28px; }
.gft-cat-name { letter-spacing: .02em; }
/* section standfirsts share one quiet voice */
.gft-guides-sub, .gft-wall-sub, .gft-films-sub { font-size: 15px; line-height: 1.6; }
/* the small gold rules under our headings, lightened to a mark, not a bar */
.gft-guides-title::after, .gft-wall-title::after { width: 34px; height: 1px; background: #C6A44E; opacity: .55; }
/* --- 14 Sep 2026: New Arrivals drifts, the category wall stands still --- */
/* Static mode: the tiles fill their grid cell instead of carrying the fixed
marquee widths, otherwise a wide tile overflows its column. */
.gft-cats:not(.gft-marquee-on) .gft-cat,
.gft-cats:not(.gft-marquee-on) .gft-cat-wide { width: auto; }
/* Product tiles inside the drift need a width of their own, because the
theme's grid sizing dies the moment they leave the grid. */
.gft-marquee > .product-grid-item { width: 262px; max-width: none; }
@media (max-width: 767px) {
.gft-marquee > .product-grid-item { width: 205px; }
}
/* The static wall on a phone: one column made a 4,800px corridor, so the
tiles pair up instead. */
@media (max-width: 767px) {
.gft-cats:not(.gft-marquee-on) { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
}
/* --- 14 Sep 2026: the home price band goes short --- */
/* The client drew boxes over the empty image space beside the bar card: use
it. On the HOME band only, the banner's inner becomes two columns, the
24ct bar left, the 22ct tiles right in a 2x2, head and trust spanning.
The full page hero on /todays-gold-price/ keeps its tall single column. */
.elementor-element-e14786d0 .gft-bn { margin: 0; }
.elementor-element-e14786d0 .gft-bn-inner { max-width: none; display: grid; grid-template-columns: 1.08fr 1fr; column-gap: 40px; align-items: start; padding: 26px 36px 20px; }
.elementor-element-e14786d0 .gft-bn-head { grid-column: 1 / -1; margin-bottom: 8px; }
.elementor-element-e14786d0 .gft-bn-block { margin-bottom: 0; }
.elementor-element-e14786d0 .gft-bn-tiles { grid-template-columns: repeat(2, 1fr); }
.elementor-element-e14786d0 .gft-bn-trust { grid-column: 1 / -1; margin-top: 18px; }
.elementor-element-e14786d0 .gft-bn-foot { grid-column: 1 / -1; }
@media (max-width: 900px) {
.elementor-element-e14786d0 .gft-bn-inner { display: block; }
.elementor-element-e14786d0 .gft-bn-block { margin-bottom: 20px; }
}
/* A drifting product row clips the theme's hover growth (compare icon,
pre-order line, excerpt) because overflow-x auto forces overflow-y
hidden. Padding inside the view moves the clip edge down, the negative
margin gives the room back, so the hover card can unfold in full. */
.elementor-widget-wd_products .gft-marquee-view { padding-bottom: 140px; margin-bottom: -140px; padding-top: 12px; margin-top: -12px; }
/* ==== 19 Sep 2026: the audit fixes, front end ==== */
/* The stylesheet now prints at the end of the head of every page (after the
theme settings CSS), so everything below is in place before the page paints.
The theme's smaller stylesheets for single parts (toolbar, scroll to top and
so on) still print further down, in the body, which is why some selectors
here carry an extra class or the body element. */
/* ---- the WhatsApp button clears the phone toolbar without the script ---- */
/* gft.js measures the theme's toolbar and sets --gft-float-lift. Until it has
run, or if it never does, the lift falls back to the toolbar's own 55px
wherever the theme says the toolbar is on. A measured value still wins,
including 0 when the toolbar is hidden. */
@media (max-width: 1024px) {
body.sticky-toolbar-on .gft-wa { bottom: calc(20px + var(--gft-float-lift, 55px)); }
}
@media (max-width: 768px) {
body.sticky-toolbar-on .gft-wa { bottom: calc(14px + var(--gft-float-lift, 55px)); }
}
/* ---- scroll to top sits above the chat launcher ---- */
/* The Tawk launcher is fixed bottom right, 20px up on a desktop and 70px up on
a phone, and it lay across the theme's scroll to top button on both, so the
button could not be pressed. The theme's own rules print later in the page,
hence the body element in front. */
body .scrollToTop { bottom: 96px; }
@media (max-width: 1024px) {
body .scrollToTop,
body.sticky-toolbar-on .scrollToTop { bottom: 140px; }
body.sticky-toolbar-on .wd-sticky-btn-shown.scrollToTop { bottom: max(140px, calc(67px + var(--wd-sticky-btn-height, 0px))); }
}
/* ---- the chat launcher stands on the WhatsApp button ---- */
/* Where it goes is worked out in chat-social.php now, because it is read off
the WhatsApp button rather than from the edge of the screen: the client
asked for the two to be stacked on one side so neither covers the cart.
Tawk pins its frames with inline !important styles, which is why the
loader writes the position there rather than from here. */
/* ---- the main menu stays on one line ---- */
/* Gallery went to the top level on 19 September and Gold Bank Account on the
20th, at the client's request, and twelve items no longer fit at 13px on a
laptop. They are set a point or two smaller between 1025px, where the
desktop header takes over, and 1280px, where the full size fits again.
Measured at each step: 12px holds to 1100px, 11px holds to 1025px. */
@media (min-width: 1100px) and (max-width: 1279px) {
.whb-header .wd-nav-main { column-gap: 2px; }
.whb-header .wd-nav-main > li > a { font-size: 12px; padding-left: 2px; padding-right: 2px; }
}
@media (min-width: 1025px) and (max-width: 1099px) {
.whb-header .wd-nav-main { column-gap: 0; }
.whb-header .wd-nav-main > li > a { font-size: 11px; letter-spacing: 0; padding-left: 2px; padding-right: 2px; }
}
/* ---- the phone toolbar's labels fit ---- */
/* Five buttons share a 390px screen and the theme insets each label 10px a
side, which cut "My account" to "My acco...". Two pixels a side is enough. */
.wd-toolbar .wd-toolbar-label { inset-inline: 2px; letter-spacing: 0; }
/* ---- the accounts row in the white footer ---- */
/* Styled when the footer was dark: pale grey icons in a white outline all but
vanished on white. A gold outline matches the ornaments, and the icon and
outline darken under the pointer. */
.wd-footer .gft-social-links a,
.footer-container .gft-social-links a { border-color: #C6A44E; color: #8C6F2A; }
.wd-footer .gft-social-links a:hover,
.wd-footer .gft-social-links a:focus-visible,
.footer-container .gft-social-links a:hover,
.footer-container .gft-social-links a:focus-visible { border-color: #1A1A1A; color: #1A1A1A; background: transparent; }
/* ---- the sticky header keeps its right hand icons ---- */
/* Once a desktop visitor scrolls, the theme swaps in a one row copy of the
header: logo, the whole main menu, then account, wishlist, compare and
cart. The nine menu items took so much of that row that from 1280 to 1440
the four icons were pushed past the right edge. Only the copy (.whb-clone)
is touched; the full header at the top of the page is as it was. The theme
settings' own compact rule for this menu is three classes deep, so these are
four and win wherever the two print. */
@media (min-width: 1025px) {
/* the account link is words only, so in the copy it becomes the theme's
own person icon; the link keeps its "My account" title for screen readers */
.whb-clone .wd-header-my-account.wd-style-text-only .wd-tools-text { display: none; }
.whb-clone .wd-header-my-account.wd-style-text-only > a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; }
.whb-clone .wd-header-my-account.wd-style-text-only > a::before { content: "\f124"; font-family: "woodmart-font"; font-size: 20px; font-weight: 400; line-height: 1; }
.whb-clone .whb-col-center .wd-header-main-nav .wd-nav-main { column-gap: 8px; }
.whb-clone .whb-col-center .wd-header-main-nav .wd-nav-main > li > a { padding-left: 4px; padding-right: 4px; }
/* the header builder writes the logo's width inline, so only !important reaches it */
.whb-clone .site-logo img { max-width: 150px !important; }
}
@media (min-width: 1025px) and (max-width: 1440px) {
.whb-clone .whb-col-center .wd-header-main-nav .wd-nav-main { column-gap: 6px; }
.whb-clone .whb-col-center .wd-header-main-nav .wd-nav-main > li > a { padding-left: 3px; padding-right: 3px; font-size: 11px; }
.whb-clone .wd-header-cart .wd-tools-text { display: none; }
.whb-clone .site-logo img { max-width: 120px !important; }
}
/* Below 1280 the menu cannot share the row at a readable size, so the copy
keeps the logo and the icons, and the menu stays in the full header. */
@media (min-width: 1025px) and (max-width: 1279px) {
.whb-clone .wd-header-main-nav { display: none; }
}
/* ---- the home page posters show whole ---- */
/* The posters are finished artwork with their words and buttons painted in.
Four were cropped into a 16:9 frame that cut those buttons in half, and the
two posters in a row were stretched to one height. Each poster now keeps its
own shape, the rows line up along the top, and an odd poster left alone on
its row sits in the middle at the width of the others. The lasting fix is
artwork exported at one size. */
.elementor-306 .e-con.e-grid.elementor-element-db93644,
.elementor-306 .e-con.e-grid.elementor-element-772d0e3,
.elementor-306 .e-con.e-grid.elementor-element-5d3e07f,
.elementor-306 .e-con.e-grid.elementor-element-3b1683d,
.elementor-306 .e-con.e-grid.elementor-element-85353a1,
.elementor-306 .e-con.e-grid.elementor-element-b740702 { grid-template-rows: none; grid-auto-rows: auto; align-items: start; }
.elementor-306 .e-con.elementor-element-db93644 .elementor-widget-image img,
.elementor-306 .e-con.elementor-element-772d0e3 .elementor-widget-image img,
.elementor-306 .e-con.elementor-element-5d3e07f .elementor-widget-image img,
.elementor-306 .e-con.elementor-element-3b1683d .elementor-widget-image img,
.elementor-306 .e-con.elementor-element-85353a1 .elementor-widget-image img,
.elementor-306 .e-con.elementor-element-b740702 .elementor-widget-image img { width: 100%; height: auto; object-fit: contain; }
/* The occasion grids carry a site wide 16:9 frame from the theme settings'
custom CSS. revert-layer hands each picture back the proportions of its own
width and height attributes. It has to be that rather than "auto": these
are lazy images with sizes="auto", which browsers size under containment,
and with no ratio at all they come out 1500px tall. A browser that does not
know revert-layer keeps the 16:9 frame, and object-fit shows the whole
poster inside it instead of cropping it. */
.elementor-306 .e-con.elementor-element-3b1683d .elementor-widget-image img,
.elementor-306 .e-con.elementor-element-85353a1 .elementor-widget-image img,
.elementor-306 .e-con.elementor-element-b740702 .elementor-widget-image img { aspect-ratio: auto 16 / 9; aspect-ratio: revert-layer; }
@media (min-width: 768px) {
.elementor-306 .e-con.e-grid.elementor-element-db93644 > .elementor-widget:last-child:nth-child(odd),
.elementor-306 .e-con.e-grid.elementor-element-772d0e3 > .elementor-widget:last-child:nth-child(odd),
.elementor-306 .e-con.e-grid.elementor-element-5d3e07f > .elementor-widget:last-child:nth-child(odd),
.elementor-306 .e-con.e-grid.elementor-element-3b1683d > .elementor-widget:last-child:nth-child(odd),
.elementor-306 .e-con.e-grid.elementor-element-85353a1 > .elementor-widget:last-child:nth-child(odd),
.elementor-306 .e-con.e-grid.elementor-element-b740702 > .elementor-widget:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc((100% - var(--gft-poster-gap, 20px)) / 2); }
.elementor-306 .e-con.e-grid.elementor-element-db93644,
.elementor-306 .e-con.e-grid.elementor-element-772d0e3,
.elementor-306 .e-con.e-grid.elementor-element-5d3e07f { --gft-poster-gap: 24px; }
}
/* ---- the home hero on a phone ---- */
/* The arrows sat on the artwork itself, over the start of the words on one
slide and a model's earring on another. Phones keep the dots and the swipe.
The page's own rules for these arrows are four classes deep. */
@media (max-width: 767px) {
body .elementor-306 .elementor-element.elementor-element-e2c45563 .elementor-swiper-button,
body .elementor-306 .elementor-element.elementor-element-a1f803cc .elementor-swiper-button { display: none; }
}
/* ---- the compare, wishlist and returns pages ---- */
/* The one line introductions on compare (1218) and wishlist (1219) sat hard
under the title band and ranged left, while the empty list below them is
centred. The returns heading (page 47) now shares the form card's 640px
column; Elementor's own max-width on container children is four classes
deep, so this is five. */
.page-id-1218 .entry-content > p:first-child,
.page-id-1219 .entry-content > p:first-child { margin-top: 32px; text-align: center; }
.elementor-47.elementor .e-con > .elementor-element.elementor-element-aeab89a { width: 100%; max-width: 640px; margin-left: auto; margin-right: auto; }
/* ---- the price banner on a wide screen, home band only ---- */
/* Assumes container e14786d0 is Full Width with no side padding in Elementor.
The panel then runs the whole band while its figures stay in a 1200px
column. The photograph is no longer stretched over the panel, which blew a
722px picture up to twice its size and left a blurred glow behind the 22ct
tiles: it now stands at the right at its own proportions, the full height of
the panel. The scrim is drawn over the photograph alone, so its left edge
melts into the black instead of showing a seam, and the tiles that now sit
on bright metal get a darker ground so the figures stay readable.
19 September: the client asked for no frame lines and for the photograph to
fill the whole band, above the panel and behind the View All Gold Rates
button too, not only the panel. The panel keeps the picture in its own
inline style, so the one chosen in the rate settings still applies: on a
wide screen the panel paints it at no size and two layers inherit it, one
for the picture and one for the fades. The wrappers between the panel and
the band are taken out of positioning so the layers measure the band, which
clips them (overflow is set to hidden on it in Elementor). At 112% of the
band's height, the strip at the foot of the picture, cut from the client's
artwork with tile outlines in it, falls below the band. */
.elementor-element-e14786d0 .gft-bn { max-width: none; border: 0; }
.elementor-element-e14786d0 .gft-bn-inner { max-width: 1200px; margin-left: auto; margin-right: auto; }
@media (min-width: 901px) {
.elementor-element-e14786d0 .elementor-widget-shortcode,
.elementor-element-e14786d0 .elementor-widget-shortcode .elementor-widget-container,
.elementor-element-e14786d0 .elementor-shortcode,
.elementor-element-e14786d0 .gft-bn { position: static; }
.elementor-element-e14786d0 .gft-bn-has-bg { background-size: 0 0; background-color: transparent; }
.elementor-element-e14786d0 .gft-bn-has-bg::before,
.elementor-element-e14786d0 .gft-bn-has-bg::after { content: ""; position: absolute; top: 0; right: 0; bottom: auto; left: auto; width: auto; height: 112%; aspect-ratio: 722 / 620; pointer-events: none; }
.elementor-element-e14786d0 .gft-bn-has-bg::before { background-image: inherit; background-repeat: no-repeat; background-position: right top; background-size: 100% 100%; }
.elementor-element-e14786d0 .gft-bn-has-bg::after { background-image:
linear-gradient(90deg, #0B0C0C 0, rgba(11,12,12,.55) 12%, rgba(11,12,12,0) 30%),
linear-gradient(to top, #0B0C0C 0, #0B0C0C 11%, rgba(11,12,12,.7) 26%, rgba(11,12,12,0) 44%); }
/* the VAT line, and on a laptop the Live prices promise, now sit over the bar */
.elementor-element-e14786d0 .gft-bn-foot span,
.elementor-element-e14786d0 .gft-bn-trust-text { text-shadow: 0 1px 8px rgba(0,0,0,.9); }
.elementor-element-e14786d0 .gft-bn-inner,
.elementor-element-e14786d0 .elementor-widget-button { position: relative; z-index: 1; }
.elementor-element-e14786d0 .gft-bn-has-bg .gft-bn-tile { background: rgba(11,12,12,.8); }
}
/* ---- the price banner on a phone ---- */
/* Phones keep the photograph, as the client's own phone artwork does: the bar
top right, the panel falling away to black beneath it. The picture is set a
little past the right edge so the bar stands clear of the heading. The 22ct
figures go two by two, on the home band and on the gold price page alike,
which takes a long single column off the page. */
@media (max-width: 860px) {
.gft-bn-has-bg { background-size: auto 240px; background-position: right -90px top; }
.gft-bn-has-bg::before { display: block; inset: 0 -90px auto auto; height: 240px; width: auto; aspect-ratio: 722 / 620; background-image:
linear-gradient(90deg, #0B0C0C 0, rgba(11,12,12,.5) 12%, rgba(11,12,12,0) 28%),
linear-gradient(to bottom, rgba(11,12,12,.1) 0, rgba(11,12,12,.35) 45%, rgba(11,12,12,.9) 78%, #0B0C0C 94%); }
.gft-bn-has-bg .gft-bn-head { max-width: 62%; }
.gft-bn-has-bg .gft-bn-title,
.gft-bn-has-bg .gft-bn-sub { text-shadow: 0 1px 10px rgba(0,0,0,.75); }
.gft-bn-tiles { grid-template-columns: 1fr 1fr; }
.gft-bn-tile { min-width: 0; }
/* unit labels at 12px at the least, for reading on a phone */
.gft-bn-tile-label { font-size: 12px; letter-spacing: .06em; }
}
@media (max-width: 400px) {
.gft-bn-tile { padding: 10px 11px; }
.gft-bn-tile-value { font-size: 18px; }
}
/* the narrowest phones, where the gold price page's gutters leave each tile
about 100px: the ounce price is the longest figure and still has to fit */
@media (max-width: 340px) {
.gft-bn-tile { padding: 10px 8px; }
.gft-bn-tile-value { font-size: 16px; }
}
@media (max-width: 560px) {
.gft-rate-unit { font-size: 12px; }
}
/* ---- the search box under the header on a phone ---- */
/* The theme's own form, printed by search-hints.php and hidden from 1025px
up, where the header has its own box. Dressed in the site's hairline and
type, with 16px text so a phone does not zoom the page when it is tapped.
The live results drop over the page, so the bar sits above the product
gallery's arrows, and below the theme's toolbar (350) and sticky header. */
.gft-msearch { display: none; }
@media (max-width: 1024px) {
.gft-msearch { display: block; position: relative; z-index: 340; padding: 10px 0 12px; background: #FFFFFF; border-bottom: 1px solid #EDE3CE; }
.gft-msearch .wd-search-form { width: 100%; }
.gft-msearch .searchform { --wd-form-height: 44px; --wd-form-brd-width: 1px; --wd-form-brd-radius: 0px; --wd-form-brd-color: #BCAE8F; --wd-form-brd-color-focus: #C6A44E; --wd-form-color: #23201A; --wd-form-placeholder-color: #8A8172; --wd-form-bg: #FFFFFF; }
.gft-msearch .searchform input.s { width: 100%; font-family: "Jost", Arial, Helvetica, sans-serif; font-size: 16px; letter-spacing: .01em; }
.gft-msearch .searchform .searchsubmit { color: #8C6F2A; }
}
/* ---- rows that drift: no browser drag inside them ---- */
/* Grabbing a tile by its photograph started the browser's own image drag and
left the row stuck to the mouse. gft.js switches it off on the tiles it
finds; this also covers any picture the theme swaps in afterwards. */
.gft-marquee-view img,
.gft-marquee-view a { -webkit-user-drag: none; }
.gft-marquee-view img { user-select: none; }
/* ---- a customer film once it is playing ---- */
/* gft.js swaps the picture button for this box holding the player, which keeps
the tile's size; it no longer lifts under the pointer while the film plays. */
.gft-film-on { cursor: auto; }
.gft-film-on:hover { transform: none; box-shadow: none; }
/* --- 19 Sep 2026, integration: icons the price banner and rate cards now print --- */
.gft-bn-trust.gft-bn-trust-icons li { display: flex; align-items: center; gap: 10px; padding-left: 0; }
.gft-bn-trust.gft-bn-trust-icons li::before { content: none; display: none; }
.gft-bn-trust li svg.gft-bn-trust-icon { flex: 0 0 20px; width: 20px; height: 20px; color: #C6A44E; }
.gft-btn-rate .gft-btn-rate-icon { flex: 0 0 22px; width: 22px; height: 22px; }
.gft-btn-rate .gft-btn-rate-chevron { flex: 0 0 16px; width: 16px; height: 16px; margin-left: auto; }
.gft-purity-line { margin-top: 2px; }
@media (max-width: 767px) {
.gft-btn-rate .gft-btn-rate-pre { display: block; font-size: .85em; opacity: .8; }
}
/* ==== 19 Sep 2026, round 2: polish after the re-check ==== */
/* Added below everything else so that nothing earlier has to change; each
block says what it corrects. */
/* ---- the drawings on the price banner's 22ct tiles ---- */
/* The client's artwork puts a drawing on the left of each tile with the label
and the price beside it. A tile has room for that only when it is wide: on
a phone, or four abreast on the gold price page, the ounce price would run
out of its box, so there the drawing sits above the label. The switch reads
the tile's own width rather than the screen's, because at one screen size
the same tile is 257px wide on the home band and 166px on the gold price
page. Stacked is the starting point, so a browser that cannot measure the
tile still shows every figure whole. */
.gft-bn-tile { container: gft-bn-tile / inline-size; }
.gft-bn-tile-body { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; align-items: start; }
.gft-bn-tile svg.gft-bn-tile-icon { grid-row: 1; width: 24px; height: 24px; margin-bottom: 8px; color: #C6A44E; }
.gft-bn-tile-body .gft-bn-tile-label { grid-row: 2; }
.gft-bn-tile-body .gft-bn-tile-value { grid-row: 3; align-self: end; }
@container gft-bn-tile (min-width: 150px) {
.gft-bn-tile-body { grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 12px; }
.gft-bn-tile svg.gft-bn-tile-icon { grid-column: 1; grid-row: 1 / 3; align-self: center; width: 28px; height: 28px; margin-bottom: 0; }
.gft-bn-tile-body .gft-bn-tile-label { grid-column: 2; grid-row: 1; }
.gft-bn-tile-body .gft-bn-tile-value { grid-column: 2; grid-row: 2; }
}
/* ---- the promises under the price banner share one line ---- */
/* The theme gives every list item except the last a 10px bottom margin. In a
row, that margin made the line 30px tall and stretched the last item,
"Live prices", to match, so its drawing and words sat 5px below the other
three. The margin goes (the row's gap already spaces items that wrap), and
the items centre on the line in case one of them runs to two lines. */
.gft-bn-trust { align-items: center; }
.gft-bn-trust li { margin: 0; }
/* ---- the viewing button's words sit in its middle ---- */
/* The theme's buttons are flex boxes that centre their label. The earlier rule
for this one made it a plain block, which left the words 4px from its top
and 19px from its bottom, under a Click & Reserve button that is centred. */
.gft-viewing-btn.button { display: flex; align-items: center; justify-content: center; padding: 10px 16px; line-height: 1.3; }
/* ---- two posters of different heights centre on each other ---- */
/* The posters keep their own shapes, so the two in a row differ by up to
109px and the shorter one hung from the top with a cream gap beneath it.
Centred against its neighbour, the difference splits above and below and
the pair reads as one row. Phones show one poster to a row. */
@media (min-width: 768px) {
.elementor-306 .e-con.e-grid.elementor-element-db93644,
.elementor-306 .e-con.e-grid.elementor-element-772d0e3,
.elementor-306 .e-con.e-grid.elementor-element-5d3e07f,
.elementor-306 .e-con.e-grid.elementor-element-3b1683d,
.elementor-306 .e-con.e-grid.elementor-element-85353a1,
.elementor-306 .e-con.e-grid.elementor-element-b740702 { align-items: center; }
}
/* ---- the Christmas poster without its borrowed website header ---- */
/* This artwork was cut from a picture of a phone screen and still carries that
site's header across the top: a menu icon, the logo and a shopping bag.
Shown whole, it looked like a website inside the page. A 580 by 350 frame
in place of 580 by 387 trims the top 37px, which takes the icons and the
logo. The thin LONDON line under the logo survives by a few pixels, because
the star above "Merry" starts at the same height and a deeper cut would
halve it. The lasting fix is the poster exported without the header. */
.elementor-306 .e-con .elementor-widget.elementor-widget-image img[src*="gf-oc-christmas-d"] { aspect-ratio: 580 / 350; object-fit: cover; object-position: 50% 100%; }
/* ---- the hero's dots come up onto the picture on a phone ---- */
/* With the arrows gone, the dots are the only sign that the hero turns, and
they sat in a strip under the slide, below the first screen. They now sit on
the picture in a small cream pill that reads over light and dark artwork
alike: as high as it takes to clear the phone's bottom toolbar on the first
screen, and never lower than 14px above the foot of the slide. The 270px is
the header above the hero (about 175px) plus the toolbar and a margin
(about 95px); the 67px is the 30px strip the dots used to sit in, the pill
and the 14px. A browser without the small viewport unit keeps the dots at
the foot of the slide. */
@media (max-width: 767px) {
body .elementor-306 .elementor-element.elementor-element-e2c45563 .swiper-pagination { top: auto; bottom: 44px; left: 50%; width: auto; display: flex; align-items: center; justify-content: center; padding: 7px 10px; border-radius: 999px; background: rgba(250,246,239,.82); transform: translateX(-50%); }
@supports (top: min(1svh, 1px)) {
body .elementor-306 .elementor-element.elementor-element-e2c45563 .swiper-pagination { top: min(calc(100svh - 270px), calc(100% - 67px)); bottom: auto; }
}
/* Swiper hides the dots when there is nothing to turn to, such as a hero
cut down to one slide; the display above would outrank that and leave an
empty pill on the picture */
body .elementor-306 .elementor-element.elementor-element-e2c45563 .swiper-pagination.swiper-pagination-lock { display: none; }
}
/* ---- the returns and gallery pages ---- */
/* The returns introduction still ran 840px wide from x 293, while the heading
and the form card below it share a 640px column from x 393. It joins that
column, so all three start on one edge; five classes for the same reason as
the heading's rule. The gallery introduction sat 10px under the title band;
22px more makes the 32px the compare and wishlist pages use. */
.elementor-47.elementor .e-con > .elementor-element.elementor-element-178345de { width: 100%; max-width: 640px; margin-left: auto; margin-right: auto; }
.elementor-1208 .e-con .elementor-element.elementor-element-85fbef3 { margin-top: 22px; }
/* ---- the footer's last line clears the floating buttons ---- */
/* At the very bottom of a page on a phone or tablet, the WhatsApp button and
the chat launcher sat on the copyright line and the shop's address. Room
under that line lets the page scroll it clear of them; the buttons stay
where they are. On a tablet the line is short enough to pass between the
buttons once it is above WhatsApp. On a phone it runs the full width, and
at 90px it rose into the scroll to top button (140px up, 40px tall), which
then sat on "All rights reserved", so a phone gets enough to clear that
too. */
@media (max-width: 1024px) {
.wd-footer .wd-copyrights { padding-bottom: 90px; }
}
@media (max-width: 767px) {
.wd-footer .wd-copyrights { padding-bottom: 136px; }
}
/* ==== 20 September 2026: the client's amendments ==== */
/* ---- the shop and category banner ---- */
/* The band at the top of the shop, the product categories and the other inner
pages was flat black. The client's photograph now fills it, set in Theme
Settings under Page Title so it can be swapped there, with a light black
wash over it here: the title and the category links are white, and without
the wash they sat on bright marble. The theme has no control for the wash. */
.wd-page-title .wd-page-title-bg::after { content: ""; position: absolute; inset: 0; background: rgba(10, 10, 10, .55); pointer-events: none; }
.wd-page-title > .container,
.wd-page-title > .wd-btn-show-cat,
.wd-page-title > .wd-nav-product-cat { position: relative; z-index: 1; }
/* ---- the repair form's tick boxes sit beside their words ---- */
/* The client: "The tick boxes should be next to the repair names on the same
line". The form's own rule gives every input the full width of its field,
which stretched each tick box across the column and pushed its words onto
the next line. A tick box keeps its own size, and the pair reads as one row. */
.gft-checks .gft-check { display: flex; align-items: center; gap: 9px; margin: 7px 0; font-size: 14.5px; letter-spacing: 0; text-transform: none; color: #4a453d; }
.gft-checks .gft-check input[type="checkbox"] { width: auto; flex: 0 0 auto; margin: 0; padding: 0; }
/* ---- a gallery piece shows its price where it has one ---- */
/* "Show prices if exist else Enquire Now". The price reads as a figure, not as
a call to action, so it is set in the gold the rest of the shop uses for
money rather than in the button's lettering. */
.gft-gal-cta.gft-gal-cta-price { font-size: 15px; font-weight: 700; letter-spacing: 0; text-transform: none; color: #F3D98B; }
/* ---- the enquiry form's picture field ---- */
/* The client asked for a way to send photographs with an enquiry. The field
spans both columns of the form's grid, because a file name is long and a
half width box cuts it in half. */
.gft-ask-grid .gft-ask-files { grid-column: 1 / -1; }
.gft-ask-grid .gft-ask-files input[type="file"] { padding: 9px 10px; border: 1px dashed #d8d0c0; background: #fff; font-size: 13.5px; width: 100%; }
/* ---- the dark bands carry the same photograph as the shop banner ---- */
/* The selectors are long on purpose: the theme sets the prefooter with the
background shorthand at .wd-page-wrapper .wd-prefooter, which wipes out any
picture set with a weaker selector, and Elementor colours its own sections
by element class. */
/* The client: put the shop picture "wherever there are black bars like this",
pointing at the Visit Gold Factory band that closes nearly every page. The
class is put on by dark-bands.php as each page is built, so a dark section
added later is covered without another rule. The wash is heavier than the
one on the page title band because these carry small print, and the
photograph sits still behind them rather than repeating. */
.gf-dark-band,
body .wd-page-wrapper .wd-prefooter { position: relative; background-image: var(--gf-band-image, none); background-size: cover; background-position: center center; background-repeat: no-repeat; }
.gf-dark-band::before,
body .wd-page-wrapper .wd-prefooter::before { content: ""; position: absolute; inset: 0; background: rgba(10, 10, 10, .66); pointer-events: none; }
.gf-dark-band > *,
body .wd-page-wrapper .wd-prefooter > * { position: relative; z-index: 1; }
/* one picture, not two: inside the theme's prefooter the band itself is clear,
colour and all, or its flat black would cover the photograph beneath it */
body .wd-prefooter .elementor-element.e-con.gf-dark-band { background-image: none; background-color: transparent; }
body .wd-prefooter .elementor-element.e-con.gf-dark-band::before { content: none; }
/* ---- the small print on a dark band reads white ---- */
/* The client, pointing at "Monday to Saturday: 11:00 am to 6:30 pm. Sunday
closed." on the photograph: "this text is not clearly visible, make it white
wherever it is". The muted brown those lines carry was chosen for a flat
black ground and melts into the picture. The colour is set on the paragraph
itself rather than on the widget, so the panel's own colour still applies to
that widget anywhere else, and the buttons keep their own lettering. */
.gf-dark-band p,
.gf-dark-band li,
.gf-dark-band .elementor-widget-text-editor,
body .wd-page-wrapper .wd-prefooter p,
body .wd-page-wrapper .wd-prefooter li,
body .wd-page-wrapper .wd-prefooter .elementor-widget-text-editor { color: #fff; }
.gf-dark-band p a:not(.elementor-button),
body .wd-page-wrapper .wd-prefooter p a:not(.elementor-button) { color: #F3D98B; }
/* ---- figures on a dark ground read white ---- */
/* The client, pointing at the gold price box in the shop sidebar: "make the
text white wherever it cannot be read". The tola and ounce line sits outside
the ticker span, so the box's own white rule never reached it and it kept
the page's muted brown. The same pair of classes is covered inside the dark
bands, so the ticker reads wherever it is placed. */
.gf-side-gold,
.gf-side-gold .gft-ticker-units,
.gf-side-gold .gft-unit-cell,
.gf-side-gold .gft-ticker-sep,
.gf-dark-band .gft-ticker-units,
.gf-dark-band .gft-unit-cell,
.gf-dark-band .gft-ticker-sep { color: #fff; }
.gf-side-gold .gft-ticker-units,
.gf-dark-band .gft-ticker-units { opacity: .92; }
/* the price band's small print, a shade lighter so it clears 4.5 to 1 on the
photograph behind it */
.gft-bn-foot { color: #C9C2B4; }
/* ---- the How It Works graphics on a phone ---- */
/* Eight steps of small print in one picture: at 330px across none of it can be
read, so the picture opens full size on a tap (set on the widget itself) and
says so underneath, on phones only, where the hint is needed. */
.gf-how-image img { cursor: zoom-in; }
@media (max-width: 768px) {
/* this build draws the image straight inside the widget, with no inner
wrapper, so the line hangs off the widget itself */
.gf-how-image { position: relative; }
.gf-how-image::after { content: "Tap the picture to enlarge"; display: block; margin-top: 8px; font-size: 12.5px; letter-spacing: .04em; color: #8A8172; text-align: center; }
}
/* ---- the photograph at the top of a guide page ---- */
/* The guide pictures are close to square, so at full height one fills the whole
screen and pushes the writing out of sight. They are shown as a band instead,
cropped from the middle, deep enough to be a picture and shallow enough that
the first paragraph is still on screen. */
.gf-guide-hero img {
width: 100%;
max-height: 420px;
object-fit: cover;
object-position: center;
}
@media (max-width: 768px) {
.gf-guide-hero img { max-height: 230px; }
}
/* ---- applying for a trade account, and sending a whole range ---- */
.gft-trade-apply .gft-check, .gft-trade-bulk .gft-check { margin: 16px 0; }
.gft-apply-title { margin: 0 0 6px; font-size: 22px; color: #23201A; }
.gft-apply-lede { margin: 0 0 20px; font-size: 14.5px; line-height: 1.65; color: #5A554B; max-width: 62ch; }
/* a field only a robot fills in, taken out of the flow rather than hidden with
display none, which some form fillers skip and some screen readers announce */
.gft-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gft-trade-bulk { margin-top: 34px; padding-top: 30px; border-top: 1px solid #EFE7D6; }
.gft-trade-doorway { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #EFE7D6; font-size: 13.5px; color: #5A554B; }
.gft-trade-doorway a { color: #A8802D; font-weight: 600; text-decoration: underline; }
.gft-resize-credit { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: #8A8172; }
/* ---- Gold Factory Rewards page ---- */
.gft-rewards h2, .gft-rewards h3 { margin: 30px 0 10px; font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 600; color: #23201A; }
.gft-rewards p, .gft-rewards li { font-size: 16px; line-height: 1.75; color: #5A554B; }
.gft-rewards-join { padding: 22px 24px; background: #FAF6EF; border-left: 3px solid #C6A44E; }
.gft-rewards-join-title { margin: 0 0 6px; font-size: 18px !important; font-weight: 600; color: #23201A !important; }
.gft-rewards-join .gft-btn { display: inline-block; margin-right: 14px; }
.gft-rewards-signin { color: #A8802D; text-decoration: underline; font-size: 14px; }
.gft-rewards-tiers { width: 100%; margin: 6px 0 12px; }
.gft-rewards-example { font-size: 14px !important; color: #8A8172 !important; }
.gft-rewards-steps, .gft-rewards-rules { margin: 0 0 0 20px; padding: 0; }
.gft-rewards-steps li, .gft-rewards-rules li { margin: 0 0 8px; }
@media (max-width: 600px) { .gft-rewards-join .gft-btn { display: block; margin: 0 0 12px; text-align: center; } }
/* ==== product page, to the client's "final product page" design, 24 September 2026 ==== */
/* the trust bar across the top of the product and basket pages */
.gft-trust-bar { margin: 0 0 22px; background: #FAF6EF; border-top: 1px solid #EFE7D6; border-bottom: 1px solid #EFE7D6; }
.gft-trust-inner { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gft-trust-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: #23201A; text-decoration: none; border-left: 1px solid #EFE7D6; }
.gft-trust-item:first-child { border-left: 0; }
a.gft-trust-item:hover { background: #F4ECDD; color: #23201A; }
.gft-trust-item .gft-ico { flex: 0 0 26px; width: 26px; height: 26px; color: #C6A44E; }
.gft-trust-text { display: flex; flex-direction: column; line-height: 1.3; }
.gft-trust-text strong { font-size: 13.5px; font-weight: 600; }
.gft-trust-text span { font-size: 12px; color: #8A8172; }
@media (max-width: 1024px) {
.gft-trust-inner { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.gft-trust-inner::-webkit-scrollbar { display: none; }
.gft-trust-item { flex: 0 0 auto; }
}
/* category tag, SKU line */
.gft-cat-tag { display: inline-block; margin: 0 0 8px; padding: 2px 9px; background: #C6A44E; color: #fff !important; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border-radius: 2px; }
.gft-cat-tag:hover { background: #A8802D; }
.gft-sku-line { margin: -6px 0 10px; font-size: 13px; color: #5A554B; letter-spacing: .02em; }
.gft-sku-line span { color: #8A8172; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; margin-right: 4px; }
.single-product .product_meta .sku_wrapper { display: none; }
/* rewards box: beside the title on a desktop, under the price on a phone */
.gft-rewards-box { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid #E8D6A8; background: #FFFCF6; font-size: 13px; line-height: 1.45; color: #5A554B; }
.gft-rewards-box .gft-ico { flex: 0 0 26px; width: 26px; height: 26px; color: #C6A44E; }
.gft-rewards-box strong { display: block; font-size: 15px; color: #23201A; }
.gft-rewards-worth, .gft-rewards-member { display: block; font-size: 12px; color: #8A8172; margin-bottom: 4px; }
.gft-rewards-box a { color: #A8802D; text-decoration: underline; }
.gft-rb-desk { float: right; width: 215px; margin: 0 0 12px 18px; }
.gft-rb-mob { display: none; margin: 4px 0 14px; }
@media (max-width: 1024px) { .gft-rb-desk { display: none; } .gft-rb-mob { display: flex; } }
/* ring size head with its size guide */
.gft-resize-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 6px; }
.gft-resize-head label { margin: 0; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #8A8172; }
.gft-size-guide { font-size: 13px; color: #A8802D; text-decoration: underline; }
/* ways to pay, as cards */
.gft-pay { clear: both; margin: 22px 0 14px; }
.gft-pay-title { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #23201A; }
.gft-pay-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
.gft-pay-card { padding: 12px 10px; border: 1px solid #EFE7D6; background: #fff; text-align: center; }
.gft-pay-name { display: flex; justify-content: center; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 15px; font-weight: 600; color: #23201A; }
.gft-pay-name .gft-ico { width: 20px; height: 20px; color: #C6A44E; }
/* Klarna and Clearpay titles are plain, like By Card: Stripe's message below carries their real logos (Klarna rules forbid look-alike marks) */
.gft-pay-head { margin: 0 0 4px; font-size: 12.5px; line-height: 1.4; color: #5A554B; }
.gft-pay-head strong { display: block; font-size: 17px; color: #A8802D; }
.gft-pay-head em { display: block; font-style: normal; font-size: 11.5px; font-weight: 600; color: #23201A; }
.gft-pay-brands { font-weight: 600; letter-spacing: .04em; color: #1A1F71; }
.gft-pay-note { margin: 0; font-size: 11.5px; line-height: 1.4; color: #8A8172; }
/* lay by, built to the design and off until there is a lay by to take */
.gft-layby { display: flex; gap: 14px; margin: 0 0 12px; padding: 14px 16px; border: 2px solid #E0A838; }
.gft-layby > .gft-ico { flex: 0 0 34px; width: 34px; height: 34px; color: #23201A; }
.gft-layby-body { flex: 1; }
.gft-layby-title { display: flex; justify-content: space-between; margin: 0; font-family: "Cormorant Garamond", serif; font-size: 19px; font-weight: 600; color: #23201A; }
.gft-layby-lede { margin: 2px 0 10px; font-size: 13px; color: #5A554B; }
.gft-layby-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gft-layby-steps span { padding: 6px; background: #FAF6EF; font-size: 12px; text-align: center; color: #8A8172; }
.gft-layby-steps strong { display: block; font-size: 18px; color: #A8802D; }
.gft-layby-note { margin: 8px 0 0; font-size: 11.5px; text-align: center; color: #5A554B; }
/* security notice */
.gft-secnotice { display: flex; gap: 14px; margin: 0 0 10px; padding: 12px 16px; background: #FFFAF1; border: 1px solid #EBCB8B; }
.gft-secnotice > .gft-ico { flex: 0 0 34px; width: 34px; height: 34px; color: #C6A44E; }
.gft-secnotice-title { margin: 0 0 2px; font-size: 15px; font-weight: 600; color: #23201A; }
.gft-secnotice p { margin: 0; font-size: 12.5px; line-height: 1.5; color: #5A554B; }
/* ask about this piece, and returns, as rows with an arrow */
.single-product .gft-ask-line,
.gft-row-link { position: relative; display: flex; align-items: center; gap: 14px; margin: 0 0 10px; padding: 13px 44px 13px 16px; border: 1px solid #EFE7D6; background: #fff; }
.single-product .gft-ask-line { flex-wrap: wrap; row-gap: 2px; }
.single-product .gft-ask-line::after,
.gft-row-link::after { content: ""; position: absolute; right: 18px; top: 50%; width: 9px; height: 9px; border-top: 1.5px solid #23201A; border-right: 1.5px solid #23201A; transform: translateY(-50%) rotate(45deg); }
.single-product .gft-ask-btn { flex: 1 1 100%; padding: 0; background: none; border: 0; text-align: left; font-size: 15px; font-weight: 600; color: #23201A; text-transform: none; letter-spacing: 0; box-shadow: none; cursor: pointer; }
.single-product .gft-ask-btn::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.single-product .gft-ask-note { flex: 1 1 100%; font-size: 13px; color: #5A554B; }
.gft-row-link > .gft-ico { flex: 0 0 26px; width: 26px; height: 26px; color: #23201A; }
.gft-row-link p { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; font-size: 14px; color: #23201A; }
.gft-row-link a { color: #A8802D; }
/* traditional units, under the photographs */
.gft-units-box { margin: 18px 0 0; padding: 14px 16px; border: 1px solid #EFE7D6; background: #fff; }
.gft-units-box h3, .gft-units-box h2 { margin: 0 0 8px; font-family: "Cormorant Garamond", serif; font-size: 20px; font-weight: 600; color: #23201A; }
.gft-units-box table { width: 100%; margin: 0; }
/* the four promises */
.gft-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 26px 0 28px; }
.gft-tile { display: flex; gap: 12px; align-items: center; padding: 8px; border: 1px solid #EFE7D6; background: #FAF6EF; }
.gft-tile img { flex: 0 0 120px; width: 120px; height: 72px; object-fit: cover; }
.gft-tile-title { margin: 0 0 2px; font-family: "Cormorant Garamond", serif; font-size: 17px; font-weight: 600; color: #23201A; }
.gft-tile-text { margin: 0; font-size: 12.5px; line-height: 1.4; color: #8A8172; }
@media (max-width: 1024px) { .gft-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
.gft-tiles { grid-template-columns: 1fr; }
.gft-pay-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gft-layby-steps strong { font-size: 15px; }
}
.single-product .summary p.stock.in-stock { display: none; }
.gft-showroom-yes strong { color: #2E7D32; font-weight: 600; }
.gft-dot { margin: 0 4px; color: #8A8172; }
/* the buy area, in his order: ring size, then ADD TO CART as the gold button, then the in store options */
.single-product .summary form.cart .gft-resize { order: 0; flex: 1 1 100%; }
.single-product .summary form.cart .quantity { order: 1; }
.single-product .summary form.cart .single_add_to_cart_button {
order: 2; flex: 1 1 auto; min-height: 52px; margin: 6px 0 0;
background-image: linear-gradient(134deg, #A8802D 0%, #FBF3A1 47%, #CDA42D 100%);
background-color: transparent; color: #1A1A1A; border: 1px solid #C6A44E;
font-size: 15px; letter-spacing: .1em; transition: box-shadow .3s ease;
}
.single-product .summary form.cart .single_add_to_cart_button:hover {
background-image: linear-gradient(134deg, #A8802D 0%, #FBF3A1 67%, #CDA42D 100%);
background-color: transparent; color: #1A1A1A; box-shadow: 0 4px 16px rgba(198, 164, 78, .45);
}
.single-product .summary form.cart .gft-enquiry-links { order: 30; flex: 1 1 100%; }
.single-product .summary form.cart .gft-reserve-wrap { order: 31; flex: 1 1 100%; }
.single-product .summary form.cart .gft-viewing-btn { order: 32; }
.single-product .summary form.cart .gft-reserve-note { order: 33; flex: 1 1 100%; }
/* Click and Reserve steps back to a quiet outline, so Add to cart is the one gold button */
.single-product .summary .gft-reserve-btn.button { background-image: none; background-color: #fff; color: #23201A; }
.single-product .summary .gft-reserve-btn.button:hover { background-image: none; background-color: #FAF6EF; box-shadow: none; }
/* ==== basket, to the client's "final cart" design, 24 September 2026 ==== */
.gft-cart-title { margin: 4px 0 18px; font-family: "Cormorant Garamond", serif; font-size: 36px; font-weight: 600; color: #23201A; }
.gft-cart-title span { font-size: 24px; font-weight: 500; }
.gft-cart-facts { margin: 4px 0 0; font-size: 13px; color: #8A8172; }
.gft-cart-size { margin: 4px 0 0; font-size: 13px; color: #5A554B; }
.gft-cart-size a { margin-left: 8px; color: #A8802D; text-decoration: underline; }
.gft-cart-sep { margin-left: 8px; color: #C9BFAE; }
/* four promises under the basket */
.gft-cart-promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 28px 0 20px; border: 1px solid #EFE7D6; background: #FDFBF7; }
.gft-cart-promise { padding: 18px 14px; text-align: center; border-left: 1px solid #EFE7D6; }
.gft-cart-promise:first-child { border-left: 0; }
.gft-cart-promise .gft-ico { width: 34px; height: 34px; color: #C6A44E; }
.gft-cart-promise-title { margin: 8px 0 4px; font-family: "Cormorant Garamond", serif; font-size: 19px; font-weight: 600; color: #23201A; }
.gft-cart-promise-text { margin: 0; font-size: 13px; line-height: 1.5; color: #5A554B; }
.gft-cart-promise-text a { color: #A8802D; }
/* need help */
.gft-cart-help { padding: 16px 18px; border: 1px solid #EFE7D6; background: #fff; }
.gft-cart-help-title { margin: 0 0 10px; font-family: "Cormorant Garamond", serif; font-size: 24px; font-weight: 600; color: #23201A; }
.gft-cart-help-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.gft-cart-help .gft-row-link { margin: 0; text-decoration: none; }
.gft-cart-help .gft-row-link strong { display: block; font-size: 16px; font-weight: 600; color: #23201A; }
.gft-cart-help .gft-row-link span span { display: block; font-size: 13px; color: #5A554B; }
/* order summary */
.gft-cart-continue { display: inline-block; margin: 0 0 10px; padding-left: 16px; position: relative; color: #23201A; text-decoration: underline; font-size: 15px; }
.gft-cart-continue::before { content: ""; position: absolute; left: 2px; top: 50%; width: 7px; height: 7px; border-left: 1.5px solid #23201A; border-bottom: 1.5px solid #23201A; transform: translateY(-50%) rotate(45deg); }
.woocommerce-cart .cart_totals > h2 { font-family: "Cormorant Garamond", serif; font-size: 24px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #23201A; }
.woocommerce-cart .cart_totals .order-total .amount { color: #A8802D; font-size: 24px; }
.gft-cart-pay { margin-top: 10px; }
.gft-cart-terms { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; font-size: 14.5px; color: #23201A; cursor: pointer; }
.gft-cart-terms input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 18px; }
.gft-cart-terms a { color: #23201A; text-decoration: underline; }
.gft-cart-terms-warn { margin: -4px 0 10px; font-size: 13px; color: #B03A2E; }
.gft-cart-paycard { display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 56px; margin: 0 0 12px; padding: 10px 16px;
background-image: linear-gradient(134deg, #A8802D 0%, #FBF3A1 47%, #CDA42D 100%); border: 1px solid #C6A44E;
color: #1A1A1A; font-size: 17px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: box-shadow .3s ease; }
.gft-cart-paycard:hover { color: #1A1A1A; box-shadow: 0 4px 16px rgba(198, 164, 78, .45); }
.gft-cart-paycard .gft-ico { width: 22px; height: 22px; }
.gft-cart-paycard strong { font-weight: 700; }
/* one row per way to pay */
.gft-cart-rows { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }
.gft-cart-row { display: grid; grid-template-columns: 34% 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid #EFE7D6; background: #fff; }
.gft-cart-row-name { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 600; color: #23201A; }
.gft-cart-row-name .gft-ico { width: 26px; height: 26px; flex: 0 0 26px; }
.gft-cart-row-text { margin: 0; font-size: 12.5px; line-height: 1.45; color: #5A554B; }
.gft-cart-row-text b, .gft-cart-row-text .amount { color: #A8802D; }
.gft-cart-proceed { display: inline-block; padding: 8px 14px; background: linear-gradient(180deg, #C9A04A, #9C7426); color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap; border-radius: 2px; }
.gft-cart-proceed:hover { color: #fff; filter: brightness(1.08); }
.gft-cart-row-bank { background: #F1F5FB; }
.gft-cart-row-clearpay { background: #E9FBF4; }
.gft-cart-row-clearpay .gft-cart-row-name { font-size: 18px; }
.gft-cart-row-klarna { background: #FDEEF3; }
.gft-cart-row-klarna .gft-cart-row-name { font-size: 18px; }
.gft-cart-row-reserve { border: 2px solid #E0A838; }
.gft-cart-row-layby { background: #F7F6F3; }
.woocommerce-cart .gft-secnotice { margin-top: 4px; }
@media (max-width: 1024px) {
.gft-cart-promises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gft-cart-promise:nth-child(3) { border-left: 0; }
.gft-cart-promise:nth-child(n+3) { border-top: 1px solid #EFE7D6; }
}
@media (max-width: 600px) {
.gft-cart-title { font-size: 28px; }
.gft-cart-help-rows { grid-template-columns: 1fr; }
.gft-cart-row { grid-template-columns: 1fr auto; }
.gft-cart-row-name { grid-column: 1 / -1; }
.gft-cart-paycard { font-size: 15px; letter-spacing: .06em; }
}
/* rows: the name across the top, the terms and Proceed under it, at the width of the summary column */
.gft-cart-row { grid-template-columns: 1fr auto; }
.gft-cart-row-name { grid-column: 1 / -1; }
.gft-cart-terms span { flex: 1; }
.woocommerce-cart .woocommerce-shipping-destination, .woocommerce-cart .shipping-calculator-button, .woocommerce-cart .woocommerce-shipping-calculator { display: none; }
/* ==== the final check, 24 September 2026 ==== */
/* ---- the sticky header keeps its basket on every desktop width ---- */
/* Auctions made the one row copy of the header too long again: from 1440 to
1680 the basket was pushed off the right edge and compare was cut in half.
Measured on the live header: compact type up to 1919, compare and wishlist
left to the full header up to 1699, and below 1440 the copy keeps the logo
and the icons only, as it already did below 1280. */
@media (min-width: 1025px) and (max-width: 1919px) {
.whb-clone .whb-col-center .wd-header-main-nav .wd-nav-main { column-gap: 6px; }
.whb-clone .whb-col-center .wd-header-main-nav .wd-nav-main > li > a { padding-left: 3px; padding-right: 3px; font-size: 11px; }
.whb-clone .wd-header-cart .wd-tools-text { display: none; }
.whb-clone .site-logo img { max-width: 110px !important; }
}
@media (min-width: 1025px) and (max-width: 1699px) {
.whb-clone .wd-header-compare,
.whb-clone .wd-header-wishlist { display: none; }
}
@media (min-width: 1025px) and (max-width: 1439px) {
.whb-clone .wd-header-main-nav { display: none; }
}
/* ---- the phone header fits a 320px screen ---- */
@media (max-width: 359px) {
.whb-general-header .wd-header-mobile-nav .wd-tools-text { display: none; }
.whb-general-header .site-logo img { max-width: 140px !important; }
}
/* ---- the chat buttons step aside while the phone menu is open ---- */
html.gft-menu-open .gft-wa { display: none; }
/* ---- every tall phone poster shows whole ---- */
/* Five of the home page's phone posters (Christmas, Birthdays, Anniversary,
Wear Your Story, Zodiac) sat under the site wide 16:9 frame and were cut to
thin strips. The phone posters all carry gft-phone-poster; the frame is
handed back the same way as for the occasion grids above. */
.elementor-306 .elementor-widget-image.gft-phone-poster img { width: 100%; height: auto; object-fit: contain; aspect-ratio: auto 16 / 9; aspect-ratio: revert-layer; }
/* ---- product page ---- */
/* the ask row, with its speech bubble on the left as in his design */
.single-product .gft-ask-line { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center; }
.single-product .gft-ask-line > .gft-ico { grid-row: 1 / span 2; width: 26px; height: 26px; color: #23201A; }
.single-product .gft-ask-line .gft-ask-btn { display: block; width: 100%; min-height: 0; line-height: 1.4; text-align: left; justify-content: flex-start; }
/* the traditional units table: under the photographs on a desktop, after the
name, price and buttons on a phone */
.gft-units-box.gft-units-mob { display: none; }
@media (max-width: 767px) {
.gft-units-box.gft-units-desk { display: none; }
.gft-units-box.gft-units-mob { display: block; margin: 0 0 22px; }
}
/* Share this item, beside Add to cart */
.single-product .summary form.cart .gft-share-btn { order: 3; }
.gft-share-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; margin: 6px 0 0; padding: 0 20px; border: 1px solid #D9CFBC; background: #fff; color: #23201A; font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; cursor: pointer; transition: border-color .2s ease; }
.gft-share-btn:hover { border-color: #C6A44E; color: #23201A; background: #fff; }
.gft-share-btn .gft-ico { width: 20px; height: 20px; flex: 0 0 20px; }
/* the theme's own row of share icons is replaced by the button */
.single-product .summary .wd-social-icons.product-share,
.single-product .summary .product-share { display: none; }
/* the ring size list shows it is a list */
.gft-resize select {
-webkit-appearance: none; appearance: none; padding-right: 38px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2323201A' stroke-width='1.6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px;
}
/* the card and wallet marks in Ways to pay */
.gft-pay-brands { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.gft-pay-brands svg { display: block; }
.gft-mark { display: inline-block; font-family: Arial, Helvetica, sans-serif; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; color: #0B051D; }
.gft-mark-klarna { font-size: 17px; }
.gft-mark-clearpay { font-size: 16px; letter-spacing: -.03em; }
.gft-pay-card .gft-mark { font-size: 16px; }
/* a lone card on the last row of two takes the whole row */
@media (max-width: 600px) {
.gft-pay-cards > .gft-pay-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Recently viewed stays hidden until there is something in it: the theme's
section{display:block} beat the hidden attribute and left a bare heading */
.gft-recently-viewed[hidden] { display: none !important; }
/* ---- basket ---- */
/* his design goes straight from the menu to Your Basket: no photo band with
Shopping cart, Checkout, Order complete */
.woocommerce-cart .wd-page-title { display: none; }
/* PAY BY CARD as he drew it: bronze, white words, the total in pale gold.
The total took the theme's gold price colour before and all but vanished
into the gold button */
.gft-cart-paycard { background-image: linear-gradient(180deg, #B38A3A 0%, #8A6420 100%); border-color: #8A6420; color: #fff; }
.gft-cart-paycard:hover { color: #fff; box-shadow: 0 4px 16px rgba(138, 100, 32, .45); }
.gft-cart-paycard strong,
.gft-cart-paycard .woocommerce-Price-amount,
.gft-cart-paycard bdi { color: #FBE7A0; }
/* the piece's picture a little larger, as in his design */
@media (min-width: 1025px) {
.woocommerce-cart td.product-thumbnail img { min-width: 110px; max-width: 110px; }
}
/* the gift card box sits under the Order Summary */
.woocommerce-cart .cart_totals + .gft-gc-apply,
.woocommerce-cart .cart-totals-inner .gft-gc-apply { margin-top: 16px; }
/* on a phone the promises and Need Help follow the Order Summary */
.gft-cart-extra-mob { display: none; }
@media (max-width: 1024px) {
.gft-cart-extra-desk { display: none; }
.gft-cart-extra-mob { display: block; margin-top: 24px; }
}
/* re-check fixes, 24 September 2026 */
/* Share this item sits beside Add to cart: the theme gives every child of the
buy form a full row (form.cart > * { flex: 1 1 100% }) */
.single-product .summary form.cart .gft-share-btn { flex: 0 0 auto; }
.gft-mark-visa { font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-style: italic; font-weight: 800; letter-spacing: .01em; line-height: 1; color: #1A1F71; }
/* ==== product page and basket, second pass to his marked-up PDF, 25 September 2026 ==== */
/* RING SIZE above; the size box with Size Guide right beside it */
.gft-resize-row { display: flex; align-items: center; gap: 18px; }
.gft-resize-row select { flex: 0 1 340px; min-width: 0; }
.gft-resize-row .gft-size-guide { flex: 0 0 auto; white-space: nowrap; }
.gft-resize-change { margin: 8px 0 0; padding: 8px 12px; background: #FBF7EF; border-left: 3px solid #C6A44E; font-size: 13px; color: #5A554B; }
/* the shopping bag on ADD TO CART, drawn in the button's own text colour */
.single-product .summary form.cart .single_add_to_cart_button::before {
content: "";
display: inline-block;
width: 22px;
height: 22px;
flex: 0 0 22px;
margin-right: 12px;
vertical-align: -5px;
/* the theme uses this pseudo element for its loading veil, parked out of sight */
position: static;
top: auto;
left: auto;
opacity: 1;
transform: none;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* Click & Reserve and Book a viewing, as rows under Returns */
a.gft-row-link { text-decoration: none; color: #23201A; }
a.gft-row-link:hover { border-color: #C6A44E; }
.gft-row-more strong { display: block; font-size: 15px; font-weight: 600; color: #23201A; }
.gft-row-more span span { display: block; font-size: 13px; line-height: 1.45; color: #5A554B; }
.gft-theme-actions { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 4px 0 0; }
.gft-theme-actions .wd-action-btn { margin: 0; }
/* the boxed photo beside the traditional units table */
.gft-box-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin: 18px 0 0; }
.gft-box-row .gft-units-box { margin: 0; }
.gft-box-photo { overflow: hidden; border: 1px solid #EFE7D6; background: #fff; }
.gft-box-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1024px) { .gft-box-row { grid-template-columns: 1fr; } }
/* Lay Buy at the checkout */
.gft-layby-note-box { margin: 0 0 18px; padding: 14px 16px; border: 2px solid #E0A838; background: #fff; }
.gft-layby-note-title { margin: 0 0 8px; font-size: 14px; color: #23201A; }
.gft-layby-plan { width: 100%; margin: 0; border-collapse: collapse; }
.gft-layby-plan td { padding: 6px 4px; border-top: 1px solid #EFE7D6; font-size: 14px; }
.gft-layby-plan td:nth-child(2) { font-weight: 600; color: #A8802D; }
.gft-layby-note-switch { margin: 10px 0 0; font-size: 13px; color: #5A554B; }
.gft-layby-note-switch a { color: #A8802D; text-decoration: underline; }
.gft-bank-window { padding: 10px 14px; border-left: 3px solid #C6A44E; background: #FBF7EF; }
/* Klarna and Clearpay: Stripe's own messaging (bnpl-rules.php) in the card and the basket row */
.gft-pmme { display: block; min-height: 1px; }
.gft-pmme-fallback { display: block; font-size: 12.5px; color: #5A554B; }
.gft-pmme-on .gft-pmme-fallback { display: none; }
.gft-pay-card[data-gft-pmme-box] .gft-pay-head { margin-top: 6px; }
/* Yoti identity check (yoti-idv.php): the thank you / My Account box and the verify page */
.gft-idv-box { margin: 0 0 24px; padding: 16px 20px; background: #FFFAF1; border: 1px solid #EBCB8B; }
.gft-idv-box p { margin: 0 0 8px; }
.gft-idv-title { font-size: 17px; font-weight: 600; color: #23201A; }
.gft-idv-box .gft-gold-btn { display: inline-block; padding: 11px 22px; background-image: linear-gradient(134deg,#A8802D 0%,#FBF3A1 47%,#CDA42D 100%); color: #1a1a1a; border: 0; font-weight: 600; text-decoration: none; }
.gft-idv-box .gft-gold-btn:hover { box-shadow: 0 4px 16px rgba(198,164,78,.45); color: #1a1a1a; }
.gft-idv-small { font-size: 13px; color: #5A554B; }
.gft-idv-page { padding: 32px 0 48px; }
.gft-idv-page .container { max-width: 760px; }
.gft-idv-frame { display: block; width: 100%; height: 760px; margin: 16px 0; border: 1px solid #E8E2D5; background: #fff; }
@media (max-width: 600px) { .gft-idv-frame { height: 82vh; min-height: 620px; } }
/* ===== Amend 5, w6 (27 Sep 2026) ===== */
/* A5-29: the plain cream header boxes carry a soft jewellery photograph.
includes/amend5/w6-look.php marks the boxes (gf-jewel-band) and prints the
picture as --gf-cream-image. The cream wash is heaviest in the middle, where
the words sit, and lightest at the two ends, where the jewellery is. Kept at
a lower weight than Elementor's own per element rules, so a box given a
picture in the Elementor panel keeps that picture. */
.elementor .e-con.gf-jewel-band,
.elementor .elementor-section.gf-jewel-band {
background-image:
linear-gradient(90deg, rgba(250,246,239,.28) 0%, rgba(250,246,239,.8) 16%, rgba(250,246,239,.9) 28%, rgba(250,246,239,.9) 72%, rgba(250,246,239,.8) 84%, rgba(250,246,239,.28) 100%),
var(--gf-cream-image, none);
background-size: 100% 100%, cover;
background-position: center, center 62%;
background-repeat: no-repeat;
}
/* up to 1299px the words of a header box run close to the edges, so the wash
is even there (amend 5 audit: at 768 to 1199px line ends sat on the bangles) */
@media (max-width: 1299px) {
.elementor .e-con.gf-jewel-band,
.elementor .elementor-section.gf-jewel-band {
background-image: linear-gradient(rgba(250,246,239,.84), rgba(250,246,239,.84)), var(--gf-cream-image, none);
background-size: 100% 100%, cover;
background-position: center, center 62%;
}
}
@media (max-width: 767px) {
.elementor .e-con.gf-jewel-band,
.elementor .elementor-section.gf-jewel-band { background-position: center, 8% 62%; }
}
/* the plain cream bands further down a page (gf-jewel-flat): an even wash at
every width, since icon cards, lists and FAQs there run the full width */
.elementor .e-con.gf-jewel-band.gf-jewel-flat,
.elementor .elementor-section.gf-jewel-band.gf-jewel-flat {
background-image: linear-gradient(rgba(250,246,239,.86), rgba(250,246,239,.86)), var(--gf-cream-image, none);
background-size: 100% 100%, cover;
background-position: center, center 62%;
}
/* A5-38: a weight's unit stays lower case inside a label set in capitals ("10g", not "10G") */
.gft-g { text-transform: none; letter-spacing: 0; }
/* A5-30: the email address under the social icons in the footer */
.gf-footer-email { margin: 12px 0 0; font-size: 13.5px; line-height: 1.4; }
.gf-footer-email .gft-email { color: #8C6F2A; text-decoration: none; border-bottom: 1px solid rgba(198,164,78,.45); word-break: break-word; }
.gf-footer-email .gft-email:hover,
.gf-footer-email .gft-email:focus-visible { color: #1A1A1A; border-bottom-color: #1A1A1A; }
.gf-dark-band .gft-email,
.wd-prefooter .gft-email { color: #E2C46E; text-decoration: none; border-bottom: 1px solid rgba(226,196,110,.5); }
.gf-dark-band .gft-email:hover,
.wd-prefooter .gft-email:hover { color: #fff; border-bottom-color: #fff; }
/* A5-39: the Today's Gold Price box in the shop sidebar, set as a small card:
the purity, the gram price large in gold, one line per unit, the button */
body .sidebar-container .gf-side-gold { position: relative; margin: 0 0 30px; padding: 22px 20px 20px; background: #141312; border: 1px solid rgba(198,164,78,.45); text-align: left; }
body .sidebar-container .gf-side-gold::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(198,164,78,.16); pointer-events: none; }
body .sidebar-container .gf-side-gold .gft-ticker { display: block; color: #fff; font-size: 14px; line-height: 1.3; }
body .sidebar-container .gf-side-gold .gft-ticker-ct { display: block; margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #C9C2B4; }
body .sidebar-container .gf-side-gold .gft-ticker-ct::after { content: " gold"; letter-spacing: .18em; }
body .sidebar-container .gf-side-gold .gft-ticker-colon { display: none; }
body .sidebar-container .gf-side-gold .gft-ticker strong.gft-price-cell { display: inline-block; font-variant-numeric: lining-nums; font-family: "Cormorant Garamond", Georgia, serif; font-size: 34px; font-weight: 600; line-height: 1; color: #E2C46E; letter-spacing: .01em; }
body .sidebar-container .gf-side-gold .gft-ticker-per { display: inline-block; margin-left: 6px; font-size: 12px; letter-spacing: .06em; color: #C9C2B4; }
body .sidebar-container .gf-side-gold .gft-ticker-units { display: block; margin: 14px 0 0; padding: 10px 0 0; border-top: 1px solid rgba(198,164,78,.3); font-size: 13px; opacity: 1; }
body .sidebar-container .gf-side-gold .gft-ticker-unit { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 4px 0; }
body .sidebar-container .gf-side-gold .gft-ticker-unit .gft-unit-cell { order: 2; color: #E2C46E; font-weight: 600; font-size: 15px; white-space: nowrap; }
body .sidebar-container .gf-side-gold .gft-ticker-unit-label { order: 1; color: #D8D2C6; font-size: 12.5px; letter-spacing: .04em; }
body .sidebar-container .gf-side-gold .gft-ticker-sep,
body .sidebar-container .gf-side-gold > br { display: none; }
body .sidebar-container .gf-side-gold .gf-side-btn { display: block; margin-top: 16px; text-align: center; }
.gf-dark-band p.gf-band-email,
.wd-prefooter p.gf-band-email { margin-top: -4px; }
/* Gold Bank page hero (post 422, box 3793352d): the bullion photograph under a
dark wash instead of plain cream, the same picture and style w4 gave the
Gold Bank account header (post 2682). The white panel on the right keeps its
own ground; only the words on the left are recoloured for the dark ground. */
body .elementor-422 .elementor-element.elementor-element-3793352d.e-con {
background-color: #17120B;
background-image: linear-gradient(rgba(21,16,10,.62), rgba(21,16,10,.62)), var(--gf-bullion-image, none);
background-size: 100% 100%, cover;
background-position: center, center;
background-repeat: no-repeat;
}
body .elementor-422 .elementor-element.elementor-element-3793352d .elementor-element-75dde87e .elementor-heading-title { color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.45); }
body .elementor-422 .elementor-element.elementor-element-3793352d .elementor-element-75dde87e .elementor-widget-text-editor,
body .elementor-422 .elementor-element.elementor-element-3793352d .elementor-element-75dde87e .elementor-widget-text-editor p { color: #EFE6D2; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
body .elementor-422 .elementor-element.elementor-element-3793352d .elementor-element-75dde87e .elementor-icon-box-title,
body .elementor-422 .elementor-element.elementor-element-3793352d .elementor-element-75dde87e .elementor-icon-box-title a { color: #fff; }
body .elementor-422 .elementor-element.elementor-element-3793352d .elementor-element-75dde87e .elementor-icon-box-description { color: #E6DCC6; }
body .elementor-422 .elementor-element.elementor-element-3793352d .elementor-element-b37fffe8 .elementor-button { box-shadow: inset 0 0 0 1px #C6A44E; }
/* Amend 5 audit F (27 Sep 2026). On a phone the floating WhatsApp button kept
passing over the basket's terms tick boxes and Apply coupon, and over the
checkout fields and payment choices: it is not shown on the basket and the
checkout at phone width (the chat bubble stays). */
@media (max-width: 767px) {
body.woocommerce-cart .gft-wa,
body.woocommerce-checkout .gft-wa { display: none; }
}
/* Floating buttons (WhatsApp, Report an issue, back to top) fade out while
they sit on an Add to cart, favourite, compare or Click & Reserve control;
w6-look.js sets gft-aside on that one button and takes it off again once
the control has scrolled past. A state class, so it wins over the buttons'
own hover rules. */
.gft-aside { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
/* Words on the jewel bands, at 4.5 to 1 or better (amend 5 final audit: the
site's grey body text measured 2.6 to 3.4 to 1 on the washed photograph).
w6-look.php marks only the widgets inside a band whose own colour is light
(gf-jb-grey for grey text, lists and icon box lines; gf-jb-gold for a gold
heading such as the small line above a title). Everywhere else the colours
are unchanged. #4B4439 is about 6.3 to 1 and #6B4F17 about 5 to 1 against
the darkest washed pixels, 8 to 1 and more on the plain cream. */
body .elementor .gf-jewel-band .gf-jb-grey,
body .elementor .gf-jewel-band .gf-jb-grey p,
body .elementor .gf-jewel-band .gf-jb-grey li,
body .elementor .gf-jewel-band .gf-jb-grey .elementor-icon-list-text,
body .elementor .gf-jewel-band .gf-jb-grey .elementor-icon-box-description,
body .elementor .gf-jewel-band .gf-jb-grey .elementor-heading-title { color: #4B4439; }
body .elementor .gf-jewel-band .gf-jb-grey p a:not(.elementor-button),
body .elementor .gf-jewel-band .gf-jb-grey li a:not(.elementor-button),
body .elementor .gf-jewel-band .gf-jb-gold .elementor-heading-title,
body .elementor .gf-jewel-band .gf-jb-gold .elementor-heading-title a { color: #6B4F17; }
/* 5 October 2026: Lay Buy heading in bold, its terms link the colour of the other links, the Rewards exclusions line */
.gft-layby .gft-layby-title { font-family: inherit; font-size: 16px; font-weight: 700; }
.gft-layby .gft-layby-title strong { font-weight: 700; }
.gft-layby .gft-layby-note a { color: #A8802D; text-decoration: underline; }
.gft-rewards-box .gft-rewards-excl { display: block; margin-top: 4px; font-size: 12px; color: #8A8172; }