/*
Theme Name: SKT Laboratory
Theme URI: https://www.sktthemes.org/shop/skt-laboratory/
Author: sonalsinha21
Author URI: https://wordpress.org/themes/author/sonalsinha21/
Description: SKT Laboratory is a responsive WordPress theme. It is designed for research centers, testing facilities, diagnostic centers, scientific institutes, and analytical laboratories. It features a professional layout that helps showcase services, equipment, research projects, certifications, and expert teams. WooCommerce compatibility allows online bookings and service sales. SEO-friendly coding helps improve search visibility, while fast loading performance enhances user experience. SKT Laboratory is ideal for healthcare, biotechnology, and scientific organizations. Documentation : https://www.sktthemesdemo.net/documentation/skt-glass-doc/ 
Template: skt-glass
Version: 1.0
Requires at least: 5.6
Tested up to: 7.0
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: skt-laboratory
Tags: two-columns, right-sidebar, full-width-template, custom-background, custom-colors, custom-menu, sticky-post, theme-options, threaded-comments, featured-images, footer-widgets, translation-ready, rtl-language-support, custom-logo, editor-style, custom-header, blog, e-commerce

SKT Laboratory is a child theme of SKT Glass. SKT Glass is based on Underscores, which is distributed under the terms of the GNU GPL v2 or later.

SKT Laboratory WordPress Theme, Copyright 2026 SKT Themes (sktthemes.org)
SKT Laboratory is distributed under the terms of the GNU GPL v2 or later.
*/

/* ==========================================================================
   TABLE OF CONTENTS
   01. Design Tokens & Reset
   02. Typography
   03. Layout (container, content, sidebar)
   04. Header & Navigation
   05. Inner Page Banner
   06. Buttons & Links
   07. Forms & Inputs
   08. Blog (lists, single post, post meta)
   09. Pagination & Post Navigation
   10. Sidebar & Widgets
   11. Comments
   12. Footer & Copyright
   13. Block Editor / Gutenberg
   14. WooCommerce essentials
   15. Tables, Code, Blockquote
   16. Accessibility & Utilities
   17. RTL
   ========================================================================== */
   
:root {
	--sps-skin: #3368c6;
    --sps-paper: #f7f2ea;
    --sps-paper-2: #f2f2f2;
    --sps-surface: #ffffff;
    --sps-surface-soft: #fcfcfc;
    --sps-ink: #2a241f;
    --sps-ink-soft: #4a4138;
    --sps-text: #4a4138;
    --sps-text-dark: #2a241f;
    --sps-muted: #8f8478;
    --sps-text-invert: #fffaf3;
	--sps-text-black: #000000;
	--sps-text-white: #ffffff;
	--sps-text-meta: #f4f4f4;
    --sps-accent: #3368c6;         
    --sps-accent-deep: #3368c6;
    --sps-accent-soft: #f6dccf;
    --sps-accent-tint: #cfe0ff;
    --sps-secondary: #3368c6;      
    --sps-secondary-deep: #245d51;
    --sps-honey: #e6a93c;           
	--sps-lights: #666666;
    --sps-line: #e3e3e3;
	--sps-line-header: #FFFFFF33;
    --sps-line-strong: #cecccc;
    --sps-footer-bg: #221d18;
    --sps-footer-bg-2: #2b251f;
    --sps-text-footer: #ffffff;
    --sps-footer-heading: #ffffff;
    --sps-footer-line: rgba(255, 250, 243, 0.12);
    --sps-copyright-bg: #244f9d;
	--sps-button-bg: #a0ce4e;
	--sps-footerlight-bg: #54c1c4;
    --sps-icon-size: 46px;
    --sps-radius-sm: 10px;
    --sps-radius: 16px;
    --sps-radius-lg: 14px;
    --sps-radius-pill: 6px;
    --sps-shadow-xs: 0 2px 6px rgba(42, 36, 31, 0.06);
    --sps-shadow-sm: 0 8px 22px -10px rgba(42, 36, 31, 0.18);
    --sps-shadow: 0 18px 44px -18px rgba(42, 36, 31, 0.26);
    --sps-shadow-lg: 0 34px 70px -28px rgba(42, 36, 31, 0.34);
    --sps-ring: 0 0 0 4px rgba(224, 96, 60, 0.20);
    --sps-border-w: 1px;
    --sps-transition: 0.28s cubic-bezier(0.22, 0.61, 0.25, 1);
    --sps-container: 1200px;
    --sps-gap: 42px;
    --sps-font-body: "Avenir Next", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, Arial, sans-serif;
    --sps-font-heading: "Poppins";
    --sps-font-display: var(--sps-font-heading);
    --sps-font-menu: var(--sps-font-body);
    --sps-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	--sps-font-footer-heading: "Poppins";
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: var(--sps-surface);
    color: var(--sps-text);
    font-family: var(--sps-font-body);
    font-size: 16.5px;
    line-height: 1.72;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
}

iframe { max-width: 100%; }

hr {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sps-line-strong), transparent);
    margin: 40px 0;
}

::selection {
    background-color: var(--sps-accent);
    color: var(--sps-text-invert);
}

/* ==========================================================================
   02. Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--sps-font-heading);
    color: var(--sps-text-dark);
    font-weight: 600;
    line-height: 1.16;
    letter-spacing: -0.01em;
    margin: 0 0 18px;
    text-wrap: balance;
}

h1 { font-size: clamp(34px, 4.6vw, 50px); }
h2 { font-size: clamp(28px, 3.4vw, 38px); }
h3 { font-size: clamp(23px, 2.4vw, 28px); }
h4 { font-size: 22px; }
h5 { font-size: 19px; }
h6 {
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    font-family: var(--sps-font-body);
    color: var(--sps-accent-deep);
}

p { margin: 0 0 20px; }

a {
    color: var(--sps-skin);
    text-decoration: none;
    transition: color var(--sps-transition), background-size var(--sps-transition);
}

a:hover,
a:focus {
    color: var(--sps-accent-deep);
}

a:focus-visible {
    outline: 2px solid var(--sps-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

strong, b { font-weight: 700; color: var(--sps-text-dark); }
em, i { font-style: italic; }
small { font-size: 0.82em; color: var(--sps-muted); }

/* ==========================================================================
   03. Layout
   ========================================================================== */
.container {
    width: 100%;
    max-width: var(--sps-container);
    margin: 0 auto;
    padding: 0;
    position: relative;
}

#main-set { position: relative; z-index: 999; }

#content_navigator { width: 100%; }

body.home .page_content{
    padding: 30px 0 60px;
}

.page_content {
    padding: 45px 0 60px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
	gap: 0 25px;
}

body.tax-product_cat .page_content { display: inherit; }

.site-main {
    flex: 1 1 0;
    min-width: 0;
    float: none;
    width: auto;
}

#sitefull,
.full-main {
    flex: 0 1 100%;
    width: 100% !important;
    float: none;
}

.clear { clear: both; }

/* ==========================================================================
   04. Header & Navigation
   ========================================================================== */

/* ---------- Top bar ---------- */
.header-topbar {
    width: 100%;
    font-family: var(--sps-font-body);
    font-size: 15px;
	background-color:#1a1a1a;
	position: relative;
	z-index: 99;
	overflow: hidden;
}

.header-topbar .container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    max-width: var(--sps-container);
    margin: 0 auto;
	min-height: 50px;
    padding: 0;    
    color: var(--sps-text-invert);
    box-shadow: var(--sps-shadow-sm);
}

.header-topbar .left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px;
	position: relative;
	margin:0 0 0 240px;
}

.header-topbar .left span:last-child {
    border-right: none !important;
}

.header-topbar .adrtp,
.header-topbar .phntp,
.header-topbar .emltp {
    display: inline-flex;
    align-items: center;
    color: var(--sps-text-invert);
	font-family: var(--sps-font-display);
    font-size: 17px;
    line-height: 1.2;
    float: none;
	border-right: solid 1px #313131;
	padding:15px 30px 15px 0;
}

.header-topbar .adrtp img,
.header-topbar .phntp img,
.header-topbar .emltp img {
    margin-right: 8px;
    vertical-align: middle;
    max-height: 15px;
    width: auto; 
}

.header-topbar .emltp a {
    color: var(--sps-text-invert);
    background: none;
    display: inline-flex;
    align-items: center;
    transition: opacity var(--sps-transition);
}

.header-topbar .emltp a:hover {color:#fda700;}

.header-topbar .right {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.social-icons {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
}

.social-icons a {
    display: inline-block;
    width: 55px;
    height: 55px;
    border-radius: 100%;
    background-color: #fda700;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999px;
    overflow: hidden;
    transition: background-color var(--sps-transition), transform var(--sps-transition);
}

.social-icons a:hover {
    background-color: var(--sps-text-invert);
}

.social-icons a.fb    { background-image: url('images/icon-fb.png'); }
.social-icons a.tw    { background-image: url('images/icon-tw.png'); }
.social-icons a.in    { background-image: url('images/icon-in.png'); }
.social-icons a.ytb   { background-image: url('images/icon-youtube.png'); }
.social-icons a.insta { background-image: url('images/icon-insta.png'); }

/* ---------- Main header bar ---------- */
body.home .header{
	border-bottom:1px solid #e3e3e3;
}
body.home .header.transheader{
	border-bottom:1px solid var(--sps-line-header);
}

.header {
    width: 100%;
    background: transparent;
    position: relative;
    z-index: 100;
    border: 0;
    margin: 0;
    padding: 0;
	border-bottom:1px solid var(--sps-line-header);
}

.head-bar { width: 100%;}

.head-bar > .container {
    max-width: var(--sps-container);
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

.header > .container,
.head-bar > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 22px;
    min-height: 76px;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    min-height: 76px;
}

.transheader {
    position: absolute !important;
    top: 0; left: 0; right: 0;
    background: transparent !important;
}

/* ---------- Logo ---------- */
.logo {
  position:relative;
  z-index:99999;	
  
}

.logo img,
.custom-logo { max-height: 58px; width: auto;}

#logo-main { display: flex; flex-direction: column; text-align: left;}
#logo-main a { background: none; color: inherit; }

.site-title {
    font-family: var(--sps-font-display);
    font-size: 27px;
    font-weight: 700;
    line-height: 1.05;
    margin: 0;
    letter-spacing: -0.02em;
}
.logo p.site-title { font-size: 27px; }

.site-title a {
    color: var(--sps-text-dark);
    background: none;
}
.site-title a:hover { color: var(--sps-accent-deep); }

.site-description {
    font-size: 14px;
    color: var(--sps-text-black);
    margin: 5px 0 0 0;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* ---------- Primary navigation ---------- */
#navigation {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    font-family: var(--sps-font-heading);
	position: relative;
}

.leftnavig { margin-right: auto; }

.main-navigation {
    display: flex;
    align-items: center;
    position: relative;
}

.primary-menu,
.main-navigation > div > ul,
.main-navigation > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
}

.main-navigation li {
    position: relative;
    list-style: none;
}


body.transheader .main-navigation a{
	color: var(--sps-text-white);
}

body.transheader .main-navigation a:hover,
body.transheader .main-navigation a:focus,
body.transheader .main-navigation .current-menu-item > a,
body.transheader .main-navigation .current_page_item > a,
body.transheader .main-navigation .current-menu-ancestor > a {
    color: #000000;
}


.main-navigation a {
    display: flex;
    align-items: center;
    padding: 40px 16px;
    color: var(--sps-text-dark);
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    background: none;
    transition: background-color var(--sps-transition), color var(--sps-transition);
}

.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-ancestor > a {
    color: #000000;
}

/* Dropdowns — rounded soft card */
.main-navigation ul ul {
    position: absolute;
    top: calc(100% + 0px);
    left: 0;
    min-width: 240px;
    background-color: #3368c6;
    display: block;
    margin: 0;
    padding:0;
    list-style: none;
    box-shadow: var(--sps-shadow);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity var(--sps-transition), transform var(--sps-transition), visibility var(--sps-transition);
    z-index: 9999;
}

.main-navigation ul ul::before {
    content: "";
    position: absolute;
    top: -16px; left: 0; right: 0;
    height: 16px;
    background: transparent;
}

.main-navigation ul ul li { width: 100%; }

.main-navigation li:hover > ul,
.main-navigation li.focus > ul,
.main-navigation li.dropdown-open > ul,
.main-navigation li:focus-within > ul {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
.primary-menu > .menu-item-has-children > a::after,
.main-navigation > div > ul > .menu-item-has-children > a::after,
.main-navigation > ul > .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-left: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--sps-transition);
}
.main-navigation ul ul .menu-item-has-children > a {
    justify-content: space-between;
}

.main-navigation ul ul .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-left: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--sps-transition);
	right:13px;
}

.main-navigation ul ul a {
    padding: 8px 14px;
    color: #ffffff;
    border: 0;
    width: 100%;
}

.main-navigation ul ul a:hover,
.main-navigation ul ul a:focus {
    background-color: #2f2f2f;
    color: var(--sps-text-invert);
}

.main-navigation ul ul ul {
    top: 0px;
    left: calc(100% + 0px);
    transform: translateX(8px);
}
.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul,
.main-navigation ul ul li.dropdown-open > ul,
.main-navigation ul ul li:focus-within > ul { transform: translateX(0); }
.main-navigation ul li a { line-height: inherit; }
.main-navigation .dropdown-toggle {
    display: none;
    position: absolute;
    top: 3px;
    right: 3px;
    width: 42px;
    height: 42px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.main-navigation .dropdown-icon {
    display: block;
    width: 11px;
    height: 11px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--sps-transition);
    color: var(--sps-text-dark);
}
.main-navigation .dropdown-open > .dropdown-toggle .dropdown-icon { transform: rotate(225deg); }

/* Hamburger */
.menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    width: 48px;
    height: 48px;
    padding: 0;
    background: var(--sps-secondary) !important;
    border: 1px solid var(--sps-line);
    border-radius: 14px;
    cursor: pointer;
}
.menu-toggle:hover,
.menu-toggle:focus { background: var(--sps-accent); }
.menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--sps-text-white);
    border-radius: 2px;
    transition: transform var(--sps-transition), opacity var(--sps-transition), background var(--sps-transition);
}
.menu-toggle:hover span,
.menu-toggle:focus span { background: var(--sps-text-invert); }
.toggled .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.toggled .menu-toggle span:nth-child(2) { opacity: 0; }
.toggled .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Header CTA button */
.srcrt { flex-shrink: 0; }
.skt-header-button {
    display: inline-flex;
    align-items: center;
    padding: 12px 26px;
    background: var(--sps-button-bg);
    color: var(--sps-text-invert) !important;
    font-family: var(--sps-font-heading);
    font-weight: normal;
    font-size: 17px;
    text-decoration: none;
    transition: transform var(--sps-transition), background var(--sps-transition), box-shadow var(--sps-transition);
    background-image: none;
}
.skt-header-button:hover,
.skt-header-button:focus {
    color: var(--sps-text-black) !important;
}

/* ==========================================================================
   05. Inner Page Banner
   ========================================================================== */
.inner-banner-thumb {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
	background-color:#B5C2D6;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner-banner-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.inner-banner-thumb .banner-container {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 60px 24px;
    width: 100%;
}

.inner-banner-thumb .banner-container h1 {
    color: var(--sps-text-invert);
    margin: 0;
    font-size: clamp(30px, 4vw, 46px);
}

body.transheader .inner-banner-thumb{min-height:500px;}

/* ==========================================================================
   06. Buttons & Links
   ========================================================================== */
.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-button__link,
.read-more-btn,
.aboutmore,
.ReadMore,
.rdmore a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sps-font-body);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    padding: 13px 28px;
    color: var(--sps-text-invert);
    background: var(--sps-secondary);
    background-image: none;
    border: 0;
    text-decoration: none;
    cursor: pointer; 
    transition: transform var(--sps-transition), background var(--sps-transition), box-shadow var(--sps-transition), color var(--sps-transition);
}

.button:hover, .button:focus,
button:hover, button:focus,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
input[type="submit"]:focus,
.wp-block-button__link:hover,
.read-more-btn:hover,
.aboutmore:hover,
.ReadMore:hover,
.rdmore a:hover {
    background: var(--sps-lights);
    color: var(--sps-text-invert);
}

/* Read-more pill on cards */
.rdmore { margin: 25px 0 0; }
.rdmore a { padding: 10px 22px; font-size: 14px; }


/* ==========================================================================
   07. Forms & Inputs
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select {
    width: 100%;
    max-width: 100%;
    font-family: var(--sps-font-body);
    font-size: 15.5px;
    color: var(--sps-text-dark);
    background: var(--sps-surface);
    border: 1px solid var(--sps-line-strong);
    padding: 6px 16px;
    line-height: 1.5;
    transition: border-color var(--sps-transition), box-shadow var(--sps-transition);
}

textarea { min-height: 150px; resize: vertical; }

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--sps-accent);
    box-shadow: var(--sps-ring);
}

::placeholder { color: var(--sps-muted); opacity: 1; }

label { font-weight: 600; color: var(--sps-text-dark); }

/* Search form */
.search-form,
.wp-block-search__inside-wrapper {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.search-form .search-field,
.wp-block-search__input { flex: 1 1 auto; }

.search-submit,
.wp-block-search__button {
    width: auto;
    flex: 0 0 auto;
    background: var(--sps-secondary);
    color: var(--sps-text-invert);
    border: 0;  
    padding: 6px 24px;
    font-weight: 600;
    cursor: pointer;
}
.search-submit:hover,
.wp-block-search__button:hover { background: var(--sps-lights); }


/* ==========================================================================
   08. Blog
   ========================================================================== */
.blog-post { width: 100%; }
.blogpost-wrap-wsb { display: block; }

article.hentry,
.blog-post article,
.site-main > article {
    position: relative;
    border-bottom: 1px solid var(--sps-line);
    padding: 0 0 34px 0;
    margin: 0 0 34px;
    overflow: hidden;
    transition: transform var(--sps-transition), box-shadow var(--sps-transition);
}

#sitefull article.hentry {
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
}
#sitefull article.hentry::before { display: none; }

.post-thumb {
    margin: -30px -34px 24px;
    overflow: hidden;
    border-bottom: 1px solid var(--sps-line);
}
.post-thumb img {
    width: 100%;
    height: auto;
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.25, 1);
}

.entry-header { margin-bottom: 14px; }

.entry-title {
    font-size: clamp(20px, 2vw, 20px);
    line-height: 1.18;
    margin: 0 0 12px;
	font-weight:700;
}
.entry-title a {
    color: var(--sps-text-dark);
    background: none;
}
.entry-title a:hover { color: var(--sps-lights); }

.postmeta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 4px;
    font-family: var(--sps-font-body);
    font-size: 13px;
    color: var(--sps-muted);
    margin: 0 0 15px;
}
.postmeta .post-date {
    display: inline-flex;
    align-items: center;
    background: var(--sps-text-meta);
    color: var(--sps-text-black);
    font-weight: 600;
    padding: 4px 12px;   
}
.postmeta .post-comment a { color: var(--sps-muted); background: none; }
.postmeta .post-comment a:hover { color: var(--sps-accent-deep); }
.postmeta .post-tags a {
    display: inline-block;
    background: var(--sps-paper-2);
    color: var(--sps-text);
    padding: 3px 11px;
    margin: 3px 4px 0 0;    
    font-size: 12.5px;
}
.postmeta .post-tags a:hover { background: var(--sps-accent); color: var(--sps-text-invert); }

.entry-content { color: var(--sps-text); }
.entry-content > *:last-child { margin-bottom: 0; }
.entry-summary { color: var(--sps-text); }


.single-post .entry-content .post-password-form input[type="submit"]{
	margin:10px 0 0 0;
}


.single-post .entry-content { font-size: 17px; }
.page-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 24px 0;
    font-weight: 600;
}
.page-links .page-links-title { color: var(--sps-muted); font-weight: 600; }
.page-links a,
.page-links > span:not(.page-links-title) {
    display: inline-flex;
    min-width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    background: var(--sps-paper-2);
    color: var(--sps-text-dark);
}
.page-links a { background: var(--sps-surface); border: 1px solid var(--sps-line-strong); }
.page-links a:hover { background: var(--sps-accent); color: var(--sps-text-invert); border-color: var(--sps-accent); }

/* Page header (search / 404 / archive title blocks) */
.page-header {
    background: var(--sps-surface);
    border: 1px solid var(--sps-line);
    box-shadow: var(--sps-shadow-sm);
    padding: 26px 30px;
    margin: 0 0 30px;
}
.page-title { margin: 0; font-size: clamp(24px, 3vw, 32px); }
.page-title span { color: var(--sps-accent-deep); }

/* No results / 404 inner copy */
.no-results,
.error-404 {
    background: var(--sps-surface);
    border: 1px solid var(--sps-line);
    box-shadow: var(--sps-shadow-sm);
    padding: 36px 34px;
}
.no-results .page-header,
.error-404 .page-header { background: none; border: 0; box-shadow: none; padding: 0; margin-bottom: 14px; }

.edit-link a {
    display: inline-block;
    margin-top: 14px;
    font-size: 13px;
    background: var(--sps-paper-2);
    padding: 6px 14px;    
    color: var(--sps-text);
}
.entry-meta { margin-top: 6px; }


/* ==========================================================================
   09. Pagination & Post Navigation
   ========================================================================== */
.pagination,
.posts-navigation .nav-links,
.post-navigation .nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 14px 0 0;
}

.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.page-numbers,
.post-page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 16px;
    background: var(--sps-surface);
    border: 1px solid var(--sps-line-strong);   
    color: var(--sps-text-dark);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--sps-transition);
}
.page-numbers:hover,
.post-page-numbers:hover {
    background: var(--sps-accent-tint);
    border-color: var(--sps-accent);
    color: var(--sps-accent-deep);
}
.page-numbers.current {
    background: var(--sps-text-black);
    border-color: var(--sps-text-black);
    color: var(--sps-text-invert);
}
.page-numbers.dots { background: none; border: 0; }

/* prev/next single post nav */
.post-navigation {
    margin: 0 0 30px;
}
.post-navigation .nav-links { justify-content: space-between; }
.post-navigation a { font-weight: 600; color: var(--sps-text-dark); background: none; }
.post-navigation a:hover { color: var(--sps-accent-deep); }


/* ==========================================================================
   10. Sidebar & Widgets
   ========================================================================== */
#sidebar {
    flex: 0 0 322px;
    max-width: 322px;
    width: 322px;
	margin:0 -25px 0 0;
}

#sidebar .widget,
.widget {
    border: 1px solid var(--sps-line);
    padding: 24px 24px 26px;
    margin: 0 0 26px;
}

#sidebar h2, #sidebar h3, #sidebar h4, #sidebar h5, #sidebar h6, #sidebar .widget-title, #sidebar .wp-block-search__label, #sidebar label {
  color: var(--sps-text-dark);
  font-family: var(--sps-font-heading);
  font-size: 18px;
  font-weight: 700;
}

#sidebar ol{margin:0; padding:0;}

#sidebar .wp-block-latest-comments li a{color:var(--sps-text);}

.widget-title,
#sidebar .widget-title,
.widget .widget-title {
    position: relative;
    font-family: var(--sps-font-heading);
    font-size: 18px;
    font-weight: 700;
    color: var(--sps-text-dark);
    margin: 0 0 18px;
    padding: 0 0 12px;
}
.widget-title::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 44px;
    height: 3px;
    background: linear-gradient(90deg, var(--sps-accent), var(--sps-honey));
}
.titleborder span:after {
    content: "";
    display: inline-block;
    border-bottom: 3px solid var(--sps-accent);
}

.widget ul { list-style: none; margin: 0; padding: 0; }
.widget ul li {
    padding: 5px 0 5px 20px;
	position: relative;
}
#sidebar .widget ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 21px;
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background: var(--sps-accent);
}
.widget ul li:last-child { border-bottom: 0; padding-bottom: 0; }
.widget ul li a { color: var(--sps-text); background: none; }
.widget ul li a:hover { color: var(--sps-accent-deep); }
.widget ul li .children,
.widget ul li .sub-menu { margin-top: 8px; padding-left: 14px; }

/* Tag cloud */
.tagcloud { display: flex; flex-wrap: wrap; gap: 8px; }
.tagcloud a {
    display: inline-block;
    font-size: 13px !important;
    background: var(--sps-paper-2);
    color: var(--sps-text) !important;
    padding: 6px 14px;    
}
.tagcloud a:hover { background: var(--sps-accent); color: var(--sps-text-invert) !important; }

/* Calendar widget */
.widget_calendar table { width: 100%; border-collapse: collapse; font-size: 14px; }
.widget_calendar caption { font-weight: 700; padding-bottom: 10px; color: var(--sps-text-dark); }
.widget_calendar th { background: var(--sps-paper-2); padding: 6px; text-align: center; }
.widget_calendar td { padding: 6px; text-align: center; border: 1px solid var(--sps-line); }
.widget_calendar td#today { background: var(--sps-accent); color: var(--sps-text-invert);}
.widget_calendar a { background: none; font-weight: 700; color: var(--sps-accent-deep); }

#sidebar .wp-block-search__label { font-weight: 700; margin-bottom: 8px; display: block; }
/* ==========================================================================
   11. Comments
   ========================================================================== */
.comments-area {
    margin: 0 0 30px;
}
.comments-title,
.comment-reply-title { font-size: 24px; margin-bottom: 22px; }
.comments-title span,
.comment-reply-title span { color: var(--sps-accent-deep); }

.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list ol,
.comment-list ul { list-style: none; }
.comment-list .children { margin-left: 28px; padding-left: 22px; border-left: 2px solid var(--sps-line); }

.comment-body {
    background: var(--sps-surface-soft);
    border: 1px solid var(--sps-line);
    padding: 20px 22px;
    margin: 0 0 20px;
}
.comment-author { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.comment-author .avatar { border-radius: 50%; }
.comment-author .fn { font-family: var(--sps-font-heading); font-size: 17px; color: var(--sps-text-dark); }
.comment-metadata { font-size: 12.5px; color: var(--sps-muted); margin: 4px 0 10px; }
.comment-metadata a { color: var(--sps-muted); background: none; }

.reply { margin-top: 8px; }
.comment-reply-link {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    background: var(--sps-accent-tint);
    color: var(--sps-accent-deep) !important;    
}
.comment-reply-link:hover { background: var(--sps-accent); color: var(--sps-text-invert) !important; }

#respond { margin-top: 8px; }
.comment-form { display: flex; flex-wrap: wrap; gap: 16px; }
.comment-form p { margin: 0; flex: 1 1 100%; }
.comment-form .comment-form-author,
.comment-form .comment-form-email { flex: 1 1 calc(50% - 8px); }
.comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 10px; }
.comment-form-cookies-consent input { width: auto; margin-top: 5px; }
.comment-form-cookies-consent label { font-weight: 400; font-size: 14px; }
#submit { width: auto; }
.no-comments { color: var(--sps-muted); font-style: italic; }


/* ==========================================================================
   12. Footer & Copyright
   ========================================================================== */

#footer-wrapper{width: 100%; background-color:#265dbf;}
#footer .container { max-width: var(--sps-container); }
/* Footer info bar (logo + social) */
.o-footer { background: transparent; }
.o-footer__container .container,
.footerinfobox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
	padding:60px 0 60px 0;
	border-bottom: 1px solid rgba(255,255,255,0.2);
}
.c-footer-logo img { max-height: 60px; width: auto; }

/* Footer social — rounded soft chips using existing PNG icons */
.c-social-icons,
.footer .social-icons {
    display: inline-flex;
    gap: 10px;
}
.c-social-icons__link {
    width: var(--sps-icon-size);
    height: var(--sps-icon-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background-color: rgba(34, 34, 34, 1) !important;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20px 20px;
    transition: transform var(--sps-transition), background-color var(--sps-transition);
}
.c-social-icons__link:hover {
    background-color: #5488e5 !important;
}
.c-social-icons__link--fb    { background-image: url(images/icon-fb.png); }
.c-social-icons__link--tw    { background-image: url(images/icon-tw.png); }
.c-social-icons__link--in    { background-image: url(images/icon-in.png); }
.c-social-icons__link--insta { background-image: url(images/icon-insta.png); }
.c-social-icons__link--yt    { background-image: url(images/icon-youtube.png); }

/* Footer widget columns */
.copyright-area { width: 100%; }
.footerarea { width: 100%; }
.footer.ftr-widg { padding: 0 0 30px; }
.footer-all { width: 100%; }
.rfl-row {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
	margin:70px 0 0 0;
}
.rfl-row .cols-3 {
    flex: 1 1 calc(25% - 23px);
    min-width: 200px;
}

.footer aside.widget {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}
.footer h1, .footer h2, .footer h3,
.footer h4, .footer h5, .footer h6,
.footer .widget-title {
    color: var(--sps-footer-heading);
	font-weight:600;
    margin-bottom: 16px;
    padding-bottom: 16px;
	font-family: var(--sps-font-footer-heading);
}
.footer .widget-title::after { background: var(--sps-accent); }

.footer h2{
	font-size:25px;
}

.footer ul { list-style: none; margin: 0; padding: 0; }
.footer ul li {
    padding: 2px 0;
    border-bottom: none;
}
.footer ul li:last-child { border-bottom: 0; }
.footer ul li a,
.footer-row ul li a,
.footer-row .cols-3 ul li a {
    color: var(--sps-text-footer) !important;
    background: none;
}
.footer ul li a:hover,
.footer-row ul li a:hover,
.footer-row .cols-3 ul li a:hover { color: var(--sps-text-black) !important; }
.footer p { color: var(--sps-text-footer); }
.footer a { color: var(--sps-text-footer); background: none; }
.footer a:hover { color: var(--sps-accent); }

/* Copyright strip */
.copyright-wrapper { background: var(--sps-copyright-bg); }
.copyright-wrapper .container {
    padding-top: 22px;
    padding-bottom: 22px;
}
.copyright-txt {
    text-align: center;
    font-size: 14px;
    color: var(--sps-text-footer);
}
.copyright-txt a { color: #a7c6ff; background: none; font-weight: 600; }
.copyright-txt a:hover { color: #000000; }


/* ==========================================================================
   13. Block Editor / Gutenberg
   ========================================================================== */
.entry-content > .alignwide { width: 100%; }
.alignwide { margin-left: -40px; margin-right: -40px; width: calc(100% + 80px); max-width: none; }
.alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; width: 100vw; }
.alignleft { float: left; margin: 6px 28px 18px 0; }
.alignright { float: right; margin: 6px 0 18px 28px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; clear: both; }

.wp-block-image img,
.wp-caption img { border-radius: var(--sps-radius); }
.wp-block-image figcaption,
.wp-caption-text {
    font-size: 13.5px;
    color: var(--sps-muted);
    margin-top: 8px;
}
.wp-caption {
    max-width: 100%;
}

.wp-block-quote,
.is-style-skt-laboratory-plain {
    border-left: 4px solid var(--sps-accent);
    background: var(--sps-accent-tint);
    border-radius: 0 var(--sps-radius) var(--sps-radius) 0;
    margin: 28px 0;
    padding: 22px 26px;
    font-family: var(--sps-font-heading);
    font-style: italic;
    font-size: 19px;
    color: var(--sps-text-dark);
}
.wp-block-quote cite { display: block; margin-top: 10px; font-style: normal; font-size: 14px; color: var(--sps-muted); }

.wp-block-pullquote {
    border-top: 3px solid var(--sps-accent);
    border-bottom: 3px solid var(--sps-accent);
    padding: 28px 0;
    text-align: center;
    font-family: var(--sps-font-heading);
    font-style: italic;
}

.wp-block-button__link { color: var(--sps-text-invert); }

.wp-block-separator {
    border: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--sps-line-strong), transparent);
    max-width: 120px;
}
.wp-block-separator.is-style-wide { max-width: 100%; }

.wp-block-table table { width: 100%; }
.wp-block-table figcaption { font-size: 13.5px; color: var(--sps-muted); text-align: center; }
.wp-block-search__label { font-weight: 700; }

/* ==========================================================================
   14. WooCommerce essentials
   ========================================================================== */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    background: var(--sps-surface);
    border: 1px solid var(--sps-line);
    border-radius: var(--sps-radius-lg);
    box-shadow: var(--sps-shadow-sm);
    padding: 16px;
    text-align: center;
    transition: transform var(--sps-transition), box-shadow var(--sps-transition);
}
.woocommerce ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: var(--sps-shadow);
}
.woocommerce ul.products li.product img { border-radius: var(--sps-radius); margin-bottom: 12px; }
.woocommerce ul.products li.product .price {
    color: var(--sps-accent-deep);
    font-weight: 700;
    font-size: 18px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--sps-font-heading);
    font-size: 18px;
    padding: 6px 0;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wc-block-cart__submit-button,
.wc-block-checkout__submit-button,
.woocommerce-product-search button[type="submit"] {
    background: var(--sps-accent);
    color: var(--sps-text-invert);
    border: 0;    
    padding: 12px 26px;
    font-weight: 600;
    box-shadow: 0 10px 24px -12px rgba(224, 96, 60, 0.8);
    transition: all var(--sps-transition);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
    background: var(--sps-accent-deep);
    transform: translateY(-2px);
}

.woocommerce .price,
.woocommerce span.price { color: var(--sps-accent-deep); font-weight: 700; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-radius: var(--sps-radius);
    border: 1px solid var(--sps-line);
    border-top: 3px solid var(--sps-accent);
    background: var(--sps-surface);
    padding: 16px 20px;
}
.woocommerce-error { border-top-color: var(--sps-accent-deep); }

.woocommerce-product-search { display: flex; gap: 8px; }
.woocommerce-product-search input[type="search"] { flex: 1; }

/* ==========================================================================
   15. Tables, Code, Blockquote (base elements)
   ========================================================================== */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 24px;
    background: var(--sps-surface);
    border-radius: var(--sps-radius);
    overflow: hidden;
    box-shadow: var(--sps-shadow-xs);
}
th, td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--sps-line);
}
thead th { background: var(--sps-paper-2); font-family: var(--sps-font-body); font-weight: 700; color: var(--sps-text-dark); }
tbody tr:last-child td { border-bottom: 0; }

blockquote {
    margin: 28px 0;
    padding: 20px 26px;
    border-left: 4px solid var(--sps-accent);
    background: var(--sps-accent-tint);
    border-radius: 0 var(--sps-radius) var(--sps-radius) 0;
    font-family: var(--sps-font-heading);
    font-style: italic;
    color: var(--sps-text-dark);
}

code, kbd, samp {
    font-family: var(--sps-font-mono);
    font-size: 0.9em;
    background: var(--sps-paper-2);
    padding: 2px 7px;
    border-radius: 6px;
    color: var(--sps-accent-deep);
}
pre {
    font-family: var(--sps-font-mono);
    background: var(--sps-ink);
    color: #f3ece1;
    padding: 20px 22px;
    border-radius: var(--sps-radius);
    overflow: auto;
    line-height: 1.6;
    margin: 0 0 24px;
}
pre code { background: none; color: inherit; padding: 0; }

/* ==========================================================================
   16. Accessibility & Utilities
   ========================================================================== */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px; width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    word-wrap: normal !important;
}
.screen-reader-text:focus {
    background-color: var(--sps-surface);
    border-radius: var(--sps-radius-sm);
    box-shadow: var(--sps-shadow);
    clip: auto !important;
    clip-path: none;
    color: var(--sps-accent-deep);
    display: block;
    font-size: 14px;
    font-weight: 700;
    height: auto;
    left: 6px; top: 6px;
    padding: 14px 22px;
    width: auto;
    z-index: 100000;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100000;
}
.skip-link:focus {
    left: 6px; top: 6px;
    background: var(--sps-accent);
    color: var(--sps-text-invert);
    padding: 12px 20px;
    border-radius: var(--sps-radius-sm);
    box-shadow: var(--sps-shadow);
}

.alignnone { margin: 6px 0 18px; }

.sticky {
    display: block;
}

.gallery-caption {
    font-size: 14px;
    color: #666;
    margin-top: 5px;
}

/* ==========================================================================
   17. RTL
   ========================================================================== */
.rtl .header-topbar .right { margin-left: 0; margin-right: auto; }
.rtl .postmeta .post-tags a { margin: 3px 0 0 4px; }
.rtl .alignleft { float: right; margin: 6px 0 18px 28px; }
.rtl .alignright { float: left; margin: 6px 28px 18px 0; }
.rtl .wp-block-quote,
.rtl blockquote,
.rtl .is-style-skt-laboratory-plain {
    border-left: 0;
    border-right: 4px solid var(--sps-accent);
    border-radius: var(--sps-radius) 0 0 var(--sps-radius);
}
.rtl .widget-title::after { left: auto; right: 0; }
.rtl .blog-post article::before,
.rtl .site-main > article::before { left: auto; right: 0; }
.rtl .comment-list .children { margin-left: 0; margin-right: 28px; padding-left: 0; padding-right: 22px; border-left: 0; border-right: 2px solid var(--sps-line); }
.rtl #navigation { justify-content: flex-start; }
.rtl .main-navigation ul ul { left: auto; right: 0; }
.rtl .main-navigation ul ul ul { left: auto; right: calc(100% + 10px); }