/* Icelandle theme: modelled on an iceland.co.uk product page.
   To change the typeface, edit --font (and the @font-face below if you add a font file). */
:root {
  --font: 'Mulish', 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --red: #d11c2e;
  --green: #1fa27e;
  --blue: #0060c7;
  --pink: #e6007e;
  --ink: #2b2b2b;
  --muted: #666;
  --line: #e2e2e2;
  --page: #f2f2f2;
  --yellow: #ffe900;
  --yellow-soft: #fff7bf;
}

*, p, .blue-text, .copyright, .github, .changelog-popup h2, .changelog-popup p, .changelog-popup ul,
.title, .title-iceland, .add-button, .share-button, .add-button-demo, .dle { font-family: var(--font); }

body { background: var(--page); color: var(--ink); }

/* ---------- Site header ---------- */
.site-header { display: block; background: #fff; }
.top-bar {
  max-width: 1100px; margin: 0 auto; padding: 18px 24px 16px;
  display: flex; align-items: baseline; justify-content: space-between;
}
.title { margin: 0; padding: 0; font-size: 44px; line-height: 1; letter-spacing: -1.5px; font-weight: 900; color: #1b1b1b; }
.title-iceland { color: var(--red); }
.top-tag { font-size: 16px; color: var(--muted); }

.nav-strip {
  background: #f8f8f8; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: flex; padding: 0 0 0 max(24px, calc((100% - 1100px) / 2 + 24px));
}
.nav-tab {
  background: transparent; border: 0; border-left: 1px solid var(--line); border-bottom: 3px solid transparent;
  padding: 18px 26px; font-size: 18px; color: #444; cursor: pointer; font-weight: 500;
}
.nav-tab:last-of-type { border-right: 1px solid var(--line); }
.nav-tab:hover { background: #fff; }
.nav-tab.active { background: #fff; border-bottom-color: var(--red); }
.nav-tab-hot { color: var(--pink); }

/* ---------- Page ---------- */
.page { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 26px 0 22px; font-size: 15px; color: #555; }
.breadcrumb a { color: #555; text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb span { color: #555; }
.crumb-sep { width: 7px; height: 7px; border-top: 1.5px solid #444; border-right: 1.5px solid #444; transform: rotate(45deg); margin: 0 6px 0 2px; }

/* ---------- Product card (two columns on desktop) ---------- */
.game-container { align-items: stretch; }
.info-card.product-page {
  width: 100%; padding: 0; border: 0; border-radius: 0; background: #fff;
  display: grid; grid-template-columns: minmax(280px, 34%) 1fr; min-height: 560px;
}
.product-page .product-top {
  border-right: 1px solid #f0f0f0; padding: 0; justify-content: center; align-items: center; position: relative;
}
.img-container { width: 100%; position: relative; align-items: center; justify-content: center; padding: 40px 24px; cursor: default; }
.img-product { width: 100%; max-width: 380px; height: auto; aspect-ratio: 1 / 1; object-fit: contain; border-radius: 0; margin: 0; }
.frozen-badge {
  position: absolute; top: 28px; right: 24px; width: 48px; height: 48px; border-radius: 50%;
  background: #5fb7e6; color: #fff; font-size: 30px; align-items: center; justify-content: center; line-height: 1;
}
.product-page .product-bottom { padding: 34px 40px 40px; display: flex; flex-direction: column; max-width: 640px; }

.product-info { font-size: 32px; line-height: 1.12; font-weight: 400; color: #444; margin: 0 0 22px; letter-spacing: -0.3px; }
.offer-banner { border-radius: 4px; max-width: 540px; width: 100%; margin-bottom: 18px; }
.offer-top { background: var(--yellow); padding: 12px 12px 10px; font-size: 16px; }
.offer-top b, .offer-bottom b {
  font-family: var(--font) !important; font-size: 1em !important; line-height: inherit !important;
  font-weight: 800; letter-spacing: 0; text-transform: none; font-synthesis: none;
}
.offer-bottom { background: var(--yellow-soft); padding: 9px 12px; font-size: 13px; }
.how-to { font-size: 16px; color: #555; margin-bottom: 28px; }

.price-block { max-width: 540px; width: 100%; margin: 40px 0 22px; align-items: flex-end; }
.hidden-price { font-size: 32px; font-weight: 700; color: #222; }
.per-kg { font-size: 16px; color: #555; margin-bottom: 26px; }
.new-badge { background: var(--blue); width: 225px; max-width: 100%; border-radius: 3px; font-size: 16px; padding: 5px 0; }

.enter-price { max-width: 540px; width: 100%; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.price-form { height: 52px; border-radius: 4px; border: 1px solid #c9c9c9; font-size: 18px; }
.add-button, .share-button { height: 52px; border-radius: 4px; background: var(--green); font-size: 18px; font-weight: 500; }
.add-button:disabled { opacity: 1; cursor: default; }
.share-button { max-width: 540px; }

/* ---------- Info / stats overlays (re-sized now the page isn't zoomed) ---------- */
#stats-overlay .info-card {
  width: 100%; max-width: 640px; margin: 0 auto 24px; padding: 28px 32px; border-radius: 0; border: 0;
}
.how-to-title { font-size: 22px; font-weight: 800; margin: 6px 0 10px; }
p { font-size: 15px; line-height: 1.5; font-weight: 600; }
.blue-text { font-size: 14px; font-weight: 600; }
.scoring-section { font-size: 15px; }
.add-button-demo { height: 34px; font-size: 14px; width: 110px; }
.red-demo, .orange-demo, .yellow-demo, .green-demo { height: 34px; width: 110px; font-size: 14px; }
.bonus-box { width: 260px; height: 96px; border-radius: 4px; }
.white-icelandle { font-size: 15px; }
.white-bonus { font-size: 30px; }
.title-box { width: auto; }
.score-points { color: var(--red); }

/* ---------- Footer ---------- */
#footer-container { width: min(92vw, 1052px); align-items: flex-start; }
.github { font-size: 12px; }
.copyright { font-size: 11px; text-align: left; line-height: 1.5; }
.site-footer { margin: 28px auto 0; }

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .top-bar { padding: 14px 16px 12px; }
  .title { font-size: 36px; }
  .top-tag { display: none; }
  .nav-strip { overflow-x: auto; padding-left: 0; }
  .nav-tab { padding: 14px 18px; font-size: 16px; white-space: nowrap; flex: 1; }
  .page { padding: 0 12px; }
  .breadcrumb { font-size: 12.5px; padding: 16px 0 14px; gap: 5px; }
  .info-card.product-page { grid-template-columns: 1fr; min-height: 0; }
  .product-page .product-top { border-right: 0; border-bottom: 1px solid #f0f0f0; }
  .img-container { padding: 24px 16px; }
  .img-product { max-width: 260px; }
  .frozen-badge { top: 14px; right: 14px; width: 40px; height: 40px; font-size: 24px; }
  .product-page .product-bottom { padding: 20px 16px 24px; max-width: none; }
  .product-info { font-size: 24px; }
  .price-block { margin-top: 22px; }
  #stats-overlay .info-card { padding: 20px 16px; }
}

@media (max-width: 760px) {
  .enter-price { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .add-button, .share-button { font-size: 16px; }
}
.site-footer a { color: var(--red); }


/* Header logo uses Dax Bold */
.title, .title-iceland, .title-le { font-family: 'Dax Bold', 'Nunito', system-ui, sans-serif !important; font-weight: 700 !important; letter-spacing: -0.5px !important; }