/* ==========================================================================
   Garmicom — retail design system
   --------------------------------------------------------------------------
   Colour logic comes from the trade itself: CMYK. Cyan carries the brand and
   every primary action, magenta marks money saved, and true C/M/Y/K swatches
   are reserved for showing what colour a cartridge actually is.

   Legacy .gct-* class names are styled alongside the new .gc-* ones so that
   Elementor layouts built against version 1 keep working untouched.
   ========================================================================== */

:root {
  --gc-ink:        #0E1822;
  --gc-ink-soft:   #1B2938;
  --gc-muted:      #586676;
  --gc-line:       #DCE4EC;
  --gc-line-soft:  #EDF1F5;
  --gc-paper:      #FFFFFF;
  --gc-stock:      #F1F5F9;
  --gc-stock-warm: #F7F9FB;

  --gc-brand:        #0C6FA6;
  --gc-brand-bright: #16A3E0;
  --gc-brand-wash:   #E8F4FB;
  --gc-sale:         #C50E60;
  --gc-sale-wash:    #FDEBF3;
  --gc-yellow:       #F7C600;
  --gc-go:           #16804A;
  --gc-go-wash:      #E7F4ED;
  --gc-warn:         #A35A06;
  --gc-warn-wash:    #FDF2E2;

  --gc-chip-c: #00AEEF;
  --gc-chip-m: #EC008C;
  --gc-chip-y: #FFF200;
  --gc-chip-k: #1A1A1A;

  --gc-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --gc-body: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --gc-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --gc-radius: 10px;
  --gc-radius-sm: 6px;
  --gc-radius-lg: 16px;
  --gc-shadow-1: 0 1px 2px rgba(14,24,34,.06), 0 1px 3px rgba(14,24,34,.08);
  --gc-shadow-2: 0 4px 10px rgba(14,24,34,.08), 0 12px 28px rgba(14,24,34,.10);
}

/* ---- shared atoms ---- */
.gc-i { flex: none; width: 17px; height: 17px; }

.gc-eyebrow,
.gct-finder .gct-eyebrow {
  display: block;
  font-family: var(--gc-display);
  font-size: .72rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gc-muted); margin: 0 0 .3rem;
}

.gc-label,
.gct-label {
  display: block;
  font-family: var(--gc-display);
  font-size: .74rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gc-muted); margin: 0 0 .3rem;
}

.gc-hint, .gct-hint { font-size: .82rem; color: var(--gc-muted); margin: .5rem 0 0; }
.gc-mono { font-family: var(--gc-mono); font-size: .86em; letter-spacing: -.02em; }
.gc-basis { font-size: .74rem; font-weight: 600; color: var(--gc-muted); white-space: nowrap; }

.gc-sect__h {
  font-family: var(--gc-display); font-weight: 700;
  font-size: clamp(1.2rem, 1rem + .9vw, 1.6rem);
  letter-spacing: -.015em; margin: 1.75rem 0 .9rem;
}

/* buttons */
.gc-btn, .gct-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font-family: var(--gc-display); font-weight: 700; font-size: .95rem;
  padding: .72rem 1.15rem; border-radius: var(--gc-radius);
  border: 2px solid transparent; cursor: pointer; text-decoration: none; line-height: 1.2;
}
.gc-btn:hover, .gct-btn:hover { text-decoration: none; }
.gc-btn--go, .gct-btn--solid, .gct-btn--promo { background: var(--gc-brand); color: #fff; }
.gc-btn--go:hover, .gct-btn--solid:hover, .gct-btn--promo:hover { background: #0A5D8C; color: #fff; }
.gc-btn--ghost, .gct-btn--outline { background: var(--gc-paper); color: var(--gc-ink); border-color: var(--gc-line); }
.gc-btn--ghost:hover, .gct-btn--outline:hover { border-color: var(--gc-brand); color: var(--gc-brand); }
.gc-btn--block { width: 100%; }
.gc-btn[disabled], .gct-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* pills and chips */
.gc-pill, .gct-pill {
  display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  font-family: var(--gc-display); font-size: .72rem; font-weight: 700;
  padding: .22rem .5rem; border-radius: 999px; letter-spacing: .02em;
}
.gc-pill .gc-i { width: 12px; height: 12px; }
.gc-pill--in,   .gct-pill--ok { background: var(--gc-go-wash); color: var(--gc-go); }
.gc-pill--low   { background: var(--gc-warn-wash); color: var(--gc-warn); }
.gc-pill--out   { background: var(--gc-line-soft); color: var(--gc-muted); }
.gc-pill--save  { background: var(--gc-sale-wash); color: var(--gc-sale); }
.gc-pill--oem   { background: var(--gc-brand-wash); color: var(--gc-brand); }
.gc-pill--compat{ background: #F0EDFA; color: #5B4A9E; }

.gc-chip { display: inline-block; width: 11px; height: 11px; border-radius: 3px;
  flex: none; border: 1px solid rgba(0,0,0,.18); vertical-align: -1px; }
.gc-chip--c { background: var(--gc-chip-c); }
.gc-chip--m { background: var(--gc-chip-m); }
.gc-chip--y { background: var(--gc-chip-y); }
.gc-chip--k { background: var(--gc-chip-k); }

/* notices */
.gc-notice, .gct-notice {
  border: 1px solid var(--gc-line); border-left-width: 4px;
  border-radius: var(--gc-radius-sm); padding: .8rem 1rem; margin: 1rem 0;
  background: var(--gc-stock-warm); font-size: .92rem;
}
.gc-notice--warn, .gct-notice--error { border-left-color: var(--gc-warn); background: var(--gc-warn-wash); }

.gc-note {
  display: flex; gap: .7rem; align-items: flex-start;
  background: var(--gc-brand-wash); border: 1px solid #CFE6F5;
  border-radius: var(--gc-radius); padding: 1rem 1.1rem; margin: 1.25rem 0;
}
.gc-note .gc-i { color: var(--gc-brand); margin-top: .15rem; }
.gc-note strong { font-family: var(--gc-display); display: block; margin-bottom: .2rem; }
.gc-note p { margin: 0; }

/* fields */
.gc-field, .gct-field { margin: 0 0 .7rem; min-width: 0; }
.gc-field select, .gc-field input, .gc-field textarea,
.gct-field select, .gct-field input, .gct-field textarea,
.gc-pad textarea, .gct-pad textarea {
  width: 100%; border: 1.5px solid var(--gc-line); border-radius: var(--gc-radius-sm);
  padding: .68rem .75rem; font-size: .95rem; font-family: inherit;
  background: var(--gc-paper); color: var(--gc-ink);
}
.gc-field select:focus, .gc-field input:focus, .gc-field textarea:focus { border-color: var(--gc-brand); outline: none; }

/* ==========================================================================
   Cartridge finder
   ========================================================================== */
.gc-finder, .gct-finder {
  background: var(--gc-paper); color: var(--gc-ink);
  border: 1px solid var(--gc-line); border-radius: var(--gc-radius-lg);
  padding: 1.35rem; box-shadow: var(--gc-shadow-1); position: relative;
}
.gc-finder__top { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .3rem; }
.gc-finder__top .gc-i { width: 22px; height: 22px; color: var(--gc-brand); margin-top: .1rem; }
.gc-finder__h { font-family: var(--gc-display); font-size: 1.25rem; font-weight: 700; margin: 0; letter-spacing: -.015em; }
.gc-finder__intro { color: var(--gc-muted); font-size: .92rem; margin: .3rem 0 1rem; }

.gc-finder__row { display: grid; gap: .7rem; grid-template-columns: 1fr; }
@media (min-width: 560px) { .gc-finder__row { grid-template-columns: 1fr 1.35fr; } }

.gc-finder__hint { display: flex; gap: .45rem; align-items: flex-start;
  font-size: .82rem; color: var(--gc-muted); margin: .85rem 0 0; }
.gc-finder__hint .gc-i { color: var(--gc-brand); margin-top: .15rem; }

/* model suggestions */
.gc-field { position: relative; }
.gc-suggest, .gct-suggest {
  position: absolute; inset-inline: 0; top: 100%; z-index: 30;
  background: var(--gc-paper); border: 1px solid var(--gc-line);
  border-radius: 0 0 var(--gc-radius-sm) var(--gc-radius-sm);
  box-shadow: var(--gc-shadow-2); max-height: 280px; overflow-y: auto;
  display: block; margin-top: 2px;
}
.gc-suggest[hidden], .gct-suggest[hidden] { display: none; }
.gc-suggest button, .gct-suggest button {
  display: flex; width: 100%; gap: .5rem; align-items: baseline; justify-content: space-between;
  background: none; border: 0; border-bottom: 1px solid var(--gc-line-soft);
  padding: .6rem .75rem; text-align: left; cursor: pointer; font: inherit; font-size: .92rem;
}
.gc-suggest button:last-child, .gct-suggest button:last-child { border-bottom: 0; }
.gc-suggest button:hover, .gc-suggest button[aria-selected="true"],
.gct-suggest button:hover, .gct-suggest button.is-on { background: var(--gc-brand-wash); }
.gc-suggest mark { background: #FFF3BF; color: inherit; border-radius: 2px; padding: 0 1px; }
.gc-suggest small { color: var(--gc-muted); white-space: nowrap; font-size: .78rem; }

/* finder results */
.gc-finder__results, .gct-finder__results { margin-top: 1rem; }
.gc-finder__results:empty { margin-top: 0; }
.gc-finder__head { display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: baseline;
  margin-bottom: .8rem; padding-top: .9rem; border-top: 1px solid var(--gc-line); }
.gc-finder__head strong { font-family: var(--gc-display); font-size: 1rem; }
.gc-finder__head span { color: var(--gc-muted); font-size: .88rem; }

.gc-results { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.gc-result {
  display: grid; gap: .35rem; align-content: start;
  border: 1px solid var(--gc-line); border-radius: var(--gc-radius);
  padding: .75rem; background: var(--gc-paper); min-width: 0;
}
.gc-result:hover { border-color: var(--gc-brand); }
.gc-result__meta { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.gc-result__name { font-family: var(--gc-display); font-weight: 600; font-size: .92rem;
  line-height: 1.3; color: var(--gc-ink); text-decoration: none; }
.gc-result__name:hover { color: var(--gc-brand); }
.gc-result__sku { font-family: var(--gc-mono); font-size: .76rem; color: var(--gc-muted); }
.gc-result__yield { font-size: .78rem; color: var(--gc-muted); }
.gc-result__price { font-family: var(--gc-display); font-weight: 800; font-size: 1.05rem; }
.gc-result__price del { font-weight: 500; font-size: .82rem; color: var(--gc-muted); margin-right: .25rem; }
.gc-result__price ins { text-decoration: none; }

.gc-empty, .gct-empty { color: var(--gc-muted); font-size: .92rem; margin: 0; }

/* ==========================================================================
   Quick order pad
   ========================================================================== */
.gc-pad, .gct-pad { background: var(--gc-paper); border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius-lg); padding: 1.25rem; }
.gc-pad__h { font-family: var(--gc-display); font-size: 1.25rem; margin: 0 0 1rem; }
.gc-pad__grid, .gct-pad__grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 820px) { .gc-pad__grid, .gct-pad__grid { grid-template-columns: 1fr 1fr; } }
.gc-pad__grid > *, .gct-pad__grid > * { min-width: 0; }
.gc-pad textarea, .gct-pad textarea { min-height: 190px; resize: vertical;
  font-family: var(--gc-mono); font-size: .88rem; }
.gc-pad__actions, .gct-pad__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }
.gc-pad__chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }
.gc-chip-btn, .gct-chip {
  background: var(--gc-stock); border: 1px solid var(--gc-line); border-radius: 999px;
  padding: .25rem .7rem; font-size: .84rem; cursor: pointer; font: inherit; font-size: .84rem;
}
.gc-chip-btn:hover, .gct-chip:hover { border-color: var(--gc-brand); color: var(--gc-brand); }

.gc-pad__lines, .gct-pad__lines {
  background: var(--gc-stock-warm); border: 1px dashed var(--gc-line);
  border-radius: var(--gc-radius-sm); padding: .9rem; min-height: 190px; margin-top: .3rem;
}
.gc-padline, .gct-padline {
  display: grid; grid-template-columns: 2.2rem minmax(0,1fr) auto; gap: .6rem;
  padding: .45rem 0; border-bottom: 1px solid var(--gc-line-soft); font-size: .9rem; align-items: start;
}
.gc-padline:last-child, .gct-padline:last-child { border-bottom: 0; }
.gc-padline small, .gct-padline small { display: block; color: var(--gc-muted); font-size: .78rem; }
.gc-padline--bad, .gct-padline--bad { color: var(--gc-warn); }
.gc-padline--bad small, .gct-padline--bad small { color: var(--gc-warn); }
.gc-padline__q, .gct-padline__q { font-variant-numeric: tabular-nums; font-weight: 700; }
.gc-padline__p, .gct-padline__p { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }

.gc-pad__totals, .gct-pad__totals { display: grid; gap: .45rem; margin-top: .9rem; }
.gc-pad__totals > div, .gct-pad__totals > div {
  display: flex; justify-content: space-between; gap: 1rem; font-size: .94rem;
}
.gc-grand, .gct-grand {
  border-top: 1px solid var(--gc-line); padding-top: .6rem;
  font-family: var(--gc-display); font-size: 1.15rem; font-weight: 800;
}
.gc-savedrow { color: var(--gc-sale); }

/* ==========================================================================
   Multi-buy savings table
   ========================================================================== */
.gc-tiers { border-top: 1px solid var(--gc-line); margin: 1rem 0; padding-top: .9rem; }
.gc-tiers__table { width: 100%; border-collapse: collapse; font-size: .88rem; table-layout: fixed; }
.gc-tiers__table th, .gc-tiers__table td {
  padding: .45rem .5rem; text-align: left; border-bottom: 1px solid var(--gc-line-soft);
  font-variant-numeric: tabular-nums;
}
.gc-tiers__table th {
  font-family: var(--gc-display); font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gc-muted); font-weight: 700;
}
.gc-tiers__table td:last-child, .gc-tiers__table th:last-child { text-align: right; }
.gc-tiers__table tr:last-child td { border-bottom: 0; }
.gc-tiers__save { color: var(--gc-sale); font-weight: 700; }
.gc-tiers__note { font-size: .78rem; color: var(--gc-muted); margin: .5rem 0 0; }

/* ==========================================================================
   Product page extras
   ========================================================================== */
.gc-underprice { font-size: .86rem; color: var(--gc-muted); margin: -.3rem 0 .8rem; }
.gc-underprice strong { color: var(--gc-ink); font-variant-numeric: tabular-nums; }

.gc-reassure {
  list-style: none; margin: 1rem 0 0; padding: .9rem 0 0;
  border-top: 1px solid var(--gc-line); display: grid; gap: .5rem; font-size: .88rem;
}
.gc-reassure li { display: flex; gap: .5rem; align-items: flex-start; }
.gc-reassure .gc-i { color: var(--gc-brand); margin-top: .15rem; }
.gc-reassure strong { font-variant-numeric: tabular-nums; }

.gc-spec { width: 100%; border-collapse: collapse; font-size: .92rem; table-layout: fixed; }
.gc-spec th, .gc-spec td {
  text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--gc-line-soft);
  vertical-align: top; overflow-wrap: anywhere;
}
.gc-spec th { width: 42%; color: var(--gc-muted); font-weight: 600; }

.gc-fitlist { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 1rem; }
.gc-fitlist a {
  background: var(--gc-stock); border: 1px solid var(--gc-line); border-radius: var(--gc-radius-sm);
  padding: .3rem .6rem; font-size: .85rem; color: var(--gc-ink); text-decoration: none;
}
.gc-fitlist a:hover { border-color: var(--gc-brand); color: var(--gc-brand); }

/* product card badges, injected into the Woo loop */
.gc-cardmeta { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin: .35rem 0; }
.gc-cardsku { font-family: var(--gc-mono); font-size: .76rem; color: var(--gc-muted); }
.gc-cardyield { font-size: .78rem; color: var(--gc-muted); margin-bottom: .2rem; }

/* ==========================================================================
   Brand pages and grids
   ========================================================================== */
.gc-brands, .gct-brands {
  display: grid; gap: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
}
.gc-brandcard, .gct-brand {
  background: var(--gc-paper); border: 1px solid var(--gc-line); border-radius: var(--gc-radius);
  padding: .9rem .75rem; text-align: center; color: var(--gc-ink); text-decoration: none;
  display: grid; gap: .15rem; align-content: center; justify-items: center; min-width: 0;
}
.gc-brandcard:hover, .gct-brand:hover { border-color: var(--gc-brand); }
.gc-brandcard strong, .gct-brand__name { font-family: var(--gc-display); font-size: 1rem; font-weight: 700; }
.gc-brandcard span, .gct-brand__count { font-size: .76rem; color: var(--gc-muted); font-style: normal; }
.gct-brand img { max-width: 120px; height: auto; }

.gc-brandpage { margin-bottom: 1.5rem; }
.gc-brandpage__intro { font-size: 1.04rem; max-width: 70ch; }
.gc-brandpage__families { margin-top: 1rem; }

/* category tiles, from the Category Grid widget */
.gc-tiles, .gct-cats {
  display: grid; gap: .85rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
}
.gc-tile, .gct-cat {
  background: var(--gc-paper); border: 1px solid var(--gc-line); border-radius: var(--gc-radius);
  padding: 1rem .9rem; display: grid; gap: .45rem; justify-items: start;
  color: var(--gc-ink); text-decoration: none; min-width: 0;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.gc-tile:hover, .gct-cat:hover {
  border-color: var(--gc-brand); box-shadow: var(--gc-shadow-1); transform: translateY(-2px);
}
.gct-cat h3, .gc-tile h3 { font-family: var(--gc-display); font-size: .98rem; margin: 0; line-height: 1.25; }
.gct-cat__count, .gc-tile span { font-size: .8rem; color: var(--gc-muted); margin: 0; }
.gct-cat__img img { border-radius: var(--gc-radius-sm); }

/* ==========================================================================
   Dispatch cut-off
   ========================================================================== */
.gct-cutoff, .gc-cutoff { display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; font-size: .9rem; }
[data-gct-cutoff] { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   WooCommerce retail polish
   ========================================================================== */
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  color: var(--gc-ink); font-family: var(--gc-display); font-weight: 800; letter-spacing: -.02em;
}
.woocommerce div.product p.price { font-size: 2rem; line-height: 1.1; }
.woocommerce ul.products li.product .price { font-size: 1.25rem; }
.woocommerce ul.products li.product .price del,
.woocommerce div.product p.price del {
  font-weight: 500; opacity: 1; color: var(--gc-muted); font-size: .62em; margin-right: .3em;
}
.woocommerce ul.products li.product .price ins,
.woocommerce div.product p.price ins { text-decoration: none; background: none; }

.woocommerce span.onsale {
  background: var(--gc-sale); color: #fff; font-family: var(--gc-display);
  font-weight: 700; border-radius: 999px; min-height: 0; min-width: 0;
  padding: .25rem .6rem; line-height: 1.4; font-size: .76rem;
}

.woocommerce ul.products li.product {
  background: var(--gc-paper); border: 1px solid var(--gc-line);
  border-radius: var(--gc-radius); padding: .85rem; transition: border-color .15s, box-shadow .15s;
}
.woocommerce ul.products li.product:hover { border-color: var(--gc-brand); box-shadow: var(--gc-shadow-1); }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--gc-display); font-size: .95rem; font-weight: 600; line-height: 1.3; padding: 0;
}

.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit, .woocommerce a.button.alt,
.woocommerce button.button.alt, .woocommerce input.button.alt {
  background: var(--gc-brand); color: #fff; font-family: var(--gc-display); font-weight: 700;
  border-radius: var(--gc-radius); padding: .7rem 1.1rem;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover { background: #0A5D8C; color: #fff; }

.woocommerce .quantity .qty {
  border: 1.5px solid var(--gc-line); border-radius: var(--gc-radius-sm);
  padding: .55rem .4rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top-color: var(--gc-brand); border-radius: var(--gc-radius-sm);
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--gc-brand); }

/* the GST basis never wraps away from its price */
.woocommerce .price .gc-basis { display: inline-block; margin-left: .3em; }

@media (prefers-reduced-motion: reduce) {
  .gc-tile:hover, .gct-cat:hover { transform: none; }
  * { transition-duration: .01ms !important; }
}