/* GC Store Search — category eyebrow + fuzzy product search + basket pill.
   All appearance flows through the --gcs-* contract; optional conic trace border. */

@property --gcs-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes gcs-trace-spin { to { --gcs-angle: 360deg; } }
@keyframes gcs-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--gcs-glow); }
  50% { box-shadow: 0 0 26px 3px var(--gcs-glow); }
}

.gc-gss {
  --gcs-primary: #5BA7DB;
  --gcs-muted: #5A6B75;
  --gcs-wrap-max: 1312px;
  --gcs-search-max: 620px;

  --gcs-field-h: 52px;
  --gcs-field-radius: 12px;
  --gcs-field-border-w: 1px;
  --gcs-field-pad: 18px;
  --gcs-field-bg: var(--gc-shop-search-bg, #F4F8FB);
  --gcs-field-focus-bg: #FFFFFF;
  --gcs-field-border: var(--gc-shop-search-border, #E1E9EE);
  --gcs-field-text: var(--gc-shop-search-text, #14212B);
  --gcs-ring: rgba(91,167,219,0.18);
  --gcs-icon-size: 18px;

  --gcs-dd-radius: 14px;
  --gcs-dd-bg: #FFFFFF;
  --gcs-dd-hover: #F4F8FB;
  --gcs-dd-border: #E1E9EE;
  --gcs-name: #14212B;
  --gcs-price: #5A6B75;

  --gcs-crumb-link: #5BA7DB;
  --gcs-crumb-here: #14212B;
  --gcs-crumb-sep: #5A6B75;

  --gcs-basket-bg: var(--gc-shop-cart-bg, #A9D3F0);
  --gcs-basket-text: var(--gc-shop-cart-text, #14212B);
  --gcs-basket-radius: 12px;
  --gcs-basket-pad-x: 20px;
  --gcs-basket-gap: 10px;
  --gcs-basket-icon: 22px;
  --gcs-badge-bg: var(--gc-shop-cart-badge, #F2994A);
  --gcs-badge-text: #FFFFFF;

  --gcs-trace: #5BA7DB;
  --gcs-trace2: #BFE2F7;
  --gcs-glow: rgba(91,167,219,0.30);
  --gcs-trace-w: 2px;
  --gcs-trace-speed: 4s;
  --gcs-pulse-speed: 3.2s;

  font-family: 'Inter', system-ui, sans-serif;
  max-width: var(--gcs-wrap-max);
  margin: 0 auto;
  padding: 6px 24px 18px;
  box-sizing: border-box;
}
.gc-gss *, .gc-gss *::before, .gc-gss *::after { box-sizing: border-box; }

/* -------------------------------------------------------------- Eyebrow */
.gc-gss__crumbs {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 14px;
  font-size: 14px;
}
.gc-gss__crumbs-inner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.gc-gss__crumbs a { color: var(--gcs-crumb-link); text-decoration: none; font-weight: 600; }
.gc-gss__crumbs a.gc-gss__here { color: var(--gcs-crumb-link); }
.gc-gss__crumbs a:hover { text-decoration: underline; }
.gc-gss__sep { color: var(--gcs-crumb-sep); opacity: .6; }
.gc-gss__here { color: var(--gcs-crumb-here); font-weight: 600; }

/* --------------------------------------------------------------- The bar */
.gc-gss__bar {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: var(--gcs-field-h);
}

/* --------------------------------------------------------------- Search */
.gc-gss__search { position: relative; width: 100%; max-width: var(--gcs-search-max); }
.gc-gss__search-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--gcs-field-h);
  padding: 0 var(--gcs-field-pad);
  background: var(--gcs-field-bg);
  border: var(--gcs-field-border-w) solid var(--gcs-field-border);
  border-radius: var(--gcs-field-radius);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.gc-gss--icon-right .gc-gss__search-inner { flex-direction: row-reverse; }
.gc-gss__search-inner:focus-within {
  border-color: var(--gcs-primary);
  background: var(--gcs-field-focus-bg);
  box-shadow: 0 0 0 3px var(--gcs-ring);
}
.gc-gss__icon { display: inline-flex; flex: 0 0 auto; color: var(--gcs-muted); line-height: 0; }
.gc-gss__icon svg, .gc-gss__icon i { width: var(--gcs-icon-size); height: var(--gcs-icon-size); font-size: var(--gcs-icon-size); }
.gc-gss__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 15px;
  color: var(--gcs-field-text);
}
.gc-gss__input::placeholder { color: var(--gcs-muted); }
.gc-gss__input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* ------------------------------------------------------------ Dropdown */
.gc-gss__results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0; right: 0;
  z-index: 40;
  background: var(--gcs-dd-bg);
  border: 1px solid var(--gcs-dd-border);
  border-radius: var(--gcs-dd-radius);
  box-shadow: 0 18px 40px -12px rgba(20,33,43,.22);
  overflow: hidden auto;
  max-height: 60vh;
}
.gc-gss__results[hidden] { display: none; }
.gc-gss__item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; text-decoration: none; cursor: pointer;
  border-bottom: 1px solid var(--gcs-dd-hover);
}
.gc-gss__item:last-child { border-bottom: 0; }
.gc-gss__item:hover, .gc-gss__item.is-active { background: var(--gcs-dd-hover); }
.gc-gss__thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: var(--gcs-dd-hover); flex: 0 0 auto; }
.gc-gss__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gc-gss__name { font-family: 'Manrope', system-ui, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--gcs-name); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-gss__price { font-size: 13px; color: var(--gcs-price); }
.gc-gss__price ins { text-decoration: none; color: var(--gcs-name); font-weight: 600; }
.gc-gss__price del { opacity: .6; margin-right: 5px; }
.gc-gss__empty { padding: 16px; font-size: 14px; color: var(--gcs-muted); text-align: center; }

/* -------------------------------------------------------------- Basket */
.gc-gss__basket {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--gcs-basket-gap);
  height: var(--gcs-field-h);
  padding: 0 var(--gcs-basket-pad-x);
  background: var(--gcs-basket-bg);
  color: var(--gcs-basket-text);
  border-radius: var(--gcs-basket-radius);
  text-decoration: none;
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 6px 16px -2px rgba(91,167,219,.42);
  transition: transform .15s, box-shadow .15s;
}
.gc-gss--basket-right .gc-gss__basket { right: 0; }
.gc-gss--basket-left .gc-gss__basket { left: 0; }
.gc-gss__basket--icon-left { flex-direction: row-reverse; }
.gc-gss__basket:hover { transform: translateY(-50%) scale(1.03); box-shadow: 0 10px 24px -4px rgba(91,167,219,.55); }
.gc-gss__basket,
.gc-gss__basket:hover,
.gc-gss__basket:focus,
.gc-gss__basket .gc-gss__total { color: var(--gcs-basket-text); }
.gc-gss__total { color: inherit; }
.gc-gss__cart { position: relative; display: inline-flex; }
.gc-gss__cart svg, .gc-gss__cart i { width: var(--gcs-basket-icon); height: var(--gcs-basket-icon); font-size: var(--gcs-basket-icon); }
.gc-gss__count {
  position: absolute; top: -9px; right: -10px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gcs-badge-bg); color: var(--gcs-badge-text);
  font-size: 11px; font-weight: 700; border-radius: 999px; line-height: 1;
}
.gc-gss__count[hidden] { display: none; }

/* --------------------------------------------------------- Trace border */
.gc-gss--trace-search .gc-gss__search-inner,
.gc-gss--trace-eyebrow .gc-gss__crumbs-inner { position: relative; }

.gc-gss--trace-eyebrow .gc-gss__crumbs-inner { padding: 6px 14px; border-radius: 999px; }

.gc-gss--trace-search .gc-gss__search-inner::after,
.gc-gss--trace-eyebrow .gc-gss__crumbs-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: var(--gcs-trace-w);
  background: conic-gradient(
    from var(--gcs-angle),
    transparent 0deg,
    transparent 280deg,
    var(--gcs-trace) 320deg,
    var(--gcs-trace2) 340deg,
    var(--gcs-trace) 355deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: gcs-trace-spin var(--gcs-trace-speed) linear infinite;
  pointer-events: none;
  z-index: 3;
}
.gc-gss--trace-search .gc-gss__search-inner { border-radius: var(--gcs-field-radius); }

.gc-gss--pulse.gc-gss--trace-search .gc-gss__search-inner { animation: gcs-pulse var(--gcs-pulse-speed) ease-in-out infinite; }
.gc-gss--pulse.gc-gss--trace-eyebrow .gc-gss__crumbs-inner { animation: gcs-pulse var(--gcs-pulse-speed) ease-in-out infinite; }

/* ------------------------------------------------- Header search icon */
/* The magnifier sits with the other action icons; its panel drops centred
   under the whole icon row and matches that row's width, so the search reads
   as belonging to the group rather than to any one icon. .header-icons is the
   positioning context (set in style.css). */
.gc-hsearch { display: flex; }

.gc-hsearch__toggle {
  /* .icon-pill supplies the look (including the border); a <button> just needs
     the UA padding/font resets that a link doesn't carry. */
  padding: 0;
  cursor: pointer;
  font: inherit;
  -webkit-appearance: none;
  appearance: none;
}

.gc-hsearch__panel {
  position: absolute;
  top: calc(100% + 12px);
  /* Right-aligned to the icon row rather than centred on it: the row sits at
     the header's right edge, so anything wider than the row would spill off
     the viewport if it were centred. The extra width grows leftwards. */
  right: 0;
  left: auto;
  z-index: 60;
  width: max(100%, 360px);
  padding: 8px;
  background: rgba(255,255,255,0.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 999px;
  box-shadow: var(--gc-shadow-card, 0 10px 28px -8px rgba(20,33,43,.12));
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.gc-hsearch.is-open .gc-hsearch__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* On phones the icon row sits left of centre (the hamburger is outside it), so
   right-aligning to it pushes a full-width panel off the left edge. Anchor to
   the actions group instead and centre, matching the cart and account panels. */
@media (max-width: 960px) {
  .site-header .header-icons { position: static; }
  .gc-hsearch__panel {
    top: calc(100% + 10px);
    left: 50%;
    right: auto;
    width: min(420px, calc(100vw - 24px));
    transform: translateX(-50%) translateY(6px);
  }
  .gc-hsearch.is-open .gc-hsearch__panel { transform: translateX(-50%); }
}

/* Search-only variant: strip the page-row chrome; pill-shaped field. */
.gc-gss--nav { max-width: none; margin: 0; padding: 0; }
.gc-gss--nav .gc-gss__bar { min-height: 0; justify-content: stretch; }
.gc-gss--nav .gc-gss__search { max-width: none; }
.gc-gss--nav .gc-gss__search-inner { border-radius: 999px; }
.gc-gss--nav .gc-gss__results { border-radius: 20px; top: calc(100% + 14px); }

/* ------------------------------------------------------------ Responsive */
@media (max-width: 720px) {
  .gc-gss__crumbs-inner { flex-wrap: wrap; row-gap: 4px; }
  .gc-gss__bar { flex-direction: column; gap: 12px; align-items: stretch; }
  .gc-gss__search { max-width: none; }
  .gc-gss__basket { position: static; transform: none; align-self: flex-end; }
  .gc-gss--basket-left .gc-gss__basket { align-self: flex-start; }
  .gc-gss__basket:hover { transform: scale(1.03); }
  .gc-gss__input { font-size: 16px; }
}

@media (max-width: 640px) {
  .gc-gss {
    --gcs-field-h: 46px;
    --gcs-field-pad: 14px;
    --gcs-basket-pad-x: 16px;
    --gcs-basket-icon: 20px;
    --gcs-icon-size: 17px;
  }
  .gc-gss:not(.gc-gss--nav) { padding: 4px 16px 12px; }
  .gc-gss__crumbs { margin-bottom: 10px; font-size: 13px; }
  .gc-gss__crumbs-inner { gap: 6px; }
  .gc-gss__bar { gap: 10px; }
  .gc-gss__basket { font-size: 14px; }
  .gc-gss__results { max-height: 52vh; }
  .gc-gss__item { gap: 10px; padding: 8px 12px; }
  .gc-gss__thumb { width: 38px; height: 38px; }
  .gc-gss__name { font-size: 13.5px; }
  .gc-gss__price { font-size: 12.5px; }
  .gc-gss__empty { padding: 14px; font-size: 13.5px; }
  .gc-gss--trace-eyebrow .gc-gss__crumbs-inner { padding: 5px 12px; }
}

@media (max-width: 480px) {
  .gc-gss { --gcs-field-h: 44px; }
  .gc-gss:not(.gc-gss--nav) { padding: 2px 14px 10px; }
  .gc-gss__crumbs { font-size: 12.5px; }
  .gc-gss--pulse.gc-gss--trace-search .gc-gss__search-inner,
  .gc-gss--pulse.gc-gss--trace-eyebrow .gc-gss__crumbs-inner { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .gc-gss--trace-search .gc-gss__search-inner::after,
  .gc-gss--trace-eyebrow .gc-gss__crumbs-inner::after,
  .gc-gss--pulse.gc-gss--trace-search .gc-gss__search-inner,
  .gc-gss--pulse.gc-gss--trace-eyebrow .gc-gss__crumbs-inner { animation: none; }
}