/* GSE Customisation — how the product-page buttons look.
   This loads after the app's own stylesheet, so anything here wins.
   The buttons' shape and size stay in the app, so they never break if you clear this. */

/* ---- Personalise this item ---- */
.gsec-open {
  border: 1.5px solid var(--gsec-a);
  background: #fff;
  color: var(--gsec-a);
  font-weight: 600;
  border-radius: 0;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.gsec-open--solid { background: var(--gsec-a); color: #fff; }
.gsec-open--link  { border: 0; text-decoration: underline; text-underline-offset: 3px; }
.gsec-open:hover  { background: var(--gsec-a); color: #fff; }
.gsec-open--solid:hover { filter: brightness(1.08); }
.gsec-open:active { transform: translateY(1px); }
.gsec-open:focus-visible { outline: 2px solid var(--gsec-a); outline-offset: 2px; }
.gsec-open svg { transition: transform .18s ease; }
.gsec-open:hover svg { transform: rotate(-12deg); }

/* ---- Drawing the eye. The theme editor chooses which of these runs,
        and each one plays when the button first scrolls into view. ---- */

/* A light sweeps across three times. */
.gsec-open--sheen::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, currentColor 18%, transparent), transparent);
  transform: translateX(-250%) skewX(-18deg);
}
.gsec-open--sheen.is-seen::after { animation: gsec-sheen 2.8s ease-in-out 3; }
@keyframes gsec-sheen {
  0%        { transform: translateX(-250%) skewX(-18deg); opacity: 0; }
  8%        { opacity: 1; }
  45%, 100% { transform: translateX(330%) skewX(-18deg); opacity: 0; }
}

/* Rises into place once. */
.gsec-open--lift.is-seen { animation: gsec-lift .55s cubic-bezier(.2,.8,.25,1) both; }
@keyframes gsec-lift { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

/* A ring that keeps pulsing. The loudest option — use it sparingly. */
.gsec-open--pulse.is-seen { animation: gsec-pulse 2.6s ease-out infinite; }
@keyframes gsec-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gsec-a) 40%, transparent); }
  70%  { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---- Buy this without personalisation ---- */
.gsec-panel-out {
  font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: #5a625b; border-color: #d5d9d5; border-radius: 0;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.gsec-panel-out svg { transition: transform .15s ease; }
.gsec-panel-out:hover { color: #1a1a1a; border-color: #1a1a1a; background: #fafbfa; }
.gsec-panel-out:hover svg { transform: translateX(-2px); }
.gsec-panel-out:focus-visible { outline: 2px solid var(--gsec-a); outline-offset: 2px; }

/* The two things a shopper can add, said in the slot beside the label: the icon crossfades
   between a pencil and a crest as the words change. */
.gsec-open__ico { position: relative; display: inline-block; width: 18px; height: 18px; flex: none; }
.gsec-open__ico .gsec-ico { position: absolute; inset: 0; width: 18px; height: 18px; transition: opacity .3s ease, transform .3s ease; }
.gsec-ico--logo { opacity: 0; transform: scale(.65) rotate(-12deg); }
.gsec-open.is-logo .gsec-ico--pen  { opacity: 0; transform: scale(.65) rotate(12deg); }
.gsec-open.is-logo .gsec-ico--logo { opacity: 1; transform: none; }
/* The hint rolls: the word on show leaves downwards, the next arrives from above. */
.gsec-open__from { display: inline-block; overflow: hidden; height: 1.45em; }
.gsec-open__line { display: block; transition: transform .5s cubic-bezier(.3,.85,.35,1), opacity .4s ease; }
.gsec-open__from.is-out .gsec-open__line  { transform: translateY(115%); opacity: 0; }
.gsec-open__from.is-jump .gsec-open__line { transform: translateY(-115%); opacity: 0; transition: none; }

/* Anyone who has asked their device for less motion gets none of it. */
@media (prefers-reduced-motion: reduce) {
  .gsec-open, .gsec-open svg, .gsec-panel-out, .gsec-panel-out svg, .gsec-open__line { transition: none; }
  .gsec-open--sheen::after { display: none; }
  .gsec-open--lift.is-seen, .gsec-open--pulse.is-seen { animation: none; }
}