/*
Theme Name: SKT Alumni
Theme URI: https://www.sktthemes.org/shop/skt-alumni/
Author: sonalsinha21
Author URI: https://profiles.wordpress.org/sonalsinha21/
Description: SKT Alumni is a modern responsive WordPress theme. It is designed for alumni associations, graduate networks, schools, colleges, universities, and educational communities. It helps former students stay connected, share updates, promote events, and build a strong academic network. The theme can also be used for institutions, student groups, educational organizations, and community websites. Its clean layout makes information easy to find while giving your website a professional appearance. SKT Alumni is responsive and mobile friendly, SEO ready, customizable, and compatible with popular WordPress plugins. Create pages for graduates, events, news, achievements, activities, membership, and contact information without requiring coding skills. Documentation : https://www.sktthemesdemo.net/documentation/skt-coach-doc/
Template: skt-coach
Version: 1.0
Requires at least: 5.6
Tested up to: 7.1
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-alumni
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 Alumni is a child theme of SKT Coach. SKT Coach is based on Underscores, which is distributed under the terms of the GNU GPL v2 or later.

SKT Alumni WordPress Theme, Copyright 2026 SKT Themes (sktthemes.org)
SKT Alumni is distributed under the terms of the GNU GPL v2 or later.
*/

/* ==========================================================================
   TABLE OF CONTENTS
   01. CSS Variables & 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. Gutenberg Columns, Galleries, Buttons & Extra Components
   18. Widgets — Full Default Coverage
   19. Extra Form Controls
   20. Extra Typography & Content Elements
   21. WooCommerce — Single Product, Cart & Checkout
   ========================================================================== */


/* ==========================================================================
   01. CSS Variables & Reset
   ========================================================================== */
:root {
    --sps-primary: #fda220;
    --sps-primary-dark: #282828;
	--sps-primary-white: #ffffff;
	--sps-primary-black: #000000;
    --sps-secondary: #051d3a;
    --sps-text: #4a4a4a;
    --sps-text-dark: #1a1a1a;
    --sps-muted: #7a7a7a;
    --sps-border: #dfdfdf;
    --sps-bg: #ffffff;
	--sps-header-bg: #ffffff;
    --sps-bg-alt: #ececec;
    --sps-footer-bg: #16417f;
    --sps-footer-text: #ffffff;
    --sps-copyright-bg: #060a18;
    --sps-footer-border: #dccdbf;
    --sps-icon-bg: #151515;
    --sps-icon-hover: #4fbcff;
    --sps-icon-size: 58px;
    --sps-spacing-y: 35px;	
	
	 --sps-activemenu-color: #fda220;

    --sps-radius: 10px;
    --sps-radius-sm: 6px;
    --sps-radius-pill: 8px;

    --sps-shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06);
    --sps-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    --sps-shadow-lg: 0 18px 50px rgba(15, 23, 42, 0.10);

    --sps-transition: 0.25s ease;

    --sps-container: 1200px;

    --sps-font-body: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --sps-font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --sps-font-display: 'Poppins', sans-serif;
	--sps-font-logo: 'Playfair Display', sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: var(--sps-bg);
    color: var(--sps-text);
    font-family: var(--sps-font-body);
    font-size: 16px;
    line-height: 1.7;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@view-transition {
  navigation: auto;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

iframe {
    max-width: 100%;
}

hr {
    border: 0;
    border-top: 1px solid var(--sps-border);
    margin: 30px 0;
}

::selection {
    background-color: var(--sps-primary);
    color: #fff;
}


/* ==========================================================================
   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.3;
    margin: 0 0 18px;
}

h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

p {
    margin: 0 0 18px;
}

a {
    color: var(--sps-primary);
    text-decoration: none;
    transition: color var(--sps-transition);
}

a:hover,
a:focus {
    color: var(--sps-text-dark);
    text-decoration: underline;
}

a:focus-visible {
    outline: 2px solid var(--sps-primary);
    outline-offset: 2px;
}

strong, b { font-weight: 600; }
em, i    { font-style: italic; }


/* ==========================================================================
   03. Layout
   ========================================================================== */
.container {
    width: 100%;
    max-width: var(--sps-container);
    margin: 0 auto;
    padding: 0;
    position: relative;
}

#main-set {
    position: relative;
    z-index: 5;
}

#content_navigator {
    width: 100%;
}

.page_content {
    padding: 40px 0 40px 0;
    display: flex;
    flex-wrap: wrap;
}

body.tax-product_cat .page_content {
	display:inherit;
}

.site-main {
    flex: 1 1 0;
    min-width: 0;
    float: none;
    width: 70%;
	margin-right:25px;
}

#sitefull,
.full-main {
    flex: 0 1 100%;
    width: 100% !important;
    float: none;
}

.clear {
    clear: both;
}


/* ==========================================================================
   04. Header & Navigation
   ========================================================================== */
.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 80px;
}
   
.header {
    width: 100%;
    background-color: var(--sps-header-bg);
	box-shadow: 0 0 25px rgba(179, 194, 216, 0.16);
    position: relative;
    z-index: 100;
    border: 0;
    border-radius: 0;
	margin:0;
	padding:0;
}

.head-bar {
    padding: 0;
    margin: 0;
    width: 100%;
}

.head-bar > .container {
    max-width: var(--sps-container);  
    width: 100%;
    margin: 0 auto;
    padding: 12px 0 12px 0;
    box-sizing: border-box;
}

.header > .container,
.head-bar > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    min-height: 90px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.transheader {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    background-color: transparent !important;
    box-shadow: none;
}

.transheader .site-title a,
.transheader .site-description 
{
    color: #ffffff;
}

body.search .transheader,
body.error404 .transheader,
body.inner .transheader {
    position: relative !important;
    background-color: var(--sps-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.search .transheader .site-title a,
body.error404 .transheader .site-title a,
body.inner .transheader .site-title a,
body.search .transheader .main-navigation a,
body.error404 .transheader .main-navigation a,
body.inner .transheader .main-navigation a {
    color: var(--sps-text-dark);
}

/* Logo */
.logo {
    display: flex;
	flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex-shrink: 0;
	padding:0;
	margin:0;
	min-height:100% !important;
}

.logo p.site-title{
	font-size:26px;
}

.logo img,
.custom-logo {
    max-height: 53px;
}

#logo-main {
    display: flex;
    flex-direction: column;
    text-align: left;
}

#logo-main a {
    text-decoration: none;
    color: inherit;
}

.site-title {
    font-family: var(--sps-font-logo);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
	color:#282828;
}

.site-title a {
    color: var(--sps-text-dark);
}

.site-description {
    font-size: 13px;
    color: #282828;
    margin: 4px 0 0;
    line-height: 1.2;
}

/* Primary Navigation */
#navigation {
    flex: 1;
    display: flex;
    justify-content: end;
	font-family: var(--sps-font-display);
	padding:0 20px 0 0;
}

.leftnavig {
    margin-right: auto;
}

.primary-menu {
    display: flex;
    align-items: center;
    gap: 28px;
}

/* =====================================================================
   MAIN NAVIGATION  (desktop default)
   ===================================================================== */
.main-navigation {
    display: flex;
    align-items: center;
    position: relative;
}

/* Top-level UL only */
.main-navigation > div > ul,
.main-navigation > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 2px;
}

.main-navigation li {
    position: relative;
    list-style: none;
}

.main-navigation a {
    display: block;
    padding: 10px 16px;
    color: #282828;
    font-size: 17px;
    font-weight: 500;
    text-decoration: 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: var(--sps-activemenu-color);
}

/* ---------------------------------------------------------------------
   SUB-MENU (desktop dropdown)
   --------------------------------------------------------------------- */
.main-navigation ul ul {
    position: absolute;
    top: calc(100% + 21px);  
    left: 0;
    min-width: 240px;
    background-color: #fff;
    display: block;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    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: -21px;        
    left: 0;
    right: 0;
    height: 21px;
    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);
}

.main-navigation ul ul a {
    padding: 10px 16px;
    color: #282828;
    border-radius: 0;
    width: 100%;
}

.main-navigation ul ul a:hover,
.main-navigation ul ul a:focus {
    background-color: #282828;
    color: #ffffff;
}

/* Nested sub-menus open to the side */
.main-navigation ul ul ul {
    top: 0;
    left: 100%;
    margin-left: 0;
    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; }

/* ---------------------------------------------------------------------
   DROPDOWN CARET BUTTON 
   --------------------------------------------------------------------- */
.main-navigation .dropdown-toggle {
    display: none;
    position: absolute;
    top: 4px;
    right: 4px;
    width: 40px;
    height: 40px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.main-navigation .dropdown-toggle .dropdown-icon {
    display: block;
    width: 10px;
    height: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--sps-transition);
}

.main-navigation .dropdown-open > .dropdown-toggle .dropdown-icon {
    transform: rotate(-135deg);
}

/* Caret indicator on parent items (desktop) */
.main-navigation > div > ul > .menu-item-has-children > a::after,
.main-navigation > ul > .menu-item-has-children > a::after,
.main-navigation > div > ul > .page_item_has_children > a::after,
.main-navigation > ul > .page_item_has_children > a::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    vertical-align: middle;
    transition: transform var(--sps-transition);
}

/* ---------------------------------------------------------------------
   MENU TOGGLE (hamburger - mobile)
   --------------------------------------------------------------------- */
.menu-toggle {
    display: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 8px;
    margin: 0;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    border-radius: var(--sps-radius-sm);
}

.menu-toggle:hover,
.menu-toggle:focus {
    background-color: var(--sps-bg-alt);
}

.menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--sps-text-dark);
    border-radius: 2px;
    transition: transform var(--sps-transition), opacity var(--sps-transition), background var(--sps-transition);
}

.toggled .menu-toggle span {
    background: var(--sps-primary);
}

/* Header button */
.header-extras{
 	padding:0px;
}

.header-extras span {
  list-style: none;
  display: inline-block;
  font-size: 24px;
  background-color: #1f4d8f;
  border-radius: 50%;
  height: 52px;
  width: 52px;
  text-align: center;
  line-height: 55px;
  vertical-align: middle;
  position: relative;
  margin-left: 4px;
  margin-top:3px;
  transition: all .2s;
}

.header-search-toggle {
	cursor: pointer;
	float:left;
	margin: 0 0 0 18px;
}

.header-search-toggle button{
	border:none;
	background:none;
	padding:0px;
	background-color:transparent !important;
}

.header-search-toggle img{
	margin-top:-5px;
}

.header-extras .header-search-form {
	display: none;
	position: absolute;
	bottom: -44px;
	width: 240px;
	right: 0;
}

.header-extras .header-search-form .search-field {
	width: 100%;
	background-color: #1f4d8f;
	border: none;
	color: #fff;
	font-size:15px;
	padding: 10px 15px;
	border-radius:0px;
}

.header-extras .header-search-form .search-field:focus {
	outline: none;
	box-shadow:none;
}

.header-extras .header-search-form .search-submit {
	display: none;
	position: absolute;
	bottom: -40px;
	width: 200px;
	left: -80px;
}


.header-extras .header-search-form .search-field::placeholder {
    color: #fff !important;
    opacity: 1 !important;
	font-size:15px;
}

.srcrt {
    flex-shrink: 0;
}

.skt-header-button {
	font-family: Poppins !important;
    display: inline-flex;
	padding: 10px 40px;
  	border-radius: 100px !important;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    border-radius: 10px;
	font-family: var(--sps-font-logo);
    background-color: #1f4d8f;
    color: #fff;
	text-decoration:none;
    transition: all 0.25s ease;
	position:relative;
}

.skt-header-button:hover,
.skt-header-button:focus {
	background-color: #fda220;
  	color: #ffffff;
	text-decoration:none;
}

.skt-header-button:hover:after{
	color:#282828;
}

.hedbtn-details a,
.skt-header-button a {
    color: #fff;
    text-decoration: none;
}


/* ==========================================================================
   05. Inner Page Banner
   ========================================================================== */
.inner-banner-thumb {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-color: #545556;
    min-height: 320px;
    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: 1;
    opacity: 0.55;
}

.banner-container {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: var(--sps-container);
    margin: 0 auto;
    padding: 50px 20px;
    text-align: center;
}

.banner-container h1 {
    color: #fff;
	font-family: 'Playfair Display';
	font-size: 50px;
	font-weight:700;
    margin: 0;
}


/* ==========================================================================
   06. Buttons & Links
   ========================================================================== */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.wp-block-button__link,
a.read-more-btn,
.rdmore a,
.aboutmore {
    display: inline-block;
    background-color: var(--sps-primary);
    color: #fff;
    border: 0;
    padding: 12px 26px;
    font-family: var(--sps-font-body);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none;
    border-radius: var(--sps-radius-pill);
    cursor: pointer;
    transition: background-color var(--sps-transition), transform var(--sps-transition), box-shadow var(--sps-transition);
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.button:hover,
.wp-block-button__link:hover,
a.read-more-btn:hover,
.rdmore a:hover,
.aboutmore:hover {
    background-color: var(--sps-primary-dark);
    color: #fff;
    text-decoration: none;
}

button:focus-visible,
input[type="submit"]:focus-visible,
.button:focus-visible {
    outline: 2px solid var(--sps-primary);
    outline-offset: 3px;
}

a.ReadMore {
    display: inline-block;
    margin-top: 18px;
    padding: 10px 22px;
    color: var(--sps-text-dark);
    border: 1px solid var(--sps-text-dark);
    border-radius: var(--sps-radius-pill);
    background-color: transparent;
    text-decoration: none;
    font-weight: 500;
    transition: all var(--sps-transition);
}

a.ReadMore:hover {
    background-color: var(--sps-text-dark);
    color: #fff;
    text-decoration: none;
}


/* ==========================================================================
   07. Forms & Inputs
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="month"],
input[type="week"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea,
select {
    width: 100%;
    max-width: 100%;
    padding: 11px 14px;
    font-family: var(--sps-font-body);
    font-size: 15px;
    color: var(--sps-text-dark);
    background-color: #fff;
    border: 1px solid var(--sps-border);
    border-radius: var(--sps-radius-sm);
    line-height: 1.4;
    transition: border-color var(--sps-transition), box-shadow var(--sps-transition);
    -webkit-appearance: none;
    appearance: none;
}

input:focus,
textarea:focus,
select:focus {
    outline: 0;
    border-color: var(--sps-primary);
    box-shadow: 0 0 0 3px rgba(253, 162, 32, 0.15);
}

textarea {
    min-height: 140px;
    resize: vertical;
}

label {
    display: inline-block;
    margin-bottom: 6px;
    font-weight: 500;
    color: var(--sps-text-dark);
    font-size: 14px;
}

/* Search form */
.wp-block-search,
.search-form {
    display: flex;
    gap: 8px;
}

.wp-block-search__input,
.search-field {
    flex: 1;
    width: 100%;
}

/* Core search-form markup wraps the input in a <label>, so the label
   itself must be the flex item that grows, or the input stays tiny */
.search-form label {
    flex: 1;
    display: flex;
    margin-bottom: 0;
}

.search-form .search-submit {
    flex-shrink: 0;
}

.wp-block-search__button,
input.search-submit {
    background-color: var(--sps-primary);
    color: #fff;
    border: 0;
    padding: 0 18px;
    border-radius: var(--sps-radius-sm);
    cursor: pointer;
}

.wp-block-search__button:hover,
input.search-submit:hover {
    background-color: var(--sps-primary-dark);
}


/* ==========================================================================
   08. Blog
   ========================================================================== */
.blog-post {
    margin: 0;
}

.blogpost-wrap-wsb {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.blogpost-wrap-wsb.columns-2 { grid-template-columns: repeat(2, 1fr); }
.blogpost-wrap-wsb.columns-1 { grid-template-columns: 1fr; }

body.home article.post,
body.home article.hentry,
body.home .blog_lists {
    border: 1px solid #dfdfdf;
    overflow: hidden;
    transition: transform var(--sps-transition), box-shadow var(--sps-transition);
    padding: 0;
    margin: 0 0 25px;
	border-radius:8px;
}

article.post,
article.hentry,
.blog_lists {
    background-color: #fff;
    border: 1px solid var(--sps-border);
    overflow: hidden;
    transition: transform var(--sps-transition), box-shadow var(--sps-transition);
    padding: 0;
    margin: 0 0 8px;
}

article.post .post-thumb,
article.hentry .post-thumb {
    width: 100%;
    max-height: none;
    margin: 0;
    float: none;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

article.post .post-thumb img,
article.hentry .post-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

article.post:hover .post-thumb img,
article.hentry:hover .post-thumb img {
    transform: scale(1.04);
}

article.post .entry-header,
article.hentry .entry-header,
article.post .entry-content,
article.hentry .entry-content,
article.post .entry-summary,
article.hentry .entry-summary,
article.post .rdmore,
article.hentry .rdmore {
    padding:20px 25px;
}

.blog-post article.post .entry-content{
	padding:0 25px;
}

article.post .entry-header,
article.hentry .entry-header {
    padding-top: 22px;
    padding-bottom: 0;
}

article.post .rdmore,
article.hentry .rdmore {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 11px 20px;
    background: transparent;
    color: #282828 !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
	margin:0 0 10px 10px;
}

.rdmore a{
	color:#000 !important;
	padding:5px 10px 5px 8px !important;
	margin-left:-12px !important;
}

.rdmore a:hover{color:#fda220 !important;}

article.post .rdmore a::after,
article.hentry .rdmore a::after {
    content: "➞";
    font-size: 18px;
    transition: transform 0.3s ease;
	margin-left:10px;
	position:relative;
	top:1px;
}

article.post .rdmore:hover::after,
article.hentry .rdmore:hover::after {
    transform: translate(3px, -3px);
	background-color:#fda220 !important; color:#FFF !important;
	padding:0px 5px !important;	
}

article.post .rdmore:hover,
article.hentry .rdmore:hover {
    color: #000;
}

article.post .rdmore:hover::after,
article.hentry .rdmore:hover::after {
    transform: translateX(4px);
}

.entry-title {
    font-size: 26px;
    font-weight: 700;
    margin: 0 0 10px;
    line-height: 1.3;
	font-family:'Poppins';
}

.entry-title a {
    color: var(--sps-text-dark);
    text-decoration: none;
}

.entry-title a:hover {
    color: var(--sps-primary);
    text-decoration: none;
}

.postmeta {
    color: var(--sps-muted);
    font-size: 13px;
    padding: 0 0 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.postmeta a {
    color: var(--sps-primary);
    text-decoration: none;
	margin:0 0 0 10px;
}

.postmeta a:hover {
    color: var(--sps-text-dark);
    text-decoration: underline;
}

.post-date,
.post-comment,
.post-categories,
.post-tags {
    display: inline-flex;
    align-items: center;
    color: var(--sps-muted);
}

.entry-content,
.entry-summary {
    font-size: 16px;
    line-height: 1.75;
    color: var(--sps-text);
}

.entry-content a {
    color: var(--sps-primary);
    text-decoration: underline;
}

.entry-content a:hover {
    color: var(--sps-text-dark);
}

.entry-content ul,
.entry-content ol {
    padding-left: 22px;
    margin: 0 0 18px;
}

.entry-content li {
    line-height: 1.8;
    margin-bottom: 6px;
}

.entry-content img {
    border-radius: var(--sps-radius-sm);
}

/* Single post */
article.single-post {
    padding: 26px 22px;
}

article.single-post:hover {
    box-shadow: none;
}

article.single-post .entry-header,
article.single-post .entry-content,
article.single-post .postmeta {
    padding-left: 0;
    padding-right: 0;
}

/* Sticky post highlight */
.sticky {
	background-color:#ffffff !important;
	position:relative;
	border-bottom-left-radius:0px !important;
	border-bottom-right-radius:0px !important;
	border-color:#dfdfdf !important;
	border-bottom:0px !important; 		
}

.sticky:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: linear-gradient(to right, #fafafa, #fda220, #fafafa);
}

/* Read more link */
.rdmore a {
    background-color: transparent;
    color: var(--sps-primary);
    padding: 2px 0;
    box-shadow: none;
    border-radius: 0;
    font-weight: 500;
}

.rdmore a:hover {
    background: transparent;
    color: var(--sps-text-dark);
    transform: none;
    box-shadow: none;
}

/* Page header (search, archive titles) */
.page-header {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--sps-border);
}

.page-header .page-title {
    margin: 0;
    font-size: 26px;
}

/* No results / 404 */
.no-results,
.error-404 {
    background-color: #fff;
    border: 1px solid var(--sps-border);
    border-radius: var(--sps-radius);
    padding: 40px;
    box-shadow: var(--sps-shadow-sm);
}

/* ==========================================================================
   09. Pagination & Post Navigation
   ========================================================================== */
.pagination,
.posts-navigation,
.post-navigation {
    margin: 30px 0 30px;
    display: block;
    clear: both;
}

.pagination .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0;
}

.pagination .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
    margin-right: auto;
    text-align: left;
}

.pagination .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
    margin-left: auto;
    text-align: right;
}

.pagination .nav-links a,
.pagination .nav-links span,
.posts-navigation .nav-links a,
.post-navigation .nav-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    background-color: #fff;
    color: var(--sps-text-dark);
    border: 1px solid var(--sps-border);
    border-radius: var(--sps-radius-sm);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: all var(--sps-transition);
}

.pagination .nav-links a:hover,
.pagination .nav-links span.current,
.posts-navigation .nav-links a:hover,
.post-navigation .nav-links a:hover {
    background-color: var(--sps-primary);
    border-color: var(--sps-primary);
    color: #fff;
    text-decoration: none;
}

.pagination .nav-links span.dots {
    background: transparent;
    border-color: transparent;
}


/* ==========================================================================
   10. Sidebar & Widgets
   ========================================================================== */
#sidebar ol.wp-block-latest-comments{
	padding-left:0px;
}   

#sidebar ol.wp-block-latest-comments a{color: var(--sps-text);}

#sidebar {
    width: 320px;
    flex: 0 0 320px;
    float: none;
    overflow: visible;
    font-size: 15px;
}

#sidebar aside.widget,
.widget {
    padding: 24px !important;
    margin-bottom: 24px;
    box-sizing: border-box;
	border:1px solid #dfdfdf;
	border-radius:8px;
}

#sidebar aside .wp-block-search {
    display: flex;
    flex-wrap: wrap;
}

#sidebar aside .wp-block-search__label {
    flex: 0 0 100%;
    width: 100%;
    margin-bottom: 8px;
	top:-5px;
}

#sidebar aside .wp-block-search__inside-wrapper {
    display: flex;
    flex: 0 0 100%;
    width: 100%;
}

#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: 'Poppins';
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 8px;
    padding: 0;
    position: relative;
    border: 0 !important;
    display: block;
}

#sidebar h3.widget-title.titleborder span {
    border: 0;
}

.titleborder span:after {
    display: none;
}

#sidebar ul, #sidebar ol{
    list-style: none;
    padding: 0;
    margin: 0;
}

#sidebar ul li, #sidebar ol li{
    list-style: none;
    padding: 8px 0;
    border-bottom: 1px solid var(--sps-bg-alt);
    margin: 0;
}

#sidebar ul li:last-child, #sidebar ol li:last-child{
    border-bottom: 0;
}

#sidebar ul li a, #sidebar ol li a{
    color: var(--sps-text);
    text-decoration: none;
    display: inline-block;
    line-height: 1.5;
}

#sidebar ul li a:hover, #sidebar ol li a:hover{
    color: var(--sps-primary);
    text-decoration: none;
}

#sidebar .widget li ul.children,
#sidebar .widget li ul.sub-menu {
    padding: 8px 0 0 14px;
    margin-top: 6px;
    border-top: 1px solid var(--sps-bg-alt);
    list-style: none;
}

#sidebar .wp-block-search__input {
    border: 1px solid var(--sps-border);
    padding: 9px 12px;
    border-radius: 0px !important;
}

#sidebar .wp-block-search__button {
    border: 0;
    background-color: var(--sps-primary);
    color: #fff;
    padding: 0 16px;
    cursor: pointer;
	border-radius: 0px !important;
}

#sidebar .wp-block-search__button:hover {
    background-color: var(--sps-primary-dark);
}

#sidebar p:empty {
    display: none;
}

/* Tag cloud */
.tagcloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tagcloud a {
    display: inline-block;
    background-color: var(--sps-bg-alt);
    color: var(--sps-text-dark) !important;
    font-size: 13px !important;
    padding: 6px 12px;
    border-radius: var(--sps-radius-pill);
    text-decoration: none;
    transition: background-color var(--sps-transition), color var(--sps-transition);
}

.tagcloud a:hover {
    background-color: var(--sps-primary);
    color: #fff !important;
    text-decoration: none;
}

/* Calendar widget */
.widget_calendar table {
    width: 100%;
    border-collapse: collapse;
}

.widget_calendar th,
.widget_calendar td {
    padding: 6px;
    text-align: center;
    border: 1px solid var(--sps-border);
    font-size: 13px;
}

.widget_calendar th {
    background-color: var(--sps-bg-alt);
}


/* ==========================================================================
   11. Comments
   ========================================================================== */
#comments {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 2px solid var(--sps-border);
}

.comments-title {
    font-size: 22px;
    margin-bottom: 24px;
}

.comment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
}

.comment-list li {
    list-style: none;
    margin-bottom: 20px;
}

.comment-list .children {
    list-style: none;
    padding: 0;
    margin-left: 30px;
    margin-top: 20px;
}

.comment-body {
    background-color: #fff;
    border: 1px solid var(--sps-border);
    border-radius: var(--sps-radius);
    padding: 20px;
    box-shadow: var(--sps-shadow-sm);
}

.comment-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.comment-author.vcard{
	float:none;
}

.comment-author .avatar {
    border-radius: 50%;
    border: 2px solid var(--sps-border);
}

.comment-author .fn {
    font-weight: 600;
    color: var(--sps-text-dark);
    font-style: normal;
}

.comment-metadata {
    font-size: 13px;
    color: var(--sps-muted);
    margin-bottom: 10px;
}

.comment-metadata a {
    color: var(--sps-muted);
    text-decoration: none;
}

.reply {
    margin-top: 10px;
}

.reply .comment-reply-link {
    display: inline-block;
    padding: 6px 14px;
    background-color: var(--sps-bg-alt);
    color: var(--sps-text-dark);
    border-radius: var(--sps-radius-pill);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

.reply .comment-reply-link:hover {
    background-color: var(--sps-primary);
    color: #fff;
}

.comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.comment-form-cookies-consent input[type="checkbox"] {
    width: auto;
    margin: 6px 0 0;
    float: none;
}

.comment-form-cookies-consent label {
    margin: 0;
    font-weight: 400;
    color: var(--sps-text);
}

.comment-respond {
    margin-top: 30px;
    background-color: #fff;
}

.comment-reply-title {
    margin-top: 0;
    font-size: 20px;
}

.comment-form p {
    margin-bottom: 14px;
}

.comment-form p.form-submit{
	margin-top:20px !important;
}

.comment-form label {
    display: block;
    margin-bottom: 6px;
}


/* ==========================================================================
   12. Footer & Copyright
   ========================================================================== */
#footer {
    background-color: var(--sps-footer-bg);
    background-image: none;
    color: var(--sps-footer-text);
    padding: 0;
}

#footer-wrapper {
    width: 100%;
}

/* =========================================
   GENERIC (Reset tweaks if needed)
========================================= */
.social-icons br {
    display: none;
}

/* =========================================
   OBJECTS (Layout)
========================================= */
.o-footer {
    background-color: var(--sps-footer-bg);
}

.o-layout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

/* Left / Right alignment */
.o-layout__left {
    text-align: left;
}

.o-layout__right {
    text-align: right;
}

/* =========================================
   COMPONENTS (Footer UI)
========================================= */

/* Logo */
.c-footer-logo {
    padding: 0 0 var(--sps-spacing-y) 0;
}

.c-footer-logo img {
    max-width: 100%;
    height: auto;
}

/* Social */
.c-footer-social {
    padding: 0 0 var(--sps-spacing-y) 0;
}

/* Social Icons Wrapper */
.c-social-icons {
    display: inline-flex;
    gap: 4px;
}

/* Social Icon */
.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: 50%;
    background-color: var(--sps-icon-bg) !important;
    transition: 0.3s ease;
}

/* Hover */
.c-social-icons__link:hover {
    background-color: var(--sps-icon-hover) !important;
}

/* =========================================
   COMPONENT MODIFIERS (Icons)
========================================= */

.c-social-icons__link--fb {
    background: url(images/icon-fb.png) no-repeat center center;
}

.c-social-icons__link--tw {
    background: url(images/icon-tw.png) no-repeat center center;
}

.c-social-icons__link--in {
    background: url(images/icon-in.png) no-repeat center center;
}

.c-social-icons__link--insta {
    background: url(images/icon-insta.png) no-repeat center center;
}

.c-social-icons__link--yt {
    background: url(images/icon-youtube.png) no-repeat center center;
}

.u-clear {
    clear: both;
}

.footerarea {
    background: transparent;
    padding: 0;
}
.footer.ftr-widg {
    background: none;
	background-color:#FFF;
	padding:60px 45px 0 45px;
	border-radius:15px;
}
.footer-all {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
    align-items: flex-start;
}
.footer-lft,
.footer-rght {
    width: auto;
    float: none;
}
.footer-rght {
    display: contents;
}
.rfl-row {
    display: contents;
}
.rfl-row .cols-3 {
    width: auto;
    float: none;
}

.footer aside.widget {
    background: transparent;
    border: 0;
    box-shadow: none !important;
    padding: 0 !important;
    margin-bottom: 15px;
}

.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6 {
    font-family: var(--sps-font-logo);
    font-size: 24px;
    font-weight: 600;
    color: #ffffff;
    position: relative;
	line-height:1.2px;
	padding:0 0 40px 0;
}

.footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer ul li {
    padding: 3px 0;
    border: 0;
    list-style: none;
}

.footer ul li.wp-block-social-link a{
	font-size:inherit;
	color:inherit !important;
}

.footer ul li a,
.footer-row ul li a,
.footer-row .cols-3 ul li a {
    color: var(--sps-footer-text) !important;
    text-decoration: none;
    transition: color var(--sps-transition);
	font-size: 17px;
 	font-weight: 300;
}

.footer ul li a:hover,
.footer-row ul li a:hover,
.footer-row .cols-3 ul li a:hover {
    color: var(--sps-primary) !important;
    text-decoration: none;
}

.footer p {
    color: var(--sps-footer-text);
    line-height: 1.8;
    margin: 0 0 14px;
	font-weight:300;
	font-size:17px;
}

.footer a {
    color: var(--sps-primary);
}

.footer a:hover {
    color: #fff;
}

.ftpad{padding:80px 0 60px 0;}

/* Copyright bar */
.copyright-wrapper {
    background-color: #16417f;
    padding: 0;
    border: 0;
}

.copyright-wrapper .container{
	border-top: 1px solid #40678c;
}

.copyright-wrapper .copyright-txt {
    background-color: transparent !important;
    color: #fff;
    text-align: center;
    padding: 35px 0 30px 0;
    font-size: 14px;
    border: 0;
    float: none;
}

.copyright-txt a {
    color: #fda220 !important;
    text-decoration: none;
}

.copyright-txt a:hover {
    color: #000 !important;
    text-decoration: underline;
}


/* ==========================================================================
   13. Block Editor / Gutenberg
   ========================================================================== */
.wp-block-quote,
.wp-block-quote.is-style-skt-alumni-plain {
    border-left: 4px solid var(--sps-primary);
    background-color: var(--sps-bg-alt);
    padding: 18px 24px;
    margin: 24px 0;
    border-radius: 0 var(--sps-radius-sm) var(--sps-radius-sm) 0;
    font-style: italic;
    color: var(--sps-text-dark);
}

.wp-block-quote.is-style-skt-alumni-plain {
    background: transparent;
    border-left-color: var(--sps-primary);
}

.wp-block-quote cite {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    color: var(--sps-muted);
    font-style: normal;
}

/* Gutenberg Buttons */
.wp-block-button {
    margin-bottom: 24px;
}

.wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 26px;
    background-color: var(--sps-primary);
    color: #fff;
    border: 0;
    border-radius: var(--sps-radius-pill);
    font-family: var(--sps-font-body);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--sps-transition), color var(--sps-transition), transform var(--sps-transition), box-shadow var(--sps-transition);
}

.wp-block-button__link:hover,
.wp-block-button__link:focus {
    background-color: var(--sps-primary-dark);
    color: #fff;
    text-decoration: none;
}

.wp-block-button__link:focus-visible {
    outline: 2px solid var(--sps-primary);
    outline-offset: 3px;
}

/* Outline button */
.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent;
    color: var(--sps-primary);
    border: 1px solid var(--sps-primary);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
    background-color: var(--sps-primary);
    color: #fff;
}

/* Square button */
.wp-block-button.is-style-squared .wp-block-button__link {
    border-radius: 0;
}

/* Button alignment */
.wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

.wp-block-buttons.is-content-justification-center {
    justify-content: center;
}

.wp-block-buttons.is-content-justification-right {
    justify-content: flex-end;
}

.wp-block-buttons.is-content-justification-space-between {
    justify-content: space-between;
}

/* Full-width button */
.wp-block-button.alignfull,
.wp-block-button.is-style-fill {
    width: auto;
}

.wp-block-button.alignfull .wp-block-button__link {
    width: 100%;
}

@media (max-width: 767px) {
    .wp-block-button__link {
        min-height: 42px;
        padding: 10px 22px;
        font-size: 14px;
    }

    .wp-block-buttons {
        gap: 10px;
    }
}

.wp-block-cover,
.wp-block-image {
    margin-bottom: 24px;
}

.wp-block-image img {
    border-radius: var(--sps-radius-sm);
}

.wp-block-group {
    margin-bottom: 18px;
}

.wp-block-pullquote {
    border-top: 2px solid var(--sps-primary);
    border-bottom: 2px solid var(--sps-primary);
    padding: 24px 0;
    margin: 30px 0;
    color: var(--sps-text-dark);
}

.wp-block-separator {
    border: 0;
    border-top: 1px solid var(--sps-border);
    margin: 30px auto;
    max-width: 100px;
}

.wp-block-separator.is-style-wide {
    max-width: 100%;
}

.wp-block-table table {
    width: 100%;
    border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
    border: 1px solid var(--sps-border);
    padding: 10px 14px;
}

.wp-block-table thead th {
    background-color: var(--sps-bg-alt);
    color: var(--sps-text-dark);
}

.wp-caption,
.wp-block-image figure {
    width: auto !important;
    margin-bottom: 20px;
}

.wp-caption img {
    max-width: 100%;
    height: auto;
}

.wp-caption-text,
.wp-block-image figcaption,
.gallery-caption {
    font-size: 13px;
    color: var(--sps-muted);
    background-color: var(--sps-bg-alt);
    padding: 8px 12px;
    text-align: center;
    line-height: 1.4;
    border-radius: 0 0 var(--sps-radius-sm) var(--sps-radius-sm);
    margin: 0;
}

.alignright {
    float: right;
    margin: 6px 0 18px 24px;
    clear: right;
}

.alignleft {
    float: left;
    margin: 6px 24px 18px 0;
    clear: left;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    max-width: 100%;
}

.alignwide,
.alignfull {
    margin-left: auto;
    margin-right: auto;
}

/* Page links (multipage post) */
.page-links {
    margin: 20px 0;
    font-weight: 500;
}

.page-links .post-page-numbers,
.page-links a .post-page-numbers {
    display: inline-block;
    min-width: 32px;
    padding: 4px 10px;
    margin: 0 4px;
    background-color: var(--sps-bg-alt);
    color: var(--sps-text-dark);
    text-decoration: none;
    border-radius: var(--sps-radius-sm);
    text-align: center;
}

.page-links a:hover .post-page-numbers,
.page-links .post-page-numbers.current {
    background-color: var(--sps-primary);
    color: #fff;
}


/* ==========================================================================
   14. WooCommerce essentials
   ========================================================================== */
.woocommerce ul.products li.product .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    background-color: var(--sps-primary) !important;
    color: #fff !important;
    border-radius: var(--sps-radius-pill);
    padding: 10px 22px;
    font-weight: 500;
    transition: all var(--sps-transition);
}

.woocommerce ul.products li.product .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
    background-color: var(--sps-primary-black) !important;
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
    background-color: var(--sps-secondary) !important;
}

.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
}

.woocommerce ul.products li.product {
    background-color: #fff;
    border: 1px solid var(--sps-border);
    border-radius: var(--sps-radius);
    padding: 16px !important;
    box-shadow: var(--sps-shadow-sm);
    transition: transform var(--sps-transition), box-shadow var(--sps-transition);
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
}

.woocommerce ul.products li.product a img {
    width: 100%;
}

@media (max-width: 991px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr;
    }
}

.woocommerce-pagination ul.page-numbers,
.woocommerce nav.woocommerce-pagination ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
}

.woocommerce-pagination ul.page-numbers li a,
.woocommerce-pagination ul.page-numbers li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    background-color: #fff;
    color: var(--sps-text-dark);
    border: 1px solid var(--sps-border);
    border-radius: var(--sps-radius-sm);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: all var(--sps-transition);
}

.woocommerce-pagination ul.page-numbers li a:hover,
.woocommerce-pagination ul.page-numbers li span.current {
    background-color: var(--sps-primary);
    border-color: var(--sps-primary);
    color: #fff;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-3px);
    box-shadow: var(--sps-shadow);
}

.woocommerce ul.products li.product img {
    border-radius: var(--sps-radius-sm);
    margin-bottom: 12px;
}

.woocommerce ul.products li.product .price {
    color: var(--sps-primary);
    font-weight: 600;
}

.woocommerce .star-rating span::before {
    color: var(--sps-primary);
}

.woocommerce-product-search button[type='submit'] {
    background-color: var(--sps-primary);
    color: #fff;
    border: 0;
    padding: 10px 18px;
    border-radius: var(--sps-radius-sm);
    cursor: pointer;
}

.woocommerce-product-search button[type='submit']:hover {
    background-color: var(--sps-primary-dark);
}

.wc-block-cart__submit-button,
.wc-block-checkout__submit-button {
    background-color: var(--sps-primary);
    color: #fff !important;
    border-radius: var(--sps-radius-pill);
	text-decoration:none;
}

.wc-block-cart__submit-button:hover,
.wc-block-checkout__submit-button:hover {
    background-color: var(--sps-primary-black);
	color: #fff !important;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-radius: var(--sps-radius-sm);
    border-top: 0;
    padding: 16px 16px 16px 55px;
}

.woocommerce-message {
    background-color: #e8f5e9;
    color: #2e7d32;
}


/* ==========================================================================
   15. Tables, Code, Blockquote
   ========================================================================== */
.entry-content table td, .entry-content table th, .comment-body table td, .comment-body table th{text-align:center;}   
   
   
table:not(.wp-block-table table):not(.widget_calendar table) {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
}

th, td {
    padding: 10px 14px;
    border: 1px solid var(--sps-border);
    text-align: left;
}

th {
    background-color: var(--sps-bg-alt);
    color: var(--sps-text-dark);
    font-weight: 600;
}

code,
kbd,
pre,
samp {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 14px;
}

code,
kbd {
    background-color: var(--sps-bg-alt);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--sps-text-dark);
}

pre {
    background-color: var(--sps-bg-alt);
    padding: 18px;
    overflow-x: auto;
    border-radius: var(--sps-radius-sm);
    line-height: 1.6;
    margin: 0 0 20px;
}

blockquote {
    border-left: 4px solid var(--sps-primary);
    background-color: var(--sps-bg-alt);
    padding: 16px 22px;
    margin: 24px 0;
    color: var(--sps-text-dark);
    font-style: italic;
    border-radius: 0 var(--sps-radius-sm) var(--sps-radius-sm) 0;
}


/* ==========================================================================
   16. Accessibility & Utilities
   ========================================================================== */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    -webkit-clip-path: none;
    clip-path: none;
    color: var(--sps-text-dark);
    display: block;
    font-size: 14px;
    font-weight: 600;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 12px 22px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100001;
}

.skip-link:focus {
    left: 6px;
    top: 6px;
}

/* Edit link */
.edit-link {
    display: inline-block;
    margin: 10px 0;
    font-size: 13px;
}

.edit-link a {
    color: var(--sps-muted);
    text-decoration: underline;
}

@media (max-width: 1024px) {
    :root {
        --sps-container: 100%;
    }

    .menu-toggle {
        display: inline-flex !important;
        position: relative;
        z-index: 100002;
    }

    .main-navigation > div > ul,
    .main-navigation > ul {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        height: 100vh;
        max-height: 100vh;
        margin: 0;
        padding: 80px 0 40px;
        background-color: #1f4d8f;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 0;
        list-style: none;
        box-shadow: none;
        border-radius: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        z-index: 100000;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        visibility: hidden;
        pointer-events: none;
    }

    #site-navigation.toggled > div > ul,
    #site-navigation.toggled > ul,
    .main-navigation.toggled > div > ul,
    .main-navigation.toggled > ul {
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
        display: flex;
    }

    /* Lock body scroll when menu is open */
    body.menu-open {
        overflow: hidden;
    }

    /* Backdrop button bar inside the open menu (close button area) */
    #site-navigation.toggled .menu-toggle,
    .main-navigation.toggled .menu-toggle {
        position: fixed;
        top: 18px;
        right: -70px !important;
        z-index: 100003;
        background: rgba(0,0,0,1);
        border-radius: var(--sps-radius-sm);
		border:none;
    }
    #site-navigation.toggled .menu-toggle span,
    .main-navigation.toggled .menu-toggle span {
        background: #fff !important;
    }
	
#site-navigation.toggled .menu-toggle {
    position: relative;
}

#site-navigation.toggled .menu-toggle span {
    position: absolute;
}	
	
#site-navigation.toggled .menu-toggle span,
.main-navigation.toggled .menu-toggle span {
    transition: all 0.3s ease;
}

#site-navigation.toggled .menu-toggle span:nth-child(1),
.main-navigation.toggled .menu-toggle span:nth-child(1) {
    transform: rotate(45deg);
    top: 21px;
}

#site-navigation.toggled .menu-toggle span:nth-child(2),
.main-navigation.toggled .menu-toggle span:nth-child(2) {
    opacity: 0;
}

#site-navigation.toggled .menu-toggle span:nth-child(3),
.main-navigation.toggled .menu-toggle span:nth-child(3) {
    transform: rotate(-45deg);
    top: 21px;
}	

    .main-navigation li {
        width: 100%;
        position: relative;
        list-style: none;
    }

    .main-navigation a {
        display: block;
        width: 100%;
        padding: 14px 24px;
        border-radius: 0;
        color: #fff;
        font-size: 16px;
        font-weight: 500;
        text-decoration: none;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        background: transparent;
        text-align: left;
    }

    .main-navigation a:hover,
    .main-navigation a:focus,
    .main-navigation .current-menu-item > a,
    .main-navigation .current_page_item > a {
        background: rgba(255,255,255,0.05);
        color: #fff;
    }

    /* Show the dropdown caret button on mobile */
    .main-navigation .dropdown-toggle {
        display: inline-flex !important;
        position: absolute;
        top: 0;
        right: 0;
        width: 56px;
        height: 50px;
        background: transparent;
        border: 0;
        cursor: pointer;
        padding: 0;
        align-items: center;
        justify-content: center;
        z-index: 5;
        color: #fff;
    }
    .main-navigation .dropdown-toggle .dropdown-icon {
        width: 10px;
        height: 10px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform 0.2s ease;
    }
    .main-navigation .dropdown-open > .dropdown-toggle .dropdown-icon {
        transform: rotate(-135deg);
    }

    /* Hide the desktop ::after caret arrows on mobile */
    .main-navigation > div > ul > .menu-item-has-children > a::after,
    .main-navigation > ul > .menu-item-has-children > a::after,
    .main-navigation > div > ul > .page_item_has_children > a::after,
    .main-navigation > ul > .page_item_has_children > a::after,
    .main-navigation li.menu-item-has-children > a::after,
    .main-navigation li.page_item_has_children > a::after {
        display: none !important;
    }

    /* Sub-menus: stacked, collapsed by default, expand on .dropdown-open */
    .main-navigation ul ul {
        position: static !important;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        box-shadow: none;
        padding: 0;
        margin: 0;
        list-style: none;
        background: rgba(0,0,0,0.25);
        min-width: 0;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        border-radius: 0;
        display: block;
    }

    .main-navigation li.dropdown-open > ul {
        max-height: 2000px;
    }

    .main-navigation ul ul a {
        padding: 12px 24px 12px 44px;
        font-size: 15px;
        color: rgba(255,255,255,0.92);
    }

    .main-navigation ul ul ul a {
        padding-left: 64px;
        font-size: 14px;
        color: rgba(255,255,255,0.85);
    }

    .main-navigation ul ul ul {
        margin: 0;
        left: 0;
        transform: none;
        background: rgba(0,0,0,0.3);
    }

    /* Disable any leftover hover-based expansion on mobile */
    .main-navigation li:hover > ul {
        max-height: 0;
    }
    .main-navigation li.dropdown-open > ul,
    .main-navigation li.dropdown-open:hover > ul {
        max-height: 2000px;
    }

    .page_content {
        flex-direction: column;
        gap: 40px;
        padding: 40px 0;
    }

    #sidebar {
        width: 100%;
        flex: 1 1 100%;
    }

    .blogpost-wrap-wsb {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-all {
        grid-template-columns: 1fr 1fr;
    }

    .footer-rght {
        grid-column: 1 / -1;
    }

    .rfl-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 767px) {
    h1 { font-size: 28px; }
    h2 { font-size: 24px; }
    h3 { font-size: 20px; }

    .header > .container,
    .head-bar > .container {
        min-height: 70px;
        flex-wrap: wrap;
    }

    .srcrt {
        order: 4;
        width: 100%;
        margin-left: 0;
    }

    .skt-header-button {
        display: flex;
        justify-content: center;
    }

    .banner-container {
        padding: 35px 20px;
    }

    .banner-container h1 {
        font-size: 28px;
    }

    .inner-banner-thumb {
        min-height: 160px;
    }

    .footer-all {
        grid-template-columns: 1fr;
    }

    .rfl-row {
        grid-template-columns: 1fr;
    }

    .footerarea {
        padding: 40px 0 20px;
    }

    .comment-list .children {
        margin-left: 14px;
    }

    article.post .entry-header,
    article.hentry .entry-header,
    article.post .entry-content,
    article.hentry .entry-content,
    article.post .entry-summary,
    article.hentry .entry-summary,
    article.post .rdmore,
    article.hentry .rdmore {
        padding-left: 18px;
        padding-right: 18px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 14px;
    }

    .banner-container h1 {
        font-size: 24px;
    }

    .entry-title {
        font-size: 20px;
    }

    .blogpost-wrap-wsb {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   13. Block Editor / Gutenberg
   ========================================================================== */

.wp-block-image figcaption {
    font-size: 13px;
    color: #666;
    margin-top: 8px;
    text-align: center;
}

.wp-block-pullquote {
    border-top: 4px solid #f69c00;
    border-bottom: 4px solid #f69c00;
    color: #333;
    padding: 2em 0;
}

.wp-block-button__link {
    background-color: #282828;
    color: #fff;
    padding: 12px 30px;
    border-radius: 4px;
    transition: 0.3s;
}

.wp-block-button__link:hover {
    background-color: #333;
    color: #fff !important;
}

/* ==========================================================================
   14. WooCommerce essentials
   ========================================================================== */

.woocommerce span.onsale {
    background-color: #f69c00;
	min-height: 2.66em;
    min-width: 2.66em;
    line-height: 2.66;
	font-size:12px !important;
}

.woocommerce ul.products li.product .button {
    background-color: #333;
    color: #fff;
}

.woocommerce ul.products li.product .button:hover {
    background-color: #f69c00;
}

.woocommerce div.product p.price, .woocommerce div.product span.price {
    color: #f69c00;
}

.woocommerce #respond input#submit.alt, 
.woocommerce a.button.alt, 
.woocommerce button.button.alt, 
.woocommerce input.button.alt {
    background-color: #f69c00;
}

/* ==========================================================================
   15. Tables, Code, Blockquote
   ========================================================================== */

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

th, td {
    padding: 12px;
    border: 1px solid #eee;
    text-align: left;
}

code, kbd, tt, var {
    font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
    background: #f4f4f4;
    padding: 2px 4px;
}

blockquote {
    font-style: italic;
    border-left: 5px solid #f69c00;
    margin: 20px 0;
    padding: 10px 20px;
    background: #fafafa;
}

/* ==========================================================================
   16. Accessibility & Utilities
   ========================================================================== */

.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #eee;
    clip: auto !important;
    clip-path: none;
    color: #444;
    display: block;
    font-size: 1em;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

.alignleft { float: left; margin: 6px 24px 18px 0; }
.alignright { float: right; margin: 6px 0 18px 24px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; text-align: center; }


/* ==========================================================================
   17. Gutenberg Columns, Galleries, Buttons & Extra Components
   ========================================================================== */

/* Columns block */
.wp-block-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
    margin-bottom: 24px;
}

.wp-block-column {
    flex: 1 1 0;
    min-width: 0;
}

@media (max-width: 767px) {
    .wp-block-columns:not(.is-not-stacked-on-mobile) {
        flex-direction: column;
    }
    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
        flex-basis: 100% !important;
        margin-bottom: 20px;
    }
}

/* Media & Text block */
.wp-block-media-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: center;
    margin-bottom: 24px;
}

.wp-block-media-text .wp-block-media-text__media img {
    width: 100%;
    border-radius: var(--sps-radius-sm);
}

@media (max-width: 767px) {
    .wp-block-media-text {
        grid-template-columns: 1fr;
    }
}

/* Buttons block (group of multiple buttons) */
.wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.wp-block-button__link.is-style-outline,
.is-style-outline .wp-block-button__link {
    background-color: transparent;
    color: var(--sps-primary);
    border: 2px solid var(--sps-primary);
}

.wp-block-button__link.is-style-outline:hover,
.is-style-outline .wp-block-button__link:hover {
    background-color: var(--sps-primary);
    color: #fff;
}

.wp-block-button__link.is-style-squared {
    border-radius: 0;
}

/* Gallery block (modern + classic shortcode gallery) */
.wp-block-gallery,
.blocks-gallery-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.wp-block-gallery .wp-block-image,
.blocks-gallery-item {
    margin: 0;
    flex: 1 1 calc(33.333% - 16px);
}

.wp-block-gallery img,
.blocks-gallery-item img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: var(--sps-radius-sm);
}

.wp-block-gallery.columns-2 .wp-block-image { flex-basis: calc(50% - 16px); }
.wp-block-gallery.columns-4 .wp-block-image { flex-basis: calc(25% - 16px); }
.wp-block-gallery.columns-5 .wp-block-image { flex-basis: calc(20% - 16px); }

/* Classic .gallery shortcode markup */
.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 0 24px;
}

.gallery-item {
    margin: 0;
    flex: 1 1 calc(33.333% - 16px);
    list-style: none;
}

.gallery-columns-2 .gallery-item { flex-basis: calc(50% - 16px); }
.gallery-columns-4 .gallery-item { flex-basis: calc(25% - 16px); }
.gallery-columns-5 .gallery-item { flex-basis: calc(20% - 16px); }
.gallery-columns-6 .gallery-item { flex-basis: calc(16.666% - 16px); }

.gallery-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--sps-radius-sm);
    border: 1px solid var(--sps-border);
}

@media (max-width: 600px) {
    .gallery-item,
    .wp-block-gallery .wp-block-image,
    .blocks-gallery-item {
        flex-basis: calc(50% - 16px) !important;
    }
}

/* Generic figure/caption fallback outside Gutenberg-specific classes */
figure {
    margin: 0 0 20px;
}

figcaption {
    font-size: 13px;
    color: var(--sps-muted);
    margin-top: 8px;
    text-align: center;
}

/* Checkbox / radio inputs shouldn't inherit the full-width text-input styling */
input[type="checkbox"],
input[type="radio"] {
    width: auto;
    max-width: none;
    padding: 0;
    margin-right: 6px;
    accent-color: var(--sps-primary);
    -webkit-appearance: auto;
    appearance: auto;
}

/* Comment form: name/email/url fields sit side by side on wider screens */
.comment-form-author,
.comment-form-email,
.comment-form-url {
    display: inline-block;
    width: 100%;
    max-width: 100%;
    vertical-align: top;
    box-sizing: border-box;
}

@media (min-width: 600px) {
    .comment-form-author,
    .comment-form-email {
        width: calc(50% - 10px);
        margin-right: 20px;
    }
    .comment-form-email {
        margin-right: 0;
    }
    .comment-form-url {
        width: 100%;
    }
}

/* Default (non-block) WordPress search widget keeps the same layout as .search-form */
.widget_search form {
    display: flex;
    gap: 8px;
}

.widget_search .search-field {
    flex: 1;
    width: 100%;
}

/* Wide tables shouldn't break mobile layout */
@media (max-width: 600px) {
    .entry-content table,
    .wp-block-table table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}


/* ==========================================================================
   18. Widgets — Full Default Coverage
   ========================================================================== */

/* These share the same list/link treatment already set on #sidebar ul,
   but the individual widget types below need their own internal layout. */

.widget_recent_entries ul li,
.widget_recent_comments ul li,
.widget_archive ul li,
.widget_categories ul li,
.widget_pages ul li,
.widget_meta ul li,
.widget_rss ul li {
    padding: 10px 0;
}

.widget_recent_entries .post-date,
.widget_rss .rss-date {
    display: block;
    font-size: 12px;
    color: var(--sps-muted);
    margin-top: 2px;
}

.widget_rss .rssSummary {
    font-size: 14px;
    color: var(--sps-text);
    margin: 6px 0 0;
}

.widget_rss cite {
    display: block;
    font-size: 12px;
    color: var(--sps-muted);
    font-style: normal;
    margin-top: 4px;
}

.widget_categories ul li,
.widget_archive ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.widget select,
.widget_categories select,
.widget_archive select {
    width: 100%;
}

.widget_text img,
.widget_media_image img,
.textwidget img {
    max-width: 100%;
    height: auto;
    border-radius: var(--sps-radius-sm);
}

.widget_text p:last-child,
.textwidget p:last-child {
    margin-bottom: 0;
}

.widget_nav_menu ul.menu li a,
.widget_pages ul li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Author bio box (common in single post templates) */
.author-bio,
.author-box {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    background-color: #fff;
    border: 1px solid var(--sps-border);
    border-radius: var(--sps-radius);
    padding: 24px;
    margin: 30px 0;
}

.author-bio .avatar,
.author-box .avatar {
    border-radius: 50%;
    flex-shrink: 0;
}

.author-bio .author-name,
.author-box .author-name {
    font-size: 17px;
    font-weight: 600;
    color: var(--sps-text-dark);
    margin: 0 0 6px;
}

.author-bio p,
.author-box p {
    margin: 0;
    font-size: 14px;
    color: var(--sps-text);
}

/* Breadcrumbs */
.breadcrumb,
.breadcrumbs,
.rank-math-breadcrumb,
.yoast-breadcrumb {
    font-size: 13px;
    color: var(--sps-muted);
    margin-bottom: 18px;
}

.breadcrumb a,
.breadcrumbs a,
.rank-math-breadcrumb a,
.yoast-breadcrumb a {
    color: var(--sps-muted);
    text-decoration: none;
}

.breadcrumb a:hover,
.breadcrumbs a:hover,
.rank-math-breadcrumb a:hover,
.yoast-breadcrumb a:hover {
    color: var(--sps-primary);
}


/* ==========================================================================
   19. Extra Form Controls
   ========================================================================== */
::placeholder {
    color: var(--sps-muted);
    opacity: 1;
}

select {
    background-image: linear-gradient(45deg, transparent 50%, var(--sps-muted) 50%),
                       linear-gradient(135deg, var(--sps-muted) 50%, transparent 50%);
    background-position: calc(100% - 20px) center, calc(100% - 15px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 36px;
    cursor: pointer;
}

fieldset {
    border: 1px solid var(--sps-border);
    border-radius: var(--sps-radius-sm);
    padding: 18px 20px;
    margin: 0 0 20px;
}

legend {
    padding: 0 8px;
    font-weight: 600;
    color: var(--sps-text-dark);
}

input[type="file"] {
    width: 100%;
    padding: 10px;
    border: 1px dashed var(--sps-border);
    border-radius: var(--sps-radius-sm);
    background-color: var(--sps-bg-alt);
    cursor: pointer;
}

input[type="range"] {
    width: 100%;
    accent-color: var(--sps-primary);
    padding: 0;
    border: 0;
}

progress {
    width: 100%;
    height: 10px;
    border-radius: 10px;
    overflow: hidden;
    accent-color: var(--sps-primary);
}

meter {
    width: 100%;
}


/* ==========================================================================
   20. Extra Typography & Content Elements
   ========================================================================== */
mark {
    background-color: rgba(253, 162, 32, 0.25);
    color: var(--sps-text-dark);
    padding: 1px 4px;
    border-radius: 2px;
}

sup, sub {
    font-size: 70%;
}

abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
}

small {
    font-size: 85%;
    color: var(--sps-muted);
}

dl { margin: 0 0 20px; }
dt { font-weight: 600; color: var(--sps-text-dark); }
dd { margin: 0 0 12px 0; color: var(--sps-text); }

details {
    border: 1px solid var(--sps-border);
    border-radius: var(--sps-radius-sm);
    padding: 14px 18px;
    margin: 0 0 16px;
}

summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--sps-text-dark);
}

/* General content lists outside .entry-content (e.g. widget text, page templates) */
.page-content ul,
.page-content ol,
.textwidget ul,
.textwidget ol {
    padding-left: 22px;
    margin: 0 0 18px;
}

/* Responsive iframes/embeds (YouTube, Vimeo, etc.) */
.wp-block-embed__wrapper {
    position: relative;
}

.wp-block-embed__wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.wp-block-verse {
    font-family: inherit;
    white-space: pre-wrap;
    background-color: var(--sps-bg-alt);
    padding: 18px 22px;
    border-radius: var(--sps-radius-sm);
    margin: 0 0 24px;
}

.wp-block-preformatted {
    background-color: var(--sps-bg-alt);
    padding: 18px 22px;
    border-radius: var(--sps-radius-sm);
    white-space: pre-wrap;
    margin: 0 0 24px;
}

.wp-block-file {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 20px;
}

.wp-block-file__button {
    background-color: var(--sps-primary);
    color: #fff !important;
    padding: 8px 18px;
    border-radius: var(--sps-radius-pill);
    text-decoration: none;
    font-size: 13px;
}

.wp-block-file__button:hover {
    background-color: var(--sps-primary-dark);
}

.wp-block-spacer {
    width: 100%;
}


/* ==========================================================================
   21. WooCommerce — Single Product, Cart & Checkout
   ========================================================================== */
.woocommerce div.product .woocommerce-product-gallery__wrapper img {
    border-radius: var(--sps-radius-sm);
    border: 1px solid var(--sps-border);
}

.woocommerce div.product .flex-control-thumbs img {
    border-radius: var(--sps-radius-sm);
    opacity: 0.7;
    transition: opacity var(--sps-transition);
}

.woocommerce div.product .flex-control-thumbs img.flex-active,
.woocommerce div.product .flex-control-thumbs img:hover {
    opacity: 1;
}

.woocommerce div.product .quantity .qty {
    width: 80px;
    text-align: center;
    padding: 11px 10px;
}

.woocommerce div.product form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 30px 0 0;
    border-bottom: 1px solid var(--sps-border);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    margin: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: inline-block;
    padding: 12px 22px;
    color: var(--sps-text-dark);
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--sps-radius-sm) var(--sps-radius-sm) 0 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    background-color: var(--sps-primary);
    color: #fff;
}

.woocommerce div.product .woocommerce-tabs .panel {
    padding: 24px 0;
}

.woocommerce #reviews .comment-text {
    background-color: #fff;
    border: 1px solid var(--sps-border);
    border-radius: var(--sps-radius);
    padding: 18px;
}

.woocommerce table.shop_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
    padding: 14px;
    border: 1px solid var(--sps-border);
    text-align: left;
}

.woocommerce table.shop_table th {
    background-color: var(--sps-bg-alt);
}

.woocommerce-cart table.cart img {
    width: 70px;
    border-radius: var(--sps-radius-sm);
}

.woocommerce-checkout #payment {
    background-color: var(--sps-bg-alt);
    border-radius: var(--sps-radius);
    padding: 20px;
}

.woocommerce-checkout #payment ul.payment_methods {
    list-style: none;
    padding: 0;
}

.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
    position: absolute;
    top: 12px;
    left: 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.woocommerce ul.products li.product {
    position: relative;
}

.woocommerce-message::before,
.woocommerce-info::before {
    color: #4caf50;
}


/* ==========================================================================
   RTL — minimal flips for right-to-left languages
   ========================================================================== */
body.rtl .alignright { float: left; margin: 6px 24px 18px 0; }
body.rtl .alignleft  { float: right; margin: 6px 0 18px 24px; }
body.rtl #logo-main  { text-align: right; }

body.rtl #sidebar h2::after,
body.rtl #sidebar h3::after,
body.rtl #sidebar h4::after,
body.rtl #sidebar h5::after,
body.rtl #sidebar h6::after,
body.rtl #sidebar .widget-title::after,
body.rtl #sidebar .wp-block-search__label::after,
body.rtl .footer h2::after,
body.rtl .footer h3::after,
body.rtl .footer h4::after,
body.rtl .footer h5::after,
body.rtl .footer h6::after,
body.rtl .footer .widget-title::after {
    left: auto;
    right: 0;
}