/*
 * Theme Name:        stickly
 * Theme URI:         https://example.com/stickerhub
 * Author:            Your Name
 * Author URI:        https://example.com
 * Description:       Маркетплейс авторских стикеров — Soft UI, glassmorphism, WooCommerce.
 * Version:           1.0.0
 * Requires at least: 6.2
 * Tested up to:      6.5
 * Requires PHP:      8.1
 * License:           GNU General Public License v2 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       stickerhub
 * Tags:              woocommerce, e-commerce, soft-ui, glassmorphism
 */

/* ================================================================
   0. GOOGLE FONTS
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ================================================================
   1. CSS CUSTOM PROPERTIES
   ================================================================ */
:root {
    /* Цвета бренда */
    --color-primary:      var(--stickly-primary, #7B61FF);
    --color-primary-dark: var(--stickly-primary-dark, #6246EA);
    --color-secondary:    #A78BFA;
    --color-accent:       #FF7AC6;
    --color-bg:           #F8F9FB;
    --color-card:         #FFFFFF;
    --color-text:         #1A1D26;
    --color-text-muted:   #6B7280;
    --color-border:       #E8ECF2;
    --color-success:      #10B981;
    --color-success-light:#D1FAE5;

    /* Градиенты */
    --gradient-primary: linear-gradient(135deg, #7B61FF 0%, #FF7AC6 100%);
    --gradient-soft:    linear-gradient(135deg, #7B61FF 0%, #A78BFA 100%);
    --gradient-hero:    radial-gradient(ellipse 80% 60% at 65% 40%, rgba(123,97,255,0.12) 0%, transparent 70%),
                        radial-gradient(ellipse 50% 50% at 30% 70%, rgba(255,122,198,0.08) 0%, transparent 65%),
                        #F7F7FB;

    /* Glass */
    --glass-bg:     rgba(255,255,255,0.70);
    --glass-border: rgba(255,255,255,0.50);
    --glass-blur:   blur(20px) saturate(180%);
    --glass-shadow: 0 8px 32px rgba(123,97,255,0.10), inset 0 1px 0 rgba(255,255,255,0.6);

    /* Тени */
    --shadow-sm:    none;
    --shadow-md:    0 4px 12px rgba(123, 97, 255, 0.05);
    --shadow-lg:    0 12px 24px -10px rgba(123, 97, 255, 0.15);
    --shadow-card:  0 10px 30px -10px rgba(123, 97, 255, 0.08);

    /* Border radius */
    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   20px;
    --radius-2xl:  32px;
    --radius-full: 9999px;

    /* Шрифты */
    --font-display: 'Inter', system-ui, sans-serif;
    --font-body:    'Inter', system-ui, sans-serif;

    /* Размеры */
    --header-height:    68px;
    --container-max:    1320px;
    --container-pad:    clamp(1rem, 4vw, 2rem);

    /* Переходы */
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
    --duration-sm: 150ms;
    --duration-md: 250ms;
    --duration-lg: 400ms;
}

/* ================================================================
   2. RESET & BASE
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
    font-family:   var(--font-body);
    font-size:     1rem;
    line-height:   1.65;
    color:         var(--color-text);
    background:    var(--color-bg);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--duration-sm) ease; }
a:hover { color: var(--color-primary-dark); }
a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 4px; }
button { cursor: pointer; font-family: var(--font-body); }

/* Скрытие нативного скроллбара в overflow-x */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

/* Screen reader only */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ================================================================
   3. KEYFRAME ANIMATIONS
   ================================================================ */
@keyframes float {
    0%,100% { transform: translateY(0px)   rotate(0deg); }
    50%      { transform: translateY(-12px) rotate(1.5deg); }
}
@keyframes floatReverse {
    0%,100% { transform: translateY(0px)  rotate(0deg); }
    50%      { transform: translateY(10px) rotate(-2deg); }
}
@keyframes floatStar {
    0%,100% { transform: translateY(0px)  scale(1)    rotate(0deg); }
    50%      { transform: translateY(-8px) scale(1.08) rotate(15deg); }
}
@keyframes blobDrift {
    0%,100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
    33%      { border-radius: 40% 60% 70% 30% / 50% 60% 30% 60%; }
    66%      { border-radius: 30% 70% 40% 60% / 70% 40% 60% 30%; }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position:  600px 0; }
}
@keyframes pulseBadge {
    0%,100% { box-shadow: 0 0 0 0   rgba(123,97,255,0.45); }
    70%      { box-shadow: 0 0 0 8px rgba(123,97,255,0); }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

.animate-float         { animation: float        4.0s ease-in-out infinite; }
.animate-float-slow    { animation: float        6.0s ease-in-out infinite; }
.animate-float-reverse { animation: floatReverse 5.0s ease-in-out infinite; }
.animate-float-star    { animation: floatStar    3.2s ease-in-out infinite; }
.animate-blob          { animation: blobDrift    8.0s ease-in-out infinite; }
.animate-fade-in-up    { animation: fadeInUp     0.6s var(--ease-out) both; }
.animate-spin          { animation: spin         1.0s linear infinite; }

.delay-100  { animation-delay:  100ms; }
.delay-200  { animation-delay:  200ms; }
.delay-300  { animation-delay:  300ms; }
.delay-400  { animation-delay:  400ms; }

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

/* ================================================================
   4. GRADIENT TEXT
   ================================================================ */
.text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ================================================================
   5. GLASSMORPHISM
   ================================================================ */
.glass {
    background:          var(--glass-bg);
    backdrop-filter:     var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border:              1px solid var(--glass-border);
    box-shadow:          var(--glass-shadow);
}
.glass-card {
    background:          rgba(255,255,255,0.72);
    backdrop-filter:     blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border:              1px solid rgba(255,255,255,0.55);
    border-radius:       var(--radius-lg);
    box-shadow:          var(--glass-shadow);
    padding:             2rem;
    transition:          box-shadow var(--duration-md) var(--ease-out),
                         transform  var(--duration-md) var(--ease-bounce);
}
.glass-card:hover {
    box-shadow: var(--shadow-lg);
    transform:  translateY(-3px);
}

/* ================================================================
   6. КНОПКИ
   ================================================================ */
.btn-primary {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             0.5rem;
    padding:         0.65rem 1.5rem;
    font-family:     var(--font-body);
    font-size:       0.875rem;
    font-weight:     700;
    color:           #fff;
    border:          none;
    border-radius:   var(--radius-full);
    text-decoration: none;
    white-space:     nowrap;
    cursor:          pointer;
    background:      var(--gradient-primary);
    background-size: 200% 200%;
    background-position: 0% 50%;
    box-shadow:      0 4px 16px rgba(123,97,255,0.30), 0 1px 3px rgba(0,0,0,0.08);
    transition:      transform var(--duration-md) var(--ease-bounce),
                     box-shadow var(--duration-md) var(--ease-out),
                     background-position var(--duration-lg) var(--ease-out);
}
.btn-primary:hover, .btn-primary:focus-visible {
    color:               #fff;
    transform:           translateY(-3px) scale(1.02);
    box-shadow:          0 8px 28px rgba(123,97,255,0.42), 0 3px 8px rgba(0,0,0,0.10);
    background-position: 100% 50%;
}
.btn-primary:active { transform: translateY(-1px) scale(0.98); }

.btn-primary--sm { padding: 0.4rem 1rem; font-size: 0.75rem; }
.btn-primary--lg { padding: 0.875rem 2.25rem; font-size: 1rem; }

.btn-ghost {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             0.5rem;
    padding:         0.625rem 1.4rem;
    font-family:     var(--font-body);
    font-size:       0.875rem;
    font-weight:     600;
    color:           var(--color-primary);
    background:      transparent;
    border:          1.5px solid rgba(123,97,255,0.35);
    border-radius:   var(--radius-full);
    text-decoration: none;
    cursor:          pointer;
    transition:      all var(--duration-md) var(--ease-bounce);
}
.btn-ghost:hover {
    background:   rgba(123,97,255,0.08);
    border-color: var(--color-primary);
    transform:    translateY(-2px);
    box-shadow:   var(--shadow-md);
}

.btn-white {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             0.5rem;
    padding:         0.875rem 2rem;
    font-family:     var(--font-body);
    font-size:       1rem;
    font-weight:     800;
    color:           var(--color-primary);
    background:      #fff;
    border:          none;
    border-radius:   var(--radius-full);
    text-decoration: none;
    cursor:          pointer;
    box-shadow:      0 4px 20px rgba(0,0,0,0.15);
    transition:      all var(--duration-md) var(--ease-bounce);
}
.btn-white:hover {
    color:     var(--color-primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.20);
}

/* ================================================================
   7. LAYOUT UTILITIES
   ================================================================ */
.container {
    width:         100%;
    max-width:     var(--container-max);
    margin-left:   auto;
    margin-right:  auto;
    padding-left:  var(--container-pad);
    padding-right: var(--container-pad);
}

/* ================================================================
   8. HEADER
   ================================================================ */
.site-header {
    position:        sticky;
    top:             0;
    z-index:         1000;
    background:      rgba(255,255,255,0.82);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom:   1px solid rgba(123,97,255,0.08);
    transition:      box-shadow var(--duration-md) var(--ease-out),
                     background var(--duration-md) var(--ease-out);
}
.site-header.scrolled {
    box-shadow:  0 4px 24px rgba(123,97,255,0.12);
    background:  rgba(255,255,255,0.95);
}

.site-logo a {
    display:     flex;
    align-items: center;
    gap:         0.6rem;
    font-family: var(--font-display);
    font-size:   1.1rem;
    font-weight: 900;
    background:  var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transition:  opacity var(--duration-sm);
}

.nav-link {
    position:      relative;
    display:       block;
    padding:       0.45rem 0.875rem;
    font-size:     0.875rem;
    font-weight:   600;
    color:         #4B5563;
    border-radius: var(--radius-full);
    transition:    color var(--duration-sm), background var(--duration-sm);
}
.nav-link::after {
    content:   '';
    position:  absolute;
    bottom:    -2px; left: 50%;
    width:     0; height: 2px;
    background: var(--gradient-primary);
    border-radius: 2px;
    transition: width var(--duration-md) var(--ease-out), left var(--duration-md) var(--ease-out);
}
.nav-link:hover, .nav-link.active { color: var(--color-primary); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; left: 0; }

.cat-chip {
    display:       inline-flex;
    align-items:   center;
    gap:           0.375rem;
    font-size:     0.75rem;
    font-weight:   700;
    padding:       0.35rem 0.875rem;
    border-radius: var(--radius-full);
    border:        1px solid var(--color-border);
    color:         #4B5563;
    background:    #fff;
    white-space:   nowrap;
    transition:    all var(--duration-md) var(--ease-bounce);
    cursor:        pointer;
    flex-shrink:   0;
}
.cat-chip:hover, .cat-chip.active {
    background:  var(--gradient-soft);
    color:       #fff;
    border-color: transparent;
    box-shadow:  0 4px 14px rgba(123,97,255,0.30);
    transform:   translateY(-1px);
}

/* ================================================================
   9. SEARCH BAR
   ================================================================ */
.search-bar {
    display:       flex;
    align-items:   center;
    gap:           0.75rem;
    background:    var(--color-bg);
    border-radius: var(--radius-xl);
    padding:       0.625rem 1rem;
    border:        1.5px solid rgba(123,97,255,0.10);
    transition:    border-color var(--duration-sm), box-shadow var(--duration-sm);
}
.search-bar:focus-within {
    border-color: var(--color-primary);
    box-shadow:   0 0 0 3px rgba(123,97,255,0.12);
}
.search-bar input {
    flex:        1;
    background:  transparent;
    border:      none;
    outline:     none;
    font-family: var(--font-body);
    font-size:   0.875rem;
    font-weight: 500;
    color:       var(--color-text);
}

/* ================================================================
   10. HERO
   ================================================================ */
.hero-blob {
    position:      absolute;
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    filter:        blur(52px);
    opacity:       0.20;
    pointer-events: none;
    animation:     blobDrift 10s ease-in-out infinite;
}

/* ================================================================
   11. FEATURE CARDS
   ================================================================ */
.feature-card {
    transition: transform var(--duration-md) var(--ease-bounce),
                box-shadow var(--duration-md) var(--ease-out);
}
.feature-card:hover { transform: translateY(-5px); }

/* Фикс деформации и круглой формы иконок категорий */
.stickly-category-item__circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s, box-shadow 0.25s;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

/* Если внутри круга реальное фото — оно заполняет круг на 100% */
.stickly-category-item__circle img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    display: block;
}

/* Если внутри эмодзи-заглушка — она аккуратно масштабируется и центрируется */
.stickly-category-item__circle span {
    font-size: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 65%;
    max-height: 65%;
}

.stickly-category-item:hover .stickly-category-item__circle {
    transform: translateY(-4px);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-lg);
    background: #ffffff;
}

/* ================================================================
   13. PRODUCT CARDS
   ================================================================ */
.sh-product-card, .product-card {
    transition: transform var(--duration-md) var(--ease-bounce), box-shadow var(--duration-md) var(--ease-out);
}
.sh-product-card:hover, .product-card:hover { transform: translateY(-3px); }

.sh-thumb-inner, .product-thumb-inner { transition: transform 0.4s ease; }
.sh-product-card:hover .sh-thumb-inner, .product-card:hover .product-thumb-inner { transform: scale(1.04); }

.sh-sticker-item, .sticker-item { transition: transform var(--duration-md) var(--ease-bounce); }
.sh-product-card:hover .sh-sticker-item:nth-child(1), .product-card:hover .sticker-item:nth-child(1) { transform: translate(-2px,-2px) rotate(-2deg); }
.sh-product-card:hover .sh-sticker-item:nth-child(2), .product-card:hover .sticker-item:nth-child(2) { transform: translate( 2px,-2px) rotate( 2deg); }
.sh-product-card:hover .sh-sticker-item:nth-child(3), .product-card:hover .sticker-item:nth-child(3) { transform: translate(-2px, 2px) rotate( 1deg); }
.sh-product-card:hover .sh-sticker-item:nth-child(4), .product-card:hover .sticker-item:nth-child(4) { transform: translate( 2px, 2px) rotate(-2deg); }

/* ================================================================
   14. WOOCOMMERCE OVERRIDES
   ================================================================ */
.woocommerce-page #sidebar, .woo-full-width #secondary, .woo-full-width .widget-area { display: none; }

.woocommerce ul.products, .woocommerce-page ul.products {
    display:               grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap:                   1.5rem;
    margin:                0 !important;
    padding:               0 !important;
    list-style:            none;
}
@media (max-width: 1100px) { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px)  { .woocommerce ul.products, .woocommerce-page ul.products { grid-template-columns: 1fr; } }

.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
    float:         none !important;
    width:         100% !important;
    margin:        0 !important;
    padding:       0 !important;
    display:       flex !important;
    flex-direction: column;
    background:    var(--color-card);
    border-radius: var(--radius-xl);
    border:        1px solid var(--color-border);
    overflow:      hidden;
    transition:    transform var(--duration-md) var(--ease-out);
}
.woocommerce ul.products li.product:hover, .woocommerce-page ul.products li.product:hover {
    transform:  translateY(-3px);
}

.woocommerce ul.products li.product img {
    width:      100% !important;
    height:     220px !important;
    object-fit: cover !important;
    margin:     0 !important;
    transform:  scale(1);
    transition: transform 0.45s ease;
}
.woocommerce ul.products li.product:hover img { transform: scale(1.06); }

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family:        var(--font-body) !important;
    font-size:          1rem !important;
    font-weight:        700 !important;
    color:              var(--color-text) !important;
    margin:             1rem 1.25rem 0.5rem !important;
    padding:            0 !important;
    line-height:        1.35 !important;
}
.woocommerce ul.products li.product:hover .woocommerce-loop-product__title { color: var(--color-primary) !important; }

.woocommerce ul.products li.product .price {
    display:     flex !important;
    align-items: baseline;
    gap:         0.5rem;
    margin:      0 1.25rem 1rem !important;
    padding:     0 !important;
}
.woocommerce ul.products li.product .price .amount {
    font-size:   1.25rem !important;
    font-weight: 800 !important;
    color:       var(--color-primary) !important;
}

.woocommerce span.onsale, .woocommerce ul.products li.product .onsale {
    position:       absolute !important;
    top:            12px !important;
    left:           12px !important;
    border-radius:  8px !important;
    background:     var(--color-accent) !important;
    color:          #fff !important;
    font-family:    var(--font-body) !important;
    font-size:      0.7rem !important;
    font-weight:    800 !important;
    padding:        0.3rem 0.65rem !important;
    z-index:        10;
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product a.button {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             0.5rem !important;
    width:           calc(100% - 2.5rem) !important;
    margin:          0 1.25rem 1.25rem !important;
    padding:         0.65rem 1rem !important;
    font-family:     var(--font-body) !important;
    font-size:       0.875rem !important;
    font-weight:     700 !important;
    color:           #fff !important;
    border-radius:   var(--radius-full) !important;
    background:      var(--gradient-primary) !important;
    background-size: 200% 200% !important;
    transition:      transform var(--duration-md) var(--ease-out), background-position var(--duration-lg) var(--ease-out) !important;
}
.woocommerce ul.products li.product .button:hover {
    transform:           translateY(-2px) !important;
    background-position: 100% 50% !important;
    color:               #fff !important;
}

.woocommerce nav.woocommerce-pagination ul { display: inline-flex !important; align-items: center; gap: 0.5rem; border: none !important; padding: 0; margin: 3rem 0 0 !important; }
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    display:         inline-flex !important;
    align-items:     center !important;
    justify-content: center !important;
    min-width:       40px; height: 40px;
    font-family:     var(--font-body);
    font-size:       0.875rem;
    font-weight:     600;
    color:           var(--color-text-muted) !important;
    background:      var(--color-card);
    border:          1.5px solid var(--color-border) !important;
    border-radius:   0.875rem !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
    background:    var(--gradient-primary) !important;
    color:         #fff !important;
    border-color:  transparent !important;
    box-shadow:    var(--shadow-lg);
}

/* ================================================================
   15. SINGLE PRODUCT (Стилевые правки страницы товара)
   ================================================================ */
.stickly-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 40px 1rem;
    font-family: var(--font-body);
}

.stickly-product-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    align-items: start;
}
@media (min-width: 992px) {
    .stickly-product-grid {
        grid-template-columns: 1fr 400px;
    }
}

.stickly-gallery, .stickly-product-details, .stickly-buy-box, .stickly-author-box, .stickly-promo-banner {
    background: var(--color-card);
    border-radius: var(--radius-xl);
    padding: 30px;
    margin-bottom: 30px;
    border: 1px solid var(--color-border);
}

.stickly-main-image {
    position: relative;
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    padding: 20px;
    text-align: center;
}
.stickly-badge-new {
    position: absolute;
    top: 20px;
    left: 20px;
    background: var(--color-primary);
    color: white;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    font-weight: bold;
    font-size: 12px;
}
.stickly-thumb {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    cursor: pointer;
    background: var(--color-bg);
    padding: 5px;
}
.stickly-thumb.active {
    border-color: var(--color-primary);
}

/* Кнопки в карточке товара */
.stickly-btn-primary {
    background: var(--gradient-primary);
    color: white;
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 10px;
    transition: transform var(--duration-sm), box-shadow var(--duration-sm);
}
.stickly-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}
.stickly-btn-secondary {
    background: white;
    color: var(--color-primary);
    width: 100%;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-weight: 700;
    cursor: pointer;
}
.stickly-btn-outline {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-primary);
    padding: 12px 20px;
    border-radius: var(--radius-md);
    width: 100%;
    font-weight: 700;
}

.stickly-tab.active {
    color: var(--color-text);
    font-weight: bold;
    border-bottom: 2px solid var(--color-primary);
}

.stickly-meta-item {
    background: var(--color-bg);
    padding: 15px;
    border-radius: var(--radius-md);
}

.stickly-price-rub {
    font-size: 32px;
    font-weight: bold;
    color: var(--color-success);
    background: var(--color-success-light);
    display: inline-block;
    padding: 5px 15px;
    border-radius: var(--radius-md);
}

/* ================================================================
   16. CHECKOUT (Оформление заказа)
   ================================================================ */
.custom-stickly-checkout {
    max-width: var(--container-max);
    margin: 40px auto;
    font-family: var(--font-body);
    color: var(--color-text);
}
.checkout-columns-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}
@media (min-width: 1024px) {
    .checkout-columns-wrapper {
        grid-template-columns: 1fr 380px;
    }
}

.checkout-section {
    background: var(--color-card);
    border-radius: var(--radius-xl);
    padding: 30px;
    margin-bottom: 20px;
    border: 1px solid var(--color-border);
}
.step-number {
    background: var(--color-primary);
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 15px;
    font-size: 14px;
}

.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    margin-top: 8px;
    color: var(--color-text);
}

.proceed-to-payment-btn {
    background: var(--gradient-primary) !important;
    color: #fff !important;
    width: 100%;
    padding: 18px !important;
    border-radius: var(--radius-md) !important;
    font-weight: 700 !important;
    border: none !important;
    font-size: 16px !important;
    margin-top: 20px;
    cursor: pointer;
    transition: transform var(--duration-sm) ease, box-shadow var(--duration-sm) ease;
}
.proceed-to-payment-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

/* ================================================================
   17. CART (Корзина)
   ================================================================ */
.stickly-cart-container {
    display: flex;
    flex-direction: column;
    gap: 30px;
    max-width: var(--container-max);
    margin: 40px auto;
    padding: 0 1rem;
    font-family: var(--font-body);
    color: var(--color-text);
}
@media (min-width: 1024px) {
    .stickly-cart-container {
        flex-direction: row;
        align-items: flex-start;
    }
}

.cart-main-content {
    flex: 1;
    width: 100%;
}

.remove-selected {
    color: var(--color-primary);
    font-weight: 700;
}

.cart-item {
    background: var(--color-card);
    border-radius: var(--radius-xl);
    padding: 20px;
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    border: 1px solid var(--color-border);
}

.item-image img {
    border-radius: var(--radius-md);
}

.cart-sidebar {
    width: 100%;
    background: var(--color-card);
    border-radius: var(--radius-xl);
    padding: 30px;
    border: 1px solid var(--color-border);
}
@media (min-width: 1024px) {
    .cart-sidebar {
        width: 380px;
        position: sticky;
        top: 20px;
    }
}

.checkout-button {
    display: block;
    background: var(--gradient-primary);
    color: #fff !important;
    text-align: center;
    padding: 18px;
    border-radius: var(--radius-md);
    font-weight: 700;
    transition: transform var(--duration-sm) ease, box-shadow var(--duration-sm) ease;
}
.checkout-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.badge:before {
    content: '✓';
    margin-right: 10px;
    color: var(--color-primary);
    font-weight: bold;
}

.woocommerce-cart .entry-header, 
.woocommerce-cart .entry-meta {
    display: none !important;
}

/* ================================================================
   18. FOOTER & UTILITIES
   ================================================================ */
.site-footer { background: #030712; color: #fff; }
.t-card, .hiw-card { transition: transform var(--duration-md) var(--ease-bounce), box-shadow var(--duration-md) var(--ease-out); }
.t-card:hover, .hiw-card:hover { transform: translateY(-3px); }

/* Выравнивание загруженных картинок в блоке Hero */
.stickly-float-icon img {
    width: 100% !important;
    height: 100% !important;
    max-width: 65% !important; /* Картинка не прилипает к краям маленького кружка */
    max-height: 65% !important;
    object-fit: contain !important;
    display: block;
    margin: 0 auto;
}

.stickly-hero__cat img {
    width: 100% !important;
    height: 100% !important;
    max-width: 75% !important; /* Картинка аккуратно вписана в большой круг */
    max-height: 75% !important;
    object-fit: contain !important;
    display: block;
    margin: 0 auto;
}

/* ================================================================
   КАРТОЧКА ОТЗЫВА (TESTIMONIALS) - С ВЫРАВНИВАНИЕМ АВАТАРОК
   ================================================================ */
.stickly-testimonial {
    padding: 3rem 0;
    background: var(--color-bg);
}
.stickly-testimonial__card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2.5rem;
    align-items: center;
}
@media (min-width: 768px) {
    .stickly-testimonial__card { 
        grid-template-columns: 200px 1fr;
    }
}
.stickly-testimonial__profile { 
    text-align: center; 
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Фикс деформации аватарки: жесткая фиксация пропорций */
.stickly-testimonial__profile img {
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;
    min-height: 96px !important;
    max-width: 96px !important;
    max-height: 96px !important;
    aspect-ratio: 1 / 1 !important; /* Гарантия идеального круга */
    object-fit: cover !important;
    display: block !important;
    border-radius: 50% !important;
    margin: 0 auto 1rem !important;
    
    /* Элегантная двойная рамка: белая внутри, серая снаружи */
    border: 3px solid #ffffff !important;
    box-shadow: 0 0 0 1px var(--color-border), 0 8px 20px -6px rgba(123, 97, 255, 0.15) !important;
}

.stickly-testimonial__name { 
    font-size: 1.125rem; 
    font-weight: 800; 
    color: var(--color-text);
    margin-bottom: 4px;
}
.stickly-testimonial__role { 
    font-size: 0.875rem; 
    color: var(--color-text-muted); 
    margin-bottom: 8px;
}
.stickly-testimonial__earn {
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--color-success);
}
.stickly-testimonial__quote {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: #374151;
    font-style: italic;
    margin: 0;
}

/* Скрывает гигантский текст ошибок битых картинок внутри кругов */
.stickly-float-icon img,
.stickly-hero__cat img {
    font-size: 0 !important;
    text-indent: -9999px;
}