/*
    ДОГОВОР меѓу платформата и СЕКОЈА кодирана тема. Не е дизајн — тука не
    доаѓа ништо што темата смее да го одлучува. Се вчитува ПРЕД CSS-от на
    темата (`themes/_head.blade.php`), па дизајнот и понатаму победува насекаде
    каде што смее.

    [hidden]: `/shop.js` крие преку `el.hidden` на единаесет места — плутачкиот
    меур, overlay-от, празната кошничка, редовите, футерот, копчето „Кон
    наплата", variant fallback-от. UA правилото е само `display:none`, па секоја
    декларација со поголема специфичност го гази: `.cart-pill{display:inline-flex}`
    и `.btn{display:inline-flex}` од дизајнерски CSS се доволни. Резултатот е
    трајно видлив меур и копче за наплата што не се крие. Ниту еден bundle од
    дизајнер не носи [hidden], затоа стои ТУКА, еднаш, а не по тема.
*/
[hidden] {
    display: none !important;
}

/*
    .hp: honeypot полето на контакт формата (`name="website"`). Стилот што го
    крие живееше само во `public.partials.theme`, кој кодирана тема не го
    вклучува — па на velo беше ВИДЛИВО, со етикета. Последицата не е козметика:
    PublicFormController пополнет honeypot го третира како бот и враќа тивок
    „успех" без да ја сними пораката. Автоматско пополнување на поле по име
    `website` е доволно клиентот да изгуби lead без трага. Надвор од екранот,
    не `display:none` — ботовите што проверуваат видливост го пополнуваат само
    ако не е display:none.
*/
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/*
    .free-shipping-note / .free-shipping-tag: маркап на ПЛАТФОРМАТА (партијалите
    `shop.partials.free-shipping*`), кој кодирана тема не го знае однапред.
    Пораката за бесплатна достава е дел од цената што купувачот ја чита, па не
    смее да слета неостилирана во тема што сè уште не ја знае. Основата е
    намерно бледа — секоја тема слободно ја газе (се вчитува по овој фајл).
*/
.free-shipping-note {
    margin: 1rem 0 0;
    padding: 0.625rem 0.875rem;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.04);
    font-size: 0.875rem;
    text-align: center;
}

.free-shipping-tag {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.15rem 0.6rem;
    border-radius: 1rem;
    background: rgba(0, 0, 0, 0.05);
    font-size: 0.8125rem;
}

.free-shipping-note.is-free,
.free-shipping-tag.is-free {
    background: #e7f6ec;
    color: #12643a;
}

/* ── Галерија на производ (shop/partials/gallery.blade.php + /shop.js bindGallery) ──
   Заеднички скелет за сите теми; боите/рамките ги доодлучува темата. */
.pgal { display: grid; gap: .75rem; width: 100%; }
.pgal [hidden] { display: none !important; }
.pgal-main { position: relative; display: grid; place-items: center; }
.pgal-zoom { display: block; width: 100%; cursor: zoom-in; touch-action: pan-y; }
.pgal-zoom img { display: block; width: 100%; height: auto; }
.pgal-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: #111; font-size: 1.7rem; line-height: 1; cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0,0,0,.18); padding: 0 0 .15rem; }
.pgal-prev { left: .6rem; } .pgal-next { right: .6rem; }
.pgal-count { position: absolute; right: .6rem; bottom: .6rem; font-size: .75rem; background: rgba(0,0,0,.55); color: #fff; padding: .15rem .55rem; border-radius: 1rem; }
.pgal-thumbs { list-style: none; margin: 0; padding: 0; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.pgal-item a { display: block; width: 4.5rem; height: 4.5rem; border-radius: .5rem; overflow: hidden; border: 2px solid transparent; opacity: .85; transition: opacity .15s, border-color .15s; }
.pgal-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pgal-item.is-active a { border-color: currentColor; opacity: 1; }
.pgal-item.is-other a { opacity: .4; }
.pgal-item.is-other:hover a { opacity: .8; }
.pgal-sep { flex-basis: 100%; font-size: .75rem; opacity: .7; margin-top: .25rem; }
.pgal-lightbox { border: 0; padding: 0; background: transparent; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; }
.pgal-lightbox::backdrop { background: rgba(0,0,0,.92); }
.pgal-lightbox[open] { display: grid; place-items: center; position: fixed; inset: 0; margin: 0; }
.pgal-lightbox img { max-width: 92vw; max-height: 86vh; width: auto; height: auto; object-fit: contain; touch-action: pan-y; }
.pgal-lightbox .pgal-nav { position: fixed; }
.pgal-close { position: fixed; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.pgal-caption { position: fixed; bottom: 1rem; left: 0; right: 0; text-align: center; color: #fff; font-size: .9rem; margin: 0; }

/* ── Слајдер (web-creator/components/slider.blade.php + /site-components.js bindSliders) ──
   Заеднички скелет за сите теми; боите/радиусот/односот ги доодлучува темата.
   Без JS лентата се влече (scroll-snap) и го покажува лизгачот — инаку со глушец
   нема како да се стигне до вториот слајд. Скриптата става `.is-bound`, ги открива
   стрелките и точките, и дури тогаш лизгачот се крие. Боите овде се неутрален
   почеток; темата ги презапишува. */
.wc-slider { position: relative; min-width: 0; }
.wc-slider [hidden] { display: none !important; }
.wc-slider-track { list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: thin; }
.wc-slider.is-bound .wc-slider-track { scrollbar-width: none; }
.wc-slider.is-bound .wc-slider-track::-webkit-scrollbar { display: none; }
.wc-slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.wc-slide-link { display: block; position: relative; color: inherit; text-decoration: none; }
.wc-slide img { display: block; width: 100%; height: auto; }
.wc-slide-caption { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: .15rem; padding: 3rem 1.1rem 2rem; color: #fff; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.62)); }
.wc-slide-caption b { font-size: 1.05rem; line-height: 1.25; }
.wc-slide-caption small { font-size: .9rem; opacity: .92; }
.wc-slider-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: #111; font-size: 1.7rem; line-height: 1; cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0,0,0,.18); padding: 0 0 .15rem; }
.wc-slider-prev { left: .6rem; } .wc-slider-next { right: .6rem; }
.wc-slider-dots { position: absolute; left: 0; right: 0; bottom: .7rem; display: flex; justify-content: center; gap: .45rem; }
.wc-slider-dots { gap: 0; }
/* Видливата точка е мала, површината за допир 24px (padding + content-box). */
.wc-slider-dot { box-sizing: border-box; width: 1.5rem; height: 1.5rem; padding: .475rem; border-radius: 50%; border: 0; background: rgba(255,255,255,.55); background-clip: content-box; cursor: pointer; }
.wc-slider-dot.is-active { background-color: #fff; }
.wc-slider-toggle { position: absolute; top: .6rem; right: .6rem; width: 2rem; height: 2rem; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,.92); color: #111; cursor: pointer; display: grid; place-items: center; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.wc-slider-toggle::before { content: ""; width: .6rem; height: .7rem; border-inline: .2rem solid currentColor; box-sizing: border-box; }
.wc-slider-toggle.is-paused::before { width: 0; height: 0; border-block: .4rem solid transparent; border-inline: .65rem solid currentColor; border-inline-end: 0; margin-left: .12rem; }