/*
Theme Name: SKT Lace
Theme URI: https://www.sktthemes.org/shop/skt-lace/
Author: sonalsinha21
Author URI: https://wordpress.org/themes/author/sonalsinha21/
Description: SKT Lace is a stylish WordPress theme. It is used for lacework, patchwork, embroidery, needlework, fabric ornamentation, and textile craftsmanship businesses. It suits boutiques, sewing studios, fashion designers, quilt makers, and handmade fabric stores. The theme features a responsive layout, WooCommerce compatibility, Elementor support, customizable sections, SEO friendly code, and one click demo import. Showcase intricate creations, decorative textiles, and artisan collections with an elegant website that attracts customers and highlights your creative expertise. Documentation: https://www.sktthemesdemo.net/documentation/skt-minimal-doc/
Template: skt-minimal
Version: 1.0
Requires at least: 5.6
Tested up to: 7.0
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: skt-lace
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 Lace is a child theme of SKT Minimal. SKT Minimal is based on Underscores, which is distributed under the terms of the GNU GPL v2 or later.

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

/* ==========================================================================
   TABLE OF CONTENTS
   01. Design Tokens & Reset
   02. Typography
   03. Layout (container, content, sidebar)
   04. Header & Navigation
   05. Inner Page Banner
   06. Buttons & Links
   07. Forms & Inputs
   08. Blog (lists, single post, post meta)
   09. Pagination & Post Navigation
   10. Sidebar & Widgets
   11. Comments
   12. Footer & Copyright
   13. Block Editor / Gutenberg
   14. WooCommerce essentials
   15. Tables, Code, Blockquote
   16. Accessibility & Utilities
   17. RTL
   ========================================================================== */

:root {
    --sps-paper: #f7f2ea;
    --sps-paper-2: #efe7da;
    --sps-surface: #ffffff;
    --sps-surface-soft: #fbf8f3;
    --sps-ink: #2a241f;
    --sps-ink-soft: #4a4138;
    --sps-text: #4a4138;
    --sps-text-dark: #2a241f;
    --sps-muted: #8f8478;
    --sps-text-invert: #fffaf3;
    --sps-text-black: #000000;
    --sps-text-meta: #f4f4f4;
    --sps-accent: #33cacf;
    --sps-accent-deep: #1f989c;
    --sps-accent-soft: #f6dccf;
    --sps-accent-tint: #33cacf;
    --sps-secondary: #33cacf;
    --sps-secondary-deep: #245d51;
    --sps-honey: #ffdd76;
    --sps-lights: #33cacf;
    --sps-line: #e3e3e3;
    --sps-line-strong: #cecccc;
    --sps-footer-bg: #221d18;
    --sps-footer-bg-2: #2b251f;
    --sps-text-footer: #000000;
    --sps-footer-heading: #080808;
    --sps-footer-line: rgba(255, 250, 243, 0.12);
    --sps-copyright-bg: #33cacf;
    --sps-button-bg: #a0ce4e;
    --sps-footerlight-bg: #54c1c4;
    --sps-icon-size: 46px;
    --sps-radius-sm: 10px;
    --sps-radius: 16px;
    --sps-radius-lg: 14px;
    --sps-radius-pill: 6px;
    --sps-shadow-xs: 0 2px 6px rgba(42, 36, 31, 0.06);
    --sps-shadow-sm: 0 8px 22px -10px rgba(42, 36, 31, 0.18);
    --sps-shadow: 0 18px 44px -18px rgba(42, 36, 31, 0.26);
    --sps-shadow-lg: 0 34px 70px -28px rgba(42, 36, 31, 0.34);
    --sps-ring: 0 0 0 4px rgba(224, 96, 60, 0.20);
    --sps-border-w: 1px;
    --sps-transition: 0.28s cubic-bezier(0.22, 0.61, 0.25, 1);
    --sps-container: 1200px;
    --sps-gap: 42px;
    --sps-font-body: "Avenir Next", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, Arial, sans-serif;
    --sps-font-heading: "Poppins";
    --sps-font-display: var(--sps-font-heading);
    --sps-font-menu: var(--sps-font-body);
    --sps-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    --sps-font-footer-heading: "Playfair Display";
}

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

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

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

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

iframe { max-width: 100%; }

hr {
    border: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sps-line-strong), transparent);
    margin: 40px 0;
}

::selection {
    background-color: var(--sps-accent);
    color: var(--sps-text-invert);
}


/* ==========================================================================
   02. Typography
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--sps-font-heading);
    color: var(--sps-text-dark);
    font-weight: 600;
    line-height: 1.16;
    letter-spacing: -0.01em;
    margin: 0 0 18px;
    text-wrap: balance;
}

h1 { font-size: clamp(30px, 4vw, 36px); }
h2 { font-size: clamp(22px, 2.8vw, 27px); }
h3 { font-size: clamp(18px, 2.2vw, 22px); }
h4 { font-size: 22px; }
h5 { font-size: 19px; }
h6 {
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    font-family: var(--sps-font-body);
}

p { margin: 0 0 20px; }

a {
    color: var(--sps-skin);
    text-decoration: none;
    transition: color var(--sps-transition), background-size var(--sps-transition);
}

a:hover,
a:focus {
    color: var(--sps-accent-deep);
}

a:focus-visible {
    outline: 2px solid var(--sps-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

strong, b { font-weight: 700; color: var(--sps-text-dark); }
em, i { font-style: italic; }
small { font-size: 0.82em; color: var(--sps-muted); }

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

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

#content_navigator { width: 100%; }

body.home .page_content {
    padding: 30px 0 60px;
}

.page_content {
    padding: 45px 0 60px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 25px;
}

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

.site-main {
    flex: 1 1 0;
    min-width: 0;
    float: none;
    width: auto;
}

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

.clear { clear: both; }

/* ==========================================================================
   04. Header & Navigation
   ========================================================================== */

/* ---------- Top bar ---------- */
.header-topbar {
    width: 100%;
    font-family: var(--sps-font-body);
    font-size: 15px;
    background-color: #1a1a1a;
    position: relative;
    z-index: 99;
    overflow: hidden;
}

.header-topbar .container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    max-width: var(--sps-container);
    margin: 0 auto;
    min-height: 50px;
    padding: 0;
    color: var(--sps-text-invert);
    box-shadow: var(--sps-shadow-sm);
}

.header-topbar .left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px;
    position: relative;
    margin: 0 0 0 240px;
}

.header-topbar .left span:last-child {
    border-right: none !important;
}

.header-topbar .adrtp,
.header-topbar .phntp,
.header-topbar .emltp {
    display: inline-flex;
    align-items: center;
    color: var(--sps-text-invert);
    font-family: var(--sps-font-display);
    font-size: 17px;
    line-height: 1.2;
    float: none;
    border-right: solid 1px #313131;
    padding: 15px 30px 15px 0;
}

.header-topbar .adrtp img,
.header-topbar .phntp img,
.header-topbar .emltp img {
    margin-right: 8px;
    vertical-align: middle;
    max-height: 15px;
    width: auto;
}

.header-topbar .emltp a {
    color: var(--sps-text-invert);
    background: none;
    display: inline-flex;
    align-items: center;
    transition: opacity var(--sps-transition);
}

.header-topbar .emltp a:hover { color: #fda700; }

.header-topbar .right {
    display: flex;
    align-items: center;
    margin-left: auto;
}

.social-icons {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-right: auto;
}

.social-icons a {
    display: inline-block;
    width: 45px;
    height: 45px;
    border-radius: 100%;
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center center;
    text-indent: -9999px;
    overflow: hidden;
    transition: background-color var(--sps-transition), transform var(--sps-transition);
}

.social-icons a:hover {
    background-color: var(--sps-text-invert);
}

.social-icons a.fb    { background-image: url('images/icon-fb.png'); }
.social-icons a.tw    { background-image: url('images/icon-tw.png'); }
.social-icons a.in    { background-image: url('images/icon-in.png'); }
.social-icons a.ytb   { background-image: url('images/icon-youtube.png'); }
.social-icons a.insta { background-image: url('images/icon-insta.png'); }

/* ---------- Main header bar ---------- */
.header-parts {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100px;
}

.header-social,
.header-sac {
    flex: 1;
    display: flex;
    align-items: center;
}

.header-social {
    justify-content: flex-start;
}

.header-sac {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 25px;
    position: relative;
}

.header-sac > img {
    width: 22px;
    height: 22px;
    cursor: pointer;
    transition: opacity .3s ease;
}

.header-sac > img:hover,
.header-sac a:hover img {
    opacity: .75;
}

.header-sac a {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.header-sac a img {
    width: 22px;
    height: 22px;
}

.header-sac .search-form {
    position: absolute;
    top: calc(100% + -39px);
    right: 0;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #ddd;
    padding: 8px;
    min-width: 260px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all .3s ease;
    z-index: 999;
}

.header-sac.search-open .search-form {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.header-sac .search-field {
    border: none;
    outline: none;
    width: 200px;
    padding: 8px 10px;
    font-size: 15px;
    background: transparent;
}

.header-sac .search-submit {
    border: none;
    background: #000;
    color: #fff;
    padding: 8px 14px;
    cursor: pointer;
    transition: .3s;
}

.header-sac .search-submit:hover {
    background: #333;
}

.custom-cart-count {
    position: absolute;
    top: -7px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    background: #33cacf;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
}

.cart-customlocation {
    position: relative;
}

.cart-customlocation:hover .custom-cart-count {
    background-color: #000;
    color: #FFF;
}

.header-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 2;
}

.header {
    width: 100%;
    background: transparent;
    position: relative;
    z-index: 100;
    border: 0;
    margin: 0;
    padding: 0;
}

body.blog .header { border: 0; }

.head-bar { width: 100%; }

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

.header > .container,
.head-bar > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
    min-height: 76px;
}

.transheaderhome {
    position: absolute !important;
    border: none !important;
    background-color: transparent !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999 !important;
}

.transheaderhome .header { background: transparent !important; }

.transheader {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
}

/* ---------- Logo ---------- */
.logo {
    align-content: center;
    position: relative;
    z-index: 99999;
}

.logo img,
.custom-logo { max-height: 58px; width: auto; }

.hdbr .logo img,
.hdbr .custom-logo {
    margin-top: 0px;
}

.hdbr .site-title {
    padding: 0;
}

#logo-main { display: flex; flex-direction: column; text-align: center; }
#logo-main a { background: none; color: inherit; }

.site-title {
    font-family: var(--sps-font-display);
    font-size: 27px;
    font-weight: 700;
    line-height: 1.05;
    margin: 0;
    letter-spacing: -0.02em;
}

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

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

.site-title a:hover { color: var(--sps-accent-deep); }

.site-description {
    font-size: 14px;
    color: var(--sps-text-black);
    margin: 5px 0 0 0;
    line-height: 1.3;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* ---------- Primary navigation ---------- */
.navigbar {
    width: 100%;
    background-color: #f6f6f6;
}

#navigation {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    font-family: var(--sps-font-heading);
    position: relative;
}

.leftnavig { margin-right: auto; }

.main-navigation {
    display: flex;
    align-items: center;
    position: relative;
    margin: 0 auto;
}

.primary-menu,
.main-navigation > div > ul,
.main-navigation > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
}

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

.main-navigation a {
    display: flex;
    align-items: center;
    padding: 15px 16px;
    color: var(--sps-text-dark);
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    background: none;
    transition: background-color var(--sps-transition), color var(--sps-transition);
}

.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation .current-menu-ancestor > a {
    color: var(--sps-lights);
}

/* Dropdowns — rounded soft card */
.main-navigation ul ul {
    position: absolute;
    top: calc(100% + 0);
    left: 0;
    min-width: 240px;
    background-color: var(--sps-surface);
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    box-shadow: var(--sps-shadow);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity var(--sps-transition), transform var(--sps-transition), visibility var(--sps-transition);
    z-index: 9999;
}

.main-navigation ul ul::before {
    content: "";
    position: absolute;
    top: -16px;
    left: 0;
    right: 0;
    height: 16px;
    background: transparent;
}

.main-navigation ul ul li { width: 100%; }

.main-navigation li:hover > ul,
.main-navigation li.focus > ul,
.main-navigation li.dropdown-open > ul,
.main-navigation li:focus-within > ul {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.primary-menu > .menu-item-has-children > a::after,
.main-navigation > div > ul > .menu-item-has-children > a::after,
.main-navigation > ul > .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-left: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--sps-transition);
}

.main-navigation ul ul .menu-item-has-children > a {
    justify-content: space-between;
}

.main-navigation ul ul .menu-item-has-children > a::after {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin-left: 0;
    margin-right: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--sps-transition);
}

.main-navigation ul ul a {
    padding: 8px 14px;
    color: var(--sps-text-dark);
    border: 0;
    width: 100%;
    font-size: 18px;
    font-weight: 400;
}

.main-navigation ul ul a:hover,
.main-navigation ul ul a:focus {
    background-color: var(--sps-lights);
    color: var(--sps-text-invert);
}

.main-navigation ul ul ul {
    top: 0px;
    left: calc(100% + 0px);
    transform: translateX(8px);
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul,
.main-navigation ul ul li.dropdown-open > ul,
.main-navigation ul ul li:focus-within > ul { transform: translateX(0); }

.main-navigation ul li a { line-height: inherit; }

.main-navigation .dropdown-toggle {
    display: none;
    position: absolute;
    top: 3px;
    right: 3px;
    width: 42px;
    height: 42px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

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

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

/* Hamburger */
.menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    width: 48px;
    height: 48px;
    padding: 0;
    background: var(--sps-accent-tint);
    border: 1px solid var(--sps-line);
    border-radius: 14px;
    cursor: pointer;
}

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

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

.menu-toggle:hover span,
.menu-toggle:focus span { background: var(--sps-text-invert); }

.toggled .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.toggled .menu-toggle span:nth-child(2) { opacity: 0; }
.toggled .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Header CTA button */
.srcrt { flex-shrink: 0; }

.skt-header-button {
    display: inline-flex;
    align-items: center;
    padding: 12px 26px;
    background: var(--sps-button-bg);
    color: var(--sps-text-invert) !important;
    font-family: var(--sps-font-heading);
    font-weight: normal;
    font-size: 17px;
    text-decoration: none;
    transition: transform var(--sps-transition), background var(--sps-transition), box-shadow var(--sps-transition);
    background-image: none;
}

.skt-header-button:hover,
.skt-header-button:focus {
    color: var(--sps-text-black) !important;
}

/* ==========================================================================
   05. Inner Page Banner
   ========================================================================== */
.inner-banner-thumb {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    background-color: #000000;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner-banner-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.inner-banner-thumb .banner-container {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 60px 24px;
    width: 100%;
}

.inner-banner-thumb .banner-container h1 {
    color: var(--sps-text-invert);
    margin: 0;
    font-size: clamp(30px, 4vw, 46px);
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.28);
}

/* ==========================================================================
   06. Buttons & Links
   ========================================================================== */
.button,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-button__link,
.read-more-btn,
.aboutmore,
.ReadMore,
.rdmore a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sps-font-body);
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    padding: 13px 28px;
    color: var(--sps-text-invert);
    background: var(--sps-text-black);
    background-image: none;
    border: 0;
    text-decoration: none;
    cursor: pointer;
    transition: transform var(--sps-transition), background var(--sps-transition), box-shadow var(--sps-transition), color var(--sps-transition);
}

.button:hover, .button:focus,
button:hover, button:focus,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
input[type="submit"]:focus,
.wp-block-button__link:hover,
.read-more-btn:hover,
.aboutmore:hover,
.ReadMore:hover,
.rdmore a:hover {
    background: var(--sps-secondary);
    color: var(--sps-text-invert);
}

/* Read-more pill on cards */
.rdmore { margin: 25px 0 0; }
.rdmore a { padding: 10px 22px; font-size: 14px; }


/* ==========================================================================
   07. Forms & Inputs
   ========================================================================== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select {
    width: 100%;
    max-width: 100%;
    font-family: var(--sps-font-body);
    font-size: 15.5px;
    color: var(--sps-text-dark);
    background: var(--sps-surface);
    border: 1px solid var(--sps-line-strong);
    padding: 10px 16px;
    line-height: 1.5;
    transition: border-color var(--sps-transition), box-shadow var(--sps-transition);
}

input[type="password"] {
    font-family: var(--sps-font-body);
    font-size: 15.5px;
    color: var(--sps-text-dark);
    background: var(--sps-surface);
    border: 1px solid var(--sps-line-strong);
    padding: 10px 16px;
    line-height: 1.5;
    transition: border-color var(--sps-transition), box-shadow var(--sps-transition);
}

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

input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--sps-accent);
    box-shadow: var(--sps-ring);
}

::placeholder { color: var(--sps-muted); opacity: 1; }

label { font-weight: 600; color: var(--sps-text-dark); }

/* Search form */
.search-form,
.wp-block-search__inside-wrapper {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.search-form .search-field,
.wp-block-search__input { flex: 1 1 auto; }

.search-submit,
.wp-block-search__button {
    width: auto;
    flex: 0 0 auto;
    background: var(--sps-text-black);
    color: var(--sps-text-invert);
    border: 0;
    padding: 6px 24px;
    font-weight: 600;
    cursor: pointer;
}

.search-submit:hover,
.wp-block-search__button:hover { background: var(--sps-secondary); }


/* ==========================================================================
   08. Blog
   ========================================================================== */
.blog-post { width: 100%; }
.blogpost-wrap-wsb { display: block; }

article.hentry,
.blog-post article,
.site-main > article {
    position: relative;
    background: var(--sps-surface);
    border: 1px solid var(--sps-line);
    padding: 30px 34px 34px;
    margin: 0 0 34px;
    overflow: hidden;
    transition: transform var(--sps-transition), box-shadow var(--sps-transition);
}

.site-main > article::before,
.blog-post article::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px dashed #bfbfbf;
    pointer-events: none;
}

#sitefull article.hentry {
    border: 0;
    box-shadow: none;
    background: transparent;
    padding: 0;
}

#sitefull article.hentry::before { display: none; }

.post-thumb {
    margin: -30px -34px 24px;
    overflow: hidden;
    border-bottom: 1px solid var(--sps-line);
}

.post-thumb img {
    width: 100%;
    height: auto;
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.25, 1);
}

.entry-header { margin-bottom: 14px; }

.entry-title {
    font-size: clamp(24px, 2vw, 28px);
    line-height: 1.18;
    margin: 0 0 12px;
    font-weight: 700;
}

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

.entry-title a:hover { color: var(--sps-lights); }

.postmeta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 4px;
    font-family: var(--sps-font-body);
    font-size: 13px;
    color: var(--sps-muted);
    margin: 0 0 6px;
}

.postmeta .post-date {
    display: inline-flex;
    align-items: center;
    background: var(--sps-text-meta);
    color: var(--sps-text-black);
    font-weight: 600;
    padding: 4px 12px;
    border-radius: var(--sps-radius-pill);
}

.postmeta .post-comment a { color: var(--sps-muted); background: none; }
.postmeta .post-comment a:hover { color: var(--sps-accent-deep); }

.postmeta .post-tags a {
    display: inline-block;
    background: var(--sps-paper-2);
    color: var(--sps-text);
    padding: 3px 11px;
    margin: 3px 4px 0 0;
    border-radius: var(--sps-radius-pill);
    font-size: 12.5px;
}

.postmeta .post-tags a:hover { background: var(--sps-accent); color: var(--sps-text-invert); }

.entry-content { color: var(--sps-text); }
.entry-content > *:last-child { margin-bottom: 0; }
.entry-summary { color: var(--sps-text); }

.single-post .entry-content { font-size: 17px; }

.page-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 24px 0;
    font-weight: 600;
}

.page-links .page-links-title { color: var(--sps-muted); font-weight: 600; }

.page-links a,
.page-links > span:not(.page-links-title) {
    display: inline-flex;
    min-width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--sps-accent);
    color: var(--sps-text-dark);
}

.page-links a { background: var(--sps-surface); border: 1px solid var(--sps-line-strong); }
.page-links a:hover { background: var(--sps-accent); color: var(--sps-text-invert); border-color: var(--sps-accent); }

/* Page header (search / 404 / archive title blocks) */
.page-header {
    background: var(--sps-surface);
    border: 1px solid var(--sps-line);
    border-radius: var(--sps-radius-lg);
    box-shadow: var(--sps-shadow-sm);
    padding: 26px 30px;
    margin: 0 0 30px;
}

.page-title { margin: 0; font-size: clamp(24px, 3vw, 32px); }
.page-title span { color: var(--sps-accent-deep); }

/* No results / 404 inner copy */
.no-results,
.error-404 {
    background: var(--sps-surface);
    border: 1px solid var(--sps-line);
    border-radius: var(--sps-radius-lg);
    box-shadow: var(--sps-shadow-sm);
    padding: 36px 34px;
}

.no-results .page-header,
.error-404 .page-header { background: none; border: 0; box-shadow: none; padding: 0; margin-bottom: 14px; }

.edit-link a {
    display: inline-block;
    margin-top: 14px;
    font-size: 13px;
    background: var(--sps-paper-2);
    padding: 6px 14px;
    border-radius: var(--sps-radius-pill);
    color: var(--sps-text);
}

.entry-meta { margin-top: 6px; }


/* ==========================================================================
   09. Pagination & Post Navigation
   ========================================================================== */
.pagination,
.posts-navigation .nav-links,
.post-navigation .nav-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.page-numbers,
.post-page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px !important;
    height: 36px;
    padding: 0 16px;
    background: var(--sps-surface);
    border: 1px solid var(--sps-line-strong);
    color: var(--sps-text-dark);
    font-weight: 600;
    text-decoration: none;
    transition: all var(--sps-transition);
}

.page-numbers:hover,
.post-page-numbers:hover {
    background: var(--sps-accent-tint);
    border-color: var(--sps-accent);
    color: var(--sps-text-black);
}

.page-numbers.current {
    background: var(--sps-accent);
    border-color: var(--sps-accent);
    color: var(--sps-text-invert);
    box-shadow: 0 10px 22px -12px rgba(224, 96, 60, 0.8);
}

.page-numbers.dots { background: none; border: 0; }

/* prev/next single post nav */
.post-navigation {
    background: var(--sps-surface);
    border: 1px solid var(--sps-line);
    border-radius: var(--sps-radius-lg);
    box-shadow: var(--sps-shadow-sm);
    padding: 18px 24px;
    margin: 0 0 30px;
}

.post-navigation .nav-links { justify-content: space-between; }
.post-navigation a { font-weight: 600; color: var(--sps-text-dark); background: none; }
.post-navigation a:hover { color: var(--sps-accent-deep); }


/* ==========================================================================
   10. Sidebar & Widgets
   ========================================================================== */
#sidebar {
    flex: 0 0 322px;
    max-width: 322px;
    width: 322px;
    margin: 0 -25px 0 0;
}

#sidebar .widget,
.widget {
    background: var(--sps-surface);
    border: 1px solid var(--sps-line);
    padding: 24px 24px 26px;
    margin: 0 0 26px;
    position: relative;
}

#sidebar .widget::before,
.widget::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px dashed #bfbfbf;
    pointer-events: none;
}

#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: 22px;
    font-weight: 700;
}

#sidebar ol { margin: 0; padding: 0; }

.widget-title,
#sidebar .widget-title,
.widget .widget-title {
    position: relative;
    font-family: var(--sps-font-heading);
    font-size: 20px;
    font-weight: 600;
    color: var(--sps-text-dark);
    margin: 0 0 18px;
    padding: 0 0 12px;
}

.widget-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--sps-accent), var(--sps-honey));
}

.titleborder span:after {
    content: "";
    display: inline-block;
    border-bottom: 3px solid var(--sps-accent);
}

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

.widget ul li {
    padding: 9px 0;
    border-bottom: 1px solid var(--sps-line);
}

.widget ul li:last-child { border-bottom: 0; padding-bottom: 0; }
.widget ul li a { color: var(--sps-text); background: none; }
.widget ul li a:hover { color: var(--sps-accent-deep); }

.widget ul li .children,
.widget ul li .sub-menu { margin-top: 8px; padding-left: 14px; }

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

.tagcloud a {
    display: inline-block;
    font-size: 13px !important;
    background: var(--sps-paper-2);
    color: var(--sps-text) !important;
    padding: 6px 14px;
    border-radius: var(--sps-radius-pill);
}

.tagcloud a:hover { background: var(--sps-accent); color: var(--sps-text-invert) !important; }

/* Calendar widget */
.widget_calendar table { width: 100%; border-collapse: collapse; font-size: 14px; }
.widget_calendar caption { font-weight: 700; padding-bottom: 10px; color: var(--sps-text-dark); }
.widget_calendar th { background: var(--sps-paper-2); padding: 6px; text-align: center; }
.widget_calendar td { padding: 6px; text-align: center; border: 1px solid var(--sps-line); }
.widget_calendar td#today { background: var(--sps-accent); color: var(--sps-text-invert); border-radius: 4px; }
.widget_calendar a { background: none; font-weight: 700; color: var(--sps-accent-deep); }

#sidebar .wp-block-search__label { font-weight: 700; margin-bottom: 8px; display: block; }

/* ==========================================================================
   11. Comments
   ========================================================================== */
.comments-area {
    background: var(--sps-surface);
    border: 1px solid var(--sps-line);
    padding: 30px 34px;
    margin: 0 0 30px;
}

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

.comments-title span,
.comment-reply-title span { color: var(--sps-accent-deep); }

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

.comment-list ol,
.comment-list ul { list-style: none; }

.comment-list .children { margin-left: 28px; padding-left: 22px; border-left: 2px solid var(--sps-line); }

.comment-body {
    background: var(--sps-surface-soft);
    border: 1px solid var(--sps-line);
    border-radius: var(--sps-radius);
    padding: 20px 22px;
    margin: 0 0 20px;
}

.comment-author { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.comment-author .avatar { border-radius: 50%; }
.comment-author .fn { font-family: var(--sps-font-heading); font-size: 17px; color: var(--sps-text-dark); }
.comment-metadata { font-size: 12.5px; color: var(--sps-muted); margin: 4px 0 10px; }
.comment-metadata a { color: var(--sps-muted); background: none; }

.reply { margin-top: 8px; }

.comment-reply-link {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    background: var(--sps-accent-tint);
    color: var(--sps-accent-deep) !important;
    border-radius: var(--sps-radius-pill);
}

.comment-reply-link:hover { background: var(--sps-accent); color: var(--sps-text-invert) !important; }

#respond { margin-top: 8px; }

.comment-form { display: flex; flex-wrap: wrap; gap: 16px; }
.comment-form p { margin: 0; flex: 1 1 100%; }

.comment-form .comment-form-author,
.comment-form .comment-form-email { flex: 1 1 calc(50% - 8px); }

.comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 10px; }
.comment-form-cookies-consent input { width: auto; margin-top: 5px; }
.comment-form-cookies-consent label { font-weight: 400; font-size: 14px; }

#submit { width: auto; }

.no-comments { color: var(--sps-muted); font-style: italic; }


/* ==========================================================================
   12. Footer & Copyright
   ========================================================================== */
#footer {
    color: var(--sps-text-footer);
    background-color: #f6f6f6;
}

#footer figure{padding:0; margin:0;}

#footer .widget:before { border: none; }

#footer-wrapper { width: 100%; }

#footer .container { max-width: var(--sps-container); }

.footerlight.container { padding: 70px 0 20px 0; }

/* Footer info bar (logo + social) */
.o-footer { background: transparent; }

.o-footer__container .container,
.footerinfobox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding: 0 0 40px 0;
}

.c-footer-logo img { max-height: 60px; width: auto; }

/* Footer social — rounded soft chips using existing PNG icons */
.c-social-icons,
.footer .social-icons {
    display: inline-flex;
    gap: 10px;
}

.c-social-icons__link {
    width: var(--sps-icon-size);
    height: var(--sps-icon-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background-color: rgba(255, 255, 255, 0.20) !important;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20px 20px;
    transition: transform var(--sps-transition), background-color var(--sps-transition);
}

.c-social-icons__link:hover {
    background-color: var(--sps-accent) !important;
}

.c-social-icons__link--fb    { background-image: url(images/icon-fb.png); }
.c-social-icons__link--tw    { background-image: url(images/icon-tw.png); }
.c-social-icons__link--in    { background-image: url(images/icon-in.png); }
.c-social-icons__link--insta { background-image: url(images/icon-insta.png); }
.c-social-icons__link--yt    { background-image: url(images/icon-youtube.png); }

/* Footer widget columns */
.copyright-area { width: 100%; }
.footerarea { width: 100%; }
.footer.ftr-widg { padding: 0 0 30px; }
.footer-all { width: 100%; }

.rfl-row {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.rfl-row .cols-3 {
    flex: 1 1 calc(25% - 23px);
    min-width: 200px;
}

.footer aside.widget {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6,
.footer .widget-title {
    color: var(--sps-footer-heading);
    font-weight: 600;
    margin-bottom: 8px;
    padding-bottom: 12px;
    font-family: var(--sps-font-footer-heading);
}

.footer .widget-title::after { background: var(--sps-accent); }

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

.footer ul li {
    padding: 4px 0;
    border-bottom: none;
}

.footer ul li:last-child { border-bottom: 0; }

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

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

.footer p { color: var(--sps-text-black); }
.footer a { color: var(--sps-text-black); background: none; }
.footer a:hover { color: var(--sps-accent); }

/* Copyright strip */
.copyright-wrapper { background: var(--sps-copyright-bg); }

.copyright-wrapper .container {
    padding-top: 22px;
    padding-bottom: 22px;
}

.copyright-txt {
    text-align: center;
    font-size: 14px;
    color: var(--sps-text-footer);
}

.copyright-txt a { color: #000; background: none; font-weight: 600; }
.copyright-txt a:hover { color: #282828; }


/* ==========================================================================
   13. Block Editor / Gutenberg
   ========================================================================== */
.entry-content > .alignwide { width: 100%; }
.alignwide { width: calc(100% + 80px); max-width: none; }
.alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; width: 100vw; }
.alignleft { float: left; margin: 6px 28px 18px 0; }
.alignright { float: right; margin: 6px 0 18px 28px; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; clear: both; }

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

.wp-block-image figcaption,
.wp-caption-text {
    font-size: 13.5px;
    color: var(--sps-muted);
    text-align: center;
    margin-top: 8px;
}

.wp-caption {
    max-width: 100%;
    background: var(--sps-surface-soft);
    border: 1px solid var(--sps-line);
    border-radius: var(--sps-radius);
    padding: 8px;
}

.wp-block-quote,
.is-style-skt-lace-plain {
    border-left: 4px solid var(--sps-accent);
    background: var(--sps-accent-tint);
    border-radius: 0 var(--sps-radius) var(--sps-radius) 0;
    margin: 28px 0;
    padding: 22px 26px;
    font-family: var(--sps-font-heading);
    font-style: italic;
    font-size: 19px;
    color: var(--sps-text-dark);
}

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

.wp-block-pullquote {
    border-top: 3px solid var(--sps-accent);
    border-bottom: 3px solid var(--sps-accent);
    padding: 28px 0;
    text-align: center;
    font-family: var(--sps-font-heading);
    font-style: italic;
}

.wp-block-button__link { color: var(--sps-text-invert); }

.wp-block-separator {
    border: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--sps-line-strong), transparent);
    max-width: 120px;
}

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

.wp-block-table table { width: 100%; }
.wp-block-table figcaption { font-size: 13.5px; color: var(--sps-muted); text-align: center; }
.wp-block-search__label { font-weight: 700; }

/* ==========================================================================
   14. WooCommerce essentials
   ========================================================================== */
body.woocommerce-cart article.hentry {
    overflow: visible !important;
}

body.woocommerce-cart .wc-block-cart-items th {
    padding: 12px 16px;
}

body.woocommerce .header-sac .search-form {
    right: 90px;
}

.woocommerce-Address-title h2 {
    font-size: 16px;
}

.woocommerce-account .addresses .title .edit {
    float: left;
    background-color: #33cacf;
    color: #FFF;
    border: 1px solid #e3e3e3;
    padding: 0px 4px;
    font-size: 12px;
    margin-bottom: 10px;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    background: var(--sps-surface);
    border: 1px solid var(--sps-line);
    border-radius: var(--sps-radius-lg);
    box-shadow: var(--sps-shadow-sm);
    padding: 16px;
    text-align: center;
    transition: transform var(--sps-transition), box-shadow var(--sps-transition);
}

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

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

.woocommerce ul.products li.product .price {
    color: var(--sps-accent-deep);
    font-weight: 700;
    font-size: 18px;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--sps-font-heading);
    font-size: 18px;
    padding: 6px 0;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.wc-block-cart__submit-button,
.wc-block-checkout__submit-button,
.woocommerce-product-search button[type="submit"] {
    background: var(--sps-accent);
    color: var(--sps-text-invert);
    border: 0;
    border-radius: var(--sps-radius-pill);
    padding: 12px 26px;
    font-weight: 600;
    box-shadow: 0 10px 24px -12px rgba(224, 96, 60, 0.8);
    transition: all var(--sps-transition);
    margin-top: 5px;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
    background: var(--sps-accent-deep);
    transform: translateY(-2px);
}

.woocommerce .price,
.woocommerce span.price { color: var(--sps-accent-deep); font-weight: 700; }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-radius: var(--sps-radius);
    border: 1px solid var(--sps-line);
    border-top: 3px solid var(--sps-accent);
    background: var(--sps-surface);
    padding: 16px 20px 20px 52px;
}

.woocommerce-error { border-top-color: var(--sps-accent-deep); }

.woocommerce-product-search { display: flex; gap: 8px; }
.woocommerce-product-search input[type="search"] { flex: 1; }

body.single-product .related.products h2 {
    text-align: center;
    padding: 10px 0 20px 0;
    text-transform: uppercase;
}

.woocommerce-Tabs-panel h2 { font-size: 20px; }

.woocommerce .quantity .qty { width: 4.631em; }

body.post-type-archive .woocommerce { width: 100%; }

/* ==========================================================================
   15. Tables, Code, Blockquote (base elements)
   ========================================================================== */
table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 24px;
    background: var(--sps-surface);
    border-radius: var(--sps-radius);
    overflow: hidden;
    box-shadow: var(--sps-shadow-xs);
}

th, td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--sps-line);
}

thead th { background: var(--sps-paper-2); font-family: var(--sps-font-body); font-weight: 700; color: var(--sps-text-dark); }
tbody tr:last-child td { border-bottom: 0; }

blockquote {
    margin: 28px 0;
    padding: 20px 26px;
    border-left: 4px solid var(--sps-accent);
    background: var(--sps-accent-tint);
    border-radius: 0 var(--sps-radius) var(--sps-radius) 0;
    font-family: var(--sps-font-heading);
    font-style: italic;
    color: var(--sps-text-dark);
}

code, kbd, samp {
    font-family: var(--sps-font-mono);
    font-size: 0.9em;
    background: var(--sps-paper-2);
    padding: 2px 7px;
    border-radius: 6px;
    color: var(--sps-accent-deep);
}

pre {
    font-family: var(--sps-font-mono);
    background: var(--sps-ink);
    color: #f3ece1;
    padding: 20px 22px;
    border-radius: var(--sps-radius);
    overflow: auto;
    line-height: 1.6;
    margin: 0 0 24px;
}

pre code { background: none; color: inherit; padding: 0; }

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

.screen-reader-text:focus {
    background-color: var(--sps-surface);
    border-radius: var(--sps-radius-sm);
    box-shadow: var(--sps-shadow);
    clip: auto !important;
    clip-path: none;
    color: var(--sps-accent-deep);
    display: block;
    font-size: 14px;
    font-weight: 700;
    height: auto;
    left: 6px;
    top: 6px;
    padding: 14px 22px;
    width: auto;
    z-index: 100000;
}

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

.skip-link:focus {
    left: 6px;
    top: 6px;
    background: var(--sps-accent);
    color: var(--sps-text-invert);
    padding: 12px 20px;
    border-radius: var(--sps-radius-sm);
    box-shadow: var(--sps-shadow);
}

.alignnone { margin: 6px 0 18px; }

.sticky {
    display: block;
}

.gallery-caption {
    font-size: 14px;
    color: #666;
    margin-top: 5px;
}

/* ==========================================================================
   17. RTL
   ========================================================================== */
.rtl .header-topbar .right { margin-left: 0; margin-right: auto; }
.rtl .postmeta .post-tags a { margin: 3px 0 0 4px; }
.rtl .alignleft { float: right; margin: 6px 0 18px 28px; }
.rtl .alignright { float: left; margin: 6px 28px 18px 0; }

.rtl .wp-block-quote,
.rtl blockquote,
.rtl .is-style-skt-lace-plain {
    border-left: 0;
    border-right: 4px solid var(--sps-accent);
    border-radius: var(--sps-radius) 0 0 var(--sps-radius);
}

.rtl .widget-title::after { left: auto; right: 0; }

.rtl .blog-post article::before,
.rtl .site-main > article::before { left: auto; right: 0; }

.rtl .comment-list .children { margin-left: 0; margin-right: 28px; padding-left: 0; padding-right: 22px; border-left: 0; border-right: 2px solid var(--sps-line); }

.rtl #navigation { justify-content: flex-start; }
.rtl .main-navigation ul ul { left: auto; right: 0; }
.rtl .main-navigation ul ul ul { left: auto; right: calc(100% + 10px); }