/* ============================================================
   АЛТАЙПРОЕКТ - то, чего не было в статическом прототипе:
   панель администратора, ответы форм, уведомления WooCommerce,
   нумерация страниц, состояния загрузки каталога.
   ============================================================ */

/* ---------- панель администратора WordPress ---------- */
.admin-bar .ap-sticky{top:32px}
.admin-bar .ap-searchov,.admin-bar .ap-menu{top:32px}
@media (max-width:782px){
  .admin-bar .ap-sticky,.admin-bar .ap-searchov,.admin-bar .ap-menu{top:46px}
}
@media (max-width:600px){
  /* здесь панель прокручивается вместе со страницей */
  .admin-bar .ap-sticky{top:0}
}

/* ---------- служебное ---------- */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ap-hp{position:absolute!important;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}

/* ---------- ответы форм ---------- */
.ap-sent{display:flex;align-items:flex-start;gap:10px;margin:0 0 14px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--mist);font-size:14px;line-height:1.45;color:var(--ink)}
.ap-sent i{color:var(--blue);margin-top:2px}
.ap-sent.is-err{border-color:var(--red)}
.ap-sent.is-err i{color:var(--red)}
.ap-ask .ap-sent{grid-column:1/-1}
form.is-busy [type=submit]{opacity:.6;cursor:progress}

/* ---------- каталог ---------- */
/* Фото разделов каталога - квадрат, как в утверждённой вёрстке в Chrome. В прототипе
   пропорция бралась от самой картинки, и в Safari страница каталога уезжала вбок
   (карточка 650px на экране 320). Теперь размер задан явно и одинаков во всех браузерах. */
.ap-catgrid>*,.ap-subgrid>*{min-width:0}
.ap-catcard__ph,.ap-subcard__ph{aspect-ratio:1/1;min-height:0;overflow:hidden}
[data-shop-list]{transition:opacity .2s}
[data-shop-list].is-loading{opacity:.45;pointer-events:none}
.ap-item__add.is-busy{opacity:.7;cursor:progress}
.ap-pd__slide>img{width:100%;height:auto}
/* длинные значения характеристик («1360/1281/1201/…» у канальных блоков) распирали карточку
   товара на телефоне на 40-140px вбок (так было и в прототипе) и колонку на планшете - переносим их.
   Только до 1024: на десктопе перенос меняет ширину колонок таблицы и добавляет строку, а там всё помещается */
.ap-pd>*,.ap-pd__info>*{min-width:0}
@media (max-width:1024px){
  .ap-pd__key b,.ap-tbl--specs td{overflow-wrap:anywhere}
}
.ap-wcnotices{margin-top:18px}

/* ---------- каталог поставщиков ---------- */
/* плашка у цен: цены поставщиков пересчитаны по курсу, актуальную называет менеджер */
.ap-pnote{display:flex;align-items:flex-start;gap:8px;margin:0;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--mist);font-size:13px;line-height:1.45;color:var(--graph)}
.ap-pnote i{margin-top:2px;color:var(--blue)}
.ap-pnote--list{margin:0 0 18px}
.ap-pnote--pd,.ap-pnote--side{margin-top:12px}
/* таблицы характеристик поставщика в описании товара: мельче основных, прокрутка вбок на узком экране */
.ap-prose .ap-tbl--src{font-size:13.5px}
.ap-prose .ap-tbl--src th,.ap-prose .ap-tbl--src td{padding:8px 10px}
.ap-prose .ap-tblwrap{margin-bottom:18px}

/* ---------- корзина и оформление ---------- */
/* количество и сумма строки: на десктопе - ячейки общей сетки, на телефоне - одна строка
   под названием (в прототипе сумма занимала колонку крестика и сжимала название до 110px) */
.ap-cart__ctl{display:contents}
@media (max-width:760px){
  .ap-cart__ctl{grid-column:1/-1;grid-row:2;display:flex;align-items:center;justify-content:space-between;gap:12px}
}
.woocommerce-cart-form .product-remove{display:contents}
a.ap-cart__x{display:inline-flex;align-items:center;justify-content:center}
/* WooCommerce прячет единственный способ оплаты, в макете он виден */
.ap-choice input[name=payment_method]{display:inline-block!important}
.woocommerce-checkout .blockUI.blockOverlay,.woocommerce-cart-form .blockUI.blockOverlay,.cart_totals .blockUI.blockOverlay{background:#fff!important;opacity:.55!important}

/* уведомления WooCommerce в стиле сайта */
.woocommerce-error,.woocommerce-message,.woocommerce-info,.woocommerce-notices-wrapper .is-error,.woocommerce-notices-wrapper .is-success,.woocommerce-notices-wrapper .is-info{
  list-style:none;margin:0 0 18px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--mist);font-size:14.5px;line-height:1.5;color:var(--ink)}
.woocommerce-error,.woocommerce-notices-wrapper .is-error{border-color:var(--red)}
.woocommerce-error li{margin:2px 0}
.woocommerce-message .button,.woocommerce-info .button{float:right;margin-left:14px;font-weight:600;color:var(--blue)}
.woocommerce-NoticeGroup{grid-column:1/-1}
.ap-checkout__form .woocommerce-NoticeGroup,.ap-checkout__form>.woocommerce-error{margin-bottom:18px}

/* ---------- списки: статьи, новости, поиск ---------- */
.ap-newslist{display:flex;flex-direction:column;gap:clamp(18px,2vw,26px)}
.ap-links--list{grid-template-columns:repeat(3,1fr)}
@media (max-width:1024px){.ap-links--list{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.ap-links--list{grid-template-columns:1fr}}

/* ---------- нумерация страниц ---------- */
.ap-pager{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(22px,2.6vw,32px)}
.ap-pager .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r);background:#fff;font-weight:600;font-size:14.5px;color:var(--ink)}
.ap-pager a.page-numbers:hover{border-color:var(--blue);color:var(--blue)}
.ap-pager .page-numbers.current{background:var(--blue);border-color:var(--blue);color:#fff}
.ap-pager .dots{border:0;background:none;min-width:0}

/* ---------- блоки редактора внутри текста ---------- */
.ap-prose .wp-block-image img,.ap-prose img[class*="wp-image-"]{height:auto}
.ap-prose .aligncenter{margin-left:auto;margin-right:auto}
.ap-prose .wp-block-table table{width:100%}

/* ============================================================
   ТЕЛЕФОНЫ И ПЛАНШЕТЫ - доработки удобства поверх прототипа
   (найдены проверкой на 320-1180 и в Safari на iPhone/iPad)
   ============================================================ */

/* нижняя панель не закрывает низ подвала, в том числе над полосой «домой» у iPhone */
@media (max-width:760px){
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
}

/* телефон и суммы не разрываются посередине */
.ap-cta__tel b,.ap-side__tel,.ap-foot__tel,.ap-cart__sumcell,.ap-checkout__i b{white-space:nowrap}

/* iOS увеличивает страницу при фокусе в поле мельче 16px - на касаниях поля 16px */
@media (max-width:900px),(pointer:coarse){
  body :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea){font-size:16px}
}

/* зоны нажатия: невидимый слой вокруг мелких ссылок и кнопок, вёрстка не меняется */
@media (max-width:1024px),(pointer:coarse){
  .ap-cartbtn,.ap-search,.ap-burger,.ap-more,.ap-doc__pdf,.ap-side__tel,.ap-foot__tel,a.ap-ctc__big,.ap-phones a,
  .ap-meta a,.ap-foot ul a,.ap-foot__bot a,.ap-foot__soc a,.ap-crumbs a,.ap-chip{position:relative}
  .ap-cartbtn::before,.ap-search::before,.ap-burger::before,.ap-foot__soc a::before{content:"";position:absolute;inset:-4px}
  .ap-more::before,.ap-doc__pdf::before,.ap-side__tel::before,.ap-foot__tel::before,a.ap-ctc__big::before,
  .ap-phones a::before,.ap-meta a::before,.ap-crumbs a::before{content:"";position:absolute;inset:-10px -4px}
  .ap-foot ul a::before,.ap-foot__bot a::before{content:"";position:absolute;inset:-5px -4px}
  .ap-chip::before{content:"";position:absolute;inset:-4px 0}
}

/* планшеты: фото раздела и товара не занимают весь экран (в прототипе на 768-1024
   карточка раздела была одна в ряд с квадратным фото 950px, галерея товара - так же) */
@media (min-width:761px) and (max-width:1024px){
  .ap-catgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ap-pd__gal{width:100%;max-width:560px;margin-inline:auto}
}
@media (min-width:900px) and (max-width:1024px){
  .ap-pd{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
  .ap-pd__gal{max-width:none}
}

/* ---------- личный кабинет WooCommerce: вход, восстановление пароля, заказы ----------
   В прототипе его нет; оформлен в стиле форм сайта, если клиент включит учётные записи */
.woocommerce-account .woocommerce{max-width:980px}
.woocommerce-account .woocommerce h2,.woocommerce-account .woocommerce h3{margin:0 0 16px;font-family:var(--display);font-weight:400;font-size:24px;color:var(--ink)}
.woocommerce-account .woocommerce form.login,.woocommerce-account .woocommerce form.lost_reset_password,.woocommerce-account .woocommerce form.register,
.woocommerce-account .woocommerce form.edit-account,.woocommerce-account .woocommerce-address-fields{max-width:460px;padding:26px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.woocommerce-account .woocommerce form.lost_reset_password>p:first-child{margin:0 0 16px;color:var(--graph)}
.woocommerce-account .form-row{display:flex;flex-direction:column;gap:6px;margin:0 0 14px}
.woocommerce-account .form-row label{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--zinc)}
.woocommerce-account .form-row .required{color:var(--red);text-decoration:none;border:0}
.woocommerce-account .input-text,.woocommerce-account select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);font:15px var(--body);color:var(--ink);background:#fff}
.woocommerce-account .input-text:focus{outline:0;border-color:var(--blue)}
.woocommerce-account .password-input{position:relative;display:block}
.woocommerce-account .show-password-input{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;background:none;cursor:pointer}
.woocommerce-account .show-password-input::after{content:"\f06e";font:900 14px "Font Awesome 6 Free";color:var(--zinc)}
.woocommerce-account .form-row .woocommerce-form-login__rememberme{flex-direction:row;display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;text-transform:none;letter-spacing:0;font-size:14px;color:var(--graph)}
.woocommerce-account button.button,.woocommerce-account a.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 22px;border:1px solid var(--red);border-radius:var(--r);background:var(--red);color:#fff;font:600 12.5px var(--body);letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.woocommerce-account button.button:hover,.woocommerce-account a.button:hover{background:#cc151d;border-color:#cc151d}
.woocommerce-account .lost_password{margin:14px 0 0;font-size:14px}
.woocommerce-account .lost_password a,.woocommerce-MyAccount-content a:not(.button){color:var(--blue)}
.woocommerce-MyAccount-navigation ul{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.woocommerce-MyAccount-navigation a{display:inline-flex;padding:9px 14px;border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink);font-size:14px}
.woocommerce-MyAccount-navigation .is-active a,.woocommerce-MyAccount-navigation a:hover{border-color:var(--blue);color:var(--blue)}
.woocommerce-account table.shop_table{width:100%;border-collapse:collapse;font-size:14.5px;background:#fff;border:1px solid var(--line)}
.woocommerce-account table.shop_table th,.woocommerce-account table.shop_table td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left}
.woocommerce-account table.shop_table th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--zinc);font-weight:600}
@media (max-width:760px){.woocommerce-account table.shop_table_responsive thead{display:none}.woocommerce-account table.shop_table_responsive td{display:flex;justify-content:space-between;gap:12px}.woocommerce-account table.shop_table_responsive td::before{content:attr(data-title);color:var(--zinc);font-size:13px}}