/* SBC Theme Customizer — Design System v2.0 */
/* Tactics.com + CCS.com inspired skateboard ecommerce */
/* Mobile & WebView First */

/* ─── DESIGN TOKENS ─── */
:root {
    --sbc-black:       #111111;
    --sbc-dark:        #1a1a1a;
    --sbc-gray-900:    #1f2937;
    --sbc-gray-700:    #374151;
    --sbc-gray-500:    #6b7280;
    --sbc-gray-400:    #9ca3af;
    --sbc-gray-300:    #d1d5db;
    --sbc-gray-200:    #e5e7eb;
    --sbc-gray-100:    #f3f4f6;
    --sbc-gray-50:     #f9fafb;
    --sbc-white:       #ffffff;
    --sbc-red:         #dc2626;
    --sbc-red-dark:    #b91c1c;
    --sbc-red-light:   #fef2f2;
    --sbc-green:       #16a34a;
    --sbc-green-light: #f0fdf4;
    --sbc-orange:      #ea580c;
    --sbc-blue:        #2563eb;
    --sbc-font:        'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --sbc-font-mono:   'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
    --sbc-radius:      12px;
    --sbc-radius-sm:   8px;
    --sbc-radius-lg:   16px;
    --sbc-radius-full: 50px;
    --sbc-shadow:      0 1px 3px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
    --sbc-shadow-md:   0 4px 12px rgba(0,0,0,0.08);
    --sbc-shadow-lg:   0 8px 24px rgba(0,0,0,0.12);
    --sbc-ease:        0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ═══════ GLOBAL ═══════ */
body {
    font-family: var(--sbc-font) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--sbc-black);
    background: var(--sbc-white) !important;
}
h1, h2, h3, h4, h5, h6,
.page-title, .product_title,
.woocommerce-loop-product__title,
.entry-title {
    font-family: var(--sbc-font) !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px;
    color: var(--sbc-black);
}
p, span, a, li, label, input, textarea, select, button, div {
    font-family: var(--sbc-font) !important;
}

/* ═══════ DUYURU BAR (en ust) ═══════ */
.sbc-announce {
    font-family: var(--sbc-font) !important;
}

/* ═══════ TOP BAR ═══════ */
.site-header-top-bar,
.topbar,
.header-top,
#header-top-bar {
    background: var(--sbc-dark) !important;
    color: var(--sbc-gray-300) !important;
    font-size: 12px !important;
    letter-spacing: 0.5px;
    border-bottom: none !important;
    padding: 6px 0 !important;
}
.site-header-top-bar a,
.topbar a,
.header-top a,
#header-top-bar a {
    color: var(--sbc-gray-300) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    -webkit-transition: color var(--sbc-ease); transition: color var(--sbc-ease);
    -webkit-tap-highlight-color: transparent;
}
.site-header-top-bar a:hover,
.topbar a:hover,
#header-top-bar a:hover {
    color: var(--sbc-white) !important;
}

/* ═══════ HEADER ═══════ */
.site-header,
#masthead,
.shopkeeper-header,
.site-header-main {
    background: var(--sbc-white) !important;
    border-bottom: 1px solid var(--sbc-gray-100) !important;
    box-shadow: none !important;
}

/* Logo */
.site-logo img,
.custom-logo {
    max-height: 40px !important;
    width: auto !important;
}

/* ═══════ MAIN NAV ═══════ */
.main-navigation a,
.mega_main_menu a,
.menu-category-menu-container a,
#mega_main_menu > .menu_holder > .menu_inner > ul > li > .item_link,
.main-navigation .menu > li > a {
    font-family: var(--sbc-font) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: var(--sbc-black) !important;
    -webkit-transition: color var(--sbc-ease); transition: color var(--sbc-ease);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    padding: 8px 0 !important;
}
.main-navigation a:hover,
.mega_main_menu a:hover {
    color: var(--sbc-red) !important;
}
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a {
    color: var(--sbc-red) !important;
}

/* Dropdown menus */
.main-navigation ul ul,
.mega_main_menu .sub-container,
.main-navigation .sub-menu {
    background: var(--sbc-white) !important;
    border: 1px solid var(--sbc-gray-100) !important;
    border-radius: var(--sbc-radius) !important;
    box-shadow: var(--sbc-shadow-lg) !important;
    padding: 8px !important;
}
.main-navigation ul ul a,
.main-navigation .sub-menu a {
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 8px 12px !important;
    border-radius: var(--sbc-radius-sm) !important;
    -webkit-transition: background var(--sbc-ease); transition: background var(--sbc-ease);
}
.main-navigation ul ul a:hover,
.main-navigation .sub-menu a:hover {
    background: var(--sbc-gray-50) !important;
    color: var(--sbc-red) !important;
}

/* ═══════ SEARCH ═══════ */
.dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"],
.search-field, input.dgwt-wcas-search-input {
    font-family: var(--sbc-font) !important;
    font-size: 14px !important;
    border-radius: var(--sbc-radius-full) !important;
    border: 2px solid var(--sbc-gray-200) !important;
    background: var(--sbc-gray-50) !important;
    padding: 10px 20px 10px 44px !important;
    -webkit-appearance: none; appearance: none;
    -webkit-transition: all var(--sbc-ease); transition: all var(--sbc-ease);
}
.dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"]:focus,
.search-field:focus, input.dgwt-wcas-search-input:focus {
    border-color: var(--sbc-black) !important;
    background: var(--sbc-white) !important;
    outline: none;
    box-shadow: 0 0 0 4px rgba(17,17,17,0.06) !important;
}

/* ═══════ BUTTONS — GLOBAL ═══════ */
.button, button[type="submit"], .wp-block-button__link,
.woocommerce a.button, .woocommerce button.button,
.woocommerce input.button, .woocommerce .button,
.single_add_to_cart_button, .checkout-button, input[type="submit"] {
    font-family: var(--sbc-font) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.8px !important;
    border-radius: var(--sbc-radius) !important;
    -webkit-transition: all var(--sbc-ease); transition: all var(--sbc-ease);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    min-height: 48px;
    padding: 0 28px !important;
    text-transform: uppercase;
    cursor: pointer;
}

/* Primary CTA */
.single_add_to_cart_button, .checkout-button,
.woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce input.button.alt {
    background: var(--sbc-black) !important;
    color: var(--sbc-white) !important;
    border: 2px solid var(--sbc-black) !important;
    box-shadow: none !important;
}
.single_add_to_cart_button:hover, .checkout-button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
    background: var(--sbc-red) !important;
    border-color: var(--sbc-red) !important;
    -webkit-transform: translateY(-2px); transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(220,38,38,0.3) !important;
}

/* Secondary buttons */
.woocommerce a.button:not(.alt), .woocommerce button.button:not(.alt) {
    background: var(--sbc-white) !important;
    color: var(--sbc-black) !important;
    border: 2px solid var(--sbc-black) !important;
}
.woocommerce a.button:not(.alt):hover, .woocommerce button.button:not(.alt):hover {
    background: var(--sbc-black) !important;
    color: var(--sbc-white) !important;
}

/* ═══════ PRODUCT CARDS ═══════ */
ul.products li.product {
    -webkit-transition: all var(--sbc-ease); transition: all var(--sbc-ease);
    margin-bottom: 30px !important;
}
ul.products li.product .product-card-inner,
ul.products li.product .product-inner,
ul.products li.product > .product-outer {
    border-radius: var(--sbc-radius) !important;
    overflow: hidden;
    border: 1px solid transparent;
    background: var(--sbc-white);
    -webkit-transition: all var(--sbc-ease); transition: all var(--sbc-ease);
}
ul.products li.product:hover .product-card-inner,
ul.products li.product:hover .product-inner,
ul.products li.product:hover > .product-outer {
    border-color: var(--sbc-gray-200);
    box-shadow: var(--sbc-shadow-md);
    -webkit-transform: translateY(-6px); transform: translateY(-6px);
}

/* Product image */
ul.products li.product img,
ul.products li.product .attachment-woocommerce_thumbnail {
    border-radius: var(--sbc-radius) var(--sbc-radius) 0 0 !important;
    -webkit-transition: transform 0.4s cubic-bezier(0.4,0,0.2,1); transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
}
ul.products li.product:hover img {
    -webkit-transform: scale(1.04); transform: scale(1.04);
}

/* Product title */
.woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--sbc-black) !important;
    line-height: 1.4 !important;
    margin-top: 12px !important;
    padding: 0 4px !important;
}

/* Product price */
.woocommerce ul.products li.product .price, .price {
    font-family: var(--sbc-font) !important;
    font-weight: 800 !important;
    color: var(--sbc-black) !important;
    font-size: 15px !important;
}
.price del {
    color: var(--sbc-gray-400) !important;
    opacity: 0.6;
    font-weight: 500 !important;
    font-size: 13px !important;
}
.price ins {
    color: var(--sbc-red) !important;
    text-decoration: none !important;
    font-weight: 800 !important;
}

/* Sale badge */
.onsale, .product-badge.onsale, span.onsale {
    background: var(--sbc-red) !important;
    color: var(--sbc-white) !important;
    font-family: var(--sbc-font) !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    border-radius: var(--sbc-radius-sm) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 10px !important;
    line-height: 1.4 !important;
}

/* WPLoyalty points badge */
.wlr-loyalty-points,
.wlr_points_reward_program,
[class*="wlr"] .wlr-points {
    font-family: var(--sbc-font) !important;
    font-size: 11px !important;
    border-radius: var(--sbc-radius-full) !important;
    font-weight: 600 !important;
}

/* ═══════ SINGLE PRODUCT ═══════ */
.product_title.entry-title {
    font-size: clamp(24px, 4vw, 36px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px;
    line-height: 1.2 !important;
    margin-bottom: 8px !important;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    font-size: 24px !important;
    font-weight: 800 !important;
}
.woocommerce div.product p.price del {
    font-size: 18px !important;
}

/* Quantity input */
.woocommerce .quantity .qty {
    border-radius: var(--sbc-radius-sm) !important;
    border: 2px solid var(--sbc-gray-200) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    min-height: 48px !important;
    text-align: center;
}

/* Tabs */
.woocommerce-tabs .tabs li a {
    font-family: var(--sbc-font) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--sbc-gray-500) !important;
    padding: 12px 0 !important;
}
.woocommerce-tabs .tabs li.active a {
    color: var(--sbc-black) !important;
    border-bottom: 3px solid var(--sbc-black) !important;
}
.woocommerce-tabs .tabs li a:hover {
    color: var(--sbc-black) !important;
}

/* ═══════ BREADCRUMBS ═══════ */
.woocommerce-breadcrumb, .breadcrumb {
    font-size: 12px !important;
    color: var(--sbc-gray-400) !important;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.woocommerce-breadcrumb a { color: var(--sbc-gray-400) !important; }
.woocommerce-breadcrumb a:hover { color: var(--sbc-black) !important; }

/* ═══════ CATEGORY PAGE HEADER ═══════ */
.page-title-shown .page-title,
.woocommerce-products-header {
    text-align: center;
    padding: 40px 20px 30px !important;
}
.page-title-shown .page-title h1,
.woocommerce-products-header h1 {
    font-size: clamp(32px, 5vw, 48px) !important;
    font-weight: 800 !important;
    letter-spacing: -1px;
    color: var(--sbc-black) !important;
    margin-bottom: 8px !important;
}
/* Category description */
.term-description,
.woocommerce-products-header .term-description {
    max-width: 640px;
    margin: 0 auto !important;
    font-size: 15px !important;
    color: var(--sbc-gray-500) !important;
    line-height: 1.6 !important;
}

/* ═══════ SIDEBAR FILTERS ═══════ */
.widget-title,
.widget_title,
.sidebar .widget h2,
.sidebar .widget h3 {
    font-family: var(--sbc-font) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    color: var(--sbc-gray-500) !important;
    border-bottom: none !important;
    padding-bottom: 8px !important;
    margin-bottom: 12px !important;
}

/* ═══════ HOMEPAGE SECTIONS ═══════ */

/* Hero/Slider area */
.shopkeeper-slider,
.home-slider,
.rev_slider_wrapper,
[class*="slider"] {
    border-radius: 0 !important;
}

/* Category grid boxes on homepage */
.category-link,
.product-category {
    border-radius: var(--sbc-radius-lg) !important;
    overflow: hidden;
    -webkit-transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
    transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.category-link:hover,
.product-category:hover {
    -webkit-transform: translateY(-6px); transform: translateY(-6px);
    box-shadow: var(--sbc-shadow-lg);
}

/* Category card title overlay */
.category-link .category-title,
.product-category h2,
.woocommerce ul.products li.product-category h2 {
    font-family: var(--sbc-font) !important;
    font-weight: 800 !important;
    font-size: 14px !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ═══════ HOMEPAGE TYPOGRAPHY ═══════ */
.home .entry-content h2,
.home .wpb_text_column h2,
.home .vc_custom_heading h2,
.home .elementor-heading-title {
    font-size: clamp(28px, 4vw, 40px) !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px;
    text-align: center;
}

/* Taksit section */
.home .entry-content h3,
.home .wpb_text_column h3 {
    font-weight: 700 !important;
    color: var(--sbc-gray-700) !important;
}

/* ═══════ BLOG POSTS / CARDS ═══════ */
.post-title, .entry-title a,
article.post h2, article h2 a {
    font-family: var(--sbc-font) !important;
    font-weight: 800 !important;
    font-size: 20px !important;
    line-height: 1.3 !important;
    color: var(--sbc-black) !important;
    letter-spacing: -0.3px;
}
article.post h2 a:hover { color: var(--sbc-red) !important; }

.post-meta, .entry-meta, .post-date,
article .byline, article .posted-on {
    font-size: 12px !important;
    color: var(--sbc-gray-400) !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Blog post images */
article.post img,
.blog-post-thumb img {
    border-radius: var(--sbc-radius-lg) !important;
}

/* ═══════ FOOTER ═══════ */
footer, .site-footer, #colophon {
    background: var(--sbc-black) !important;
    color: var(--sbc-gray-400) !important;
    padding-top: 60px !important;
}
.site-footer a, footer a {
    color: var(--sbc-gray-400) !important;
    -webkit-transition: color var(--sbc-ease); transition: color var(--sbc-ease);
}
.site-footer a:hover, footer a:hover { color: var(--sbc-white) !important; }
.site-footer h3, .site-footer h4,
.site-footer .widget-title, footer h3, footer h4 {
    color: var(--sbc-white) !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 16px !important;
}
.site-footer ul li, footer ul li {
    margin-bottom: 8px !important;
}
.site-footer ul li a, footer ul li a {
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* Footer social icons */
.site-footer .social-icons a,
footer .social-icons a {
    opacity: 0.6;
    -webkit-transition: opacity var(--sbc-ease); transition: opacity var(--sbc-ease);
}
.site-footer .social-icons a:hover,
footer .social-icons a:hover { opacity: 1; }

/* Footer bottom bar */
.site-footer-bottom,
.footer-bottom,
.site-info {
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    padding: 20px 0 !important;
    font-size: 12px !important;
}

/* ═══════ FORMS ═══════ */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="url"], input[type="number"],
input[type="search"], textarea, select {
    font-family: var(--sbc-font) !important;
    font-size: 16px !important;
    border-radius: var(--sbc-radius-sm) !important;
    border: 2px solid var(--sbc-gray-200) !important;
    padding: 12px 16px !important;
    -webkit-appearance: none; appearance: none;
    -webkit-transition: border-color var(--sbc-ease); transition: border-color var(--sbc-ease);
}
input:focus, textarea:focus, select:focus {
    border-color: var(--sbc-black) !important;
    outline: none;
    box-shadow: 0 0 0 4px rgba(17,17,17,0.06) !important;
}

/* ═══════ PAGE TITLE ═══════ */
.page-title h1, .entry-title {
    font-size: clamp(28px, 5vw, 42px) !important;
    font-weight: 800 !important;
    letter-spacing: -1px;
    color: var(--sbc-black) !important;
}

/* ═══════ WC NOTICES ═══════ */
.woocommerce-message {
    border-top-color: var(--sbc-green) !important;
    border-radius: var(--sbc-radius-sm) !important;
    font-weight: 600 !important;
}
.woocommerce-error {
    border-top-color: var(--sbc-red) !important;
    border-radius: var(--sbc-radius-sm) !important;
}
.woocommerce-info {
    border-top-color: var(--sbc-blue) !important;
    border-radius: var(--sbc-radius-sm) !important;
}

/* ═══════ CART BADGE ═══════ */
.shopping-bag-count, .cart-count, .minicart-count {
    background: var(--sbc-red) !important;
    color: var(--sbc-white) !important;
    font-family: var(--sbc-font) !important;
    font-weight: 800 !important;
    font-size: 10px !important;
    min-width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
    border-radius: 50% !important;
}

/* ═══════ MINI CART ═══════ */
.widget_shopping_cart,
.site-header-cart .widget_shopping_cart {
    border-radius: var(--sbc-radius) !important;
    box-shadow: var(--sbc-shadow-lg) !important;
}

/* ═══════ PAGINATION ═══════ */
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span,
.page-numbers li a, .page-numbers li span {
    font-family: var(--sbc-font) !important;
    font-weight: 700 !important;
    border-radius: var(--sbc-radius-sm) !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
.woocommerce nav.woocommerce-pagination ul li span.current,
.page-numbers li span.current {
    background: var(--sbc-black) !important;
    color: var(--sbc-white) !important;
    border-color: var(--sbc-black) !important;
}

/* ═══════ SCROLL TO TOP ═══════ */
.back-to-top, #scrollUp {
    border-radius: 50% !important;
    background: var(--sbc-black) !important;
    color: var(--sbc-white) !important;
    box-shadow: var(--sbc-shadow-lg) !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    -webkit-transition: all var(--sbc-ease); transition: all var(--sbc-ease);
}
.back-to-top:hover, #scrollUp:hover {
    background: var(--sbc-red) !important;
    -webkit-transform: translateY(-3px); transform: translateY(-3px);
}

/* ═══════ TRACKSHIP HIDE ═══════ */
.trackship_branding, .tracking-header > h1, .tracking-header > span { display: none !important; }

/* ═══════ WPLOYALTY H1 FIX ═══════ */
.wlr-myaccount-page h1, .wlr_page_container h1,
[class*="wlr"] h1:not(.entry-title):not(.page-title) {
    font-size: 18px !important;
    font-weight: 700 !important;
}
/* Odullerim widget buton */
.wlr-myaccount-page,
[class*="wlr-launcher"],
.wlr-launcher-icon {
    font-family: var(--sbc-font) !important;
}

/* ═══════ WHATSAPP BUTTON ═══════ */
/* Don't hide but clean up */
.whatsapp-btn, [class*="whatsapp"], #whatsapp-btn {
    border-radius: 50% !important;
    box-shadow: var(--sbc-shadow-lg) !important;
}

/* ═══════ COOKIE BANNER (CookieYes) ═══════ */
.cky-consent-container,
.cky-notice {
    border-radius: var(--sbc-radius-lg) !important;
    font-family: var(--sbc-font) !important;
    box-shadow: var(--sbc-shadow-lg) !important;
}
.cky-btn-accept {
    background: var(--sbc-black) !important;
    border-radius: var(--sbc-radius-sm) !important;
    font-family: var(--sbc-font) !important;
    font-weight: 700 !important;
}

/* ═══════ SELECTION / HIGHLIGHT ═══════ */
::selection {
    background: var(--sbc-red);
    color: var(--sbc-white);
}
::-moz-selection {
    background: var(--sbc-red);
    color: var(--sbc-white);
}

/* ═══════ LINKS GENERAL ═══════ */
a {
    -webkit-tap-highlight-color: transparent;
}

/* ═══════ MOBILE RESPONSIVE ═══════ */
@media (max-width: 768px) {
    .page-title-shown .page-title h1 { font-size: 28px !important; }
    .product_title.entry-title { font-size: 22px !important; }

    .single_add_to_cart_button {
        width: 100% !important;
        min-height: 52px !important;
        font-size: 14px !important;
    }

    ul.products li.product:hover .product-card-inner,
    ul.products li.product:hover .product-inner,
    ul.products li.product:hover > .product-outer {
        -webkit-transform: none; transform: none;
    }

    /* No hover effects on mobile */
    ul.products li.product:hover img {
        -webkit-transform: none; transform: none;
    }
}

/* ═══════ TABLET ═══════ */
@media (min-width: 769px) and (max-width: 1024px) {
    .page-title-shown .page-title h1 { font-size: 36px !important; }
}

/* ═══════ prefers-reduced-motion ═══════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        -webkit-transition-duration: 0.01ms !important; transition-duration: 0.01ms !important;
        -webkit-animation-duration: 0.01ms !important; animation-duration: 0.01ms !important;
    }
}

/* ═══════ PRINT ═══════ */
@media print {
    .sbc-announce, .site-header-top-bar, .topbar,
    .whatsapp-btn, [class*="whatsapp"],
    .back-to-top, #scrollUp,
    .cky-consent-container,
    [class*="wlr-launcher"] { display: none !important; }
}