/*
Theme Name: Spectra child
Theme URI: 
Author: 
Author URI: 
Description: 
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: spectra-one
Text Domain: spectra-child
Tags: 
*/
/* === Mobilisti: napit värit + musta reuna === */
:root {
  --mobi-yellow: #ffde00;   /* Primary */
  --mobi-blue:   #3964A5;   /* Hover */
  --mobi-text:   #000000;   /* Normaali teksti */
  --mobi-white:  #ffffff;   /* Hover-teksti */
  --mobi-border: #252525;   /* Reuna */
}

/* Perustila */
button,
.wp-element-button,
.wp-block-button .wp-block-button__link,
a.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
input[type="submit"],
input[type="button"] {
  background-color: var(--mobi-yellow);
  color: var(--mobi-text);
  border: 2px solid var(--mobi-border);
  border-radius: 25px;
  font-family: 'Alexandria', sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Hover */
button:hover,
.wp-element-button:hover,
.wp-block-button .wp-block-button__link:hover,
a.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background-color: var(--mobi-blue);
  color: var(--mobi-white);
  border-color: var(--mobi-border); /* säilytä reuna */
}

/* Focus */
button:focus-visible,
.wp-element-button:focus-visible,
.wp-block-button .wp-block-button__link:focus-visible,
a.button:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.woocommerce #respond input#submit:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible {
  outline: 3px solid var(--mobi-blue);
  outline-offset: 2px;
  border-color: var(--mobi-border);
}

/* Disabled */
button:disabled,
.wp-element-button[aria-disabled="true"],
.wp-block-button .wp-block-button__link[aria-disabled="true"],
.woocommerce button.button:disabled,
.woocommerce button.button.disabled,
input[type="submit"]:disabled,
input[type="button"]:disabled {
  opacity: .6;
  cursor: not-allowed;
  border-color: var(--mobi-border);
}
/* Sticky Header (Template Part: Header, class="mobla-header") */
.wp-block-template-part.mobla-header{
  position: sticky;
  top: 0;
  z-index: 10000;
  background: var(--wp--preset--color--background, #fff);
  box-shadow: 0 1px 0 rgba(0,0,0,.06); /* kevyt erotus, halutessa pois */
}

/* Admin-palkin offset kirjautuneena */
@media (min-width:783px){
  body.admin-bar .wp-block-template-part.mobla-header{ top:32px; }
}
@media (max-width:782px){
  body.admin-bar .wp-block-template-part.mobla-header{ top:46px; }
}

/* Poista rako heti headerin alta */
.wp-site-blocks > .wp-block-template-part.mobla-header + *{
  margin-top: 0 !important;
}

/* Full-bleed tausta + 1440px sisältö: käytä sisäkontille luokkaa header-inner */
.wp-block-template-part.mobla-header .header-inner{
  max-width: 1440px;                     /* tai var(--wp--style--global--wide-size) */
  margin-inline: auto;
  padding-inline: clamp(12px, 2.5vw, 24px);
}

/* Stickyä estävät jutut pois varmuudeksi */
.wp-site-blocks, .wp-site-blocks > *{ overflow: visible !important; }

.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 10000;
}

/*Fontit */

.otsikko {
  font-size: clamp(2rem, 2vw + 1rem, 4rem);
  font-weight: 600;	
}
h1 {
  font-size: clamp(1.5rem, 2vw + 1rem, 2.5rem);
  font-weight: 600;	
}
body {
  font-size: clamp(0.95rem, 0.25vw + 0.9rem, 1.0rem);
  line-height: 1.6;
}
/* Tästä alkaa Woocommerce tyylit*/

/* Quantity nappula */

.wc-block-components-quantity-selector::after {
	border: 0;

}
.wc-block-components-quantity-selector {
	background-color:#ffde00 !important;
	border-radius: 25px;
	border-width: 2px;
	border-style: solid;
}
.wc-block-components-form.wc-block-checkout__form {
  border: 2px solid #eee;
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 30px;
  background-color: #ffffff;
}
.wp-block-woocommerce-checkout-order-summary-block {
  border: 2px solid #eee;
  border-radius: 10px;
  padding: 24px;
  margin-bottom: 30px;
  background-color: #ffffff;
}

/* Pyöristää product gallerian pääkuvan ja thumbnailit */
.woocommerce div.product div.woocommerce-product-gallery img {
  border-radius: 12px; /* säädä arvoa esim. 8px, 16px */
}

/* kortit */
/* Korttirakenne */
.wc-block-product {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 420px;     /* säädä tarpeen mukaan */
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 0px;
  background: #fff;
}

/* Kortin sisältö */
.wc-block-product .wc-block-components-product-image {
  flex-shrink: 0;
}

.wc-block-product .wc-block-components-product-title,
.wc-block-product .wc-block-components-product-price {
  margin: 12px 0 6px;
}

/* CTA-painike aina kortin alaosaan */
.wc-block-product .wp-block-button {
  margin-top: auto;   /* työntää napin alas */
}


/* Tuotteet (keskiosa) on ainoa joka scrollaa */
.mini-cart-items {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important; /* iOS */
  min-height: 0 !important;
  padding-bottom:100px;
  
  
}
.mini-cart-contents {
	margin-top:108px;
}
/* footer pysyy alhaalla */
.mini-cart-footer {
  position: sticky;
  bottom: 0;
  background: #fff;
  z-index: 1;
}
.mini-cart-title {
	padding-top: 20px;
}
/* --- Menu perus, piilossa --- */
.wp-block-navigation__responsive-container {
  position: fixed !important;
  top: 0;
  left: 100%;                 /* alkaa ulkona */
  width: 100% !important;
  height: 100vh;
  background: #fff;
  z-index: 100001;
  display: none;              /* oletuksena piilossa */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  overflow-y: auto;
}

/* --- Kun auki --- */
.wp-block-navigation__responsive-container.is-menu-open {
  display: flex !important;
  animation: slideIn 0.6s ease forwards;
  
}

/* --- Overlay --- */
body.has-modal-open::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(2px);
  z-index: 100000;
}

/* --- Linkit --- */
.wp-block-navigation__responsive-container-content {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  align-items: center;
}

.wp-block-navigation__responsive-container-content a {
  font-size: 2rem;
  font-weight: 700;
  color: #111;
  text-decoration: none;
  transition: color 0.2s ease;
}

.wp-block-navigation__responsive-container-content a:hover {
  color: #ffde00;
}

/* --- Sulkunappi --- */
.wp-block-navigation__responsive-container-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: none;
  border: none;
  font-size: 2rem;
  color: #111;
  cursor: pointer;
  z-index: 100002;
}

.wp-block-navigation__responsive-container-close:hover {
  color: #ffde00;
}

/* --- Animaatio vain avaamiseen --- */
@keyframes slideIn {
  from { left: 100%; }
  to   { left: 0; }
}

/* Kategoria näkymän style etusivulla */

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
}

.category-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #eee;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.category-img img {
  width: 100%;
  height: auto;
  display: block;
}

.category-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  text-align: center;
  padding: 20px;
}

.category-content h3 {
  font-size: 20px;
  margin: 10px 0 20px;
  color: #252525;
  flex-grow: 1; /* pitää nappien paikat yhtenäisinä */
}

.category-button {
  display: inline-block;
  background: #ffde00;
  color: #252525;
  padding: 10px 20px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.3s ease;
  
}

.category-button:hover {
  background: #f5cf00;
}
/* Make product list items equal height */
.wc-block-product-template li.wc-block-product {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Push the button wrapper to the bottom */
.wc-block-product .wp-block-uagb-buttons {
    margin-top: auto !important;
}

/* Keep image, title, and price from growing */
.wc-block-product .wc-block-components-product-image,
.wc-block-product .wp-block-post-title,
.wc-block-product .wp-block-woocommerce-product-price {
    flex-shrink: 0 !important;
}

.list {
	font-size:16px;
}
/* Kortti */
.badge-parent{
  position: relative;
  overflow: visible;
  padding-top: clamp(40px, 6vw, 72px); /* jätä tilaa kulman pallolle */
}

/* Tarjouspallo: sijoittelu ja mitat ulkokuoreen */
.badge-parent .offer-badge{
  position: absolute;
  top: -12px; right: -12px;
  inline-size: clamp(68px, 7.5vw, 104px) !important; /* leveys */
  aspect-ratio: 1 / 1;   /* ympyrä */
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  transform: rotate(-12deg);
  z-index: 20;
}

/* Spectran inner-wrapiin varsinainen pallo + tyyli */
.badge-parent .offer-badge,
.badge-parent .offer-badge > .uagb-container__inner-wrap{
  border-radius: 9999px !important;
  overflow: hidden;
}
/* Kuva-alue, johon badge kiinnitetään */
.badge-anchor{
  position: relative;
  overflow: hidden;      /* jos haluat että pallo ei roiku ulos kuvasta */
  border-radius: inherit;/* jos kuvalla on pyöristys, peritään se */
}

/* Badge kuvan päällä */
.badge-anchor .offer-badge{
  position: absolute;
  top: 8px;               /* säädä */
  right: 8px;             /* säädä */
  inline-size: clamp(64px, 7vw, 96px);
  aspect-ratio: 1 / 1;
  border-radius: 9999px;

  display:flex; align-items:center; justify-content:center;
  padding:.35em; box-sizing:border-box;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 40%), #ffd600; /* esimerkin keltainen */
  color:#111; font-weight:800; line-height:1; text-align:center;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  z-index: 3;            /* kuvan yläpuolelle */
}

/* Nollataan tekstin marginaalit pallossa */
.badge-anchor .offer-badge h1,
.badge-anchor .offer-badge h2,
.badge-anchor .offer-badge h3,
.badge-anchor .offer-badge p{ margin:0; line-height:1; font-size: clamp(12px, 1.6vw, 16px); }
.badge-anchor .offer-badge small{ display:block; font-size:.62em; opacity:.9; }

.badge-parent .offer-badge > .uagb-container__inner-wrap{
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  padding: .35em !important; box-sizing: border-box;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.22), transparent 40%), #e11d48;
  color:#fff; font-weight:800; line-height:1; text-align:center;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}

/* Tekstin oletusmarginaalien nollaus + koko */
.badge-parent .offer-badge h1,
.badge-parent .offer-badge h2,
.badge-parent .offer-badge h3,
.badge-parent .offer-badge p{ margin:0; line-height:1; font-size: clamp(12px, 1.7vw, 18px); }
.badge-parent .offer-badge small{ display:block; font-size:.6em; opacity:.9; }

.mobi-icon {
  display: block;
  margin: 0 auto 0.4em auto; /* keskitys + väli otsikon yläpuolelle */
  width: 36px;
  height: 36px;
  fill: currentColor;
}

/* Uusien mobi-ikonien koko + asettelu */
.uagb-block-94518290 .mobi-icon {
  width: 36px;
  height: 36px;
  display: block;           /* oma rivinsä otsikon yläpuolelle */
  margin: 0 auto 8px;       /* keskitys + väli otsikkoon */
  fill: currentColor;
}

/* Jos haluat ikonit tekstin vasemmalle puolelle, käytä tätä sen sijaan: */
/*
.uagb-block-94518290 .uagb-heading-text {
  display: inline-flex;
  align-items: center;
  gap: .5em;
}
.uagb-block-94518290 .mobi-icon {
  width: 24px; height: 24px;
  display: inline; margin: 0;
}
*/
body.woocommerce-account svg.mobi-icon use[href="#icon-user"] {
  display: none !important;
}

/* --- KONTTI, FLAT --- */
.fluent_form_3{
  max-width: 720px;
  margin: 0 auto;
  background: transparent;      /* ei korttia */
  border: none;                  /* ei kehystä */
  border-radius: 0;
  box-shadow: none;              /* ei varjoa */
  padding: 0;                    /* hallitse välejä lohkoilla */
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

/* Rivivälit pois – hallitaan itse marginaaleilla */
.fluent_form_3 .ff-el-group{ margin:0 0 14px 0; }

/* --- INPUT (flat) --- */
.fluent_form_3 input[type="email"],
.fluent_form_3 input.ff-el-form-control[type="text"]{
  display:block;
  width:100%;
  padding:16px 20px;
  border-radius:32px;
  border:2px solid var(--mobi-blue);
  background:#fff !important;          /* valkoinen tausta, ei teeman/darkin yliajoa */
  color:var(--mobi-dark) !important;
  font-size:18px;
  line-height:1.3;
  font-weight:400;                      /* ohentaa fontin */
  outline:none;
  box-shadow:none;                      /* ei varjoa */
  transition: border-color .15s ease;   /* vain rajaväri */
}
.fluent_form_3 input[type="email"]::placeholder{ color:#6b7280; }
.fluent_form_3 input[type="email"]:focus,
.fluent_form_3 input.ff-el-form-control[type="text"]:focus{
  border-color:var(--mobi-blue);        /* ei lisäefektejä */
  box-shadow:none;
}

/* Label piiloon jos käytät placeholderia */
.fluent_form_3 .ff-el-input--label{
  position:absolute !important;
  width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
}

/* --- NAPPI KESKELLE, FLAT --- */
.fluent_form_3 .ff_submit_btn_wrapper,
.fluent_form_3 .ff-button-wrapper,
.fluent_form_3 .ff_btn_wrapper,
.fluent_form_3 .ff-submit-btn-wrapper{
  width:100%;
  text-align:center;
}

.fluent_form_3 .ff-btn-submit,
.fluent_form_3 button[type="submit"]{
  display:inline-block;
  margin-top:8px;
  padding:14px 28px;
  border-radius:9999px;
  border:2px solid #232323;       /* ohut tumma kehys kuten mockupissa */
  background:var(--mobi-yellow);
  color:var(--mobi-dark);
  font-size:20px;
  line-height:1;
  font-weight:500;                 /* vähemmän paksu */
  cursor:pointer;
  box-shadow:none;                 /* ei varjoa */
  transition: filter .12s ease;    /* kevyt hover ilman liikettä */
}
.fluent_form_3 .ff-btn-submit:hover{ filter: brightness(0.98); }
.fluent_form_3 .ff-btn-submit:active{ filter: brightness(0.95); }

/* --- VIRHEET JA ILMOITUKSET, FLAT --- */
.fluent_form_3 .ff-el-is-error input{
  border-color:#d33 !important;
  box-shadow:none !important;
}
.fluent_form_3 .ff-el-input-error,
.fluent_form_3 .text-danger{
  color:#b50000; margin-top:8px; font-size:13px;
}
.fluent_form_3 .ff_message_success,
.fluent_form_3 .ff-message-success{
  background:#f7fbff;
  border:1px solid var(--mobi-blue);
  color:var(--mobi-dark);
  padding:12px 14px;
  border-radius:12px;
  margin-top:14px;
}

/* --- Poistaa Fluent Formin mahdolliset oletusvarjot/taustat --- */
.fluent_form_3 input,
.fluent_form_3 button{ background-clip: padding-box; box-shadow:none !important; }

.wc-block-cart-link .wc-block-mini-cart__icon {
  height: 75px;
}

/* Perusikonit */
    .mobi-icon { width:1.2em; height:1.2em; fill:currentColor; vertical-align:middle; }
    .mobi-icon--space { margin-right:.4em; }

    /* USP-lohkon isot ikonit – kohdistus pysyvään luokkaan (EI Spectran ID:hen) */
    .usp-icons-scope .mobi-icon {
      width: 36px;
      height: 36px;
      display: block;       /* oma rivi otsikon yläpuolelle */
      margin: 0 auto 8px;   /* keskitys + väli otsikkoon */
      fill: currentColor;
    }

    /* Jos haluat pitää ikonit vasemmalla puolella samassa rivissä tekstin kanssa:
    .usp-icons-scope .uagb-heading-text { display:inline-flex; align-items:center; gap:.5em; }
    .usp-icons-scope .mobi-icon { width:24px; height:24px; display:inline; margin:0; }
    */

    /* Esimerkki: piilota user-ikoni varsinaisella My Account -sivulla */
    body.woocommerce-account svg.mobi-icon use[href="#icon-user"] { display:none !important; }