:root{ --fcc-field-h:72px; --fcc-radius:14px; --fcc-gap:16px; } /* Контейнер */ #fcc-calculator{margin-top:16px} .fcc .card{ background:#fff;border:1px solid #e5e7eb;border-radius:18px; padding:24px;box-shadow:0 1px 2px rgba(16,24,40,.04) } /* ===== СЕТКА ===== */ .fcc .row{ display:grid; gap:var(--fcc-gap); align-items:start; grid-template-columns: 1fr; grid-template-areas: "sqm" "left" "qty" "price"; } .fcc .row > :nth-child(1){ grid-area: sqm; } .fcc .row > :nth-child(2){ grid-area: sep1; } .fcc .row > :nth-child(3){ grid-area: left; } .fcc .row > :nth-child(4){ grid-area: sep2; } .fcc .row > :nth-child(5){ grid-area: qty; } .fcc .row > :nth-child(6){ grid-area: price;} @media (min-width:720px){ .fcc .row{ /* было: minmax(260px,1fr) minmax(300px,1fr) */ grid-template-columns: repeat(2, minmax(260px,1fr)); grid-template-areas: "sqm left" "qty price"; } } .fcc .sep{display:none} /* ===== Общие поля ===== */ .fcc .col{width:100%} .fcc .field, .fcc .stepper{ height:var(--fcc-field-h); border-radius:var(--fcc-radius); border:1px solid #d1d5db; background:#fff;width:100%;box-sizing:border-box; } .fcc .field{ display:flex;align-items:center;justify-content:center; padding:0 20px;text-align:center; font-size:28px;font-weight:700;color:#1b2440; font-variant-numeric:tabular-nums; } .fcc .field:focus{outline:none;box-shadow:0 0 0 2px #FDB913} .fcc .field.ro[readonly]{background:#f3f4f6;color:#6b7280;cursor:not-allowed;border-color:#e5e7eb} /* Подписи */ .fcc .label{margin-top:8px;text-align:center;font-size:14px;color:#6b7280} .fcc .chip{display:inline-block;background:#f3f4f6;border-radius:8px;padding:8px 12px} /* ===== Степпер упаковок ===== */ .fcc .stepper{display:flex;align-items:stretch;overflow:hidden;background:#fff} .fcc .btn{ appearance:none;border:0;background:none;cursor:pointer; width:64px;height:var(--fcc-field-h); font-size:22px;line-height:1;color:#111827;display:flex;align-items:center;justify-content:center } .fcc .btn:focus{outline:none;box-shadow:inset 0 0 0 2px #FDB913} .fcc .qty{ flex:1;min-width:110px;height:var(--fcc-field-h); border-left:1px solid #d1d5db;border-right:1px solid #d1d5db; text-align:center;font-size:28px;font-weight:700;color:#1b2440; padding:0 16px;font-variant-numeric:tabular-nums; } /* убираем стрелочки у number */ .fcc input[type=number]::-webkit-outer-spin-button, .fcc input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } .fcc input[type=number]{ -moz-appearance:textfield; } /* ===== Цена и кнопка ===== */ .fcc .price{ display:flex;flex-direction:column;gap:10px;padding-top:4px; align-self:start;justify-self:stretch;align-items:center; } .fcc .price-value{ font-size:34px;font-weight:800;color:#0f1f3c;line-height:1;text-align:center; } .fcc .price-note{ margin-top:-4px;font-size:12px;color:#6b7280; background:#f3f4f6;display:inline-block !important; padding:6px 10px;border-radius:8px;white-space:nowrap;text-align:center; margin-left:auto;margin-right:auto; } .fcc .cta{ margin-top:6px; display:inline-flex;align-items:center;justify-content:center;gap:8px; background:#FDB913;color:#1c2236; padding:12px 20px;border-radius:12px;font-weight:800;border:0;cursor:pointer; box-shadow:0 1px 2px rgba(16,24,40,.08); align-self:center; } .fcc .cta:focus{outline:none;box-shadow:0 0 0 2px #111 inset,0 0 0 3px #FDB913} /* ===== Служебная строка ===== */ .fcc .meta{margin-top:16px;font-size:12px;color:#6b7280} .fcc .meta b{color:#374151} /* ===== ВАЖНО: скрываем родные Woo элементы, когда калькулятор включён ===== */ /* навешивается класс .fcc-enabled на форму, а .fcc-on — на */ .fcc-enabled .woocommerce-variation-add-to-cart, .fcc-enabled .quantity, .fcc-enabled .single_add_to_cart_button{ position:absolute !important; left:-99999px !important; width:1px !important;height:1px !important; margin:0 !important;padding:0 !important;border:0 !important; overflow:hidden !important;opacity:0 !important;pointer-events:none !important; } /* Популярные «Buy now»/Payment Request кнопки (Stripe/WCPay/Apple/Google/PayPal) */ .fcc-on .wcpay-payment-request-wrapper, .fcc-on .wcpay-payment-request-button, .fcc-on .wc-stripe-payment-request-wrapper, .fcc-on .wc-stripe-product-checkout-shortcut-button, .fcc-on .stripe-payment-request, .fcc-on .apple-pay-button, .fcc-on .google-pay-button, .fcc-on .paypal-button-container, .fcc-on .buy-now, .fcc-on .single_buy_now_button, .fcc-on .button.buy_now{ display:none !important; }