/*
Theme Name: Storefront Ceramo
Template: storefront
Description: Общестрой для строительных компаний: бадьи, тары, оснастка, аренда. Дочерняя тема Storefront.
Version: 1.3
*/

/* ─────────── палитра: графит + сигнальный оранжевый (стройка) ─────────── */
:root {
    --cg-dark: #1c2228;        /* графит, шапка и заголовки */
    --cg-darker: #14181d;
    --cg-accent: #f0731d;      /* сигнальный оранжевый */
    --cg-accent-dark: #d35f0e;
    --cg-soft: #f4f6f8;        /* светлый фон карточек */
    --cg-line: #e2e7ec;
    --cg-muted: #66717c;
    --cg-radius: .7rem;
    --cg-radius-lg: 1.1rem;

    /* тени многослойные — от них и берётся ощущение глубины */
    --cg-shadow-sm: 0 1px 2px rgba(20, 24, 29, .06), 0 2px 8px rgba(20, 24, 29, .04);
    --cg-shadow-md: 0 2px 4px rgba(20, 24, 29, .06), 0 12px 28px rgba(20, 24, 29, .10);
    --cg-shadow-lg: 0 4px 8px rgba(20, 24, 29, .08), 0 24px 48px rgba(20, 24, 29, .16);
}

/* ─────────── типографика: главный рычаг «дорого/дёшево» ─────────── */
body {
    background: #fff;
    color: #2a323a;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1.05rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    color: var(--cg-dark);
    line-height: 1.18;
    letter-spacing: -.02em;
    font-weight: 700;
}

h2 { font-size: 1.95rem; }
h3 { font-size: 1.35rem; }

a { color: var(--cg-accent-dark); }

/* шире колонка — тесная вёрстка читается как дешёвая */
.col-full {
    max-width: 1280px;
}

/* ─────────── шапка ─────────── */
.site-header,
.storefront-handheld-footer-bar {
    background-color: var(--cg-dark);
}

.site-header {
    border-bottom: 3px solid var(--cg-accent);
    padding-top: .9rem;
    box-shadow: var(--cg-shadow-sm);
}

.site-branding .site-title a,
.site-header .site-title a:hover {
    color: #fff;
}

.site-description { color: #9aa6b1; }

.main-navigation ul li a,
.site-title a,
ul.menu li a,
.site-branding h1 a {
    color: #e8edf2;
    font-weight: 600;
}

.main-navigation ul li a:hover,
ul.menu li a:hover {
    color: var(--cg-accent);
}

.site-header-cart .cart-contents,
.site-search .widget_product_search input[type="search"] {
    color: #e8edf2;
}

/* ─────────── кнопки ─────────── */
button, .button, input[type="submit"],
.woocommerce #respond input#submit,
.woocommerce a.button, .woocommerce button.button,
.wp-block-button__link {
    background-color: var(--cg-accent);
    color: #fff;
    border-radius: .45rem;
    font-weight: 600;
    transition: background-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

button:hover, .button:hover, input[type="submit"]:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover {
    background-color: var(--cg-accent-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--cg-shadow-sm);
}

.button.alt, .woocommerce a.button.alt, .woocommerce button.button.alt,
.wc-block-components-button {
    background-color: var(--cg-dark);
}

.button.alt:hover, .woocommerce a.button.alt:hover {
    background-color: var(--cg-darker);
}

/* ─────────── общий ритм секций ─────────── */
.cg-front .cg-section,
.cg-front .cg-brands,
.cg-front .cg-rent {
    margin: 0 0 4rem;
}

.cg-head {
    margin: 0 0 1.6rem;
}

.cg-head h2 {
    margin: 0 0 .3rem;
}

.cg-head p {
    margin: 0;
    color: var(--cg-muted);
    font-size: 1.02rem;
}

/* значки */
.cg-i {
    width: 26px;
    height: 26px;
    color: var(--cg-accent);
    flex: none;
}

/* ─────────── герой с фотографией ─────────── */
.cg-hero {
    position: relative;
    border-radius: var(--cg-radius-lg);
    margin: 1.2rem 0 1.4rem;
    padding: 5rem 3.2rem;
    background-color: var(--cg-darker);
    background-size: cover;
    background-position: center 62%;
    overflow: hidden;
    box-shadow: var(--cg-shadow-lg);
}

/* затемнение: слева плотное — чтобы текст читался, справа прозрачнее — видно фото */
.cg-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        rgba(14, 18, 23, .94) 0%,
        rgba(14, 18, 23, .86) 38%,
        rgba(14, 18, 23, .55) 68%,
        rgba(14, 18, 23, .35) 100%);
}

.cg-hero__inner {
    position: relative;
    max-width: 43rem;
}

.cg-hero__eyebrow {
    display: inline-block;
    margin: 0 0 1rem;
    padding: .38rem .85rem;
    border: 1px solid rgba(240, 115, 29, .55);
    border-radius: 100px;
    background: rgba(240, 115, 29, .12);
    color: #ffbe8b;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .01em;
}

.cg-hero h1 {
    color: #fff;
    font-size: 3rem;
    line-height: 1.12;
    letter-spacing: -.025em;
    margin: 0 0 1rem;
}

.cg-hero h1 em {
    color: var(--cg-accent);
    font-style: normal;
}

.cg-hero__lead {
    color: #ccd5de;
    font-size: 1.12rem;
    line-height: 1.6;
    margin: 0 0 1.9rem;
    max-width: 36rem;
}

.cg-hero__cta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.4rem;
    margin-bottom: .7rem;
}

.cg-hero__phone {
    font-size: 2.05rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
    text-decoration: none;
    line-height: 1.1;
}

.cg-hero__phone:hover { color: var(--cg-accent); }

.cg-hero__btn {
    display: inline-block;
    padding: .8rem 1.6rem;
    border-radius: .5rem;
    background: var(--cg-accent);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .16s ease, transform .16s ease;
}

.cg-hero__btn:hover {
    background: var(--cg-accent-dark);
    color: #fff;
    transform: translateY(-1px);
}

.cg-hero__note {
    display: block;
    color: #94a1ad;
    font-size: .9rem;
}

/* ─────────── полоса доверия под героем ─────────── */
.cg-trust {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px;
    background: var(--cg-line);
    border: 1px solid var(--cg-line);
    border-radius: var(--cg-radius);
    overflow: hidden;
    margin: 0 0 4rem;
}

.cg-trust__item {
    background: #fff;
    padding: 1.5rem 1.6rem;
}

.cg-trust__item b {
    display: block;
    margin: .7rem 0 .2rem;
    color: var(--cg-dark);
    font-size: 1.02rem;
}

.cg-trust__item span {
    color: var(--cg-muted);
    font-size: .9rem;
    line-height: 1.5;
}

/* ─────────── витрина категорий ─────────── */
.cg-cats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

.cg-cat {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--cg-line);
    border-radius: var(--cg-radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--cg-shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.cg-cat:hover {
    box-shadow: var(--cg-shadow-md);
    transform: translateY(-3px);
    border-color: #d3dae1;
}

.cg-cat__media {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 190px;
    background: var(--cg-soft);
    overflow: hidden;
}

.cg-cat__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.cg-cat:hover .cg-cat__media img {
    transform: scale(1.04);
}

/* категория без фотографии — крупный значок на графитовой подложке */
.cg-cat:not(.cg-cat--photo) .cg-cat__media {
    background: linear-gradient(140deg, var(--cg-dark) 0%, #2b3540 100%);
}

.cg-cat:not(.cg-cat--photo) .cg-i {
    width: 58px;
    height: 58px;
    stroke-width: 1.2;
}

.cg-cat__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.2rem 1.35rem 1.35rem;
    border-top: 3px solid var(--cg-accent);
}

.cg-cat__body b {
    color: var(--cg-dark);
    font-size: 1.18rem;
    letter-spacing: -.01em;
    margin-bottom: .3rem;
}

.cg-cat__note {
    color: var(--cg-muted);
    font-size: .9rem;
    line-height: 1.5;
    margin-bottom: .9rem;
}

.cg-cat__count {
    margin-top: auto;
    color: var(--cg-accent-dark);
    font-weight: 600;
    font-size: .88rem;
}

.cg-more {
    margin: 1.7rem 0 0;
    font-size: 1.05rem;
}

.cg-more a {
    font-weight: 600;
    text-decoration: none;
}

.cg-more a:hover { text-decoration: underline; }

/* ─────────── производители ─────────── */
.cg-brands {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 2.6rem;
    align-items: center;
    background: var(--cg-soft);
    border-radius: var(--cg-radius-lg);
    padding: 2.6rem 2.8rem;
}

.cg-brands__text h2 { margin: 0 0 .7rem; }

.cg-brands__text p {
    margin: 0;
    color: #4a545e;
}

.cg-brands__list {
    display: grid;
    gap: .9rem;
}

.cg-brand {
    background: #fff;
    border-radius: var(--cg-radius);
    border-left: 4px solid var(--cg-accent);
    padding: 1.05rem 1.3rem;
    box-shadow: var(--cg-shadow-sm);
}

.cg-brand b {
    display: block;
    color: var(--cg-dark);
    font-size: 1.1rem;
    letter-spacing: -.01em;
}

.cg-brand span {
    color: var(--cg-muted);
    font-size: .9rem;
}

/* ─────────── как работаем ─────────── */
.cg-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.4rem;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: cg-step;
}

.cg-steps li {
    position: relative;
    counter-increment: cg-step;
    padding: 1.6rem 1.4rem 1.4rem;
    background: #fff;
    border: 1px solid var(--cg-line);
    border-radius: var(--cg-radius);
    box-shadow: var(--cg-shadow-sm);
}

.cg-steps li::before {
    content: counter(cg-step);
    position: absolute;
    top: -.9rem;
    left: 1.3rem;
    width: 2.2rem;
    height: 2.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cg-accent);
    color: #fff;
    font-weight: 700;
    font-size: 1.02rem;
    box-shadow: var(--cg-shadow-sm);
}

.cg-steps b {
    display: block;
    margin: .35rem 0 .3rem;
    color: var(--cg-dark);
    font-size: 1.1rem;
}

.cg-steps span {
    color: var(--cg-muted);
    font-size: .92rem;
    line-height: 1.55;
}

/* ─────────── аренда ─────────── */
.cg-rent {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.6rem;
    background: linear-gradient(135deg, var(--cg-darker) 0%, var(--cg-dark) 55%, #2b3540 100%);
    color: #dfe6ec;
    border-radius: var(--cg-radius-lg);
    padding: 2.8rem 3rem;
    box-shadow: var(--cg-shadow-md);
}

.cg-rent h2 {
    color: #fff;
    margin: 0 0 .8rem;
}

.cg-rent__text p {
    color: #c3ccd5;
    margin: 0 0 1.5rem;
}

.cg-rent__phone {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #fff;
    text-decoration: none;
    line-height: 1.1;
}

.cg-rent__phone:hover { color: var(--cg-accent); }

.cg-rent__note {
    color: #8d99a5;
    font-size: .88rem;
}

.cg-rent__list {
    list-style: none;
    margin: 0;
    padding: 0;
    align-self: center;
}

.cg-rent__list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .85rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    font-size: .98rem;
}

.cg-rent__list li:last-child { border-bottom: 0; }

.cg-rent__list b {
    color: var(--cg-accent);
    font-weight: 700;
    white-space: nowrap;
}

/* ─────────── карточки товаров ─────────── */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.4rem;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
    content: none;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--cg-line);
    border-radius: var(--cg-radius);
    padding: 1rem 1rem 1.2rem;
    box-shadow: var(--cg-shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
    text-align: center;          /* название, цена и кнопка — по центру карточки */
}

.woocommerce ul.products li.product:hover {
    box-shadow: var(--cg-shadow-md);
    transform: translateY(-3px);
    border-color: #d3dae1;
}

.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.woocommerce ul.products li.product a img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
    margin: 0 0 .8rem;
    border-radius: .5rem;
    background: #fff;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1rem;
    line-height: 1.35;
    color: var(--cg-dark);
    font-weight: 600;
    min-height: 4.05em;          /* три строки — карточки не пляшут */
    padding: 0;
    margin: 0 0 .3rem;
}

.woocommerce ul.products li.product .price {
    color: var(--cg-dark);
    font-weight: 700;
    margin: 0 0 .2rem;
    font-size: 1.15rem;
}

/* габариты в карточке */
.cg-gab {
    color: var(--cg-muted);
    font-size: .85rem;
}

.woocommerce ul.products li.product .cg-gab {
    margin-bottom: .6rem;
}

/* кнопка прижата к низу карточки и стоит по центру */
.woocommerce ul.products li.product .button {
    margin-top: auto;
    align-self: center;
}

/* ─────────── футер ─────────── */
.site-footer {
    background: var(--cg-dark);
    color: #aeb9c3;
}

.cg-footer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.4rem;
    padding: .6rem 0 1rem;
    font-size: .92rem;
}

.cg-footer b { color: #fff; }

.cg-footer a { color: #e8edf2; }

.cg-footer a:hover { color: var(--cg-accent); }

.cg-footer__phone {
    font-size: 1.15rem;
    font-weight: 700;
}

/* Storefront красит ссылки футера своим правилом — возвращаем светлые */
.site-footer .cg-footer a,
.site-footer .cg-footer a:visited {
    color: #e8edf2;
}

.site-footer .cg-footer a:hover {
    color: var(--cg-accent);
}

/* ─────────── адаптив ─────────── */
@media (max-width: 900px) {
    .cg-brands,
    .cg-rent {
        grid-template-columns: 1fr;
        gap: 1.8rem;
        padding: 2rem 1.8rem;
    }

    .cg-hero {
        padding: 3.4rem 2rem;
    }

    .cg-hero h1 { font-size: 2.3rem; }
}

@media (max-width: 640px) {
    body { font-size: 1rem; }

    h2 { font-size: 1.6rem; }

    .cg-hero {
        padding: 2.6rem 1.5rem;
        background-position: center 70%;
    }

    .cg-hero h1 { font-size: 1.85rem; }

    .cg-hero__lead { font-size: 1rem; }

    .cg-hero__phone { font-size: 1.65rem; }

    .cg-hero__cta { gap: 1rem; }

    .cg-cats {
        grid-template-columns: 1fr;
    }

    .cg-front .cg-section,
    .cg-front .cg-brands,
    .cg-front .cg-rent,
    .cg-trust {
        margin-bottom: 2.6rem;
    }
}

/* ─────────── телефон: убрать синий квадрат подсветки при нажатии на иконки ───────────
   Иконки нижней панели (аккаунт / поиск / корзина), кнопка «Меню» и ссылки нарисованы
   шрифтом; Android при касании рисует вокруг «буквы» квадрат tap-highlight и рамку фокуса.
   Клавиатурный фокус (для тех, кто ходит Tab'ом) оставлен через :focus-visible. */
a, button, .menu-toggle, .storefront-handheld-footer-bar a, .site-header-cart a, .button {
    -webkit-tap-highlight-color: transparent;
}
.storefront-handheld-footer-bar a:focus,
.storefront-handheld-footer-bar a:focus:not(:focus-visible),
.menu-toggle:focus:not(:focus-visible),
.site-header-cart a:focus:not(:focus-visible),
.main-navigation a:focus:not(:focus-visible),
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* ─────────── выпадающее меню «Каталог»: графит + белый текст (27.08) ───────────
   У Storefront подменю светло-серое, а ссылки шапки у нас белые — получалось
   «белое по серому», клиент назвал это «замазано». */
.main-navigation ul.menu ul.sub-menu,
.main-navigation ul.nav-menu ul.sub-menu {
    background-color: var(--cg-dark);
    box-shadow: var(--cg-shadow-md);
    border-radius: 0 0 var(--cg-radius) var(--cg-radius);
    padding: .4rem 0;
}
.main-navigation ul.menu ul.sub-menu li a,
.main-navigation ul.nav-menu ul.sub-menu li a {
    color: #fff;
    padding: .55em 1.2em;
}
.main-navigation ul.menu ul.sub-menu li a:hover,
.main-navigation ul.nav-menu ul.sub-menu li a:hover,
.main-navigation ul.menu ul.sub-menu li.current-menu-item > a {
    color: var(--cg-accent);
    background: rgba(255, 255, 255, .06);
}