/*
Theme Name: SKT Plastic Surgery
Theme URI: https://www.sktthemes.org/shop/skt-plastic-surgery/
Author: sonalsinha21
Author URI: https://wordpress.org/themes/author/sonalsinha21/
Description: SKT Plastic Surgery is a clean, modern, and fully responsive WordPress theme designed for plastic surgery clinics, cosmetic surgeons, dermatology practices, and medical spas. It offers essential customization options like custom logo, header, menus, footer widgets, and theme settings via the Customizer. The theme is translation-ready with RTL support and fully compatible with WooCommerce. It works seamlessly with Gutenberg, Elementor, and other popular page builders for flexible and intuitive design. Built using ITCSS and BEM methodology, it ensures fast performance, clean code, SEO-friendliness, and compatibility with popular WordPress plugins. Documentation: https://www.sktthemesdemo.net/documentation/skt-skincare-doc/
Template: skt-skincare
Version: 1.0
Requires at least: 5.6
Tested up to: 6.9
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-plastic-surgery
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 Plastic Surgery is a child theme of SKT Skincare. SKT Skincare is based on Underscores, which is distributed under the terms of the GNU GPL v2 or later.

SKT Plastic Surgery WordPress Theme, Copyright 2026 SKT Themes (sktthemes.org)
SKT Plastic Surgery 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
   ========================================================================== */


/* ==========================================================================
   01. CSS Variables & Reset
   ========================================================================== */
:root {
    --sps-primary: #cb6d46;
    --sps-primary-dark: #b15a37;
	--sps-primary-white: #ffffff;
	--sps-primary-black: #000000;
    --sps-secondary: #051d3a;
    --sps-text: #4a4a4a;
    --sps-text-dark: #1a1a1a;
    --sps-muted: #7a7a7a;
    --sps-border: #e8e8e8;
    --sps-bg: #ffffff;
    --sps-bg-alt: #f7f7f8;
    --sps-footer-bg: #0c1224;
    --sps-footer-text: #080808;
    --sps-copyright-bg: #060a18;
    --sps-footer-bg: #fdf5f0;
    --sps-footer-border: #dccdbf;
    --sps-icon-bg: #cb6d46;
    --sps-icon-hover: #282828;
    --sps-icon-size: 58px;
    --sps-spacing-y: 55px;	

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

    --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: 'Oswald', 'Poppins', 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;
}

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 20px;
    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;
    gap: 40px;
}

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 96%;
    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-bg);
    box-shadow: var(--sps-shadow-sm);
    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 60px 12px 20px;
    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: rgba(5, 29, 58, 0.35);
    box-shadow: none;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.transheader .site-title a,
.transheader .site-description,
.transheader .main-navigation a {
    color: #fff;
}

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: 52px;
}

#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-display);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
    letter-spacing: 0.2px;
}

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

.site-description {
    font-size: 13px;
    color: var(--sps-muted);
    margin: 4px 0 0;
    line-height: 1.2;
}

/* Primary Navigation */
#navigation {
    flex: 1;
    display: flex;
    justify-content: center;
	font-family: var(--sps-font-display);
}

.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;
	text-transform:uppercase;
}

/* 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: var(--sps-text-dark);
    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-primary);
}

/* ---------------------------------------------------------------------
   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;
    box-shadow: var(--sps-shadow);
    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: var(--sps-text);
    font-size: 15px;
    border-radius: 0;
    width: 100%;
}

.main-navigation ul ul a:hover,
.main-navigation ul ul a:focus {
    background-color: var(--sps-primary-black, #000000);
    color: var(--sps-primary);
}

/* 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 */
.srcrt {
    flex-shrink: 0;
}

.skt-header-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 26px 22px;
    font-size: 17px;
    font-weight: 500;
    border-radius: 999px;
	text-transform:uppercase;
	font-family: var(--sps-font-display);
    background: var(--sps-primary);
    color: var(--sps-primary-white);
    transition: all 0.25s ease;
}

.skt-header-button:hover,
.skt-header-button:focus {
    background: var(--sps-primary-black);
	text-decoration:none;
	color: #fff;
}

.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: var(--sps-secondary);
    min-height: 220px;
    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;
}

.inner-banner-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 29, 58, 0.6), rgba(5, 29, 58, 0.3));
    z-index: 2;
}

.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-size: 40px;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}


/* ==========================================================================
   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;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(203, 109, 70, 0.25);
    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(203, 109, 70, 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;
}

.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;
    gap: 30px;
}

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

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

article.post:hover,
article.hentry:hover,
.blog_lists:hover {
    box-shadow: var(--sps-shadow);
}

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 {
    padding-bottom: 24px;
    padding-top: 8px;
}

.entry-title {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 10px;
    line-height: 1.3;
}

.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 {
    border-left: 4px solid var(--sps-primary);
    border-bottom: 0;
}

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

.rdmore a:hover {
    background: transparent;
    color: var(--sps-text-dark);
    border-bottom-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;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin: 0;
}

.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 {
    width: 320px;
    flex: 0 0 320px;
    float: none;
    overflow: visible;
    font-size: 15px;
}

#sidebar aside.widget,
.widget {
    background-color: #fff;
    border: 1px solid var(--sps-border);
    border-radius: var(--sps-radius);
    padding: 24px !important;
    margin-bottom: 24px;
    box-shadow: var(--sps-shadow-sm) !important;
    box-sizing: border-box;
}

#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: 600;
    margin: 0 0 16px;
    padding: 0 0 12px;
    position: relative;
    border: 0 !important;
    padding-left: 0 !important;
    display: block;
}

#sidebar h2::after,
#sidebar h3::after,
#sidebar h4::after,
#sidebar h5::after,
#sidebar h6::after,
#sidebar .widget-title::after,
#sidebar .wp-block-search__label::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 3px;
    background-color: var(--sps-primary);
    border-radius: 2px;
}

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

.titleborder span:after {
    display: none;
}

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

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

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

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

#sidebar ul 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: var(--sps-radius-sm);
}

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

#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;
    border: 1px solid var(--sps-border);
    border-radius: var(--sps-radius);
    padding: 24px;
    box-shadow: var(--sps-shadow-sm);
}

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

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

.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%;
}

#footer .container{
	padding:0;
}

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

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

.o-footer__container .container{
    border-bottom: 1px solid var(--sps-footer-border);
}

.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: var(--sps-spacing-y) 0;
}

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

/* Social */
.c-footer-social {
    padding: 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: 20px 0 0 0;
}
.footer.ftr-widg {
    border: 0;
    background: none;
    padding: 30px 0 0 0 !important;
    border-radius: 0;
}
.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: 24px;
}

.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6 {
    font-family: var(--sps-font-heading);
    font-size: 18px;
    font-weight: 500;
    color: #080808;
    margin: 0 0 22px;
    position: relative;
}

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

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

.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);
    display: inline-block;
}

.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.7;
    margin: 0 0 14px;
}

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

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

/* Copyright bar */
.copyright-wrapper {
    background-color: var(--sps-footer-bg);
    padding: 0;
    border: 0;
}

.copyright-wrapper .container{
	border-top: 1px solid var(--sps-footer-border);	
}

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

.copyright-txt a {
    color: var(--sps-primary);
    text-decoration: none;
}

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


/* ==========================================================================
   13. Block Editor / Gutenberg
   ========================================================================== */
.wp-block-quote,
.wp-block-quote.is-style-skt-plastic-surgery-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-plastic-surgery-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;
}

.wp-block-button__link {
    border-radius: var(--sps-radius-pill);
}

.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 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);
}

.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
   ========================================================================== */
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: #051d3a;
        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: 18px;
        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;
    }

    .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%;
    }

    .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;
    }
}


/* ==========================================================================
   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: #f69c00;
    color: #fff;
    padding: 12px 30px;
    border-radius: 4px;
    transition: 0.3s;
}

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

/* ==========================================================================
   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; }

/* ==========================================================================
   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;
}