/* WordPress layer: things the static design did not need. Loaded last. */

/* Heading-size classes for text that looks like a heading but is not one
   (footer, cards), so the document outline stays H1 > H2 > H3. */
.h1,.h2,.h3,.h4,.h5,.h6{font-family:var(--font-family-1);margin-bottom:0}
.h1,.h2,.h3,.h4{text-wrap:balance}
.h1{font-size:90px;font-weight:700;line-height:1.1em}
.h2{font-size:64px;font-weight:700;line-height:1.2em}
.h3{font-size:36px;font-weight:700;line-height:1.3em}
.h4{font-size:24px;font-weight:700;line-height:1.3em}
.h5{font-size:21px;font-weight:600;line-height:1.3em}
.h6{font-size:16px;font-weight:600;line-height:1.3}
@media screen and (max-width:1025px){
  .h1{font-size:70px}.h2{font-size:48px}.h3{font-size:28px}.h4{font-size:21px}.h5{font-size:18px}
}
@media screen and (max-width:767px){
  .h1{font-size:50px}.h2{font-size:36px}.h3{font-size:22px}.h4{font-size:18px}.h6{font-size:14px}
}

.card-process .icon .h4{color:#fff!important}
.ok-toc .h4{margin:0 0 14px;font-size:18px}
.ok-aside-cta .h4{margin:0;color:#fff;font-size:22px}
a.ok-tag-inline{text-decoration:none}

/* Home hero: the design's CSS background becomes a real <img> (LCP). */
.ok-slide-img{background:none!important}
.ok-hero-img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover}
.ok-slide-img::before{z-index:1}
/* Stacked social pills share the widest one's width. */
@media screen and (min-width:1026px){
  .banner-home-social{display:grid;grid-template-columns:max-content;justify-content:end;align-content:center}
  .banner-home-social .social-container{width:auto}
}

/* The dedicated blog banner (added after the design export). */
.banner-inner-blog{background-image:url('../images/ok-banner-blog.jpg')}

/* Blog article: the Quick-answer label is a paragraph inside the group. */
.ok-article .ok-quick .ok-quick__label{align-self:flex-start;width:max-content;max-width:100%;margin:0;padding:6px 12px;border-radius:100px;background:var(--ok-red);color:#fff;font:600 12px/1 var(--font-family-1);letter-spacing:.06em;text-transform:uppercase}

.ok-skip{position:absolute;left:16px;top:16px;z-index:10000;background:#000;color:#fff;padding:10px 16px;border-radius:10px}

/* Services: card title links, checkout notices, the checkout forms */
.ok-svc-link{color:inherit;font:inherit;transition:color .3s}
.ok-svc-link:hover{color:#fb8275}
.ok-checkout-form{margin:0;width:100%}
.ok-checkout-form .btn{width:100%}
.ok-product__foot .ok-checkout-form,.ok-product__foot .ok-checkout-form .btn{width:auto}
.ok-checkout-notice{margin:6px 0 0;padding:12px 18px;border-radius:12px;background:#fff;color:var(--ok-red-dark);font-weight:600}
.ok-pay-note.secondary-accent{font-size:15px;color:#a3a3a3;text-align:center}
.ok-pay-note i{margin-right:6px}
.ok-pay-note a{font:inherit;text-decoration:underline}

/* Contact form */
.ok-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.ok-form-error{margin:0;padding:12px 16px;border-radius:12px;background:var(--ok-tint);color:var(--ok-red-dark);font-weight:600}

/* main.css pins every link to 16px; title links take their heading's size
   (the shop cards already do this inline in the design). */
.ok-post-feature__title a,.ok-product__title a{font:inherit}

/* Footer legal links (Privacy, Terms, Refund) wrap on narrow screens */
.footer-legalink-container{flex-wrap:wrap;row-gap:4px;column-gap:14px}
@media screen and (max-width:767px){
  .footer-legalink-container{justify-content:center;column-gap:16px}
  .footer-legalink-container .divider{display:none}
}

/* Cookie consent: a small card bottom-left on desktop, a slim bar on phones */
.ok-consent{position:fixed;left:20px;bottom:20px;z-index:9990;max-width:430px;display:flex;align-items:center;gap:14px;padding:12px 12px 12px 18px;background:#111;color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:16px;box-shadow:0 12px 32px rgba(0,0,0,.28)}
.ok-consent[hidden]{display:none}
.ok-consent__text{margin:0;color:#fff;font:400 14px/1.45 var(--font-family-2)}
.ok-consent__text a{color:#fff;font:inherit;text-decoration:underline}
.ok-consent__actions{display:flex;gap:8px;flex-shrink:0}
.ok-consent__btn{min-height:38px;padding:0 14px;border:1px solid rgba(255,255,255,.45);border-radius:100px;background:transparent;color:#fff;font:600 13px/1 var(--font-family-1);cursor:pointer}
.ok-consent__btn--accept{background:var(--ok-red);border-color:var(--ok-red)}
.ok-consent__btn:hover{border-color:#fff}
.ok-linkbtn{background:none;border:0;padding:0;cursor:pointer}
@media screen and (max-width:575px){
  .ok-consent{left:8px;right:8px;bottom:8px;max-width:none;gap:10px;padding:10px 10px 10px 14px;border-radius:12px}
  .ok-consent__text{font-size:13px;line-height:1.35}
  .ok-consent__btn{padding:0 12px}
}

/* Blog chips are links to category archives */
a.ok-chip{display:inline-flex;align-items:center;text-decoration:none}

/* Straelos surfaces sit inside the design shell untouched */
.ok-straelos{width:100%;min-width:0}
.ok-billing-row{grid-template-columns:minmax(0,1fr) auto!important}
.ok-billing-row .ok-cart-info .h5{margin:0}

/* Plain pages (Privacy Policy etc.) */
.ok-page-content{max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.ok-page-content p,.ok-page-content li{font:400 18px/1.7 var(--font-family-2);color:var(--text-color);margin:0}
.ok-page-content h2{font-size:34px;line-height:1.2;margin:14px 0 0}
.ok-page-content h3{font-size:26px;margin:10px 0 0}
.ok-page-content ul{list-style:disc;padding-left:1.4em;margin:0;display:flex;flex-direction:column;gap:8px}
.ok-page-content li::marker{color:var(--ok-red)}
.ok-page-content mark{background:#fff3b0;padding:0 4px}
.ok-page-content a[href^="tel:"]{white-space:nowrap}

/* Yoast FAQ block in articles, styled as the design accordion */
.ok-article .wp-block-yoast-faq-block{display:flex;flex-direction:column;margin-top:6px}
.ok-article .schema-faq-section{border-bottom:1px solid var(--accent-color-5)}
.ok-article .schema-faq-question{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:25px 0;font:600 21px/1.3em var(--font-family-1);color:var(--primary);cursor:pointer}
.ok-article .schema-faq-question::after{content:"";flex:0 0 auto;width:1.5em;height:1.5em;border-radius:50%;background:var(--ok-red) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="%23ffffff" viewBox="0 0 16 16"><path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4"/></svg>') center/1em no-repeat}
.ok-article .schema-faq-section.is-open .schema-faq-question::after{background-color:var(--ok-red-dark);background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="%23ffffff" viewBox="0 0 16 16"><path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8"/></svg>')}
.ok-article .schema-faq-answer{padding:0 0 22px}
.ok-js .ok-article .schema-faq-section:not(.is-open) .schema-faq-answer{display:none}

/* Core alignment and media inside post/page content */
.alignleft{float:left;margin:0 24px 16px 0}
.alignright{float:right;margin:0 0 16px 24px}
.aligncenter{display:block;margin-left:auto;margin-right:auto}
.wp-caption-text,.wp-element-caption{font-size:14px;color:var(--text-color);margin-top:8px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}