/**
 * Block: Our Collections (prefix oc_)
 * 3 rows: row1 = 3 cards (big, med, small), row2 = 3 (med, big, small), row3 = 4 (big, small, bigger, small).
 * Responsive % widths; category thumbnail + name bottom-right; full card = category permalink.
 */

 .oc_block {
	width: 100%;
	padding: 0 var(--global-padding);
	box-sizing: border-box;
	position: relative;
	z-index: 5;
	margin-bottom: 100px;
  }
  
  .oc_inner {
	max-width: var(--container-max, 1856px);
	margin: 0 auto;
  }
  
  .oc_row {
	display: flex;
	flex-wrap: nowrap;
	gap: 32px;
	margin-bottom: 32px;
  }
  
  .oc_row:last-child {
	margin-bottom: 0;
  }
  
  /* ---- Fallback: 1 card in any row (full width) ---- */
  .oc_row_1_count_1 .oc_card,
  .oc_row_2_count_1 .oc_card,
  .oc_row_3_count_1 .oc_card {
	flex: 0 0 100%;
  }

  /* ---- Row 1: 2 or 3 cards (1 gap = 32px, 2 gaps = 64px) ---- */
  .oc_row_1_count_2 .oc_card_w_big {
	flex: 0 0 calc((100% - 32px) * 0.6);
  }
  .oc_row_1_count_2 .oc_card_w_small {
	flex: 0 0 calc((100% - 32px) * 0.4);
  }
  .oc_row_1_count_3 .oc_card_w_big,
  .oc_row_1 .oc_card_w_big {
	flex: 0 0 calc((100% - 64px) * 0.48);
  }
  .oc_row_1_count_3 .oc_card_w_med,
  .oc_row_1 .oc_card_w_med {
	flex: 0 0 calc((100% - 64px) * 0.32);
  }
  .oc_row_1_count_3 .oc_card_w_small,
  .oc_row_1 .oc_card_w_small {
	flex: 0 0 calc((100% - 64px) * 0.2);
  }

  /* ---- Row 2: 2 or 3 cards ---- */
  .oc_row_2_count_2 .oc_card_w_med {
	flex: 0 0 calc((100% - 32px) * 0.4);
  }
  .oc_row_2_count_2 .oc_card_w_big {
	flex: 0 0 calc((100% - 32px) * 0.6);
  }
  .oc_row_2_count_3 .oc_card_w_med,
  .oc_row_2 .oc_card_w_med {
	flex: 0 0 calc((100% - 64px) * 0.28);
  }
  .oc_row_2_count_3 .oc_card_w_big,
  .oc_row_2 .oc_card_w_big {
	flex: 0 0 calc((100% - 64px) * 0.44);
  }
  .oc_row_2_count_3 .oc_card_w_small,
  .oc_row_2 .oc_card_w_small {
	flex: 0 0 calc((100% - 64px) * 0.28);
  }

  /* ---- Row 3: 2, 3 or 4 cards (1 gap = 32px, 2 = 64px, 3 = 96px) ---- */
  .oc_row_3_count_2 .oc_card_w_big {
	flex: 0 0 calc((100% - 32px) * 0.6);
  }
  .oc_row_3_count_2 .oc_card_w_small {
	flex: 0 0 calc((100% - 32px) * 0.4);
  }
  .oc_row_3_count_3 .oc_card_w_big {
	flex: 0 0 calc((100% - 64px) * 0.48);
  }
  .oc_row_3_count_3 .oc_card_w_med {
	flex: 0 0 calc((100% - 64px) * 0.32);
  }
  .oc_row_3_count_3 .oc_card_w_small {
	flex: 0 0 calc((100% - 64px) * 0.2);
  }
  .oc_row_3_count_4 .oc_card_w_big,
  .oc_row_3 .oc_card_w_big {
	flex: 0 0 calc((100% - 96px) * 0.3);
  }
  .oc_row_3_count_4 .oc_card_w_small,
  .oc_row_3 .oc_card_w_small {
	flex: 0 0 calc((100% - 96px) * 0.2);
  }
  .oc_row_3_count_4 .oc_card_w_bigger,
  .oc_row_3 .oc_card_w_bigger {
	flex: 0 0 calc((100% - 96px) * 0.35);
  }
  .oc_row_3_count_4 .oc_card_w_small:last-child,
  .oc_row_3 .oc_card_w_small:last-child {
	flex: 0 0 calc((100% - 96px) * 0.15);
  }
  
  .oc_card_link::after {
	position: absolute;
	content: "";
	bottom: 0;
	left: 0;
	width: 100%;
	height: 138px;
	background: linear-gradient(
	  180deg,
	  rgba(0, 0, 0, 0) 0%,
	  rgba(0, 0, 0, 0.4) 100%
	);
	z-index: 2;
  }
  .oc_card {
	position: relative;
	border-radius: 24px;
	overflow: hidden;
	box-sizing: border-box;
  }
  
  .oc_card_link {
	  display: block;
	  position: relative;
	  width: 100%;
	  height: 100%;
	  min-height: 512px;
	  text-decoration: none;
	  color: inherit;
	  overflow: hidden;
  }
   
  
  .oc_card_link:hover .oc_card_media {
	  transform: scale(1.1);
  }
  
  .oc_card_media {
	display: block;
	position: absolute;
	inset: 0;
	transition: transform 0.35s cubic-bezier(.4,0,.2,1);
  }
  
  .oc_card_img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
  }
  
  .oc_card_img_placeholder {
	background: var(--color-border, #e0e0e0);
	min-height: 180px;
  }
  
  .oc_card_title {
	position: absolute;
	bottom: 16px;
	right: 16px;
	color: var(--color-background);
	z-index: 5;
  }
  
  @media (max-width: 1024px) {
    .oc_card{
        flex: 1 !important;
    }
  }
  @media (max-width: 768px) {
	.oc_row {
	  flex-wrap: wrap;
	  gap: 16px;
	  margin-bottom: 16px;
      flex-direction: column;
	}

    .oc_card_link::after{
        height: 100%;
    }

    .oc_card_title{
        bottom: 50%;
        right: 50%;
        transform: translate(50%, 50%);
        text-align: center;
        width: 100%;
    }
  
	.oc_card_link {
	  min-height: 160px;
	}
    .oc_block{
        margin-bottom: 42px;
    }
  }