/* =====================================================================
   CGA Gemstones — front end
   ---------------------------------------------------------------------
   Every token is scoped to the component roots below rather than to
   :root, so this file cannot leak into the theme or fight Elementor's
   global colours. Restyle by overriding a token, not a rule.
   ===================================================================== */

.cga-gs-about,
.cga-gs-birth,
.cga-gs-ann,
.cga-gs-grid,
.cga-gs-find,
.cga-gs-typenav,
.cga-gs-intro-sec{
  --navy:#16263D;
  --gold:#A8813F;
  --gold-d:#8F6C31;
  --cream:#F2EADF;
  --cream-d:#E8DCCB;
  --ink:#22303F;
  --muted:#6B7789;
  --line:#DFD5C8;
  --display:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  --body:"Jost","Avenir Next","Segoe UI",system-ui,sans-serif;

  font-family:var(--body);
  font-weight:300;
  color:var(--ink);
  line-height:1.7;
}
.cga-gs-about *,.cga-gs-about *::before,.cga-gs-about *::after,
.cga-gs-birth *,.cga-gs-birth *::before,.cga-gs-birth *::after,
.cga-gs-ann *,.cga-gs-grid *,.cga-gs-find *,.cga-gs-intro-sec *{box-sizing:border-box}

.cga-gs-about :focus-visible,
.cga-gs-birth :focus-visible,
.cga-gs-grid :focus-visible,
.cga-gs-find :focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.cga-gs-h1,.cga-gs-h2,.cga-gs-h3{
  font-family:var(--display);font-weight:400;color:var(--navy);
  line-height:1.15;margin:0 0 .5rem;overflow-wrap:break-word;
}
.cga-gs-h1{font-size:clamp(2rem,4.4vw,3rem)}
.cga-gs-h2{font-size:clamp(1.6rem,3.4vw,2.4rem)}
.cga-gs-h3{font-size:clamp(1.3rem,2.6vw,1.75rem)}

.cga-gs-eyebrow{
  font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);font-weight:500;margin:0 0 .7rem;
}
.cga-gs-short{
  font-family:var(--display);font-style:italic;
  font-size:clamp(1.05rem,2vw,1.28rem);color:var(--navy);margin:0 0 1rem;
}
.cga-gs-text{color:var(--muted);max-width:64ch}
.cga-gs-text p{margin:0 0 .9em}
.cga-gs-text p:last-child{margin-bottom:0}

.cga-gs-aside{
  font-size:.9rem;color:var(--muted);margin:.9rem 0 0;max-width:64ch;
}
.cga-gs-aside strong{
  display:block;font-family:var(--body);font-weight:500;font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);
  margin-bottom:.15rem;
}
.cga-gs-smallnote{
  font-size:.82rem;color:var(--muted);max-width:66ch;margin-top:1.6rem;
}

/* ---------- the colour dot and the placeholder disc ---------- */
.cga-gs-dot{
  width:10px;height:10px;border-radius:50%;display:inline-block;
  flex:none;background:var(--gs,var(--line));
  box-shadow:inset -2px -2px 3px rgba(0,0,0,.28),
             inset 1px 1px 2px rgba(255,255,255,.45);
}
.cga-gs-disc{
  display:block;width:min(62%,320px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,
    color-mix(in srgb,var(--gs) 82%,#fff),var(--gs) 60%,rgba(0,0,0,.42));
  box-shadow:inset -14px -18px 36px rgba(0,0,0,.3),
             inset 12px 12px 30px rgba(255,255,255,.38),
             0 16px 38px rgba(22,38,61,.15);
}
/* Browsers without color-mix still get a solid stone rather than nothing. */
@supports not (background:color-mix(in srgb,red,blue)){
  .cga-gs-disc{background:radial-gradient(circle at 34% 30%,var(--gs),rgba(0,0,0,.45))}
}
.cga-gs-img{display:block;width:100%;height:auto}

/* ---------- buttons and links ---------- */
.cga-gs-btn{
  display:inline-block;margin-top:.4rem;
  font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;text-decoration:none;font-family:var(--body);
  padding:1.05em 2.2em;border:1px solid var(--gold);border-radius:1px;
  background:var(--gold);color:#fff;transition:background .2s,border-color .2s;
}
.cga-gs-btn:hover,.cga-gs-btn:focus{background:var(--gold-d);border-color:var(--gold-d);color:#fff}
.cga-gs-link{
  display:inline-block;margin-top:1.1rem;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--navy);
  text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:2px;
}
.cga-gs-link:hover{color:var(--gold)}
.cga-gs-also{font-size:.88rem;color:var(--muted);margin:1.1rem 0 0}
.cga-gs-also a{color:var(--navy)}

/* ---------- facts ---------- */
.cga-gs-facts{
  display:flex;flex-wrap:wrap;gap:clamp(1rem,3vw,2.4rem);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding-block:1.05rem;margin:1.4rem 0 0;
}
.cga-gs-fact{min-width:0}
.cga-gs-facts dt{
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:0;
}
.cga-gs-facts dd{
  font-family:var(--display);font-size:1.16rem;color:var(--navy);margin:0;
}

/* =====================================================================
   ABOUT THE STONE
   ===================================================================== */
.cga-gs-about{padding-block:clamp(28px,4vw,52px)}
.cga-gs-tabs{
  display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.8rem;
}
.cga-gs-tab{
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  font-family:var(--body);font-size:.74rem;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;
  padding:.72em 1.15em;border:1px solid var(--line);border-radius:1px;
  background:transparent;color:var(--ink);transition:.18s;
}
.cga-gs-tab:hover{border-color:var(--gold)}
.cga-gs-tab[aria-selected="true"]{
  background:var(--navy);border-color:var(--navy);color:#fff;
}
/*
 * Same arrangement as the collection block's heading, and the same
 * reason for the variable: see the note there. The widget writes
 * --split, --split-t and --split-m; this decides which is in force.
 */
.cga-gs-panel{
  --cols-now:var(--split,minmax(0,.85fr) minmax(0,1.15fr));
  display:grid;grid-template-columns:var(--cols-now);
  gap:clamp(24px,4vw,56px);align-items:center;
}
.cga-gs-panel[hidden]{display:none}
.cga-gs-panel__media{
  display:grid;place-items:center;background:var(--cream);
  border:1px solid var(--line);aspect-ratio:1;overflow:hidden;
}
.cga-gs-panel__media:empty{display:none}
.cga-gs-panel__media .cga-gs-img{width:100%;height:100%;object-fit:cover}
@media(max-width:1024px){
  .cga-gs-panel{--cols-now:var(--split-t,minmax(0,1fr))}
  .cga-gs-panel__media{aspect-ratio:16/10}
}
@media(max-width:767px){
  .cga-gs-panel{--cols-now:var(--split-m,var(--split-t,minmax(0,1fr)))}
}

/* =====================================================================
   BIRTHSTONES
   ===================================================================== */
.cga-gs-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:clamp(22px,3vw,36px)}
.cga-gs-chip{
  cursor:pointer;font-family:var(--body);font-size:.74rem;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;
  padding:.72em 1.1em;border:1px solid var(--line);border-radius:1px;
  background:transparent;color:var(--ink);transition:.18s;
}
.cga-gs-chip:hover:not(:disabled){border-color:var(--gold)}
.cga-gs-chip[aria-selected="true"]{background:var(--gold);border-color:var(--gold);color:#fff}
.cga-gs-chip.is-empty,.cga-gs-chip:disabled{opacity:.34;cursor:default}

/*
 * Same arrangement as the collection block's heading, and the same
 * reason for the variable: see the note there. The widget writes
 * --split, --split-t and --split-m; this decides which is in force.
 */
.cga-gs-month{
  --cols-now:var(--split,minmax(0,.9fr) minmax(0,1.1fr));
  display:grid;grid-template-columns:var(--cols-now);
  gap:clamp(24px,4vw,56px);align-items:center;
}
.cga-gs-month[hidden]{display:none}
.cga-gs-month__media{
  position:relative;display:grid;place-items:center;
  background:var(--cream);border:1px solid var(--line);
  aspect-ratio:1;overflow:hidden;
}
.cga-gs-month__media .cga-gs-img{width:100%;height:100%;object-fit:cover}
.cga-gs-month__label{
  position:absolute;top:clamp(8px,1.6vw,16px);left:clamp(10px,1.8vw,18px);
  font-family:var(--display);font-size:clamp(2.2rem,5.4vw,3.4rem);
  color:rgba(22,38,61,.1);line-height:1;pointer-events:none;
}
@media(max-width:1024px){
  .cga-gs-month{--cols-now:var(--split-t,minmax(0,1fr))}
  .cga-gs-month__media{aspect-ratio:16/10}
}
@media(max-width:767px){
  .cga-gs-month{--cols-now:var(--split-m,var(--split-t,minmax(0,1fr)))}
}

.cga-gs-cards{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:clamp(12px,1.8vw,22px);margin-top:clamp(34px,5vw,64px);
}
.cga-gs-card{
  display:block;text-align:center;cursor:pointer;font-family:var(--body);
  background:#fff;border:1px solid var(--line);
  padding:clamp(14px,2vw,22px);transition:.2s;
}
.cga-gs-card:hover{border-color:var(--gold);transform:translateY(-3px)}
.cga-gs-card__m{
  display:block;font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--gold);font-weight:500;
}
.cga-gs-card__fig{display:grid;place-items:center;margin:.9rem auto;max-width:96px}
.cga-gs-card__fig .cga-gs-img{border-radius:50%;aspect-ratio:1;object-fit:cover}
.cga-gs-card__fig .cga-gs-disc{width:72px}
.cga-gs-card__n{
  display:block;font-family:var(--display);font-size:1.14rem;color:var(--navy);
  line-height:1.25;
}
.cga-gs-card__a{display:block;font-size:.74rem;color:var(--muted);margin-top:.25rem}

/* =====================================================================
   ANNIVERSARY
   ===================================================================== */
.cga-gs-ann__row{
  display:grid;grid-template-columns:5.5rem minmax(0,1fr);
  gap:clamp(1rem,3vw,2.2rem);align-items:center;
  padding-block:1.1rem;border-bottom:1px solid var(--line);
}
.cga-gs-ann__row:first-child{border-top:1px solid var(--line)}
.cga-gs-ann__year{text-align:right}
.cga-gs-ann__n{
  display:block;font-family:var(--display);font-size:clamp(1.7rem,4vw,2.4rem);
  color:var(--navy);line-height:1;
}
.cga-gs-ann__t{
  display:block;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);
}
.cga-gs-ann__stones{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.cga-gs-pill{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  font-size:.82rem;letter-spacing:.06em;color:var(--navy);
  border:1px solid var(--line);padding:.5em .95em;border-radius:1px;
  transition:.18s;
}
a.cga-gs-pill:hover{border-color:var(--gold);color:var(--gold)}
.cga-gs-ann__note{
  font-family:var(--display);font-style:italic;color:var(--muted);
  font-size:.96rem;
}
@media(max-width:520px){
  .cga-gs-ann__row{grid-template-columns:minmax(0,1fr);gap:.5rem}
  .cga-gs-ann__year{text-align:left;display:flex;align-items:baseline;gap:.5rem}
}

/* =====================================================================
   GRID
   ===================================================================== */
.cga-gs-grid{
  display:grid;gap:clamp(12px,1.8vw,22px);
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
}
@media(min-width:900px){
  .cga-gs-grid{grid-template-columns:repeat(var(--cols,4),minmax(0,1fr))}
}
.cga-gs-tile{
  display:block;text-align:center;text-decoration:none;
  background:#fff;border:1px solid var(--line);
  padding:clamp(14px,2vw,22px);transition:.2s;
}
a.cga-gs-tile:hover{border-color:var(--gold);transform:translateY(-3px)}
.cga-gs-tile__fig{display:grid;place-items:center;margin:0 auto .85rem;max-width:104px}
.cga-gs-tile__fig .cga-gs-img{border-radius:50%;aspect-ratio:1;object-fit:cover}
.cga-gs-tile__fig .cga-gs-disc{width:76px}
.cga-gs-tile__n{
  display:block;font-family:var(--display);font-size:1.12rem;color:var(--navy);
  line-height:1.25;
}
.cga-gs-tile__s{
  display:block;font-family:var(--display);font-style:italic;
  font-size:.92rem;color:var(--muted);margin-top:.3rem;
}
.cga-gs-tile__m{
  display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-top:.3rem;
}

/* =====================================================================
   ARCHIVE INTRO
   ===================================================================== */
/*
 * Same arrangement as the collection block's heading, and the same
 * reason for the variable: see the note there. The widget writes
 * --split, --split-t and --split-m; this decides which is in force.
 */
.cga-gs-intro-sec{
  --cols-now:var(--split,minmax(0,.85fr) minmax(0,1.15fr));
  display:grid;grid-template-columns:var(--cols-now);
  gap:clamp(24px,4vw,56px);align-items:center;
  padding-block:clamp(28px,4vw,56px);
}
.cga-gs-intro-sec__media{
  display:grid;place-items:center;background:var(--cream);
  border:1px solid var(--line);aspect-ratio:1;overflow:hidden;
}
.cga-gs-intro-sec__media:empty{display:none}
.cga-gs-intro-sec__media .cga-gs-img{width:100%;height:100%;object-fit:cover}
.cga-gs-gallery{
  grid-column:1/-1;display:grid;gap:clamp(10px,1.6vw,18px);
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}
.cga-gs-gallery img{width:100%;height:100%;aspect-ratio:1;object-fit:cover;
  border:1px solid var(--line)}
@media(max-width:1024px){
  .cga-gs-intro-sec{--cols-now:var(--split-t,minmax(0,1fr))}
  .cga-gs-intro-sec__media{aspect-ratio:16/10}
}
@media(max-width:767px){
  .cga-gs-intro-sec{--cols-now:var(--split-m,var(--split-t,minmax(0,1fr)))}
}

@media (prefers-reduced-motion:reduce){
  .cga-gs-card,.cga-gs-tile,.cga-gs-tab,.cga-gs-chip,.cga-gs-pill,
  .cga-gs-fchip,.cga-gs-fcard{transition:none}
  .cga-gs-card:hover,.cga-gs-tile:hover{transform:none}
}

/* =====================================================================
   THE STORY SECTIONS
   ---------------------------------------------------------------------
   <details> elements, so they open and close with no JavaScript and
   find-in-page can reach the closed ones in current browsers.
   ===================================================================== */
.cga-gs-story{margin-top:1.6rem;border-top:1px solid var(--line)}
.cga-gs-story__item{border-bottom:1px solid var(--line)}
.cga-gs-story__sum{
  cursor:pointer;list-style:none;display:block;position:relative;
  padding:1rem 2.2rem 1rem 0;
  font-family:var(--display);font-size:1.16rem;color:var(--navy);
}
.cga-gs-story__sum::-webkit-details-marker{display:none}
.cga-gs-story__sum::after{
  content:"";position:absolute;right:.4rem;top:1.35rem;
  width:8px;height:8px;
  border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);
  transform:rotate(45deg);transition:transform .2s;
}
.cga-gs-story__item[open] > .cga-gs-story__sum::after{transform:rotate(-135deg)}
.cga-gs-story__sum:hover{color:var(--gold)}
.cga-gs-story__body{padding-bottom:1.2rem;color:var(--muted);max-width:64ch}
.cga-gs-story__body p{margin:0 0 .8em}
.cga-gs-story__body p:last-child{margin-bottom:0}

/* On the gemstone's own page every section is open, so the chevron
   would be pointing at nothing useful — the headings read as headings. */
.cga-gs-intro-sec .cga-gs-story__sum{cursor:default}
.cga-gs-intro-sec .cga-gs-story__sum::after{display:none}

@media (prefers-reduced-motion:reduce){
  .cga-gs-story__sum::after{transition:none}
}

/* =====================================================================
   THE DETAILS STRIP
   ---------------------------------------------------------------------
   Three layouts, and the column count is fixed in each one, which is
   what makes the dividers reliable: a divider rule can only know which
   item starts a row if the number of columns is known.

     wide    one row, items sized to their content, vertical dividers
             between them. Two details hug the left rather than being
             stretched across the screen; six shrink to fit.
     medium  two columns, horizontal dividers, :nth-child(2n+1) starts
             a row.
     narrow  one column, horizontal dividers.
   ===================================================================== */
.cga-gs-spec{
  --navy:#16263D; --gold:#A8813F; --muted:#6B7789; --line:#DFD5C8;
  --display:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  --body:"Jost","Avenir Next","Segoe UI",system-ui,sans-serif;
  --spec-k:var(--muted);
  --spec-v:var(--navy);
  --spec-line:var(--line);
  --spec-pad:clamp(1rem,2.4vw,2.2rem);

  display:flex;
  flex-wrap:nowrap;
  align-items:flex-start;
  margin:1.6rem 0 0;
  font-family:var(--body);
  color:inherit;
}
.cga-gs-spec__item{
  flex:0 1 auto;          /* size to content, shrink only when it must */
  /* a floor so a two-character answer still gets a column of its own
     rather than a divider pressed up against the next label */
  min-width:min(7.5rem,100%);
  padding-inline:var(--spec-pad);
  border-left:1px solid var(--spec-line);
}
.cga-gs-spec__item:first-child{padding-left:0;border-left:0}

.cga-gs-spec__k{
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--spec-k);margin:0 0 .5rem;font-weight:400;line-height:1.5;
}
.cga-gs-spec__v{
  margin:0;font-family:var(--display);color:var(--spec-v);
  line-height:1.2;overflow-wrap:break-word;
}
.cga-gs-spec__one{
  font-size:clamp(1.7rem,3.4vw,2.5rem);display:block;
  font-variant-numeric:tabular-nums;
}
.cga-gs-spec__list{list-style:none;margin:0;padding:0}
.cga-gs-spec__list li{
  font-size:clamp(1rem,1.8vw,1.22rem);
  padding-left:1.25rem;position:relative;margin-bottom:.15rem;
}
.cga-gs-spec__list li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:11px;height:1px;background:var(--gold);
}
.cga-gs-spec__n{
  display:block;font-family:var(--body);font-size:.76rem;
  color:var(--spec-k);margin-top:.45rem;line-height:1.5;
}

/* On a dark section — the gemstone hero. */
.cga-gs-spec.is-dark{
  --spec-k:rgba(255,255,255,.62);
  --spec-v:#C9A25F;
  --spec-line:rgba(255,255,255,.22);
}
.cga-gs-spec.is-light{
  --spec-k:#6B7789;
  --spec-v:#16263D;
  --spec-line:#DFD5C8;
}

/* --- two columns --- */
@media (max-width:900px){
  .cga-gs-spec{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:clamp(1.2rem,4vw,2.6rem);
    row-gap:0;
  }
  .cga-gs-spec__item{
    min-width:0;
    padding-inline:0;
    border-left:0;
    border-top:1px solid var(--spec-line);
    margin-top:1.1rem;
    padding-top:1.1rem;
  }
  /* the first row has the section's own rule above it already */
  .cga-gs-spec__item:nth-child(-n+2){border-top:0;margin-top:0;padding-top:0}
  .cga-gs-spec__one{font-size:clamp(1.5rem,4.4vw,2rem)}
}

/* --- one column --- */
@media (max-width:560px){
  .cga-gs-spec{grid-template-columns:minmax(0,1fr)}
  .cga-gs-spec__item:nth-child(-n+2){border-top:1px solid var(--spec-line);margin-top:1.1rem;padding-top:1.1rem}
  .cga-gs-spec__item:first-child{border-top:0;margin-top:0;padding-top:0}
  .cga-gs-spec__one{font-size:1.65rem}
}

/* =====================================================================
   THE PAGE SECTIONS
   ---------------------------------------------------------------------
   Boxes, collection blocks, the facts table, colours and questions.
   Tokens are declared once on .cga-gs-sec so every section inherits the
   same set and an Elementor control can override any of them.
   ===================================================================== */
.cga-gs-sec{
  --navy:#16263D; --gold:#A8813F; --gold-d:#8F6C31;
  --cream:#F2EADF; --cream-d:#E8DCCB; --paper:#FBF8F4;
  --ink:#22303F; --muted:#6B7789; --line:#DFD5C8;
  --display:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  --body:"Jost","Avenir Next","Segoe UI",system-ui,sans-serif;

  font-family:var(--body);font-weight:300;color:var(--ink);line-height:1.7;
}
.cga-gs-sec *,.cga-gs-sec *::before,.cga-gs-sec *::after{box-sizing:border-box}
.cga-gs-sec :focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* --- shared section heading --- */
.cga-gs-sec__head{text-align:center;max-width:70ch;margin:0 auto clamp(26px,3.5vw,44px)}
.cga-gs-sec__eyebrow{
  display:flex;align-items:center;justify-content:center;gap:1rem;
  font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--gold);font-weight:500;margin:0 0 .9rem;
}
.cga-gs-sec__eyebrow::before,
.cga-gs-sec__eyebrow::after{
  content:"";height:1px;width:clamp(28px,6vw,72px);background:var(--gold);opacity:.6;
}
.cga-gs-sec__h{
  font-family:var(--display);font-weight:400;color:var(--navy);
  font-size:clamp(1.8rem,4vw,2.9rem);line-height:1.15;margin:0;
  overflow-wrap:break-word;
}
.cga-gs-sec__intro{color:var(--muted);margin-top:.9rem}
.cga-gs-sec__intro p{margin:0 0 .7em}
.cga-gs-sec__intro p:last-child{margin-bottom:0}

/* =====================================================================
   EXPLORE OUR COLLECTION
   ===================================================================== */
.cga-gs-boxes__grid{
  display:grid;gap:clamp(12px,1.8vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
}
.cga-gs-box{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:#fff;border:1px solid var(--line);
  padding:clamp(18px,2.4vw,28px);transition:border-color .2s,transform .2s;
}
a.cga-gs-box:hover{border-color:var(--gold);transform:translateY(-3px)}
.cga-gs-box__h{
  font-family:var(--display);font-weight:400;color:var(--navy);
  font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.2;margin:0 0 .5rem;
}
.cga-gs-box__t{color:var(--muted);font-size:.94rem;margin:0 0 1.1rem;flex:1}
.cga-gs-box__cta{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);font-weight:500;display:inline-flex;align-items:center;gap:.5em;
}
.cga-gs-box__cta i{font-style:normal;transition:transform .2s}
a.cga-gs-box:hover .cga-gs-box__cta i{transform:translateX(4px)}
.cga-gs-boxes__outro{
  text-align:center;color:var(--muted);max-width:74ch;
  margin:clamp(24px,3vw,38px) auto 0;
}
.cga-gs-boxes__outro p{margin:0 0 .9em}
.cga-gs-boxes__outro p:last-child{margin-bottom:0}

/* =====================================================================
   COLLECTION BLOCKS
   ===================================================================== */
.cga-gs-show + .cga-gs-show{margin-top:clamp(40px,6vw,80px)}
/*
 * The heading beside its paragraph, and one above the other once the
 * screen is too narrow to be worth splitting.
 *
 * Which columns are in force is kept in --cols-now, set here and only
 * here, because the widget's own column-width control writes a rule
 * with the element's class in it — and that outweighs a media query,
 * which adds no specificity at all. Setting the width once on a desktop
 * was leaving a phone with a heading in 40% of 390px, breaking words
 * down the middle. The widget now writes --split, --split-t and
 * --split-m, and this decides which of them applies where, so a value
 * for one device cannot reach another.
 *
 * The widths are Elementor's own: what its device switcher calls Tablet
 * and Mobile is what stacks here.
 */
.cga-gs-show__top{
  --cols-now:var(--split,minmax(0,1fr) minmax(0,1.15fr));
  display:grid;grid-template-columns:var(--cols-now);
  gap:clamp(20px,4vw,60px);align-items:start;
  margin-bottom:clamp(24px,3.5vw,44px);
}
@media (max-width:1024px){
  .cga-gs-show__top{--cols-now:var(--split-t,minmax(0,1fr))}
}
@media (max-width:767px){
  .cga-gs-show__top{--cols-now:var(--split-m,var(--split-t,minmax(0,1fr)))}
}
.cga-gs-show__eyebrow{
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--navy);font-weight:500;margin:0 0 .7rem;
}
.cga-gs-show__h{
  font-family:var(--display);font-weight:400;color:var(--navy);
  font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.1;margin:0;
  overflow-wrap:break-word;
}
.cga-gs-show__text{color:var(--muted);font-size:.96rem}
.cga-gs-show__text p{margin:0 0 .7em}
.cga-gs-show__text p:last-child{margin-bottom:0}

/*
   A fixed number of columns, not auto-fill.

   auto-fill lays down as many tracks as will fit and keeps the empty
   ones, so four products on a wide screen sat in the first four of six
   tracks and left a gap down the right-hand side. A fixed count fills
   the row edge to edge, and three products keep the shape of four
   rather than stretching to fill it.
*/
.cga-gs-show__grid{
  display:grid;gap:clamp(14px,2vw,26px);
  grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));
}
/*
   Tablet keeps all four columns. Below that the row becomes something
   you swipe: still every product, laid out sideways, with the next one
   peeking in so it is obvious there is more. Native scroll-snap does
   it — no carousel library, real momentum scrolling, and it still
   works with a keyboard and a trackpad.
*/
@media (max-width:767px){
  .cga-gs-show__grid{
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-padding-inline-start:0;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* room for the card's hover lift, which would otherwise be clipped */
    padding-block:4px;
  }
  .cga-gs-show__grid::-webkit-scrollbar{display:none}
  .cga-gs-show__grid > .cga-gs-prod{
    flex:0 0 clamp(180px,74%,300px);
    scroll-snap-align:start;
  }
  /*
     The last card snaps to the END edge, not the start.

     With mandatory snapping the container must come to rest on a snap
     point. The final card's start-aligned point sits past the maximum
     scroll, so it is unreachable — the browser snaps back and leaves
     that card clipped off the right. Aligning the last one to the end
     puts a snap point exactly at maximum scroll, so it can be reached
     and arrives flush with the edge.
  */
  .cga-gs-show__grid > .cga-gs-prod:last-child{
    scroll-snap-align:end;
  }
  /* the escape hatch: one under another instead */
  .cga-gs-show--stack .cga-gs-show__grid{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    overflow:visible;
  }
}
@media (prefers-reduced-motion:no-preference){
  .cga-gs-show__grid{scroll-behavior:smooth}
}
/* a SKU is one long token; let it break rather than overflow its card */
.cga-gs-prod__n{hyphens:auto}
.cga-gs-prod{
  display:block;text-decoration:none;color:inherit;
  border:1px solid var(--gold);transition:box-shadow .2s,transform .2s;
}
.cga-gs-prod:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(22,38,61,.1)}
.cga-gs-prod__img{
  display:block;aspect-ratio:1;background:#fff;
  display:grid;place-items:center;overflow:hidden;
}
.cga-gs-prod__img img{width:100%;height:100%;object-fit:contain;display:block}
.cga-gs-prod__body{display:block;padding:clamp(12px,1.6vw,18px);border-top:1px solid var(--line)}
.cga-gs-prod__label{
  display:block;font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin-bottom:.45rem;
}
.cga-gs-prod__n{
  display:block;font-family:var(--display);font-size:1.12rem;color:var(--navy);
  line-height:1.25;overflow-wrap:break-word;
}
.cga-gs-prod__p{
  display:block;margin-top:.3rem;color:var(--ink);font-size:.95rem;
  font-variant-numeric:tabular-nums;
}
.cga-gs-prod__p del{opacity:.5;margin-right:.4em}
.cga-gs-show__more{text-align:center;margin:clamp(24px,3vw,40px) 0 0}
.cga-gs-show__more a{
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;color:var(--navy);text-decoration:none;
  border-bottom:1px solid var(--gold);padding-bottom:.5em;
}
.cga-gs-show__more a:hover{color:var(--gold)}

/* =====================================================================
   THE FACTS TABLE
   ===================================================================== */
.cga-gs-facts-sec__wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;background:#fff}
.cga-gs-ftable{width:100%;border-collapse:collapse;font-size:.94rem;min-width:540px}
.cga-gs-ftable th,
.cga-gs-ftable td{
  text-align:left;vertical-align:top;
  padding:clamp(12px,1.6vw,20px) clamp(12px,1.6vw,22px);
  border-bottom:1px solid var(--line);
}
.cga-gs-ftable thead th{
  font-family:var(--body);font-weight:400;font-size:.64rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--navy);
}
.cga-gs-ftable tbody th{font-weight:600;color:var(--navy);width:11em}
.cga-gs-ftable__v{color:var(--ink);width:10em}
.cga-gs-ftable__m{color:var(--muted)}
.cga-gs-ftable__m p{margin:0 0 .5em}
.cga-gs-ftable__m p:last-child{margin-bottom:0}
.cga-gs-ftable tbody tr:last-child th,
.cga-gs-ftable tbody tr:last-child td{border-bottom:0}

/* =====================================================================
   COLOURS
   ===================================================================== */
.cga-gs-cols__grid{
  display:grid;gap:clamp(14px,2.2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.cga-gs-col{
  background:#fff;padding:clamp(18px,2.6vw,30px);text-align:center;
}
.cga-gs-col__fig{
  display:grid;place-items:center;margin-bottom:1.1rem;
  aspect-ratio:4/3;overflow:hidden;
}
.cga-gs-col__img{width:100%;height:100%;object-fit:contain;display:block}
.cga-gs-col__fig .cga-gs-disc{width:min(62%,180px)}
.cga-gs-col__h{
  font-family:var(--body);font-weight:500;color:var(--navy);
  font-size:1.05rem;line-height:1.3;margin:0 0 .5rem;
}
.cga-gs-col__t{color:var(--muted);font-size:.92rem;margin:0}

/* =====================================================================
   QUESTIONS
   ===================================================================== */
.cga-gs-faq__list{max-width:900px;margin-inline:auto}
.cga-gs-faq__item{
  background:#fff;border:1px solid var(--line);margin-bottom:.7rem;
}
.cga-gs-faq__item[open]{background:#5A636C;border-color:#5A636C}
.cga-gs-faq__q{
  cursor:pointer;list-style:none;display:block;position:relative;
  padding:clamp(14px,1.8vw,20px) 3rem clamp(14px,1.8vw,20px) clamp(16px,2vw,24px);
  font-family:var(--display);font-size:clamp(1.05rem,2vw,1.3rem);
  color:var(--navy);line-height:1.3;
}
.cga-gs-faq__q::-webkit-details-marker{display:none}
.cga-gs-faq__item[open] > .cga-gs-faq__q{color:#fff;padding-bottom:.4rem}
.cga-gs-faq__q::after{
  content:"+";position:absolute;right:clamp(14px,2vw,22px);top:50%;
  transform:translateY(-50%);font-family:var(--body);font-weight:300;
  font-size:1.5rem;line-height:1;color:var(--gold);
}
.cga-gs-faq__item[open] > .cga-gs-faq__q::after{content:"–";color:#fff;top:1.6rem}
.cga-gs-faq__a{
  padding:0 clamp(16px,2vw,24px) clamp(16px,2vw,24px);
  color:rgba(255,255,255,.88);font-size:.95rem;max-width:80ch;
}
.cga-gs-faq__a p{margin:0 0 .7em}
.cga-gs-faq__a p:last-child{margin-bottom:0}

@media (prefers-reduced-motion:reduce){
  .cga-gs-box,.cga-gs-prod,.cga-gs-box__cta i{transition:none}
  a.cga-gs-box:hover,.cga-gs-prod:hover{transform:none}
}

/* =====================================================================
   THE STICKY COLLECTION BAR
   ---------------------------------------------------------------------
   Slides up once the boxes have scrolled by, and retires as the footer
   arrives. Desktop and tablet only: on a phone a fixed bar eats too
   much of a short screen, and the boxes themselves are only a swipe
   away there.
   ===================================================================== */
.cga-gs-quick{
  --navy:#16263D; --gold:#A8813F; --cream:#F2EADF;
  --ink:#22303F; --muted:#6B7789; --line:#DFD5C8;
  --display:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  --body:"Jost","Avenir Next","Segoe UI",system-ui,sans-serif;

  position:fixed;left:0;right:0;bottom:0;z-index:9980;
  background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -4px 26px rgba(22,38,61,.11);
  font-family:var(--body);font-weight:300;color:var(--ink);

  /* parked off-screen, and unreachable by tab while it is */
  transform:translateY(110%);
  visibility:hidden;
  transition:transform .32s cubic-bezier(.22,.61,.36,1), visibility 0s .32s;

  /* clear the home indicator on newer iPhones */
  padding-bottom:env(safe-area-inset-bottom,0);
}
.cga-gs-quick.is-on{
  transform:none;
  visibility:visible;
  transition:transform .32s cubic-bezier(.22,.61,.36,1), visibility 0s;
}
.cga-gs-quick *,.cga-gs-quick *::before,.cga-gs-quick *::after{box-sizing:border-box}
.cga-gs-quick :focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.cga-gs-quick__in{
  max-width:1280px;margin-inline:auto;
  padding:.75rem clamp(16px,4vw,56px);
  display:flex;align-items:center;gap:clamp(.8rem,2vw,2rem);
}
.cga-gs-quick__label{
  font-family:var(--display);font-size:1.12rem;color:var(--navy);
  line-height:1.2;flex:none;white-space:nowrap;
  padding-right:clamp(.8rem,2vw,1.6rem);
  border-right:1px solid var(--line);
}
.cga-gs-quick__links{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:.5rem;flex:1;min-width:0;
}
.cga-gs-quick__link{
  display:inline-block;text-decoration:none;color:var(--navy);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;
  padding:.72em 1.2em;border:1px solid var(--line);border-radius:1px;
  transition:border-color .2s,color .2s,background .2s;
  white-space:nowrap;
}
.cga-gs-quick__link:hover,
.cga-gs-quick__link:focus{
  border-color:var(--gold);color:var(--gold);background:var(--cream);
}

/* Phones keep the page to themselves. */
@media (max-width:767px){
  .cga-gs-quick{display:none}
}
/* Short screens too — a fixed bar on a 500px-tall window is a nuisance. */
@media (max-height:520px){
  .cga-gs-quick{display:none}
}
@media (prefers-reduced-motion:reduce){
  .cga-gs-quick{transition:visibility 0s}
}

/* =====================================================================
   PIECE DETAILS
   ---------------------------------------------------------------------
   The spec fields for one product. Only the filled ones are printed at
   all, so there is no empty state to style — a row exists or it does
   not.
   ===================================================================== */
.cga-gs-piece__h{
  font-family:var(--display);font-weight:400;color:var(--navy);
  font-size:clamp(1.3rem,2.6vw,1.75rem);line-height:1.2;margin:0 0 1rem;
}
.cga-gs-piece__list{margin:0;padding:0}
.cga-gs-piece__row{
  border-bottom:1px solid var(--line);
  padding-block:.8rem;
}
.cga-gs-piece__row:last-child{border-bottom:0}
.cga-gs-piece__k{
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:0;font-weight:400;
}
.cga-gs-piece__v{
  margin:0;color:var(--ink);font-size:.98rem;overflow-wrap:break-word;
}

/* label left, value right */
.cga-gs-piece--rows .cga-gs-piece__row{
  display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);
  gap:.6rem clamp(1rem,2vw,2rem);align-items:baseline;
}
.cga-gs-piece--rows .cga-gs-piece__k{padding-top:.15rem}

/* value under the label */
.cga-gs-piece--stacked .cga-gs-piece__k{margin-bottom:.25rem}

/* all of them across the width, like the details strip */
.cga-gs-piece--inline .cga-gs-piece__list{
  display:flex;flex-wrap:wrap;gap:0;
}
.cga-gs-piece--inline .cga-gs-piece__row{
  border-bottom:0;border-left:1px solid var(--line);
  padding:.2rem clamp(1rem,2.4vw,2.2rem);
}
.cga-gs-piece--inline .cga-gs-piece__row:first-child{
  padding-left:0;border-left:0;
}
.cga-gs-piece--inline .cga-gs-piece__k{margin-bottom:.35rem}
.cga-gs-piece--inline .cga-gs-piece__v{
  font-family:var(--display);font-size:clamp(1.1rem,2vw,1.4rem);color:var(--navy);
}

@media (max-width:560px){
  .cga-gs-piece--rows .cga-gs-piece__row{
    grid-template-columns:minmax(0,1fr);gap:.2rem;
  }
  .cga-gs-piece--inline .cga-gs-piece__list{display:grid;grid-template-columns:minmax(0,1fr)}
  .cga-gs-piece--inline .cga-gs-piece__row{
    border-left:0;padding:.8rem 0;border-bottom:1px solid var(--line);
  }
  .cga-gs-piece--inline .cga-gs-piece__row:last-child{border-bottom:0}
}

/* =====================================================================
   GEMSTONE FINDER
   ---------------------------------------------------------------------
   Search field, chips, count, cards. Filtering is done by adding a
   single attribute to hidden cards, so nothing here animates layout on
   every keystroke.
   ===================================================================== */
.cga-gs-find{display:block}

.cga-gs-find__controls{
  display:flex;flex-direction:column;gap:clamp(14px,2vw,22px);
  margin-bottom:clamp(18px,2.6vw,32px);
}

/* ---------------- search ---------------- */
.cga-gs-find__search{position:relative;max-width:420px;width:100%}
.cga-gs-find__label,
.cga-gs-find .screen-reader-text{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  border:0;padding:0;margin:-1px;
}
.cga-gs-find__q{
  width:100%;font:inherit;font-size:.95rem;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:1px;
  padding:.85em 2.4em .85em 1em;
  transition:border-color .2s;-webkit-appearance:none;appearance:none;
}
.cga-gs-find__q::placeholder{color:var(--muted);opacity:1}
.cga-gs-find__q:focus{outline:none;border-color:var(--gold)}
/* The browser's own clear button would sit on top of ours. */
.cga-gs-find__q::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}

.cga-gs-find__clear{
  position:absolute;top:50%;right:.35em;transform:translateY(-50%);
  width:2em;height:2em;display:grid;place-items:center;
  background:none;border:0;cursor:pointer;color:var(--muted);
  font-size:1.05rem;line-height:1;padding:0;
}
.cga-gs-find__clear:hover,.cga-gs-find__clear:focus{color:var(--navy)}

/* ---------------- chips ---------------- */
.cga-gs-find__chips{
  display:flex;flex-wrap:wrap;gap:.5em;
}
.cga-gs-fchip{
  font:inherit;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;color:var(--navy);background:transparent;
  border:1px solid var(--line);border-radius:1px;
  padding:.68em 1.1em;cursor:pointer;
  display:inline-flex;align-items:center;gap:.5em;
  transition:border-color .2s,color .2s,background .2s;
}
.cga-gs-fchip:hover{border-color:var(--gold);color:var(--gold)}
.cga-gs-fchip.is-on{
  background:var(--navy);border-color:var(--navy);color:#fff;
}
.cga-gs-fchip__short{display:none}
.cga-gs-fchip__n{
  font-size:.66em;opacity:.65;letter-spacing:.06em;
}

/* ---------------- count ---------------- */
.cga-gs-find__count{
  font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);margin:0 0 clamp(14px,2vw,22px);
}

/* ---------------- grid ---------------- */
.cga-gs-find__grid{
  display:grid;gap:clamp(14px,2vw,26px);
  grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));
}

/*
 * A hidden card is taken out of the grid entirely rather than made
 * transparent, so the remaining cards close up and the count matches
 * what is on screen.
 */
.cga-gs-find__grid > [data-cga-hide]{display:none}

.cga-gs-fcard{
  display:flex;flex-direction:column;gap:.85em;
  text-decoration:none;color:inherit;
  border:1px solid var(--line);border-radius:1px;background:#fff;
  padding:clamp(10px,1.2vw,16px);
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
a.cga-gs-fcard:hover,a.cga-gs-fcard:focus-visible{
  border-color:var(--gold);transform:translateY(-2px);
  box-shadow:0 12px 28px -18px rgba(22,38,61,.5);
}
@media (prefers-reduced-motion:reduce){
  a.cga-gs-fcard:hover,a.cga-gs-fcard:focus-visible{transform:none}
}

.cga-gs-fcard__fig{
  display:block;position:relative;overflow:hidden;
  aspect-ratio:1;background:var(--cream);border-radius:1px;
}
.cga-gs-fcard__fig .cga-gs-img,
.cga-gs-fcard__fig img{
  width:100%;height:100%;object-fit:cover;display:block;
}
/* The fallback disc, for a stone with a colour but no photograph. */
.cga-gs-fcard__fig .cga-gs-disc{
  position:absolute;inset:0;margin:auto;
  width:46%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff5,var(--gs,#ccc) 62%);
}

.cga-gs-fcard__body{display:flex;flex-direction:column;gap:.35em}
.cga-gs-fcard__n{
  font-family:var(--display);font-weight:400;color:var(--navy);
  font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.2;
}
.cga-gs-fcard__s{
  font-size:.86rem;color:var(--muted);line-height:1.5;
}
.cga-gs-fcard__m{
  font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);
}

/* ---------------- nothing matched ---------------- */
.cga-gs-find__none{
  margin:0;padding:clamp(24px,4vw,48px) 1em;text-align:center;
  color:var(--muted);background:var(--cream);border-radius:1px;
}
.cga-gs-find__none[hidden]{display:none}

/* ---------------- narrower screens ---------------- */
@media (max-width:1024px){
  .cga-gs-find__grid{grid-template-columns:repeat(var(--cols-t,3),minmax(0,1fr))}
}
@media (max-width:640px){
  .cga-gs-find__grid{grid-template-columns:repeat(var(--cols-m,2),minmax(0,1fr))}
  /* Three-letter months, so twelve chips still fit a phone. */
  .cga-gs-fchip__full{display:none}
  .cga-gs-fchip__short{display:inline}
  .cga-gs-fchip{padding:.6em .85em;letter-spacing:.1em}
  .cga-gs-fcard__s{display:none}
}

/* =====================================================================
   TYPE NAVIGATION
   ---------------------------------------------------------------------
   The row of links between a gemstone's sub-collections. Real links,
   not buttons: each one is a page with its own URL, so they have to be
   crawlable, middle-clickable and bookmarkable.
   ===================================================================== */
.cga-gs-typenav{
  display:flex;flex-wrap:wrap;gap:.5em;
  margin:0 0 clamp(14px,2vw,22px);
}
.cga-gs-typenav__l{
  display:inline-flex;align-items:baseline;gap:.5em;
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;text-decoration:none;color:var(--navy);
  border:1px solid var(--line);border-radius:1px;
  padding:.6em 1em;
  transition:border-color .2s,color .2s,background .2s;
}
.cga-gs-typenav__l:hover,
.cga-gs-typenav__l:focus{border-color:var(--gold);color:var(--gold)}
.cga-gs-typenav__l.is-on{
  background:var(--navy);border-color:var(--navy);color:#fff;
}
.cga-gs-typenav__n{font-size:.78em;opacity:.6;letter-spacing:.06em}
@media (prefers-reduced-motion:reduce){
  .cga-gs-typenav__l{transition:none}
}

/* =====================================================================
   BIRTHSTONES — LAYOUT OPTIONS
   ---------------------------------------------------------------------
   The stacked arrangement is unchanged and stays the default, so
   nothing already on a page moves. These rules only apply once a
   layout, a column count or a media setting asks for them.
   ===================================================================== */

/*
 * The two wrappers are inert until the split layout needs them. In the
 * stacked layout display:contents takes them out of the box tree
 * entirely, so the chips and panels are still the direct children the
 * rules above are written against.
 */
.cga-gs-birth__pick,
.cga-gs-birth__panels{display:contents}

/* ---------------- months as a block ---------------- */
.cga-gs-chips--grid{
  display:grid;
  grid-template-columns:repeat(var(--mcols,4),minmax(0,1fr));
  gap:.5rem;
}
/* A four-across block is too tight on a phone; three is the widest
   that still reads. Set from PHP so it can never exceed the desktop
   count. */
@media (max-width:520px){
  .cga-gs-chips--grid{grid-template-columns:repeat(var(--mcols-m,3),minmax(0,1fr))}
}

/* ---------------- copy on the left, panel on the right ---------------- */
.cga-gs-birth--split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);
  align-items:start;
}
.cga-gs-birth--split > .cga-gs-birth__pick,
.cga-gs-birth--split > .cga-gs-birth__panels{display:block}

.cga-gs-birth--split .cga-gs-chips{margin-bottom:0}

/* Inside its own column the panel is one column, not two. */
.cga-gs-birth--split .cga-gs-month{
  grid-template-columns:minmax(0,1fr);
  align-items:start;
  border:1px solid var(--line);
  padding:clamp(18px,2.6vw,34px);
}

/* The card grid, when it is on, runs the full width underneath. */
.cga-gs-birth--split > .cga-gs-cards{grid-column:1 / -1}

@media (max-width:820px){
  .cga-gs-birth--split{grid-template-columns:minmax(0,1fr)}
  .cga-gs-birth--split .cga-gs-chips{margin-bottom:clamp(22px,3vw,36px)}
}

/* ---------------- a swatch instead of a photograph ---------------- */
.cga-gs-month__swatch{
  display:block;width:clamp(28px,3.4vw,40px);margin:1.1rem 0;
}

/*
 * With no photograph the panel is a single column whatever the layout,
 * or the body would sit in half the width with nothing beside it.
 */
.cga-gs-birth--media-swatch .cga-gs-month,
.cga-gs-birth--media-none .cga-gs-month{
  grid-template-columns:minmax(0,1fr);
}

/* ---------------- the words above the month buttons ---------------- */
.cga-gs-birth__intro{margin-bottom:clamp(18px,2.6vw,32px)}
.cga-gs-birth__h{margin-bottom:.7rem}
.cga-gs-birth__t{max-width:46ch}
.cga-gs-birth__t p:last-child{margin-bottom:0}

/* ---------------- a dot of the stone's colour, on a finder card ---------------- */
.cga-gs-fcard__dot{
  display:inline-block;vertical-align:baseline;
  width:.6em;height:.6em;border-radius:50%;margin-right:.45em;
  background:radial-gradient(circle at 34% 30%,#fff6,var(--gs,#ccc) 70%);
  box-shadow:0 0 0 1px rgba(0,0,0,.08);
}

/* =====================================================================
   ADD TO BAG BAR
   ---------------------------------------------------------------------
   Same class names as the hand-written bar it replaces, so any CSS
   already written against it still applies.
   ===================================================================== */
.cga-bar{
  --navy:#16263D;--gold:#A8813F;--gold-d:#8F6C31;--cream:#F2EADF;
  --ink:#22303F;--muted:#6B7789;--line:#DFD5C8;
  --display:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  --body:"Jost","Avenir Next","Segoe UI",system-ui,sans-serif;

  position:fixed;left:0;right:0;z-index:90;
  background:#fff;border-top:1px solid var(--line);
  font-family:var(--body);
  transition:transform .28s ease;
  visibility:hidden;
}
.cga-bar *,.cga-bar *::before,.cga-bar *::after{box-sizing:border-box}
.cga-bar--bottom{bottom:0;transform:translateY(110%)}
.cga-bar--top{top:0;border-top:0;border-bottom:1px solid var(--line);transform:translateY(-110%)}
.cga-bar.is-on{transform:none;visibility:visible}

.cga-bar__inner{
  max-width:1180px;margin:0 auto;padding:.7rem clamp(14px,3vw,28px);
  display:flex;align-items:center;gap:1rem;
}
.cga-bar__who{display:flex;align-items:center;gap:.9rem;min-width:0;flex:1}
.cga-bar__thumb{
  width:52px;height:52px;object-fit:cover;flex:none;
  border:1px solid var(--line);background:var(--cream);
}
.cga-bar__meta{min-width:0}
.cga-bar__name{
  font-family:var(--display);font-size:1.02rem;color:var(--navy);
  line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cga-bar__price{font-size:.86rem;color:var(--muted);font-variant-numeric:tabular-nums}
.cga-bar__price del{opacity:.6;margin-right:.4em}
.cga-bar__price ins{text-decoration:none;color:var(--gold)}

.cga-bar__cta{
  flex:none;display:inline-block;text-decoration:none;
  background:var(--gold);border:1px solid var(--gold);color:#fff;
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  padding:1.05em 1.9rem;border-radius:1px;
  transition:background .2s,border-color .2s;
}
.cga-bar__cta:hover,.cga-bar__cta:focus{background:var(--gold-d);border-color:var(--gold-d);color:#fff}

/* The spot the button scrolls to when it cannot add straight to the bag. */
#cga-bar-target{scroll-margin-top:120px}

@media (max-width:640px){
  .cga-bar__thumb{width:40px;height:40px}
  .cga-bar__name{font-size:.92rem}
  .cga-bar__cta{padding:1em 1.2rem;font-size:.7rem;letter-spacing:.12em}
  .cga-bar__inner{gap:.7rem}
}
@media (prefers-reduced-motion:reduce){
  .cga-bar{transition:none}
}

/* Anchor landings should not tuck under a sticky header. */
.cga-gs-show[id]{scroll-margin-top:var(--cga-anchor-offset,100px)}

/* The picker on a collection page: the current one is not a link you
   would click again, so it reads as the place you are. */
.cga-gs-typenav__l[aria-current="page"]{cursor:default}
.cga-gs-collection-page{display:block}

/* Where an in-page link lands. Raise --cga-anchor-offset if a sticky
   header is covering the heading you arrive at. */
.cga-gs-show[id],
.cga-gs-sec[id]{scroll-margin-top:var(--cga-anchor-offset,100px)}
.cga-gs-show[id]:focus,
.cga-gs-sec[id]:focus{outline:none}

/* ---------------- the finder, centred ---------------- */
.cga-gs-find--center .cga-gs-find__search{margin-inline:auto}
.cga-gs-find--center .cga-gs-find__chips{justify-content:center}
.cga-gs-find--center .cga-gs-find__count{text-align:center}
.cga-gs-find--center .cga-gs-find__controls{align-items:center}

.cga-gs-find--left .cga-gs-find__search{margin-inline:0}
.cga-gs-find--left .cga-gs-find__chips{justify-content:flex-start}
.cga-gs-find--left .cga-gs-find__count{text-align:left}

/* Two rows of chips sit closer together than a row and a paragraph. */
.cga-gs-find__chips--family{margin-bottom:.2rem}

/* On a phone a colour family's name is the point, so it is not cut to
   three letters the way a month is. */
@media (max-width:640px){
  .cga-gs-find__chips--family .cga-gs-fchip__full{display:inline}
  .cga-gs-find__chips--family .cga-gs-fchip__short{display:none}
}

/* =====================================================================
   TIMELINE
   ---------------------------------------------------------------------
   Three columns: when it happens, the rule, and what happens. The rule
   is drawn as a border on the body rather than as a separate element,
   so it runs continuously through the gap between steps instead of
   being chopped into one segment per step — which is what makes a
   timeline read as one journey rather than five unrelated boxes.

   The space between steps is therefore padding on the body, not a grid
   gap, for exactly that reason.
   ===================================================================== */
.cga-gs-time{
  --when-w:7.5rem;
  --rail-gap:1.6rem;
  --rail-w:1px;
  --rail:var(--line);
  --rail-op:1;
  --dot:var(--gold);
  --dot-size:9px;
  --step-gap:2.4rem;
}
.cga-gs-time__list{
  list-style:none;margin:0 auto;padding:0;
  max-width:88ch;
}
.cga-gs-time__step{
  display:grid;
  grid-template-columns:var(--when-w) minmax(0,1fr);
  column-gap:var(--rail-gap);
  align-items:start;
}
.cga-gs-time__when{
  margin:0;padding-top:.45em;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);font-weight:500;
  text-align:right;
  overflow-wrap:break-word;
}
.cga-gs-time__body{
  position:relative;
  border-left:var(--rail-w) solid var(--rail);
  padding-left:var(--rail-gap);
  padding-bottom:var(--step-gap);
}
/* Hiding the rule keeps the indent, so nothing shifts sideways. */
.cga-gs-time__body{border-left-color:color-mix(in srgb, var(--rail) calc(var(--rail-op) * 100%), transparent)}
/* The last step's line stops at its marker rather than running on into
   whatever follows the section. */
.cga-gs-time__step:last-child .cga-gs-time__body{
  border-left-color:transparent;padding-bottom:0;
}
.cga-gs-time__step:last-child .cga-gs-time__body::after{
  content:"";position:absolute;left:calc(var(--rail-w) * -1);top:0;
  width:var(--rail-w);height:.9em;
  background:color-mix(in srgb, var(--rail) calc(var(--rail-op) * 100%), transparent);
}
/* The marker, sitting on the rule. */
.cga-gs-time__body::before{
  content:"";position:absolute;
  left:calc((var(--dot-size) + var(--rail-w)) / -2);
  top:.55em;
  width:var(--dot-size);height:var(--dot-size);
  background:var(--dot);border-radius:50%;
}
.cga-gs-time--square .cga-gs-time__body::before{border-radius:0}
.cga-gs-time--hollow .cga-gs-time__body::before{
  background:#fff;border:2px solid var(--dot);
}
.cga-gs-time__h{
  font-family:var(--display);font-weight:400;color:var(--navy);
  font-size:clamp(1.15rem,2.1vw,1.45rem);line-height:1.25;
  margin:0 0 .35rem;
}
a.cga-gs-time__h{text-decoration:none;color:inherit;transition:color .2s}
a.cga-gs-time__h:hover,a.cga-gs-time__h:focus{color:var(--gold)}
.cga-gs-time__t{color:var(--muted);font-size:.95rem}
.cga-gs-time__t p{margin:0 0 .7em}
.cga-gs-time__t p:last-child{margin-bottom:0}

/* Narrow screens: the gutter label moves above the step, because a
   7rem column beside a paragraph on a phone leaves neither room. */
@media (max-width:600px){
  .cga-gs-time__step{grid-template-columns:minmax(0,1fr)}
  .cga-gs-time__when{
    text-align:left;order:-1;margin:0;
    padding:0 0 .35rem var(--rail-gap);
    border-left:var(--rail-w) solid
      color-mix(in srgb, var(--rail) calc(var(--rail-op) * 100%), transparent);
  }
  .cga-gs-time__step:first-child .cga-gs-time__when{padding-top:.1rem}
  .cga-gs-time__body{padding-bottom:var(--step-gap)}
  .cga-gs-time__body::before{top:.5em}
}

/* --- piece details: group headings and the choice lists --- */
/*
   A heading between groups, laid out like a supplier's model sheet. It
   is a <p> rather than a heading tag because it sits inside a <dl>,
   where a heading element is not allowed and would be moved by the
   parser — the styling does the work the tag would have.
*/
/*
   No rule of its own: the row above it already draws one, and adding a
   second produced two lines with a gap between them.
*/
.cga-gs-piece__group{
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);font-weight:500;
  margin:1.5rem 0 .55rem;
}
.cga-gs-piece__group:first-child{margin-top:0}

/*
   A choice — metal, centre stone, ring size. Shown as separate values
   rather than one comma-separated line, because that is what they are:
   alternatives, not a sentence.
*/
.cga-gs-piece__opt{
  display:inline-block;
  border:1px solid var(--line);
  padding:.14em .62em;margin:0 .3em .3em 0;
  font-size:.86rem;line-height:1.5;color:var(--ink);
}
.cga-gs-piece--inline .cga-gs-piece__opt{font-size:.8rem}

/* ---------------------------------------------------------------
   Ring size, on the product page
   --------------------------------------------------------------- */
.cga-gs-size{margin:0 0 18px}
.cga-gs-size label{display:block;margin:0 0 6px;font-weight:600}
.cga-gs-size select{min-width:12em;padding:.5em .7em}
.cga-gs-size .required{color:#b32d2e;text-decoration:none;border:0}

/* ---------------------------------------------------------------
   Related jewellery
   --------------------------------------------------------------- */
.cga-gs-related__inner{margin:0 auto}
.cga-gs-related__h{margin:0 0 1em}
.cga-gs-related__list{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.cga-gs-related__item{margin:0}
.cga-gs-related__link{display:block;text-decoration:none;color:inherit}
.cga-gs-related__pic{display:block;margin:0 0 .8em}
.cga-gs-related__pic img{display:block;width:100%;height:auto}
.cga-gs-related__stone{display:block;font-size:.75em;letter-spacing:.08em;
  text-transform:uppercase;opacity:.7;margin:0 0 .25em}
.cga-gs-related__name{display:block;line-height:1.35}
.cga-gs-related__price{display:block;margin-top:.35em;opacity:.85}
@media (max-width:900px){.cga-gs-related__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.cga-gs-related__list{grid-template-columns:minmax(0,1fr)}}