/* Oulusa – headerin ja footerin taustat */

.page-header,
.page-header .panel.wrapper {
    background-color: #e9edef !important; /* tumma oulusa-sävy */
}

// #e9edef

.page-header a,
.page-header .header.content,
.page-header .header.content a {
    color: #000000 !important; /* vaalea teksti */
}

.page-header a:hover {
    color: #000000 !important;
}

/* Footer tummemmaksi */
.page-footer {
    background-color: #e9edef !important;  /* sama kuin header */
    color: #ffffff !important;             /* vaalea tekstiväri */
}

.page-footer a {
    color: #000000 !important;             /* turkoosit linkit */
}

.page-footer a:hover {
    color: #7dd3fc !important;
}

/* Footerin ylärivi */
.page-footer .footer.content,
.page-footer .footer.content a {
    color: #000000 !important;
}

/* Breeze saattaa lisätä omia taustoja → poistetaan ne */
.breeze .page-footer .copyright,
.breeze .page-footer .footer-primary {
    background: transparent !important;
}


/* Add to Cart button -> grey */
.action.primary.tocart,
.action.tocart.primary,
button.action.tocart.primary {
  background: #808080 !important;
  border-color: #808080 !important;
  color: #fff !important;
}

/* Hover */
.action.primary.tocart:hover,
.action.tocart.primary:hover {
  background: #666 !important;
  border-color: #666 !important;
}

/* Focus*/
.action.primary.tocart:focus,
.action.tocart.primary:focus {
  outline: 2px solid #444;
  outline-offset: 2px;
}


/* Siirry kassalle / Proceed to Checkout -> grey */
.action.primary.checkout,
.action.checkout.primary,
.checkout-methods-items .action.primary.checkout,
.minicart-wrapper .action.primary.checkout {
  background: #808080 !important;
  border-color: #808080 !important;
  color: #fff !important;
}

/* Hover */
.action.primary.checkout:hover,
.action.checkout.primary:hover,
.checkout-methods-items .action.primary.checkout:hover,
.minicart-wrapper .action.primary.checkout:hover {
  background: #666 !important;
  border-color: #666 !important;
}

/* =========================================================
   Breeze / Magento 2 – Button color pack (GREY)
   Affects: Add to Cart, Proceed to Checkout, Update Cart,
   Continue Shopping, (optional) Buy Now, etc.
   ========================================================= */

/* Base (grey) for the main commerce CTAs */
.action.primary.tocart,
.action.tocart.primary,
button.action.tocart.primary,
.action.primary.checkout,
.action.checkout.primary,
.checkout-methods-items .action.primary.checkout,
.minicart-wrapper .action.primary.checkout,
a.action.checkout,
.cart.main.actions .action.update,
.cart.main.actions .action.clear,
.cart.main.actions .action.continue,
.action.primary,
button.action.primary {
  background: #808080 !important;
  border-color: #808080 !important;
  color: #fff !important;
}

/* Hover */
.action.primary.tocart:hover,
.action.tocart.primary:hover,
.action.primary.checkout:hover,
.action.checkout.primary:hover,
.checkout-methods-items .action.primary.checkout:hover,
.minicart-wrapper .action.primary.checkout:hover,
a.action.checkout:hover,
.cart.main.actions .action.update:hover,
.cart.main.actions .action.clear:hover,
.cart.main.actions .action.continue:hover,
.action.primary:hover,
button.action.primary:hover {
  background: #666666 !important;
  border-color: #666666 !important;
  color: #fff !important;
}

/* Active (press) */
.action.primary.tocart:active,
.action.tocart.primary:active,
.action.primary.checkout:active,
.action.checkout.primary:active,
a.action.checkout:active,
.cart.main.actions .action.update:active,
.cart.main.actions .action.clear:active,
.cart.main.actions .action.continue:active,
.action.primary:active,
button.action.primary:active {
  background: #5a5a5a !important;
  border-color: #5a5a5a !important;
}

/* Keyboard focus ring (accessibility) */
.action.primary.tocart:focus-visible,
.action.tocart.primary:focus-visible,
.action.primary.checkout:focus-visible,
.action.checkout.primary:focus-visible,
a.action.checkout:focus-visible,
.cart.main.actions .action.update:focus-visible,
.cart.main.actions .action.clear:focus-visible,
.cart.main.actions .action.continue:focus-visible,
.action.primary:focus-visible,
button.action.primary:focus-visible {
  outline: 2px solid #444444;
  outline-offset: 2px;
}

/* Disabled states */
.action.primary.tocart[disabled],
.action.tocart.primary[disabled],
.action.primary.checkout[disabled],
.action.checkout.primary[disabled],
a.action.checkout.disabled,
.cart.main.actions .action.update[disabled],
.cart.main.actions .action.clear[disabled],
.action.primary[disabled],
button.action.primary[disabled],
.action.primary.disabled,
button.action.primary.disabled {
  background: #bdbdbd !important;
  border-color: #bdbdbd !important;
  color: #f7f7f7 !important;
  cursor: not-allowed;
  opacity: 1; /* keep consistent look */
}

/* Optional: secondary buttons (if you want them also greyish but lighter)
   Comment OUT if you want secondary to keep theme default. */
.action.secondary,
button.action.secondary {
  background: #d0d0d0 !important;
  border-color: #d0d0d0 !important;
  color: #111 !important;
}
.action.secondary:hover,
button.action.secondary:hover {
  background: #c2c2c2 !important;
  border-color: #c2c2c2 !important;
}
.action.secondary:focus-visible,
button.action.secondary:focus-visible {
  outline: 2px solid #777777;
  outline-offset: 2px;
}




/* =========================
   LINKS -> grey like buttons
   ========================= */
a,
a:visited,
.link,
.action.view,
.action.more {
  color: #808080;
  text-decoration: none;
}

a:hover,
a:focus,
a:active,
.link:hover {
  color: #666666;
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid #444444;
  outline-offset: 2px;
}

/* =========================
   MINICART COUNTER BUBBLE
   ========================= */
.minicart-wrapper .action.showcart .counter.qty,
.minicart-wrapper .action.showcart .counter-number,
.header .minicart-wrapper .counter.qty {
  background: #808080 !important;
  color: #ffffff !important;
  border: 1px solid #808080 !important;
}

/* jos bubble on pyöreä ja haluat varmistaa muodon */
.minicart-wrapper .action.showcart .counter.qty {
  border-radius: 999px;
}

/* =========================
   HEADER ICONS (optional)
   ========================= */
.minicart-wrapper .action.showcart,
.minicart-wrapper .action.showcart:visited,
.header .minicart-wrapper a,
.header a {
  color: #808080;
}

.minicart-wrapper .action.showcart:hover,
.header a:hover {
  color: #666666;
}