/* ==========================================================================
   SJ Gold — 2026 refresh
   Loaded after style.css. Each section stands alone so it can be removed
   on its own. Selectors are prefixed with `html body.sjg-premium-theme`
   to win over the earlier layers in style.css without !important.
   ========================================================================== */

/* ── 1. Header ─────────────────────────────────────────────────────────── */

html body.sjg-premium-theme .sjg-topbar {
  font-size: .74rem;
  padding: 2px 0;
}

html body.sjg-premium-theme .sjg-header,
html body.sjg-premium-theme .sjg-header.is-scrolled,
html body.sjg-premium-theme .sjg-header.is-reading {
  /* !important only to beat `.sjg-header.is-scrolled` in style.css, which uses it */
  background: #0b2a66 !important;
  box-shadow: 0 6px 24px rgba(8,24,55,.18);
}

html body.sjg-premium-theme .sjg-header-row {
  grid-template-columns: auto minmax(280px, 560px) 1fr;
  gap: 28px;
  min-height: 88px;
  transition: min-height .2s ease;
}

/* The logo is a stacked emblem + wordmark, so height drives everything */
html body.sjg-premium-theme .sjg-logo img,
html body.sjg-premium-theme .sjg-logo--custom .custom-logo {
  max-height: 76px;
  transition: max-height .2s ease;
}

/* Store + phone already live in the top bar */
html body.sjg-premium-theme .sjg-header-utility,
html body.sjg-premium-theme .sjg-hact--trust {
  display: none;
}

html body.sjg-premium-theme .sjg-search {
  border-radius: 999px;
  overflow: hidden;
}

html body.sjg-premium-theme .sjg-search input {
  min-height: 42px;
  padding: 8px 18px;
  font-size: .9rem;
}

html body.sjg-premium-theme .sjg-search button {
  min-width: 46px;
}

html body.sjg-premium-theme .sjg-hacts {
  justify-content: flex-end;
  gap: 10px;
}

html body.sjg-premium-theme .sjg-chip {
  min-height: 30px;
  padding: 4px 10px;
  font-size: .7rem;
}

html body.sjg-premium-theme .sjg-chip__v {
  font-size: .8rem;
}

html body.sjg-premium-theme .sjg-hact--icon {
  min-width: 40px;
  min-height: 40px;
  border-radius: 999px;
  justify-content: center;
}

html body.sjg-premium-theme .sjg-hact-ico {
  font-size: 1rem;
}

/* Nav: readable size, gold underline for the current page */
html body.sjg-premium-theme .sjg-nav {
  background: #fff;
  border-bottom: 1px solid #e8eef8;
}

html body.sjg-premium-theme .sjg-nav-inner {
  min-height: 44px;
  gap: 8px;
}

html body.sjg-premium-theme .sjg-na,
html body.sjg-premium-theme .sjg-na-has-mega {
  font-size: .8rem;
  letter-spacing: .06em;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Scrolled: tighten the brand row */
html body.sjg-premium-theme .sjg-header.is-scrolled .sjg-header-row {
  min-height: 68px;
}

html body.sjg-premium-theme .sjg-header.is-scrolled .sjg-logo img,
html body.sjg-premium-theme .sjg-header.is-scrolled .sjg-logo--custom .custom-logo {
  max-height: 60px;
}

@media (max-width: 1180px) {
  html body.sjg-premium-theme .sjg-header-row {
    grid-template-columns: auto minmax(220px, 1fr) auto;
    gap: 16px;
  }

  html body.sjg-premium-theme .sjg-hacts {
    grid-column: auto;
  }

  html body.sjg-premium-theme .sjg-chips {
    display: none;
  }
}

@media (max-width: 768px) {
  html body.sjg-premium-theme .sjg-header-row {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "menu brand account cart"
      "search search search search";
    gap: 8px 10px;
    min-height: 0;
    padding: 6px 0 10px;
  }

  /* Pull the hamburger out of the brand block into its own cell */
  html body.sjg-premium-theme .sjg-header-brand {
    display: contents;
  }

  html body.sjg-premium-theme .sjg-hamburger {
    grid-area: menu;
    width: 40px;
    height: 40px;
  }

  html body.sjg-premium-theme .sjg-logo,
  html body.sjg-premium-theme .sjg-logo--custom {
    grid-area: brand;
    justify-content: center;
  }

  html body.sjg-premium-theme .sjg-logo img,
  html body.sjg-premium-theme .sjg-logo--custom .custom-logo,
  html body.sjg-premium-theme .sjg-header.is-scrolled .sjg-logo--custom .custom-logo {
    max-height: 56px;
  }

  html body.sjg-premium-theme .sjg-search input {
    min-height: 40px;
    font-size: .88rem;
  }

  html body.sjg-premium-theme .sjg-header.is-scrolled .sjg-header-row {
    min-height: 0;
  }
}

/* ── 2. Icons ──────────────────────────────────────────────────────────── */

.sjg-i {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Icon holders were sized for emoji glyphs; centre the SVGs instead */
html body.sjg-premium-theme .sjg-hact-ico,
html body.sjg-premium-theme .sjg-search__icon,
html body.sjg-premium-theme .sjg-header-utility__icon,
.sjg-mobile-dock__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  font-size: 0;
}

html body.sjg-premium-theme .sjg-hact--icon {
  color: #fff;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.16);
}

html body.sjg-premium-theme .sjg-hact--icon:hover {
  background: rgba(255,255,255,.18);
}

html body.sjg-premium-theme .sjg-search button {
  color: #0b2a66;
}

.sjg-mobile-dock__item {
  color: #374151;
}

.sjg-mobile-dock__item--wa {
  color: #128c4b;
}

.sjg-wa-float {
  font-size: 0;
}

.sjg-mob-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* WhatsApp lives in the bottom dock on phones, so the floating bubble
   no longer covers buttons and product cards */
@media (max-width: 768px) {
  html body .sjg-wa-float {
    display: none;
  }

  .sjg-mobile-dock__item,
  .sjg-mobile-dock__item--button {
    padding: 10px 4px;
    font-size: .68rem;
  }
}

/* ── 3. Homepage "Gold Rate Alerts" rate card ──────────────────────────── */
/* `.fpcta-rate-v span` was meant for "/gram" but also caught the price span */

.fpcta .fpcta-rate {
  padding: 24px 28px;
  border-radius: 22px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(201,168,76,.35);
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
}

.fpcta .fpcta-rate-l {
  color: rgba(255,255,255,.75);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.fpcta .fpcta-rate-v {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 8px 0 6px;
}

.fpcta .fpcta-rate-v [data-sjg-rate] {
  color: #e8c97a;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
}

.fpcta .fpcta-rate-v span:not([data-sjg-rate]) {
  color: rgba(255,255,255,.7);
  font-size: .95rem;
}

.fpcta .fpcta-rate-s {
  color: rgba(255,255,255,.65);
  font-size: .78rem;
}

/* ── 4. Homepage quote card ────────────────────────────────────────────── */
/* A later group rule in style.css made this card white while its text stayed
   cream for a dark card; restore the navy background it was designed for */

html body .sjg-testimonial-card {
  background: linear-gradient(160deg, #0b2a66 0%, #0a1d44 100%);
  border: 1px solid rgba(201,168,76,.3);
  box-shadow: 0 24px 50px rgba(11,42,102,.22);
}

html body .sjg-testimonial-card .sjg-testimonial-card__quote {
  font-size: 4rem;
  color: #c9a84c;
  margin-bottom: -10px;
}

html body .sjg-testimonial-card p {
  color: #fff;
  font-family: var(--fh);
  font-size: 1.3rem;
  line-height: 1.6;
}

html body .sjg-testimonial-card strong {
  color: #e8c97a;
}

html body .sjg-testimonial-card span:not(.sjg-testimonial-card__quote) {
  color: rgba(255,255,255,.72);
}

/* ── 5. Homepage "Bridal heirlooms" card ───────────────────────────────── */
/* Same issue as the quote card: a later `.sjg-occasion-card` rule in
   style.css painted the dark variant white */

html body .sjg-occasion-card--dark {
  color: #fff;
  background: linear-gradient(160deg, #0b2a66 0%, #0a1d44 100%);
  border-color: rgba(201,168,76,.3);
  box-shadow: 0 20px 44px rgba(11,42,102,.2);
}

html body .sjg-occasion-card--dark .sjg-occasion-card__tag {
  background: rgba(201,168,76,.18);
  color: #e8c97a;
}

html body .sjg-occasion-card--dark p {
  color: rgba(255,255,255,.82);
  opacity: 1;
}

/* ── 6. WhatsApp buttons ───────────────────────────────────────────────── */
/* White on WhatsApp's bright #25D366 fails contrast; use their darker green */

html body .SB-wa,
html body .sjg-mob-wa {
  background: #128c4b;
  border-color: #128c4b;
  color: #fff;
}

html body .SB-wa:hover,
html body .sjg-mob-wa:hover {
  background: #0e7a40;
  border-color: #0e7a40;
  color: #fff;
}

/* ── 7. Homepage "Rings" banner ────────────────────────────────────────── */
/* Its caption was styled to sit over the photo in white, but the layout
   now puts it in the white strip below; match the other two banners */

html body .fpb-box-dk .fpb-txt-ov {
  position: static;
}

html body .fpb-box-dk .fpb-txt-ov--light .fpb-eye { color: var(--txl); }
html body .fpb-box-dk .fpb-txt-ov--light .fpb-h3  { color: var(--tx); }
html body .fpb-box-dk .fpb-txt-ov--light .fpb-d   { color: var(--txm); }
html body .fpb-box-dk .fpb-ov { display: none; }

/* ── 8. Product page ───────────────────────────────────────────────────── */

/* Sale badge sat half outside the gallery */
html body.single-product div.product > .onsale,
html body.single-product div.product .woocommerce-product-gallery .onsale {
  top: 16px !important;
  left: 16px !important;
  right: auto !important;
  margin: 0 !important;
  min-width: 0;
  min-height: 0;
  padding: 6px 12px;
  border-radius: 999px;
  line-height: 1.2;
  font-size: .72rem;
  z-index: 5;
}

html body.single-product div.product .product_title {
  font-family: var(--fh);
  color: #0b2a66;
}

/* Total incl. GST, under the price */
.sjg-single-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 4px 0 18px;
  padding: 12px 16px;
  border-radius: 14px;
  background: #fbf8f2;
  border: 1px solid #eee5d3;
}

.sjg-single-total span {
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6b7280;
}

.sjg-single-total strong {
  font-size: 1.35rem;
  color: #0b2a66;
}

.sjg-single-total small {
  flex-basis: 100%;
  font-size: .8rem;
  color: #6b7280;
}

.sjg-single-total a {
  color: #9b7820;
  text-decoration: underline;
}

/* Add to cart: full width and easy to tap */
html body.single-product div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px !important;
}

html body.single-product div.product form.cart .single_add_to_cart_button {
  flex: 1 1 220px;
  min-height: 52px;
  border-radius: 999px !important;
  font-size: .9rem !important;
  letter-spacing: .06em;
  margin: 0 !important;
}

html body.single-product div.product form.cart .quantity {
  margin: 0 !important;
}

html body.single-product div.product form.cart .quantity .qty {
  min-height: 52px;
  border-radius: 999px;
  width: 80px;
}

.sjg-single-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  margin: 0 0 18px;
  border-radius: 999px;
  border: 1px solid #128c4b;
  color: #128c4b;
  font-weight: 600;
  font-size: .88rem;
  background: #fff;
}

.sjg-single-wa:hover {
  background: #128c4b;
  color: #fff;
}

.sjg-single-promises {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  list-style: none;
  margin: 0 0 20px;
  padding: 16px;
  border-radius: 16px;
  background: #f6f8fc;
}

.sjg-single-promises li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .84rem;
  color: #374151;
}

.sjg-single-promises .sjg-i {
  color: #9b7820;
}

/* SKU already appears as "Product Code" and in the spec grid */
html body.single-product div.product .product_meta .sku_wrapper {
  display: none;
}

@media (max-width: 768px) {
  .sjg-single-promises {
    grid-template-columns: 1fr;
  }
}

/* Price: sale price leads, original price small and struck through */
html body.single-product div.product .summary .price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  margin: 8px 0 10px !important;
}

html body.single-product div.product .summary .price ins,
html body.single-product div.product .summary .price > .amount {
  order: 1;
  font-size: clamp(1.6rem, 3vw, 2rem) !important;
  font-weight: 700;
  color: #0b2a66 !important;
  text-decoration: none !important;
}

html body.single-product div.product .summary .price del {
  order: 2;
  font-size: 1rem !important;
  font-weight: 500;
  color: #9ca3af !important;
  opacity: 1;
}

html body.single-product div.product .summary .price del .amount,
html body.single-product div.product .summary .price ins .amount {
  font-size: inherit !important;
  color: inherit !important;
}

/* Mobile sticky buy bar: just the price you pay */
.sjg-mobile-atc__price del {
  display: none;
}

.sjg-mobile-atc__price ins {
  text-decoration: none;
}

@media (max-width: 768px) {
  html body.single-product div.product form.cart .single_add_to_cart_button {
    flex-basis: 100%;
  }

  .sjg-single-wa {
    margin-bottom: 14px;
  }
}

/* "You may also like" cards inherited the 30px single-product price size */
html body.single-product .related ul.products li.product .price,
html body.single-product .upsells ul.products li.product .price {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  font-size: .95rem !important;
}

html body.single-product .related ul.products li.product .price del,
html body.single-product .related ul.products li.product .price ins,
html body.single-product .upsells ul.products li.product .price del,
html body.single-product .upsells ul.products li.product .price ins {
  font-size: inherit !important;
}

html body.single-product .related ul.products li.product .price del,
html body.single-product .upsells ul.products li.product .price del {
  font-size: .8rem !important;
  color: #9ca3af !important;
}

/* ── 9. Login / register (My account, logged out) ──────────────────────── */
/* The account page grid (220px menu + content) is for logged-in customers;
   logged out, it squeezed both forms into the 220px column */

html body.woocommerce-account:not(.logged-in) main .W {
  max-width: 1000px;
}

html body.woocommerce-account:not(.logged-in) .woocommerce {
  display: block;
}

html body.woocommerce-account:not(.logged-in) .entry-title,
html body.woocommerce-account:not(.logged-in) h1 {
  margin-bottom: 8px;
}

html body.woocommerce-account:not(.logged-in) #customer_login {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
}

html body.woocommerce-account:not(.logged-in) #customer_login::before,
html body.woocommerce-account:not(.logged-in) #customer_login::after {
  display: none;
}

html body.woocommerce-account:not(.logged-in) #customer_login > .u-column1,
html body.woocommerce-account:not(.logged-in) #customer_login > .u-column2 {
  float: none;
  width: auto;
  max-width: none;
  margin: 0;
  display: flex;
  flex-direction: column;
}

html body.woocommerce-account:not(.logged-in) #customer_login h2 {
  font-size: 1.5rem;
  color: #0b2a66;
  margin: 0 0 12px;
}

html body.woocommerce-account .woocommerce-form-login,
html body.woocommerce-account .woocommerce-form-register {
  flex: 1;
  margin: 0 !important;
  padding: 28px !important;
  border-radius: 20px !important;
  border: 1px solid #e8eef8 !important;
  background: #fff !important;
  box-shadow: 0 14px 34px rgba(11,42,102,.06) !important;
}

html body.woocommerce-account .woocommerce-form-login .form-row,
html body.woocommerce-account .woocommerce-form-register .form-row {
  padding: 0 !important;
  margin: 0 0 16px !important;
  width: 100%;
}

html body.woocommerce-account .woocommerce-form label {
  font-size: .86rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 6px;
  display: block;
}

html body.woocommerce-account .woocommerce-form .input-text {
  width: 100%;
  min-height: 48px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid #d1dbed;
  font-size: 1rem;
}

html body.woocommerce-account .woocommerce-form .input-text:focus {
  border-color: #0b2a66;
  outline: 3px solid rgba(11,42,102,.12);
}

html body.woocommerce-account .woocommerce-form-login .woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  margin: 0;
}

/* Log in / Register: full-width primary buttons */
html body.woocommerce-account .woocommerce-form-login__submit,
html body.woocommerce-account .woocommerce-form-register__submit {
  width: 100%;
  min-height: 50px;
  margin: 12px 0 0 !important;
  border-radius: 999px !important;
  float: none !important;
  font-size: .9rem !important;
}

html body.woocommerce-account .woocommerce-form-login .form-row:has(.woocommerce-form-login__submit) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

html body.woocommerce-account .woocommerce-LostPassword {
  margin: 4px 0 0;
  font-size: .86rem;
}

html body.woocommerce-account .woocommerce-LostPassword a {
  color: #9b7820;
}

html body.woocommerce-account .woocommerce-privacy-policy-text p {
  font-size: .8rem;
  line-height: 1.6;
  color: #6b7280;
}

/* Google sign-in (Super Socializer) as a proper full-width button (account + checkout) */
html body .the_champ_outer_login_container {
  margin: 4px 0 18px;
}

html body .the_champ_social_login_title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  font-size: .78rem;
  color: #6b7280;
}

html body .the_champ_social_login_title::before,
html body .the_champ_social_login_title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

html body .the_champ_login_ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

html body .the_champ_login_ul li {
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
}

html body #theChampGoogleButton {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100% !important;
  height: 48px !important;
  border: 1px solid #d1dbed !important;
  border-radius: 999px !important;
  background: #fff !important;
  cursor: pointer;
  font-style: normal;
}

html body #theChampGoogleButton:hover {
  border-color: #0b2a66 !important;
  background: #f6f8fc !important;
}

html body #theChampGoogleButton ss {
  width: 22px !important;
  height: 22px !important;
  background-size: contain !important;
  margin: 0 !important;
}

html body #theChampGoogleButton::after {
  content: "Continue with Google";
  font-size: .9rem;
  font-weight: 600;
  color: #1f2937;
}

@media (max-width: 768px) {
  html body.woocommerce-account:not(.logged-in) #customer_login {
    grid-template-columns: 1fr;
  }

  html body.woocommerce-account .woocommerce-form-login,
  html body.woocommerce-account .woocommerce-form-register {
    padding: 22px !important;
  }
}

/* ── 10. Contact page (page-contact.php) ───────────────────────────────── */

.sjc { background: #fbf8f2; }
.sjc-inner { padding-top: 48px; padding-bottom: 64px; max-width: 1080px; }
.sjc-tag { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: #9b7820; font-weight: 600; }
.sjc-h1 { font-family: var(--fh); font-size: clamp(2rem, 4vw, 3rem); color: #0b2a66; margin: 10px 0 12px; line-height: 1.1; }
.sjc-lead { max-width: 56ch; color: #4b5568; line-height: 1.7; margin: 0 0 32px; }
.sjc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 24px; }
.sjc-card { display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: 20px; background: #fff; border: 1px solid #eee5d3; color: #0b2a66; box-shadow: 0 12px 30px rgba(11,42,102,.05); transition: transform .2s, box-shadow .2s; }
.sjc-card:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(11,42,102,.1); color: #0b2a66; }
.sjc-card .sjg-i { color: #9b7820; margin-bottom: 6px; }
.sjc-card strong { font-size: 1.05rem; }
.sjc-card span { color: #4b5568; font-size: .92rem; word-break: break-word; }
.sjc-card em { margin-top: auto; padding-top: 10px; font-style: normal; font-weight: 600; font-size: .86rem; }
.sjc-card--wa { background: #128c4b; border-color: #128c4b; color: #fff; }
.sjc-card--wa:hover { color: #fff; }
.sjc-card--wa .sjg-i, .sjc-card--wa span { color: #fff; }
.sjc-visit { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 28px; border-radius: 22px; background: #0b2a66; color: #fff; }
.sjc-visit h2 { font-family: var(--fh); color: #fff; font-size: 1.5rem; margin: 0 0 10px; }
.sjc-addr { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; color: rgba(255,255,255,.88); }
.sjc-addr .sjg-i { color: #e8c97a; }
.sjc-hours { display: grid; gap: 6px; margin: 0; }
.sjc-hours div { display: flex; gap: 14px; }
.sjc-hours dt { min-width: 160px; color: rgba(255,255,255,.7); }
.sjc-hours dd { margin: 0; font-weight: 600; }
.sjc-visit .sjc-dir { background: #c9a84c; border-color: #c9a84c; color: #0b2a66; border-radius: 999px; min-height: 48px; padding: 0 24px; }
.sjc-visit .sjc-dir:hover { background: #e8c97a; border-color: #e8c97a; color: #0b2a66; }
.sjc-legal { margin: 20px 0 0; font-size: .8rem; color: #6b7280; }

@media (max-width: 768px) {
  .sjc-inner { padding-top: 28px; padding-bottom: 40px; }
  .sjc-grid { grid-template-columns: 1fr; gap: 12px; }
  .sjc-card { padding: 18px; }
  .sjc-visit { padding: 22px; }
  .sjc-hours dt { min-width: 130px; }
  .sjc-visit .sjc-dir { width: 100%; justify-content: center; }
}

/* ── 11. Store notices (empty cart etc.) ───────────────────────────────── */
/* WooCommerce's notice icon overlapped the first words; style.css sets the
   padding with !important, so these match its specificity plus one */

html body.sjg-premium-theme .woocommerce-info,
html body.sjg-premium-theme .woocommerce-message,
html body.sjg-premium-theme .woocommerce-error {
  padding-left: 3em !important;
  position: relative;
}

html body.sjg-premium-theme .woocommerce-info::before,
html body.sjg-premium-theme .woocommerce-message::before,
html body.sjg-premium-theme .woocommerce-error::before {
  left: 1.1em !important;
  top: 50% !important;
  transform: translateY(-50%);
}

@media (max-width: 768px) {
  html body.sjg-premium-theme .woocommerce-info,
  html body.sjg-premium-theme .woocommerce-message,
  html body.sjg-premium-theme .woocommerce-error {
    padding-left: 2.8em !important;
  }

  /* Contact: stack day above time so neither wraps */
  .sjc-hours div { flex-direction: column; gap: 2px; }
  .sjc-hours dt { min-width: 0; font-size: .85rem; }
}

/* ── 12. Tables on content pages (Savings Scheme, Ring Size Chart, policies) ─ */

html body.page:not(.woocommerce-page) main table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 18px 0 28px;
  border: 1px solid #e6dcc6;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  font-size: .92rem;
}

html body.page:not(.woocommerce-page) main table th,
html body.page:not(.woocommerce-page) main table td {
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid #f0e9da;
  text-align: left;
  vertical-align: middle;
}

html body.page:not(.woocommerce-page) main table tr:last-child td {
  border-bottom: 0;
}

/* Header row: real <th> or a first row of <td> used as one */
html body.page:not(.woocommerce-page) main table thead th,
html body.page:not(.woocommerce-page) main table tr:first-child th,
html body.page:not(.woocommerce-page) main table tbody:first-child tr:first-child td {
  background: #0b2a66;
  color: #fff;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .04em;
}

html body.page:not(.woocommerce-page) main table tbody tr:nth-child(even) td {
  background: #fbf8f2;
}

html body.page:not(.woocommerce-page) main table td:not(:first-child) {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
  html body.page:not(.woocommerce-page) main table {
    font-size: .85rem;
  }

  html body.page:not(.woocommerce-page) main table th,
  html body.page:not(.woocommerce-page) main table td {
    padding: 9px 10px;
  }
}

/* ── 13. Shop / category pages ─────────────────────────────────────────── */
/* WooCommerce's plain "Shop" title duplicated the theme's toolbar heading */

html body main:has(.sjg-archive-toolbar__title) .woocommerce-products-header__title.page-title,
html body main:has(.sjg-archive-toolbar__title) > .page-title,
html body main:has(.sjg-archive-toolbar__title) .woocommerce-products-header > .page-title {
  display: none;
}

/* ── 14. Checkout fields ───────────────────────────────────────────────── */

html body.woocommerce-checkout form.checkout select,
html body.woocommerce-checkout .select2-container--default .select2-selection--single {
  min-height: 48px;
  border: 1px solid #d1dbed !important;
  border-radius: 12px !important;
  background-color: #fff;
}

html body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 46px;
  padding-left: 14px;
}

html body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 46px;
}

html body.woocommerce-checkout .the_champ_outer_login_container {
  max-width: 420px;
  margin: 8px 0 20px;
}

/* ── 15. Account deletion page (page-account-deletion.php) ─────────────── */

.sjd { background: #fbf8f2; }
.sjd-inner { padding-top: 48px; padding-bottom: 64px; max-width: 1100px; }
.sjd-tag { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: #9b7820; font-weight: 600; }
.sjd-h1 { font-family: var(--fh); font-size: clamp(1.9rem, 4vw, 2.8rem); color: #0b2a66; margin: 10px 0 12px; line-height: 1.12; }
.sjd-lead { max-width: 70ch; color: #4b5568; line-height: 1.75; margin: 0 0 32px; }
.sjd-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.sjd-main h2, .sjd-formbox h2 { font-family: var(--fh); color: #0b2a66; font-size: 1.35rem; margin: 28px 0 12px; }
.sjd-main h2:first-child, .sjd-formbox h2:first-child { margin-top: 0; }
.sjd-steps { margin: 0 0 14px; padding-left: 1.3em; color: #374151; line-height: 1.7; }
.sjd-steps li { margin-bottom: 8px; }
.sjd-alt { color: #4b5568; line-height: 1.7; font-size: .94rem; }
.sjd-alt a, .sjd-small a { color: #9b7820; text-decoration: underline; }
.sjd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sjd-list li { position: relative; padding: 12px 14px 12px 40px; border-radius: 12px; background: #fff; border: 1px solid #eee5d3; color: #374151; line-height: 1.6; font-size: .93rem; }
.sjd-list li::before { position: absolute; left: 14px; top: 12px; font-weight: 700; }
.sjd-list--del li::before { content: "\2715"; color: #b91c1c; }
.sjd-list--keep li::before { content: "\2713"; color: #9b7820; }
.sjd-formbox { position: sticky; top: 140px; padding: 26px; border-radius: 20px; background: #fff; border: 1px solid #eee5d3; box-shadow: 0 14px 34px rgba(11,42,102,.07); }
.sjd-form { display: grid; gap: 6px; }
.sjd-form label { font-size: .86rem; font-weight: 600; color: #1f2937; margin-top: 8px; }
.sjd-form label small { font-weight: 400; color: #6b7280; }
.sjd-form input[type=email], .sjd-form input[type=tel], .sjd-form textarea { width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 12px; border: 1px solid #d1dbed; font: inherit; font-size: 1rem; background: #fff; }
.sjd-form input:focus, .sjd-form textarea:focus { border-color: #0b2a66; outline: 3px solid rgba(11,42,102,.12); }
.sjd-check { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 500 !important; line-height: 1.5; margin-top: 12px !important; }
.sjd-check input { margin-top: 4px; }
.sjd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sjd-submit { margin-top: 14px; min-height: 50px; border-radius: 999px; width: 100%; justify-content: center; background: #b91c1c; border-color: #b91c1c; }
.sjd-submit:hover { background: #991b1b; border-color: #991b1b; }
.sjd-notice { padding: 12px 14px; border-radius: 12px; line-height: 1.55; font-size: .92rem; margin: 0 0 12px; }
.sjd-notice--ok { background: #ecfdf3; color: #065f46; border: 1px solid #a7f3d0; }
.sjd-notice--err { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.sjd-small { margin: 16px 0 0; font-size: .82rem; color: #6b7280; line-height: 1.6; }

@media (max-width: 900px) {
  .sjd-inner { padding-top: 28px; padding-bottom: 40px; }
  .sjd-grid { grid-template-columns: 1fr; }
  .sjd-formbox { position: static; order: -1; padding: 22px; }
}