.afwcbm_shop_page_style_afwcbm_shop_top_left p,
.afwcbm_shop_page_style_afwcbm_shop_top_right p,
.afwcbm_shop_page_style_afwcbm_shop_bottom_left p,
.afwcbm_shop_page_style_afwcbm_shop_bottom_right p,
.afwcbm_shop_page_style_afwcbm_shop_mid_mid p,
.afwcbm_shop_page_style_afwcbm_product_bottom_mid p{
line-height: 22px;
margin: 0 !important;
}
.afwcbm_shop_top_left img,
.afwcbm_shop_top_right img,
.afwcbm_shop_bottom_left img,
.afwcbm_shop_bottom_right img,
.afwcbm_shop_mid_mid img{
margin: unset !important;
}
.afwcbm_shop_page_style{
position: absolute;
height: auto;
box-sizing: border-box;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
-moz-transition: 0.5s;
transition: 0.5s;
overflow: hidden;
max-width: 100%;
z-index: 9;
}
.afwcbm_product_page_style{
position: absolute;
height: auto;
box-sizing: border-box;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
-moz-transition: 0.5s;
z-index: 999;
transition: 0.5s;
overflow: hidden;
max-width: 100%;
}
.afwcbm_shop_page_style img,
.afwcbm_shop_page_style p{
margin-bottom: 0px !important;
}
.afwcbm_shop_top_left{
top: 0px;
left: 0px;
transform: translate(0px, 0px);
}
.afwcbm_shop_top_mid{
top: 0px;
left: 50%;
transform: translate(-50%, 0px);
}
.afwcbm_shop_top_right{
top: 0px;
right: 0px;
transform: translate(0px, 0px);
}
.afwcbm_shop_mid_left{
top: 50%;
left: 0px;
transform: translate(0px, -50%);
}
.afwcbm_shop_mid_mid{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.afwcbm_shop_mid_right{
top: 50%;
right: 0;
transform: translate(0px, -50%);
}
.afwcbm_shop_bottom_left{
bottom: 0;
left: 0px;
transform: translate(0px, 0px);
}
.afwcbm_shop_bottom_mid{
bottom: 0;
left: 50%;
transform: translate(-50%, 0px);
}
.afwcbm_shop_bottom_right{
bottom: 0;
right: 0px;
transform: translate(0px, 0px);
}
.afwcbm_product_top_left{
top: 0px;
left: 0px;
transform: translate(0px, 0px);
}
.afwcbm_product_top_mid{
top: 0px;
left: 50%;
transform: translate(-50%, 0px);
}
.afwcbm_product_top_right{
top: 0px;
right: 0px;
transform: translate(0px, 0px);
}
.afwcbm_product_mid_left{
top: 50%;
left: 0px;
transform: translate(0px, -50%);
}
.afwcbm_product_mid_mid{
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.afwcbm_product_mid_right{
top: 50%;
right: 0;
transform: translate(0px, -50%);
}
.afwcbm_product_bottom_left{
bottom: 0;
left: 0px;
transform: translate(0px, 0px);
}
.afwcbm_product_bottom_mid{
bottom: 0;
left: 50%;
transform: translate(-50%, 0px);
}
.afwcbm_product_bottom_right{
bottom: 0;
right: 0px;
transform: translate(0px, 0px);
}
.afwcbm_product_thumbnail,
.woocommerce-product-gallery__image{
position: relative;
}
.af_bm_woocomm_overflow{
overflow: unset !important ;
}
.afwcbm_product_thumbnail p{
margin: 0 !important;
}
.image-with-text-pos{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.svg-with-text-pos{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.svg-with-text-pos-1{
position: absolute;
top: 43%;
left: 47%;
transform: translate(-50%, -50%);
}
.svg-with-text-pos-3{
position: absolute;
top: 50%;
left: 59%;
transform: translate(-50%, -50%);
}
.svg-with-text-pos-8{
position: absolute;
top: 42%;
left: 50%;
transform: translate(-50%, -50%);
}
.svg-with-text-pos-9{
position: absolute;
top: 38%;
left: 50%;
transform: translate(-50%, -50%);
}
.svg-with-text-pos-10{
position: absolute;
top: 12%;
left: 15%;
transform: rotate(45deg);
}
.svg-with-text-pos-12{
position: absolute;
top: 56%;
left: 50%;
transform: translate(-50%, -50%);
}
.svg-with-text-pos-13{
position: absolute;
top: 22%;
left: 15%;
transform: rotate(45deg);
}
.svg-with-text-pos-14{
position: absolute;
top: 13%;
left: 19%;
transform: rotate(45deg);
}
.svg-with-text-pos-p-1{
position: absolute;
top: 45%;
left: 55%;
transform: translate(-50%, -50%);
}
.svg-with-text-pos-p-3{
position: absolute;
top: 50%;
left: 59%;
transform: translate(-50%, -50%);
}
nav.storefront-product-pagination div.afwcbm_shop_page_style {
display: none !important;
}
.woocommerce-product-gallery__wrapper:hover .af_bm_woocomm_overflow{
overflow: hidden !important;
}.ukko-ta {
--bg: #FFFFFF;
--bg2: #F4F2EC;
--bg3: #ECE9E0;
--ink: #2C2C2A;
--ink2: #5F5E5A;
--ink3: #8C8A82;
--bd: rgba(44,44,42,0.14);
--bd2: rgba(44,44,42,0.28);
--green: #0F6E56;
--green-d: #04342C;
--green-mint: #9FE1CB;
--green-pale: #E1F5EE;
--green-ink: #085041;
--yellow-bg: #FFF8E1;
--yellow-border: #F9A825;
--yellow-ink: #795548;
--serif: Georgia, 'Times New Roman', serif;
--sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--rmd: 8px;
--rlg: 12px;
font-family: var(--sans);
color: var(--ink);
max-width: 560px;
min-height: 480px;
margin: 0 auto;
padding: 32px 20px;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
}
.ukko-ta *, .ukko-ta *::before, .ukko-ta *::after {
box-sizing: border-box;
} .ukko-ta__progress {
height: 4px;
background: #D3D1C7;
border-radius: 999px;
margin-bottom: 8px;
overflow: hidden;
}
.ukko-ta__progress-bar {
height: 100%;
background: var(--green);
border-radius: 999px;
width: 33.33%;
transition: width 0.4s ease;
}
.ukko-ta__step-indicator {
font-size: 12px;
color: var(--ink3);
text-align: right;
margin-bottom: 16px;
} .ukko-ta__step {
display: none;
}
.ukko-ta__step--active {
display: block;
}
.ukko-ta__title {
font-family: var(--serif);
font-size: 2em;
font-weight: 500;
margin: 0 0 4px;
text-align: center;
line-height: 1.214;
}
.ukko-ta__subtitle-top {
font-size: 12px;
color: var(--ink3);
margin: 0 0 16px;
text-align: center;
}
.ukko-ta__options {
margin-top: 16px;
} .ukko-ta__options {
display: grid;
gap: 10px;
}
.ukko-ta__options--grid2 {
grid-template-columns: 1fr 1fr;
}
.ukko-ta__options--grid4 {
grid-template-columns: repeat(5, 1fr);
} .ukko-ta__option {
background: var(--bg);
border: 1px solid var(--bd2);
border-radius: var(--rmd);
padding: 13px 15px;
font-size: 14px;
font-family: inherit;
color: var(--ink);
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
text-align: left;
transition: border-color 0.15s, background 0.15s;
line-height: 1.3;
}
.ukko-ta__option:hover {
border-color: var(--green);
background: var(--green-pale);
color: var(--green-ink);
}
.ukko-ta__option--selected {
background: var(--green-pale);
border-color: var(--green);
color: var(--green-ink);
} .ukko-ta__option--radio {
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 16px 8px;
font-size: 13px;
color: var(--green);
}
.ukko-ta__option--radio span {
color: var(--ink);
}
.ukko-ta__option--radio:hover span,
.ukko-ta__option--radio.ukko-ta__option--selected span {
color: var(--green-ink);
} .ukko-ta__checkbox-mark {
width: 18px;
height: 18px;
border: 1.5px solid var(--bd2);
border-radius: 5px;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.15s, border-color 0.15s;
}
.ukko-ta__option--selected .ukko-ta__checkbox-mark {
background: var(--green);
border-color: var(--green);
}
.ukko-ta__option--selected .ukko-ta__checkbox-mark::after {
content: '';
display: block;
width: 10px;
height: 6px;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg) translateY(-1px);
} .ukko-ta__option-icon {
width: 24px;
height: 24px;
flex: 0 0 auto;
} .ukko-ta__nav {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 20px;
}
.ukko-ta__btn {
font-family: inherit;
font-size: 14px;
font-weight: 500;
border-radius: 999px;
padding: 11px 30px;
cursor: pointer;
border: none;
transition: opacity 0.15s, background 0.15s;
}
.ukko-ta__btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.ukko-ta__btn--next,
.ukko-ta__btn--submit {
background: var(--green);
color: var(--green-pale);
}
.ukko-ta__btn--next:hover:not(:disabled),
.ukko-ta__btn--submit:hover:not(:disabled) {
background: var(--green-d);
color: #fff !important;
}
.ukko-ta__btn--back {
background: transparent;
border: 1px solid var(--green-mint);
color: var(--green-ink);
}
.ukko-ta__btn--back:hover {
border-color: var(--green);
background: var(--green-pale);
}
.ukko-ta__btn--restart {
background: transparent;
border: 1px solid var(--green-mint);
color: var(--green-ink);
}
.ukko-ta__btn--restart:hover {
border-color: var(--green);
background: var(--green-pale);
} .ukko-ta__results-eyebrow {
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--green);
margin: 0 0 4px;
text-align: center;
}
.ukko-ta__results-title {
font-family: var(--serif);
font-size: 21px;
font-weight: 500;
margin: 0 0 20px;
text-align: center;
}
.ukko-ta__results-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.ukko-ta__results-disclaimer {
font-size: 11px;
color: var(--ink3);
margin: 20px 0 0;
line-height: 1.5;
text-align: center;
} .ukko-ta__product {
border: 2px solid var(--green);
border-radius: var(--rlg);
padding: 16px;
display: flex;
gap: 14px;
align-items: flex-start;
transition: border-color 0.2s;
}
.ukko-ta__product--warning {
border-color: var(--yellow-border);
}
.ukko-ta__product-image {
width: 80px;
height: 80px;
border-radius: var(--rmd);
background: var(--bg2);
overflow: hidden;
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.ukko-ta__product-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ukko-ta__product-info {
flex: 1;
min-width: 0;
}
.ukko-ta__product-badge {
display: inline-block;
font-size: 10px;
font-weight: 500;
padding: 2px 8px;
border-radius: 999px;
margin-bottom: 4px;
}
.ukko-ta__product-badge--ok {
background: var(--green-pale);
color: var(--green-ink);
}
.ukko-ta__product-badge--warning {
background: var(--yellow-bg);
color: var(--yellow-ink);
}
.ukko-ta__product-name {
font-size: 15px;
font-weight: 500;
margin: 0 0 2px;
line-height: 1.3;
}
.ukko-ta__product-name a {
color: inherit;
text-decoration: none;
}
.ukko-ta__product-name a:hover {
text-decoration: underline;
}
.ukko-ta__product-price {
font-size: 13px;
color: var(--ink2);
margin: 0 0 8px;
}
.ukko-ta__product-price del {
opacity: 0.6;
}
.ukko-ta__product-price ins {
text-decoration: none;
font-weight: 500;
}
.ukko-ta__product-cart,
.ukko-ta__product-cart:hover,
.ukko-ta__product-cart:focus,
.ukko-ta__product-cart:active,
.ukko-ta__product-cart:visited {
display: block;
background: var(--green);
color: #fff !important;
font-weight: 500;
border-radius: 999px;
text-align: center;
padding: 9px 0;
font-size: 13px;
text-decoration: none !important;
transition: background 0.15s;
}
.ukko-ta__product-cart:hover {
background: var(--green-d);
color: #fff !important;
} .ukko-ta__product-notices {
margin-top: 8px;
display: flex;
flex-direction: column;
gap: 6px;
}
.ukko-ta__product-notice {
background: var(--yellow-bg);
border: 1px solid var(--yellow-border);
border-radius: var(--rmd);
padding: 8px 12px;
font-size: 13px;
color: var(--yellow-ink);
line-height: 1.5;
}
.ukko-ta__product-notice p {
font-size: 13px;
margin: 0;
line-height: 1.5;
}
.ukko-ta__product-notice-label {
font-weight: 600;
display: block;
margin-bottom: 2px;
} .ukko-ta__no-results {
text-align: center;
padding: 32px 16px;
color: var(--ink2);
}
.ukko-ta__no-results p {
font-size: 15px;
margin: 0 0 8px;
} .ukko-ta[data-active-step="results"] {
max-width: 1000px;
} .ukko-ta[data-active-step="results"] .ukko-ta__progress,
.ukko-ta[data-active-step="results"] .ukko-ta__step-indicator,
.ukko-ta[data-active-step="results"] .ukko-ta__title,
.ukko-ta[data-active-step="results"] .ukko-ta__subtitle-top {
display: none;
} @media (max-width: 560px) {
.ukko-ta {
padding: 20px 16px;
}
.ukko-ta__title {
font-size: 1.5em;
}
.ukko-ta__options--grid2 {
grid-template-columns: 1fr;
}
.ukko-ta__options--grid4 {
grid-template-columns: repeat(3, 1fr);
}
.ukko-ta__results-grid {
grid-template-columns: 1fr;
}
.ukko-ta__product {
flex-direction: column;
align-items: stretch;
}
.ukko-ta__product-image {
width: 100%;
height: 160px;
}
}