/* Add custom CSS styles below */ 
/* ====== التصميم: تستطيع تغيير هذه القيم ====== */
.flower-categories {
  --gap: 10px;
  --radius: 19px;
  --placeholder: #f0e9ed;
  width: min(100%, 1320px);
  margin-inline: auto;
  padding: 18px 14px 32px;
  box-sizing: border-box;
  font-family: Tahoma, Arial, sans-serif;
}
.flower-categories *, .flower-categories *::before, .flower-categories *::after { box-sizing: border-box; }
.flower-categories__title { font-size: clamp(20px, 2.5vw, 30px); margin: 0 0 18px; color: #302337; }
/* Wrapper is a query container, allowing exact square track heights */
.flower-categories__size { width:100%; container-type: inline-size; }
.flower-categories__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: calc((100cqw - 5 * var(--gap)) / 6);
  grid-auto-flow: row dense;
  gap: var(--gap);
  direction: rtl;
  
}
.flower-category {
  display: block;
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  border-radius: var(--radius);
  background: var(--placeholder);
  text-decoration: none;
  color: #302337;
  isolation: isolate;
  transition: transform .18s ease, box-shadow .18s ease;
}
.flower-category--wide { grid-column: span 2; }
.flower-category--square { grid-column: span 1; }
.flower-category:focus-visible { outline: 3px solid #824b78; outline-offset: 3px; }
@media (hover: hover) {
  .flower-category:hover { transform: translateY(-3px); box-shadow: 0 9px 20px #00000015; }
  .flower-category:hover img { transform: scale(1.025); }
}
.flower-category img {
  width: 100%; height: 100%; display: block;
  object-fit: contain; /* لا تقص الصورة؛ لو الصور مجهزة ككروت ستظهر بالكامل */
  transition: transform .2s ease;
}
.flower-category__fallback { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:8px; text-align:center; font-weight:700; font-size:clamp(11px,1.5vw,20px); }
.flower-category__fallback::before { content:"✿"; position:absolute; font-size:clamp(60px,10vw,120px); opacity:.12; }
.flower-category__fallback span { position:relative; z-index:1; }
.flower-category:nth-child(4n+2) { --placeholder:#e8eeeb; }
.flower-category:nth-child(4n+3) { --placeholder:#ede9f1; }
.flower-category:nth-child(4n+4) { --placeholder:#f2e8e8; }
/* التابلت: أربع أعمدة */
@media (min-width: 650px) and (max-width: 999px) {
  .flower-categories__grid { grid-template-columns:repeat(4,minmax(0,1fr)); grid-auto-rows:calc((100cqw - 3 * var(--gap)) / 4); }
}
/* الموبايل: ثلاثة أعمدة. 24 وحدة مساحة ÷ 3 = 8 صفوف */
@media (max-width: 649px) {
  .flower-categories { --gap: 8px; --radius: 15px; padding:14px 10px 24px; }
  .flower-categories__grid { grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:calc((100cqw - 2 * var(--gap)) / 3); }
}
@media (prefers-reduced-motion: reduce) {
  .flower-category, .flower-category img { transition:none; }
}