@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,400..700,0..100&display=swap");
/* ---- Hashfox Renew: this shop's look over the shared engine stylesheet (2026-11-07 redesign) ----
   Light paper background, soft sage accent, Fraunces display face, natural photos. Only variables and
   overrides of engine classes; the engine's own shop.css comes first (see apply_css.sh). */
:root {
  --bg: #f8f6f1;
  --soft: #efece5;
  --soft-2: #e5e1d7;
  --line: #dedad0;
  --ink: #1f2622;
  --ink-2: #3a433e;
  --muted: #68716c;
  --brand: #587a64;        /* sage, white text passes AA */
  --brand-hover: #4a6854;
  --brand-soft: #e4ebe4;
  --brand-text: #3f5c4b;
  --dark: #24302a;
  --dark-2: #30403a;
  --sale: #b5473c;
  --ok: #3f6e52;
  --warn: #8a5a1c;
  --radius: 10px;
  --radius-s: 8px;
  --shadow: 0 1px 2px rgba(31, 38, 34, .04), 0 10px 24px -12px rgba(31, 38, 34, .16);
  --display: "Fraunces", Georgia, "Times New Roman", serif;
}

::selection { background: var(--brand-soft); color: var(--ink); }
:focus-visible { outline-color: var(--brand-text); }
a:hover { color: var(--brand-text); }
h1, h2 { font-family: var(--display); font-weight: 500; letter-spacing: -.015em; font-variation-settings: "SOFT" 40; }
h2 { font-size: 1.55rem; }

/* buttons: ink, sage on hover; no pills */
.btn { border-radius: 8px; letter-spacing: 0; }
.btn:hover { background: var(--brand); color: #fff; }
.btn.brand:hover { background: var(--brand-hover); color: #fff; }
.btn.ghost { box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.btn.ghost:hover { background: var(--ink); color: #fff; }
.btn.light:hover { background: var(--brand); color: #fff; }
.stage-cta .btn.pill { border-radius: 8px; padding: 0 26px; box-shadow: none; }
.stage-cta .btn.pill:hover { background: var(--brand-hover); color: #fff; box-shadow: none; }

/* header */
.topbar { background: var(--brand-soft); color: var(--ink-2); }
.topbar a { color: var(--brand-text); }
.topbar a:hover { color: var(--ink); }
.hdr { background: rgba(248, 246, 241, .94); box-shadow: 0 1px 0 var(--line); }
.wordmark { font-family: var(--display); font-weight: 600; font-size: 27px; letter-spacing: -.02em; text-transform: none; color: var(--ink); font-variation-settings: "SOFT" 60; }
.search input { background: #fff; border-color: var(--line); }
.search input:focus { border-color: var(--ink-2); background: #fff; }
.search button { background: var(--ink); color: #fff; }
.search button:hover { background: var(--brand); color: #fff; }
.cart-n { background: var(--brand-text); }
.cats { border-top-color: var(--line); }
.cats a { font-weight: 500; letter-spacing: .05em; color: var(--ink-2); }
.cats a:hover { color: var(--ink); border-color: var(--soft-2); }
.cats a.on { color: var(--brand-text); border-color: var(--brand-text); }

/* hero: text left, framed natural photo right (photo first on phones) */
.hero-sport { margin-top: 18px; }
.hero-sport-in {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px;
  background: transparent; color: var(--ink); border-radius: 0; padding: 18px 0 0;
  border-top: 1px solid var(--ink);
}
.hero-sport-in::before {
  content: ""; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius);
  background: var(--soft) url("/static/hero.jpg?v=2") center / cover no-repeat;
}
.hero-sport-in h1 { margin: 0; font-size: clamp(34px, 5.2vw, 60px); line-height: 1.02; text-transform: none; letter-spacing: -.025em; max-width: 12ch; }
.hero-sport-in h1::before { content: "Refurbished electronics"; display: block; margin-bottom: 14px; font: 600 .76rem/1 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--brand-text); }
.hero-sport-in p { margin: 0; color: var(--ink-2); font-size: 1.08rem; line-height: 1.5; max-width: 38ch; }
.hero-sport-in .stage-cta { margin-top: 4px; }
@media (min-width: 760px) {
  .hero-sport { margin-top: 24px; }
  .hero-sport-in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: 1fr auto auto auto 1fr; column-gap: 56px; row-gap: 16px; padding-top: 28px; }
  .hero-sport-in::before { grid-column: 2; grid-row: 1 / 6; }
  .hero-sport-in h1 { grid-column: 1; grid-row: 2; }
  .hero-sport-in p { grid-column: 1; grid-row: 3; }
  .hero-sport-in .stage-cta { grid-column: 1; grid-row: 4; margin-top: 8px; }
}

/* category tiles: natural photos for every category (the engine shows product cut-outs for most of them) */
.tile { background: #fff; border-color: var(--line); gap: 10px; }
.tile:hover { border-color: var(--brand-text); transform: none; box-shadow: var(--shadow); }
.tile:hover .tile-ic { background-color: var(--soft); }
.tile-ic { height: auto; aspect-ratio: 4 / 3; border-radius: 7px; background: var(--soft) center / cover no-repeat; }
.tile-ic img, .tile-ic svg { display: none; }
.tile span { font-weight: 500; }
.tile small { color: var(--muted); }
.tile[href="/kategoria/telefona"] .tile-ic { background-image: url("/static/cat/telefona.jpg?v=2"); }
.tile[href="/kategoria/laptope"] .tile-ic { background-image: url("/static/cat/laptope.jpg?v=2"); }
.tile[href="/kategoria/tablete"] .tile-ic { background-image: url("/static/cat/tablete.jpg?v=2"); }
.tile[href="/kategoria/kompjutere"] .tile-ic { background-image: url("/static/cat/kompjutere.jpg?v=2"); }
.tile[href="/kategoria/monitore"] .tile-ic { background-image: url("/static/cat/monitore.jpg?v=2"); }
.tile[href="/kategoria/ora-smart"] .tile-ic { background-image: url("/static/cat/ora-smart.jpg?v=2"); }
.tile[href="/kategoria/kufje"] .tile-ic { background-image: url("/static/cat/kufje.jpg?v=2"); }
.tile[href="/kategoria/audio-altoparlante"] .tile-ic { background-image: url("/static/cat/audio-altoparlante.jpg?v=2"); }
.tile[href="/kategoria/kamera-drone"] .tile-ic { background-image: url("/static/cat/kamera-drone.jpg?v=2"); }
.tile[href="/kategoria/konsola-lojera"] .tile-ic { background-image: url("/static/cat/konsola-lojera.jpg?v=2"); }
.tile[href="/kategoria/televizore"] .tile-ic { background-image: url("/static/cat/televizore.jpg?v=2"); }
.tile[href="/kategoria/printere-skanere"] .tile-ic { background-image: url("/static/cat/printere-skanere.jpg?v=2"); }
.tile[href="/kategoria/rrjeti"] .tile-ic { background-image: url("/static/cat/rrjeti.jpg?v=2"); }
.tile[href="/kategoria/aksesore"] .tile-ic { background-image: url("/static/cat/aksesore.jpg?v=2"); }
.tile[href="/kategoria/pajisje-shtepiake"] .tile-ic { background-image: url("/static/cat/pajisje-shtepiake.jpg?v=2"); }
.tile[href="/kategoria/kujdesi-personal"] .tile-ic { background-image: url("/static/cat/kujdesi-personal.jpg?v=2"); }
.tile[href="/kategoria/vegla-elektrike"] .tile-ic { background-image: url("/static/cat/vegla-elektrike.jpg?v=2"); }
.tile[href="/kategoria/trotinete-bicikleta"] .tile-ic { background-image: url("/static/cat/trotinete-bicikleta.jpg?v=2"); }

/* section heads: thin rule instead of the accent bar */
.sec-head { border-bottom: 1px solid var(--line); padding-bottom: 10px; margin-bottom: 16px; }
.sec-head h2::before { display: none; }
.sec-head a { font-weight: 500; color: var(--brand-text); border-bottom-color: var(--brand-text); }
.sec-head a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* product cards */
.card { background: #fff; border-color: var(--line); }
.card:hover { border-color: var(--brand-text); transform: none; }
.card-img { border-bottom-color: var(--soft); }
.card h3 { font-weight: 500; color: var(--ink); }
.card-brand { color: var(--muted); font-weight: 500; }
.badge { background: var(--brand-text); letter-spacing: .05em; }
.badge.sale { background: var(--sale); }
.price b { font-weight: 600; }

/* perks strip: the engine's third perk ("original products from official distributors") does not fit a refurbished shop */
.perks > div:nth-child(3) { display: none; }
@media (min-width: 760px) { .perks { grid-template-columns: repeat(2, 1fr); } }
.perks div { background: #fff; border: 1px solid var(--line); }
.perks svg { background: var(--brand-soft); color: var(--brand-text); border-radius: 10px; }

/* listing */
.list-head { border-bottom-color: var(--line); }
.list-head h1 { padding-left: 0; }
.list-head h1::before { display: none; }
.filter-box summary { box-shadow: inset 0 0 0 1.5px var(--ink-2); font-weight: 500; }
.filters { background: #fff; border: 1px solid var(--line); }
.filters label { font-weight: 500; }
.filters input, .filters select, .checkout input, .checkout select, .checkout textarea { border-color: var(--line); }
.filters input:focus, .filters select:focus, .checkout input:focus, .checkout select:focus, .checkout textarea:focus { border-color: var(--brand-text); box-shadow: 0 0 0 3px var(--brand-soft); }
.pager a { background: #fff; }
.pager a:hover { border-color: var(--brand-text); color: var(--brand-text); }
.pager a.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.empty { background: var(--soft); }

/* product page */
.crumbs a:hover { color: var(--brand-text); }
.gallery-main, .thumb { background: #fff; border-color: var(--line); }
.thumb.on { border-color: var(--brand-text); box-shadow: 0 0 0 1px var(--brand-text); }
.pd-brand { color: var(--brand-text); font-weight: 500; }
.pd-info h1 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.1; }
.pd-price b { font-weight: 600; }
.qty { box-shadow: inset 0 0 0 1.5px var(--line); }
.pd-perks { border-top-color: var(--line); }
.pd-perks svg { color: var(--brand-text); }
.pd-desc h2 { font-size: 1.3rem; }

/* cart and checkout */
.line { border-bottom-color: var(--line); }
.line-img { background: #fff; border-color: var(--line); }
.summary { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--brand); }
.pay { background: var(--brand-soft); border-color: #cdd9cd; }
.pay svg { background: var(--brand-text); }
.link-center { color: var(--brand-text); }
.alert { background: #f6e4e1; color: #7a2a21; }

/* footer: light, thin rules */
.ftr { background: var(--soft); color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 44px; }
.ftr a:hover { color: var(--brand-text); }
.ftr h4 { color: var(--brand-text); }
.ftr ul { color: var(--ink-2); }
.ftr .logo { background: transparent; padding: 0; margin-bottom: 8px; }
.ftr .wordmark { color: var(--ink); }
.ftr .muted { color: var(--muted); }
.ftr-contact svg { color: var(--brand-text); }
.ftr-social a { border-color: var(--line); color: var(--ink); background: #fff; }
.ftr-social a:hover { border-color: var(--brand); background: var(--brand); color: #fff; }
.ftr-bottom { border-top-color: var(--line); color: var(--muted); }

.wa { background: var(--brand); }

/* closed-shop page */
.soon h1 { text-transform: none; }