/*
Theme Name: PurePump
Template: storefront
Description: PurePump — svart/vit minimalism, Questrial/Open Sans. Barntema till Storefront.
Version: 1.0.0
*/

/* ---------- Typsnitt (självhostade) ---------- */
@font-face {
  font-family: 'Questrial';
  src: url('fonts/Questrial-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('fonts/OpenSans-400.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --pp-black: #111111;
  --pp-white: #ffffff;
  --pp-grey: #f5f5f5;
  --pp-grey-mid: #767676;
  --pp-accent: #111111;
}

/* ---------- Bas ---------- */
body {
  font-family: 'Questrial', sans-serif;
  color: var(--pp-black);
  background: var(--pp-white);
}
h1, h2, h3, h4, h5, h6 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--pp-black);
}
a { color: var(--pp-black); }
a:hover { color: #000; }

/* ---------- Annonsrad (rullande marquee som gamla sajten) ---------- */
.pp-announce {
  background: var(--pp-black);
  color: var(--pp-white);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 9px 0;
  overflow: hidden;
  white-space: nowrap;
}
.pp-announce__track {
  display: inline-block;
  padding-left: 100%;
  animation: pp-marquee 28s linear infinite;
}
.pp-announce__track span { margin: 0 28px; }
.pp-announce strong { color: var(--pp-white); }
@keyframes pp-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* ---------- Header ---------- */
.site-header,
.storefront-primary-navigation {
  background: var(--pp-white);
}
.site-header { border-bottom: 1px solid #e6e6e6; padding-top: 0; }
.site-branding h1 a, .site-branding .site-title a {
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--pp-black);
  font-size: 1.6em;
}
.site-description { display: none; }
.main-navigation ul li a {
  font-family: 'Open Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 13px;
  color: var(--pp-black);
}
.main-navigation ul li a:hover { color: #000; opacity: .65; }
.site-header-cart .cart-contents { color: var(--pp-black); }

/* ---------- Knappar ---------- */
.button, button, input[type="submit"],
.woocommerce #respond input#submit, .woocommerce a.button,
.woocommerce button.button, .woocommerce input.button,
.wp-block-button__link {
  background: var(--pp-black) !important;
  color: var(--pp-white) !important;
  border: 1px solid var(--pp-black) !important;
  border-radius: 0 !important;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 13px;
  padding: 12px 26px;
}
.button:hover, .woocommerce a.button:hover {
  background: var(--pp-white) !important;
  color: var(--pp-black) !important;
}
.button.alt, .woocommerce a.button.alt, .single_add_to_cart_button {
  background: var(--pp-black) !important;
  color: var(--pp-white) !important;
}

/* ---------- Hero: helbred produktbanner (som gamla sajten, ingen overlay) ---------- */
.pp-banner { position: relative; margin: 0; display: block; width: 100%; line-height: 0; }
.pp-banner img { display: block; width: 100%; height: auto; }
.pp-banner__badge {
  position: absolute; top: 50%; right: 6%; transform: translateY(-50%);
  color: var(--pp-white); font-family: 'Open Sans', sans-serif;
  letter-spacing: .28em; text-transform: uppercase; font-size: clamp(.9rem, 1.8vw, 1.3rem);
  line-height: 1; text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
.pp-banner__cta {
  position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%);
}
@media (max-width: 768px) {
  .pp-banner__badge { right: 50%; transform: translate(50%,-50%); top: auto; bottom: 12%; }
}

/* ---------- Sektioner ---------- */
.pp-section { max-width: 1100px; margin: 0 auto; padding: 56px 20px; }
.pp-section--grey { background: var(--pp-grey); max-width: none; }
.pp-section--grey > .pp-inner { max-width: 1100px; margin: 0 auto; padding: 56px 20px; }
.pp-section h2 { text-align: center; font-size: clamp(1.3rem, 3vw, 2rem); margin-bottom: 1.4em; }

/* USP-rad */
.pp-usp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
.pp-usp div strong {
  display: block; font-family: 'Open Sans', sans-serif; text-transform: uppercase;
  letter-spacing: .1em; font-size: 14px; margin-bottom: 6px;
}
.pp-usp div span { color: var(--pp-grey-mid); font-size: 14px; }

/* Recensioner */
.pp-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pp-review {
  background: var(--pp-white); border: 1px solid #e6e6e6; padding: 26px;
  font-size: 15px; line-height: 1.6;
}
.pp-review .pp-stars { color: var(--pp-black); letter-spacing: .2em; margin-bottom: 10px; font-size: 14px; }

/* Om-blurb */
.pp-about { text-align: center; max-width: 720px; margin: 0 auto; }
.pp-about p { font-size: 1.05rem; line-height: 1.7; color: #333; }

/* ---------- WooCommerce-grid ---------- */
ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Open Sans', sans-serif; text-transform: uppercase;
  letter-spacing: .06em; font-size: .95rem;
}
ul.products li.product .price { color: var(--pp-black); font-weight: 700; }
ul.products li.product .price del { color: var(--pp-grey-mid); font-weight: 400; }
ul.products li.product .price ins { text-decoration: none; }
.onsale {
  background: var(--pp-black) !important; color: var(--pp-white) !important;
  border-radius: 0 !important; text-transform: uppercase; letter-spacing: .08em;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--pp-black); color: #cfcfcf; }
.site-footer a { color: var(--pp-white); }
.pp-footer { max-width: 1100px; margin: 0 auto; padding: 40px 20px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; font-size: 14px; }
.pp-footer h4 { color: var(--pp-white); font-size: 13px; margin-bottom: 12px; }
.pp-footer ul { list-style: none; margin: 0; padding: 0; }
.pp-footer ul li { margin-bottom: 8px; }
.pp-footer--legal { text-align: center; border-top: 1px solid #2c2c2c; padding: 18px 20px; font-size: 12px; color: #9a9a9a; }

/* ---------- Mobil ---------- */
@media (max-width: 768px) {
  .pp-usp, .pp-reviews, .pp-footer { grid-template-columns: 1fr; }
  .pp-section { padding: 40px 16px; }
}