/* Homepage shop sections (local-home.js): product rows and grids, shlokas,
   collections, proof, gallery, single beads, feature panel, styles and help links.
   Light cream page, cards with square photos, Gem Theory's green and gold for buttons and badges. */
.gt-home { background: var(--cream); }
.gt-home .gt-wrap { max-width: 1240px; }

/* sections and their headings */
.gh-sec { padding: 46px 0 8px; }
.gh-sec--sand { margin-top: 38px; padding: 46px 0; background: var(--cream-2); }
.gh-sec--sand + .gh-sec { padding-top: 46px; }
.gh-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 18px; }
.gh-head--center { justify-content: center; text-align: center; }
.gt-home .gh-head h2 { font-size: clamp(21px, 2.2vw, 27px); line-height: 1.25; color: var(--ink); }
.gh-head__end { display: flex; align-items: center; gap: 8px; flex: none; }
.gh-head__all { margin-right: 6px; font-size: 14px; font-weight: 600; color: var(--g-700) !important; text-decoration: underline !important; text-underline-offset: 3px; }
.gh-arrow { display: grid; place-items: center; width: 36px; height: 36px; min-height: 0; padding: 0; border: 1px solid #DCCFB8; border-radius: 50%;
  background: #fff; color: var(--g-700); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.gh-arrow:hover { background: var(--g-700); border-color: var(--g-700); color: #fff; }
.gt-home .gh-arrow svg { width: 18px; height: 18px; }

/* a row that scrolls sideways, and its scroll bar */
.gh-row__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 20px) / 5); gap: 20px; overflow-x: auto;
  scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.gh-row__track::-webkit-scrollbar { display: none; }
.gh-row__track > * { scroll-snap-align: start; }
.gh-row__bar { height: 2px; margin: 22px 2px 0; background: #DCCFB8; border-radius: 2px; overflow: hidden; }
.gh-row__bar i { display: block; height: 100%; background: var(--g-700); border-radius: 2px; }
.gh-row.is-static .gh-row__bar { visibility: hidden; }
.gh-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 20px; }

/* a product card */
.gh-card { display: flex; flex-direction: column; min-width: 0; }
.gh-card__media { position: relative; display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #fff; }
.gh-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.gh-card:hover .gh-card__media img { transform: scale(1.05); }
.gh-card__badges { position: absolute; z-index: 1; top: 0; left: 0; display: flex; flex-direction: column; align-items: flex-start; }
.gh-badge { padding: 3px 9px; font-size: 12px; font-weight: 700; line-height: 1.5; color: #fff; }
.gh-badge--new { background: var(--gold-2); color: var(--g-900); }
.gh-card__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-height: 2.7em;
  margin: 12px 0 4px; font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--ink) !important; text-decoration: none !important; }
.gh-card__title:hover { color: var(--g-600) !important; }
.gh-card__price { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.gh-card__price b { font-size: 17px; color: var(--ink); }
.gh-card__price s { margin-left: 4px; color: #8A8F8E; }
/* the theme styles .button-ATC (green, uppercase); here it only keeps to the foot of the card */
.gt-home .gh-card__add { width: 100%; margin-top: auto; min-height: 40px; padding: 0 10px; border-radius: 8px; font-size: 13px; letter-spacing: .04em; }
.gh-card .local-select { top: auto; bottom: 10px; left: 10px; }

/* the three promises */
.gh-perks { margin-top: 38px; background: var(--cream-2); }
.gh-perks ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0 auto; padding-top: 26px; padding-bottom: 26px; list-style: none; }
.gh-perks li { display: flex; align-items: center; justify-content: center; gap: 16px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.gh-perks li svg { flex: none; color: var(--g-700); }
.gh-perks b { display: block; margin-bottom: 2px; color: var(--ink); font-size: 15px; }

/* "Shop our collections": big round photos */
.gh-cols { grid-auto-columns: calc((100% - 5 * 20px) / 6); }
.gh-col { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; text-align: center;
  color: var(--ink) !important; text-decoration: none !important; }
.gh-col span { width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(212, 166, 74, .5); }
.gh-col img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.gh-col:hover img { transform: scale(1.06); }

/* proof: lab certified, energised */
.gh-proof { display: grid; grid-template-columns: 1fr 1.15fr; gap: 0; border-radius: 16px; overflow: hidden; background: var(--cream-2); }
.gh-proof__text { padding: clamp(26px, 4vw, 52px); }
.gt-home .gh-proof h2 { margin-bottom: 12px; font-size: clamp(24px, 2.6vw, 32px); }
.gh-proof__text > p { margin: 0 0 22px; color: var(--muted); max-width: 46ch; }
.gh-proof ul { display: grid; gap: 14px; margin: 0 0 26px; padding: 0; list-style: none; }
.gh-proof li { display: flex; gap: 14px; align-items: center; font-size: 14px; color: var(--muted); }
.gh-proof li svg { flex: none; color: var(--gold); }
.gh-proof li b { display: block; color: var(--ink); font-size: 15px; }
.gh-proof__pics { display: grid; grid-template-columns: 1fr 1fr; min-height: 100%; }
.gh-proof__pics img { width: 100%; height: 100%; object-fit: cover; }

/* gallery */
.gh-gallery { display: grid; grid-template-columns: 1fr 1fr 2fr; grid-auto-rows: clamp(150px, 21vw, 280px); gap: 20px; }
.gh-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }

/* single beads: a lead tile in a gold frame, its photos sliding by (local-home.js), then a row */
.gh-beads { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 20px; align-items: start; }
.gh-beads .gh-row__track { grid-auto-columns: calc((100% - 3 * 20px) / 4); }
.gh-beads__lead { display: flex; flex-direction: column; padding: 8px; border: 2px solid var(--gold); border-radius: 12px; overflow: hidden; background: var(--g-700);
  color: #fff !important; text-decoration: none !important; transition: box-shadow .3s; }
.gh-beads__lead:hover { box-shadow: 0 14px 28px -16px rgba(8, 59, 61, .45); }
.gh-beads__pics { display: flex; overflow: hidden; border-radius: 7px; }
.gh-beads__pics img { flex: none; aspect-ratio: 1; width: 100%; height: auto; object-fit: cover; }
.gh-beads__pics.is-moving img { transform: translateX(-100%); transition: transform .7s ease-in-out; }
.gh-beads__lead span { padding: 14px 10px 12px; font-size: 13.5px; color: #D6E7E4; }
.gh-beads__lead b { display: block; margin-bottom: 4px; font: 700 19px/1.25 Georgia, serif; color: #fff; }

/* a feature card in a gold frame: photo and a coloured text panel */

/* choose your style */
.gh-styles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.gh-style { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: #fff; }
.gh-style img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.gh-style:hover img { transform: scale(1.04); }
.gh-style__text { position: absolute; inset: auto 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 60px 20px 20px;
  background: linear-gradient(transparent, rgba(4, 31, 33, .82)); }
.gh-style__text b { font: 700 clamp(17px, 1.6vw, 21px)/1.2 Georgia, serif; color: #fff; }
.gh-style__btn { padding: 10px 20px; border: 1.5px solid #fff; border-radius: 6px; color: #fff; font-size: 12.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; transition: background .2s, color .2s; }
.gh-style:hover .gh-style__btn { background: #fff; color: var(--g-900); }

/* help links before the footer */
.gh-help { margin-top: 56px; background: #fff; border-top: 1px solid #EADFCB; }
.gh-help__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding-top: 22px; padding-bottom: 22px; }
.gh-help__list a { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 13.5px; color: var(--muted) !important; text-decoration: none !important; }
.gh-help__list svg { flex: none; color: var(--g-700); }
.gh-help__list b { display: block; color: var(--ink); font-size: 14.5px; }
.gh-help__list a:hover b { color: var(--g-600); }

/* a shloka between sections: the verse in Devanagari, its Hindi meaning and its source, centred,
   between two thin gold rules */
.gh-shloka { margin-top: 52px; padding: 40px 0 36px; text-align: center; background: var(--cream-2);
  border-block: 1px solid rgba(212, 166, 74, .45); }
.gh-shloka__verse { margin: 0 auto 14px; max-width: 900px; font: 400 clamp(19px, 2.3vw, 28px)/1.6 "Rozha One", "Nirmala UI", "Mangal", serif; color: #7A5A16; }
.gh-shloka__verse span { display: block; }
.gh-shloka__meaning { margin: 0 auto 8px; max-width: 760px; font-size: 15px; line-height: 1.8; color: var(--muted); }
.gh-shloka__source { margin: 0; font-size: 13px; letter-spacing: .08em; color: var(--g-600); }
.gh-shloka__source::before, .gh-shloka__source::after { content: "\2014"; margin: 0 8px; color: var(--gold); }

/* tablets */
@media (max-width: 1024px) {
  .gh-row__track { grid-auto-columns: calc((100% - 2 * 16px) / 3.3); gap: 16px; }
  .gh-cols { grid-auto-columns: calc((100% - 3 * 16px) / 4.3); }
  .gh-beads .gh-row__track { grid-auto-columns: calc((100% - 16px) / 2.3); }
  .gh-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gh-proof { grid-template-columns: 1fr; }
  .gh-proof__pics { height: 340px; }
  .gh-help__list { grid-template-columns: repeat(2, 1fr); }
  .gh-styles { grid-template-columns: 1fr 1fr; }
}
/* phones */
@media (max-width: 749px) {
  .gh-sec { padding-top: 34px; }
  .gh-sec--sand { margin-top: 30px; padding: 34px 0; }
  .gh-head__all { margin-right: 0; }
  .gh-arrow { display: none; }
  .gh-row__track { grid-auto-columns: calc((100% - 12px) / 2.15); gap: 12px; }
  .gh-cols { grid-auto-columns: calc((100% - 2 * 12px) / 3.2); }
  .gh-col { font-size: 12.5px; }
  .gh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .gh-card__title { font-size: 13px; }
  .gh-card__price b { font-size: 15px; }
  .gh-card__add { min-height: 36px; font-size: 12px; }
  .gh-perks ul { grid-template-columns: 1fr; gap: 14px; }
  .gh-perks li { justify-content: flex-start; }
  .gh-proof__pics { height: 240px; }
  .gh-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 10px; }
  .gh-gallery__wide { grid-column: span 2; }
  .gh-beads { grid-template-columns: minmax(0, 1fr); }
  .gh-beads__lead { flex-direction: row; align-items: center; }
  .gh-beads__pics { width: 96px; flex: none; }
  .gh-styles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .gh-style__text { padding: 40px 12px 14px; gap: 8px; }
  .gh-style__btn { padding: 7px 10px; font-size: 11px; }
  .gh-help__list { gap: 18px 10px; }
  .gh-help__list a { justify-content: flex-start; gap: 10px; font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .gh-card__media img, .gh-col img, .gh-style img { transition: none; }
}

/* ---- the site's own colours: a warm cream page, deep green and gold as in the header and footer ---- */
.gt-home .gh-sec--sand, .gt-home .gh-shloka { border-block: 1px solid #EADFCB; }
.gt-home .gt-btn--gold { background: var(--g-700); border-color: var(--gold); color: #fff !important; }
.gt-home .gt-btn--gold:hover { background: var(--g-800); border-color: var(--gold-2); box-shadow: none; }

/* the three promises and the shlokas on a band of polished gold, their icons and words in the deep green */
.gt-home .gh-perks, .gt-home .gh-shloka { border-block: 1px solid #B8862D;
  background: linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 45%, rgba(122, 90, 22, .18)),
    linear-gradient(100deg, #E9C46A 0%, #F6E2A6 28%, #D9AE4F 55%, #F3D98F 78%, #CF9E3C 100%); }
.gt-home .gh-perks li { color: #4A3A12; }
.gt-home .gh-perks b { color: var(--g-900); }
.gt-home .gh-perks li svg { color: var(--g-800); }

/* every mantra in deep green on the gold band: a green-to-deeper-green in the letters and a thin
   light edge under them, nothing heavier */
.gh-shloka__verse span {
  background: linear-gradient(180deg, var(--g-600) 0%, var(--g-800) 55%, var(--g-900) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--g-800);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .35)); }
.gt-home .gh-shloka__meaning, .gt-home .gh-shloka__source { color: var(--g-800); }
.gt-home .gh-shloka__source::before, .gt-home .gh-shloka__source::after { color: #7A5A16; }

/* every product card in a frame: white, a thin gold border and rounded corners, the photo inset;
   on hover the border turns a richer gold and a soft shadow lifts it (the same frame as the
   collection pages' cards, card-glow.css) */
.gh-card { padding: 10px 10px 12px; background: #fff; border: 1px solid #EAD9AE; border-radius: 12px;
  box-shadow: 0 1px 2px rgba(8, 59, 61, .05); transition: border-color .3s, box-shadow .3s; }
.gh-card:hover { border-color: var(--gold); box-shadow: 0 14px 28px -16px rgba(8, 59, 61, .35); }
.gh-card__media { border-radius: 8px; }
.gh-card__title { margin-top: 10px; }
@media (max-width: 749px) { .gh-card { padding: 8px 8px 10px; border-radius: 10px; } }
@media (prefers-reduced-motion: reduce) { .gh-card { transition: none; } }