/* ============================================================================
 *  dopolnitelno.css - КЛАСИ ШТО НЕ СЕ ВО ГЛАВНИОТ CSS
 * ============================================================================
 *
 *  ЗОШТО ПОСТОИ ОВОЈ ФАЈЛ:
 *    Главниот изглед (site.css) е составен од Tailwind. Tailwind ги прави
 *    САМО класите што ги видел во кодот во моментот на составувањето.
 *    Кога подоцна додадов нови работи (пребарување во каталогот, кошничка,
 *    страница за грешка), користев неколку класи што тогаш ги немаше.
 *    Таквата класа НЕ прави ништо. Без грешка, без предупредување. Тихо.
 *    Најдов 16 такви со проверка, и сите се тука.
 *
 *  ЗОШТО НЕ СЕ СОСТАВИ ГЛАВНИОТ CSS ПОВТОРНО:
 *    За тоа треба Node и градење. Целата смисла на овој сајт е да нема
 *    ниту едното ниту другото. Затоа овие класи се напишани рачно, со
 *    истите вредности што Tailwind би ги дал.
 *
 *  АКО ДОДАВАШ НОВА КЛАСА:
 *    Провери со C:\xampp\proverka\proveri-site-klasi.php дали постои.
 *    Ако не постои, додај ја овде.
 *
 *  НИШТО ОВДЕ НЕ ГО МЕНУВА РАСПОРЕДОТ. Само ги дополнува класите што
 *  и онака се користат во страниците.
 * ========================================================================== */


/* ---------------------------------------------------------------------------
 * 1. БОИ
 * ------------------------------------------------------------------------- */

/* Темно теракотна позадина. Значката за попуст и акција. */
.bg-\[\#B47B5A\] { background-color: #B47B5A; }

/* Теракотен текст при поминување со глувчето. Копчињата во кошничката. */
.hover\:text-\[\#B47B5A\]:hover { color: #B47B5A; }


/* ---------------------------------------------------------------------------
 * 2. РАСТОЈАНИЈА И ГОЛЕМИНИ
 * ------------------------------------------------------------------------- */

.mt-5 { margin-top: 1.25rem; }

.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.py-3\.5 { padding-top: .875rem; padding-bottom: .875rem; }

.gap-5 { gap: 1.25rem; }
.gap-x-6 { column-gap: 1.5rem; }

.min-w-0 { min-width: 0; }
.w-\[92px\] { width: 92px; }
.max-w-\[820px\] { max-width: 820px; }


/* ---------------------------------------------------------------------------
 * 3. ТЕКСТ И РАМКИ
 * ------------------------------------------------------------------------- */

.text-right { text-align: right; }
.underline { text-decoration-line: underline; }

/* Без рамка. Полето за количина во кошничката. */
.border-none { border-style: none; }

/* Бојата на текстот-пример во полето за пребарување. */
.placeholder-\[\#8A7E72\]\/60::placeholder { color: rgb(138 126 114 / .6); }


/* ---------------------------------------------------------------------------
 * 4. НА ШИРОК ЕКРАН
 *
 *    Tailwind-овиот lg е 64rem, значи 1024 пиксели. Истата граница.
 * ------------------------------------------------------------------------- */
@media (min-width: 64rem) {
    .lg\:col-span-1 { grid-column: span 1 / span 1; }
}


/* ---------------------------------------------------------------------------
 * 5. ЗАОКРУЖЕНИ СЛИКИ НА ПРОИЗВОДИТЕ
 *
 *    ЗОШТО: сликите беа остри коцки и изгледаа грубо. 20 пиксели ги омекнува
 *    доволно за да изгледаат како производ, а не како табела - а се уште
 *    се гледа дека се слики, не украс.
 *
 *    КАДЕ ВАЖИ: класата `product-image` стои на сликата во сите три картички
 *    во inc/layout.php (обична, на почетна, и за сапуни). Значи важи насекаде
 *    каде што се прикажува производ, без да се пипа секоја слика одделно.
 *
 *    НЕ ПИПА: логото, сликите во текст, слајдерот на почетна. Само производи.
 * ------------------------------------------------------------------------- */
.product-image {
    border-radius: 20px;
}