/* SHOPSTYLE — главная + футер (ss-*). Палитра: фон #F3F0EB, текст #2B2724, акцент #C4593A, вторичный #8A837C.
   Главная свёрстана Gutenberg-блоками (core/group, core/columns, core/image, core/heading, core/paragraph, core/buttons,
   [promo_banner] в core/shortcode, wd/products) — без WPBakery. Тема Woodmart ставит margin-block:0 var(--wd-block-spacing)
   всем прямым детям .entry-content и .is-layout-flow (специфичность 0,2,0), поэтому отступы блоков ниже заданы селекторами
   из трёх классов, а внутри секций --wd-block-spacing обнулён. */
:root{--ss-bg:#F3F0EB;--ss-text:#2B2724;--ss-accent:#C4593A;--ss-muted:#8A837C;--ss-line:#D9D3CB}

/* --- общее --- */
.ss-section{margin-top:70px}
.ss-hero-row,.ss-section,.ss-cats,.ss-subscribe{--wd-block-spacing:0}
/* на всю ширину окна из .container — формула как у .wd-section-stretch темы (--wd-scroll-w ставит js темы) */
.ss-full{position:relative;width:calc(100vw - var(--wd-scroll-w,0px));left:calc(50% - 50vw + var(--wd-scroll-w,0px)/2)}
/* отступы между секциями — измерены по исходной (WPBakery) версии */
.entry-content>.wp-block-group.ss-hero-row{margin:0}
.entry-content>.wp-block-group.ss-section{margin:40px 0 0}
.entry-content>.wp-block-group.ss-popular-row,.entry-content>.wp-block-group.ss-trust-row{margin-top:56px}
.entry-content>.wp-block-group.ss-insta{margin-top:49px}
.ss-title{text-align:center}
.ss-title .title,.ss-title>h2{font-size:22px;line-height:28px;font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:var(--ss-text);margin:0}
.ss-title .title-after_title{margin-top:8px}
.wp-block-group.ss-title>p{font-size:13px;line-height:22px;margin:18px 0 0}
.ss-title .title-after_title a,.ss-title>p a{font-size:13px;color:var(--ss-muted);border-bottom:1px solid var(--ss-line);padding-bottom:2px}
.ss-title .title-after_title a:hover,.ss-title>p a:hover{color:var(--ss-accent);border-color:var(--ss-accent)}
/* карусель Woodmart: .wd-carousel-inner margin-block:-15px/padding 15px — отрицательный margin схлопывается с соседями, поэтому +15 к измеренным по WPB-версии значениям */
.wp-block-group.ss-section>.ss-title{margin-bottom:29px}
.wp-block-group.ss-insta>.ss-title{margin-bottom:30px}
@media (max-width:767px){.ss-title>h2{font-size:20px;line-height:25px}}
.ss-label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ss-muted);margin:0 0 18px}
.ss-btn,.ss-hero .btn,.ss-subscribe-form .wpcf7-submit{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding:14px 32px;border-radius:0}
.btn.ss-btn.btn-color-black{background:transparent;color:var(--ss-text);border:1px solid var(--ss-text)}
.btn.ss-btn.btn-color-black:hover{background:var(--ss-text);color:var(--ss-bg)}

/* --- 1. первый экран --- */
.ss-hero-row{margin-top:0}
.ss-hero.promo-banner{--wd-brd-radius:0;border-radius:0}
.ss-hero .banner-image{transform:none!important;transition:none}
.ss-hero .banner-image img{height:100vh!important;height:100svh!important;min-height:560px;object-fit:cover;object-position:50% 15%;width:100%}
.ss-hero .wrapper-content-banner{padding:0 20px 8vh;background:linear-gradient(to top,rgba(43,39,36,.45),rgba(43,39,36,0) 55%)}
.ss-hero .content-banner{align-self:flex-end}
.ss-hero .banner-subtitle{font-size:13px;font-weight:400;letter-spacing:.32em;text-transform:uppercase;color:#fff}
.ss-hero .banner-title{font-size:clamp(84px,11vw,190px);font-weight:300;letter-spacing:.06em;line-height:1;color:#fff;margin-top:6px}
.ss-hero .banner-inner{font-size:14px;color:rgba(255,255,255,.85);margin-top:10px}
.ss-hero .btn{background:var(--ss-bg);color:var(--ss-text);box-shadow:none}
.ss-hero .btn:hover{background:#fff;color:var(--ss-text);box-shadow:none}
/* Woodmart 8: .wrapper-content-banner{pointer-events:none} — возвращаем кнопкам hover/клик */
.ss-hero .btn,.ss-cat .btn{pointer-events:auto}

/* --- 2, 5. карусели: стрелки по бокам, всегда видны (Woodmart 8: .wd-nav-arrows > .wd-btn-arrow.wd-prev/.wd-next) --- */
.ss-carousel .wd-nav-arrows{--wd-arrow-size:36px;--wd-arrow-icon-size:12px;--wd-arrow-offset-h:16px;--wd-arrow-color:var(--ss-text);--wd-arrow-color-hover:var(--ss-text);--wd-arrow-color-dis:var(--ss-line);--wd-arrow-bg:var(--ss-bg);--wd-arrow-brd:1px solid;--wd-arrow-brd-color:var(--ss-line);--wd-arrow-brd-color-hover:var(--ss-text);--wd-arrow-radius:50%}
.ss-carousel .wd-nav-arrows .wd-btn-arrow{visibility:visible;opacity:1;transform:none}
@media (max-width:1300px){.ss-carousel .wd-nav-arrows .wd-btn-arrow{display:none}}

/* --- 3. плитки категорий без зазоров (core/columns → grid; CSS блоков WP на фронте отключён опцией темы) --- */
.entry-content>.wp-block-columns.ss-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:50px 0 0}
.ss-cats>.wp-block-column{min-width:0}
.ss-cats .promo-banner-wrapper{margin:0}
.ss-cat.promo-banner{--wd-brd-radius:0;border-radius:0}
.ss-cat .banner-image{transform:none;transition:transform .8s ease}
.ss-cat:hover .banner-image{transform:scale(1.03)}
.ss-cat .banner-image img{height:clamp(420px,42vw,760px);object-fit:cover;object-position:50% 10%}
.ss-cat .wrapper-content-banner{padding:40px 20px;background:linear-gradient(to top,rgba(43,39,36,.55),rgba(43,39,36,0) 50%)}
.ss-cat .banner-title{font-size:20px;font-weight:300;letter-spacing:.2em;text-transform:uppercase;color:#fff}
.ss-cat .banner-btn-wrapper{margin-top:6px}
.ss-cat .btn.btn-style-link{font-size:12px;font-weight:400;letter-spacing:.04em;text-transform:none;color:rgba(255,255,255,.85);padding:0}
@media (max-width:767px){.entry-content>.wp-block-columns.ss-cats{grid-template-columns:1fr}.ss-cat .banner-image img{height:70vw}}

/* --- 4. о бренде: «шторка» (вариант 4, выбор Benny 14.09) — фото открываются маской при появлении, класс .in ставит assets/home.js --- */
.ss-about{display:grid;grid-template-columns:repeat(12,1fr);column-gap:24px;align-items:end}
.ss-about-img{margin:0;overflow:hidden}
.ss-about-img img{display:block;width:100%;height:auto;object-fit:cover;aspect-ratio:3/4;transform:scale(1.15);transition:transform 1.6s cubic-bezier(.2,.7,.2,1)}
.ss-about-img--tl{grid-column:1/5;clip-path:inset(0 100% 0 0);transition:clip-path 1.3s cubic-bezier(.7,0,.2,1)}
.ss-about-img--br{grid-column:10/13;margin-bottom:28%;clip-path:inset(0 0 0 100%);transition:clip-path 1.3s cubic-bezier(.7,0,.2,1) .25s}
.ss-about-body{grid-column:5/10;padding:0 3vw 8%;opacity:0;transform:translateY(24px);transition:opacity .9s ease .6s,transform .9s ease .6s}
.ss-about.in .ss-about-img--tl,.ss-about.in .ss-about-img--br{clip-path:inset(0 0 0 0)}
.ss-about.in .ss-about-img img{transform:none}
.ss-about.in .ss-about-body{opacity:1;transform:none}
.wp-block-group.ss-about-body>.ss-label{margin:0 0 18px}
.ss-about-text{font-size:clamp(20px,2.1vw,30px);font-weight:300;line-height:1.35;letter-spacing:.03em;text-transform:uppercase;color:var(--ss-text);margin:0 0 28px}
.wp-block-group.ss-about-body>.ss-about-text{margin:0 0 28px}
.ss-about-text strong{font-weight:500}
/* кнопка core/button в стиле .btn.btn-style-bordered.btn-color-black */
.ss-about-body .wp-block-button{display:flex}
.ss-about-body .wp-block-button__link{display:inline-block;font-size:12px;line-height:14px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;padding:14px 32px;border:1px solid var(--ss-text);border-radius:0;background:transparent;color:var(--ss-text);text-decoration:none;transition:background .25s ease,color .25s ease}
.ss-about-body .wp-block-button__link:hover{background:var(--ss-text);color:var(--ss-bg)}
@media (max-width:1024px){.ss-about{grid-template-columns:1fr 1fr;column-gap:16px}.ss-about-img--tl{grid-column:1}.ss-about-img--br{grid-column:2;margin-bottom:0}.ss-about-body{grid-column:1/3;padding:32px 0 0}}
@media (prefers-reduced-motion:reduce){.ss-about-img,.ss-about-img img,.ss-about-body{transition:none}.ss-about-img--tl,.ss-about-img--br{clip-path:none}.ss-about-body{opacity:1;transform:none}}

/* --- 6. лента Instagram (group.ss-reels → 5 × group.ss-reel: figure.ss-reel-img[a] + group.ss-reel-product) --- */
.ss-reels{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.ss-reel{position:relative;display:block;overflow:hidden;background:#E8E2DA}
.ss-reel-img,.ss-reel-img a{display:block;margin:0}
.ss-reel-img{line-height:0}/* тема делает <a> inline-block — line-height:0 убирает 7px под базовой линией */
.ss-reel-img img{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover}
/* ссылка картинки растянута на всю карточку */
.ss-reel-img a::after{content:"";position:absolute;inset:0}
/* значок play — псевдоэлементами карточки */
.ss-reel::before{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border:1px solid rgba(255,255,255,.9);border-radius:50%;background:rgba(43,39,36,.25);pointer-events:none;z-index:1}
.ss-reel::after{content:"";position:absolute;left:50%;top:50%;margin:-8px 0 0 -4px;border-left:12px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent;pointer-events:none;z-index:1}
.ss-reel-product{position:absolute;left:8px;right:8px;bottom:8px;display:flex;align-items:center;gap:8px;padding:6px;background:rgba(243,240,235,.94);z-index:2;pointer-events:none}
.ss-reel-product .ss-reel-thumb{margin:0;flex:none}
.ss-reel-product img{display:block;width:32px;height:42px;object-fit:cover;flex:none}
.ss-reel-meta{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.wp-block-group.ss-reel-meta>p{margin:0}
.ss-reel-name{font-size:11px;color:var(--ss-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-reel-price{font-size:11px;font-weight:500;color:var(--ss-text)}
@media (max-width:767px){.ss-reels{grid-auto-flow:column;grid-auto-columns:62%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.ss-reel{scroll-snap-align:start}}

/* --- 7. доверие (columns.ss-trust → 3 × column.ss-trust-item: h4 + p; иконки — ::before по порядку колонки) --- */
.wp-block-columns.ss-trust,.ss-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;text-align:center;padding:10px 0 20px;border-top:1px solid var(--ss-line)}
.ss-trust>.wp-block-column{min-width:0}
.ss-trust-item{padding-top:34px}
.ss-trust-item svg{width:28px;height:28px;color:var(--ss-text)}
.ss-trust-item::before{content:"";display:inline-block;width:28px;height:28px;background:center/contain no-repeat}
.ss-trust-item:nth-child(1)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2724' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h11v9H3zM14 10h4l3 3v3h-7z'/%3E%3Ccircle cx='7' cy='17.5' r='1.5'/%3E%3Ccircle cx='17' cy='17.5' r='1.5'/%3E%3C/svg%3E")}
.ss-trust-item:nth-child(2)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2724' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4a2 2 0 0 1 2 2c0 1.2-2 1.6-2 3.2v.8M12 10l8.5 6.2A1 1 0 0 1 20 18H4a1 1 0 0 1-.5-1.8L12 10z'/%3E%3C/svg%3E")}
.ss-trust-item:nth-child(3)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B2724' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.3-5.7M4 4v5h5'/%3E%3C/svg%3E")}
.ss-trust-item h4,.wp-block-column.ss-trust-item>h4{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;margin:12px 0 6px}
.ss-trust-item p,.wp-block-column.ss-trust-item>p{font-size:13px;color:var(--ss-muted);margin:0}
@media (max-width:767px){.wp-block-columns.ss-trust,.ss-trust{grid-template-columns:1fr;gap:0}.ss-trust-item{padding-top:24px}}

/* --- 8. подписка --- */
.ss-subscribe{margin-top:60px;padding:110px 20px;background:#E3DCD2 center/cover no-repeat}/* [IMG: фото интерьера магазина] — добавить .ss-subscribe{background-image:url(...)} */
.entry-content>.wp-block-group.ss-subscribe{margin:55px 0 21px;padding:110px 15px}/* 21px снизу — как у последнего ряда в WPBakery-версии */
.ss-subscribe-box{max-width:460px;margin:0 auto;padding:36px 32px;background:var(--ss-bg);text-align:center}
.ss-subscribe-box h3,.wp-block-group.ss-subscribe-box>h3{font-size:14px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;margin:0 0 8px}
.ss-subscribe-box>p,.wp-block-group.ss-subscribe-box>p{font-size:13px;color:var(--ss-muted);margin:0 0 20px}
.ss-subscribe-form form>p,.ss-subscribe-form .wpcf7-form-control-wrap{display:flex;gap:8px;margin:0}
.ss-subscribe-form .wpcf7-form-control-wrap{flex:1}
.ss-subscribe-form input[type=email],.ss-subscribe-form input[type=tel]{width:100%;height:44px;border:1px solid var(--ss-line);background:#fff;border-radius:0}
.ss-subscribe-form .wpcf7-submit{height:44px;padding:0 22px;background:transparent;color:var(--ss-text);border:1px solid var(--ss-text)}
.ss-subscribe-form .wpcf7-submit:hover{background:var(--ss-text);color:var(--ss-bg)}
.ss-subscribe-form .wpcf7-spinner{display:none}

/* --- 9. футер (HTML-блок, выводится сайтом целиком — CSS нужен на всех страницах) --- */
.ss-footer{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding:56px 0 28px;font-size:13px}
.ss-footer-phone{font-size:18px;font-weight:400;letter-spacing:.06em;color:var(--ss-text)}
.ss-footer-stores{list-style:none;margin:18px 0 0;padding:0;color:var(--ss-muted);line-height:1.9}
.ss-footer-col h4{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;margin:0 0 14px}
.ss-footer-col ul{list-style:none;margin:0;padding:0;line-height:2}
.ss-footer-col a{color:var(--ss-text)}
.ss-footer-col a:hover{color:var(--ss-accent)}
.ss-footer-bottom{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:36px;margin-top:10px;flex-wrap:wrap}
.ss-footer-logo{font-size:26px;font-weight:400;letter-spacing:.3em;text-transform:uppercase;color:var(--ss-text)}
.ss-footer-pay{display:flex;gap:14px;align-items:center;color:var(--ss-muted);font-size:12px}
.ss-footer-pay img{height:20px;width:auto}
.copyrights-wrapper{font-size:12px;color:var(--ss-muted)}
@media (max-width:991px){.ss-footer{grid-template-columns:1fr 1fr}}
@media (max-width:575px){.ss-footer{grid-template-columns:1fr;gap:28px;padding-top:40px}}
/* правки 08.09: форма подписки — отступ текста в поле и кнопка с воздухом */
.ss-subscribe-form input[type=email],.ss-subscribe-form input[type=tel]{padding:0 14px}
.ss-subscribe-form form>p{flex-wrap:wrap}
.ss-subscribe-form .wpcf7-submit{margin-top:12px}

/* ===== правки 14.09 ===== */
/* категории: подписи под фото, а не сверху */
.ss-cat .wrapper-content-banner{align-items:flex-end;padding:0 20px 34px;background:linear-gradient(to bottom,rgba(43,39,36,0) 45%,rgba(43,39,36,.6))}
.ss-cat .content-banner{align-self:flex-end}
/* преимущества: крупнее, по 2–3 предложения */
.ss-trust-item h4{font-size:14px;letter-spacing:.16em}
.ss-trust-item p{font-size:15px;line-height:1.7;color:var(--ss-text);max-width:340px;margin:8px auto 0}
@media (max-width:767px){.ss-trust-item p{font-size:15px;max-width:none}}
/* главный баннер на десктопе — горизонтальное фото (uploads/2026/09/hero-home-desktop.webp), на телефоне остаётся прежнее */
@media (min-width:1025px){body.ss-hero-desktop .ss-hero .banner-image{background:url(/wp-content/uploads/2026/09/hero-home-desktop.webp) 50% 30%/cover no-repeat}body.ss-hero-desktop .ss-hero .banner-image img{opacity:0}}
/* Instagram (14.09): шапка с иконкой и живая лента Smash Balloon ([instagram-feed]) вместо заглушек */
.ss-insta-head{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;margin-bottom:28px}
.ss-insta-handle{display:inline-flex;align-items:center;gap:12px;font-size:clamp(20px,2.4vw,30px);font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:var(--ss-text);text-decoration:none}
.ss-insta-handle:hover{color:var(--ss-accent)}
.ss-insta-icon{width:30px;height:30px;flex:0 0 auto}
.ss-insta-sub{margin:0;font-size:13px;color:var(--ss-muted)}
.ss-insta-btn{display:inline-block;margin-top:6px;padding:12px 28px;font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ss-text);border:1px solid var(--ss-text);text-decoration:none}
.ss-insta-btn:hover{background:var(--ss-text);color:var(--ss-bg)}
.ss-insta #sb_instagram{padding:0!important}
.ss-insta #sb_instagram .sbi_photo{border-radius:0}
@media (max-width:767px){.ss-insta-icon{width:24px;height:24px}.ss-insta-handle{gap:8px}}
/* Smash Balloon выводит #sb_instagram с float:left — без сброса обтекания следующий блок уезжает вбок */
.ss-insta #sb_instagram,.ss-insta .sb_instagram_header{float:none!important;width:100%!important}
.ss-insta::after{content:"";display:block;clear:both}
.ss-insta .sb_instagram_error,.ss-insta #sb_instagram .sbi_no_posts{clear:both;margin:0 auto;max-width:720px;font-size:13px}
/* ручная лента Instagram: HTML-блок «Instagram — лента» (галерея 5 фото со ссылками на посты) */
.ss-insta .ss-insta-help{display:none}
.ss-insta .wp-block-gallery.ss-insta-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:0}
.ss-insta .ss-insta-grid .wp-block-image{margin:0;position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--ss-line)}
.ss-insta .ss-insta-grid .wp-block-image a,.ss-insta .ss-insta-grid .wp-block-image img{display:block;width:100%;height:100%;object-fit:cover}
.ss-insta .ss-insta-grid .wp-block-image a::after{content:"";position:absolute;inset:0;background:rgba(43,39,36,0);transition:background .25s}
.ss-insta .ss-insta-grid .wp-block-image a:hover::after{background:rgba(43,39,36,.18)}
@media (max-width:767px){.ss-insta .wp-block-gallery.ss-insta-grid{grid-template-columns:repeat(2,1fr);gap:6px}.ss-insta .ss-insta-grid .wp-block-image:nth-child(n+5){display:none}}
.ss-insta .wp-block-gallery.has-nested-images.ss-insta-grid{display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:8px!important}
.ss-insta .ss-insta-grid figure.wp-block-image{width:auto!important;max-width:none!important;flex:none!important;margin:0!important;aspect-ratio:1/1}
@media (max-width:767px){.ss-insta .wp-block-gallery.has-nested-images.ss-insta-grid{grid-template-columns:repeat(2,1fr)!important;gap:6px!important}}
/* мобильный: надпись слайда выше, отступы у ленты Instagram (Benny 14.09) */
@media (max-width:767px){.ss-hero .wrapper-content-banner{padding-bottom:17vh}.ss-hero .banner-title{font-size:clamp(64px,19vw,84px)}}
.ss-insta .ss-insta-grid{margin-top:28px!important}
.ss-insta{padding-bottom:8px}
@media (max-width:767px){.ss-insta .ss-insta-head{margin-bottom:0}.ss-insta .ss-insta-grid{margin-top:26px!important}.ss-insta{padding-bottom:12px}}
@media (max-width:767px){.ss-hero.promo-banner .wrapper-content-banner{padding-bottom:17vh!important}}