/* ==========================================================================
   Dropify - Category Cards (Collections / Categories widget) - v2.4.0
   Image-first cards. The category image IS the card; text is optional and is
   placed over the image or above / below it. Every value here is only a
   default: the Elementor widget controls override it (their selectors carry
   the .elementor-element prefix and therefore always win).
   ========================================================================== */

.dfy-cc{
  --dfy-cc-ease:cubic-bezier(.2,.7,.2,1);
  --dfy-cc-dur:.45s;
  --dfy-cc-radius:20px;
  --dfy-cc-zoom:1.08;
  --dfy-cc-lift:6px;
  width:100%;box-sizing:border-box;font-family:inherit;
}
.dfy-cc *,.dfy-cc *::before,.dfy-cc *::after{box-sizing:border-box}

/* ---- grid / slider track ------------------------------------------------ */
.dfy-cc .dfy-cc-grid{
  display:grid;
  grid-template-columns:repeat(var(--dropify-columns,4),minmax(0,1fr));
  gap:var(--dropify-grid-gap,18px);
  align-items:start;justify-items:stretch;min-width:0;
}
.dfy-cc .dropify-collections-viewport.slider .dfy-cc-grid{display:flex;align-items:flex-start}
.dfy-cc .dropify-collections-viewport.slider .dfy-cc-card{
  flex:0 0 calc((100% - (var(--dropify-columns,4) - 1) * var(--dropify-grid-gap,18px)) / var(--dropify-columns,4));
  scroll-snap-align:start;
}

/* ---- shape presets (the "Custom" shape is written by Elementor) --------- */
.dfy-cc .dfy-cc-shape-square{--dfy-cc-radius:0}
.dfy-cc .dfy-cc-shape-soft{--dfy-cc-radius:12px}
.dfy-cc .dfy-cc-shape-rounded{--dfy-cc-radius:24px}
.dfy-cc .dfy-cc-shape-round{--dfy-cc-radius:999px}

/* ---- card (invisible wrapper: no white box around the image) ------------ */
.dfy-cc a.dfy-cc-card{
  position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;
  margin:0;padding:0;background:transparent;border:0;box-shadow:none;
  color:inherit;text-decoration:none;
  transition:transform var(--dfy-cc-dur) var(--dfy-cc-ease);
  -webkit-tap-highlight-color:transparent;
}
.dfy-cc a.dfy-cc-card:hover,.dfy-cc a.dfy-cc-card:focus{text-decoration:none;color:inherit}
.dfy-cc a.dfy-cc-card:focus-visible{outline:3px solid #0A7D5A;outline-offset:4px;border-radius:var(--dfy-cc-radius)}
.dfy-cc .dfy-cc-pos-above .dfy-cc-body{order:-1}

/* ---- media = the visual -------------------------------------------------- */
.dfy-cc .dfy-cc-media{
  position:relative;display:block;width:100%;aspect-ratio:1/1;overflow:hidden;
  border-radius:var(--dfy-cc-radius);
  background:linear-gradient(135deg,#eef7f2,#d3e8dd);
  isolation:isolate;transform:translateZ(0);
  transition:box-shadow var(--dfy-cc-dur) var(--dfy-cc-ease),border-color var(--dfy-cc-dur) var(--dfy-cc-ease);
}
.dfy-cc .dfy-cc-media picture{display:contents}
.dfy-cc .dfy-cc-img{
  position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;margin:0;padding:0;
  object-fit:cover;object-position:center center;border:0;border-radius:0;box-shadow:none;
  transition:transform var(--dfy-cc-dur) var(--dfy-cc-ease),opacity var(--dfy-cc-dur) ease,filter var(--dfy-cc-dur) ease;
  will-change:transform;
}
.dfy-cc .dfy-cc-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#0A7D5A;opacity:.55}
.dfy-cc .dfy-cc-ph svg{width:34%;height:auto;max-width:96px}

/* ---- overlay layers ------------------------------------------------------ */
.dfy-cc .dfy-cc-ov,.dfy-cc .dfy-cc-ov-h{position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity var(--dfy-cc-dur) var(--dfy-cc-ease)}
.dfy-cc .dfy-cc-ov-h{opacity:0}
.dfy-cc a.dfy-cc-card:hover .dfy-cc-ov-h,.dfy-cc a.dfy-cc-card:focus-visible .dfy-cc-ov-h{opacity:1}
/* with text above/below the image the tint is off unless "Apply overlay" is on */
.dfy-cc .dfy-cc-pos-below:not(.dfy-cc-ov-always) .dfy-cc-ov,
.dfy-cc .dfy-cc-pos-below:not(.dfy-cc-ov-always) .dfy-cc-ov-h,
.dfy-cc .dfy-cc-pos-above:not(.dfy-cc-ov-always) .dfy-cc-ov,
.dfy-cc .dfy-cc-pos-above:not(.dfy-cc-ov-always) .dfy-cc-ov-h{display:none}
.dfy-cc .dfy-cc-no-overlay .dfy-cc-ov{display:none}

/* ---- text box ------------------------------------------------------------ */
.dfy-cc .dfy-cc-body{display:flex;min-width:0;justify-content:flex-start;text-align:left;color:#14211C}
.dfy-cc .dfy-cc-panel{display:flex;align-items:center;gap:12px;width:100%;min-width:0;padding:0;border-radius:14px}
.dfy-cc .dfy-cc-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.dfy-cc .dfy-cc-name{margin:0;padding:0;font-size:clamp(15px,1vw + 9px,20px);line-height:1.25;font-weight:800;letter-spacing:-.01em;color:inherit;overflow-wrap:anywhere}
.dfy-cc .dfy-cc-desc{margin:0;padding:0;font-size:13px;line-height:1.45;color:#5B6B64}
.dfy-cc .dfy-cc-count{display:inline-block;margin:0;padding:4px 11px;border-radius:999px;font-size:12px;line-height:1.3;font-weight:700;background:#E8F6EF;color:#0A7D5A}
.dfy-cc .dfy-cc-extra{display:inline-block;margin:0;font-size:12px;line-height:1.3;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#0A7D5A}
.dfy-cc .dfy-cc-arrow{
  flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;font-size:15px;line-height:1;font-weight:800;
  background:#fff;color:#0A7D5A;box-shadow:0 4px 14px rgba(0,0,0,.14);
  transition:transform var(--dfy-cc-dur) var(--dfy-cc-ease),background-color .25s ease,color .25s ease;
}
.dfy-cc .dfy-cc-arrow svg{width:1em;height:1em;fill:currentColor}
.dfy-cc a.dfy-cc-card:hover .dfy-cc-arrow{transform:translateX(3px)}

/* text laid over the image */
.dfy-cc .dfy-cc-media .dfy-cc-body{position:absolute;inset:0;z-index:2;padding:18px;align-items:flex-end;color:#fff;pointer-events:none}
.dfy-cc .dfy-cc-v-top .dfy-cc-media .dfy-cc-body{align-items:flex-start}
.dfy-cc .dfy-cc-v-center .dfy-cc-media .dfy-cc-body{align-items:center}
.dfy-cc .dfy-cc-media .dfy-cc-name{text-shadow:0 2px 10px rgba(0,0,0,.35)}
.dfy-cc .dfy-cc-media .dfy-cc-desc{color:rgba(255,255,255,.88)}
.dfy-cc .dfy-cc-media .dfy-cc-count{background:rgba(255,255,255,.2);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.dfy-cc .dfy-cc-media .dfy-cc-extra{color:#fff}

/* ---- hover effects -------------------------------------------------------- */
.dfy-cc .dfy-cc-hv-zoom_in a.dfy-cc-card:hover .dfy-cc-img,
.dfy-cc .dfy-cc-hv-zoom_lift a.dfy-cc-card:hover .dfy-cc-img{transform:scale(var(--dfy-cc-zoom))}
.dfy-cc .dfy-cc-hv-zoom_out .dfy-cc-img{transform:scale(var(--dfy-cc-zoom))}
.dfy-cc .dfy-cc-hv-zoom_out a.dfy-cc-card:hover .dfy-cc-img{transform:scale(1)}
.dfy-cc .dfy-cc-hv-lift a.dfy-cc-card:hover,
.dfy-cc .dfy-cc-hv-zoom_lift a.dfy-cc-card:hover{transform:translateY(calc(var(--dfy-cc-lift) * -1))}
.dfy-cc .dfy-cc-hv-lift a.dfy-cc-card:hover .dfy-cc-media,
.dfy-cc .dfy-cc-hv-zoom_lift a.dfy-cc-card:hover .dfy-cc-media{box-shadow:0 18px 38px rgba(20,33,28,.18)}

/* description / extra text revealed on hover (overlay layouts) */
.dfy-cc .dfy-cc-reveal .dfy-cc-desc,
.dfy-cc .dfy-cc-reveal .dfy-cc-extra{max-height:0;opacity:0;overflow:hidden;transform:translateY(10px);transition:max-height var(--dfy-cc-dur) var(--dfy-cc-ease),opacity var(--dfy-cc-dur) ease,transform var(--dfy-cc-dur) var(--dfy-cc-ease)}
.dfy-cc .dfy-cc-reveal a.dfy-cc-card:hover .dfy-cc-desc,
.dfy-cc .dfy-cc-reveal a.dfy-cc-card:hover .dfy-cc-extra,
.dfy-cc .dfy-cc-reveal a.dfy-cc-card:focus-visible .dfy-cc-desc,
.dfy-cc .dfy-cc-reveal a.dfy-cc-card:focus-visible .dfy-cc-extra{max-height:12em;opacity:1;transform:none}

/* ---- section heading + slider arrows -------------------------------------- */
.dfy-cc .dropify-collection-arrows button{width:40px;height:40px;border:1px solid #D7E1DC;background:#fff;color:#0A7D5A;border-radius:50%;font-size:25px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.dfy-cc .dropify-collection-arrows button:hover{background:#0A7D5A;color:#fff}
.dfy-cc .dfy-cc-empty{grid-column:1/-1;padding:28px;border:1px dashed #C9DCD4;border-radius:16px;text-align:center;color:#5B6B64;font-size:14px}

/* ---- responsive + touch ---------------------------------------------------- */
@media (max-width:1024px){
  .dfy-cc .dfy-cc-media .dfy-cc-body{padding:14px}
}
@media (max-width:767px){
  .dfy-cc a.dfy-cc-card{gap:9px}
  .dfy-cc .dfy-cc-media .dfy-cc-body{padding:10px}
  .dfy-cc .dfy-cc-panel{gap:8px}
  .dfy-cc .dfy-cc-name{font-size:14px}
  .dfy-cc .dfy-cc-desc{font-size:12px}
  .dfy-cc .dfy-cc-count{font-size:11px;padding:3px 9px}
  .dfy-cc .dfy-cc-extra{font-size:10px}
  .dfy-cc .dfy-cc-arrow{width:28px;height:28px;font-size:12px}
}
@media (hover:none){
  .dfy-cc .dfy-cc-hv-lift a.dfy-cc-card:hover,
  .dfy-cc .dfy-cc-hv-zoom_lift a.dfy-cc-card:hover{transform:none}
  .dfy-cc .dfy-cc-reveal .dfy-cc-desc,
  .dfy-cc .dfy-cc-reveal .dfy-cc-extra{max-height:none;opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  .dfy-cc a.dfy-cc-card,.dfy-cc .dfy-cc-img,.dfy-cc .dfy-cc-media,.dfy-cc .dfy-cc-arrow,.dfy-cc .dfy-cc-ov,.dfy-cc .dfy-cc-ov-h{transition:none}
  .dfy-cc a.dfy-cc-card:hover,.dfy-cc a.dfy-cc-card:hover .dfy-cc-img{transform:none}
}

/* ==========================================================================
   v2.9.11 — Universal category cards (.dfy-cats / .dfy-cat)
   Image card, soft dark shade, white title, white "Explore" pill.
   Columns, ratio, radius, shade and gap come from CSS variables set per section.
   ========================================================================== */
.dfy-cats { --dfy-cat-cols: 4; --dfy-cat-ratio: 4 / 3; --dfy-cat-radius: 22px; --dfy-cat-shade: .45; --dfy-cat-gap: 20px;
  --dfy-cat-btn-bg: rgba(255,255,255,.94); --dfy-cat-btn-color: #12231D; --dfy-cat-name-color: #fff;
  width: 100%; max-width: 100%; box-sizing: border-box; margin: 0 auto; }
.dfy-cats *, .dfy-cats *::before, .dfy-cats *::after { box-sizing: border-box; }
.dfy-cats__head { text-align: center; margin: 0 0 22px; }
.dfy-cats .dfy-cats__title { margin: 0 0 6px !important; color: var(--dropify-color-dark, #12231D); font-size: clamp(1.6rem, 1.1rem + 2vw, 2.6rem); font-weight: 800; line-height: 1.15; }
.dfy-cats .dfy-cats__subtitle { margin: 0 !important; color: var(--dropify-color-muted, #5B6B64); font-size: 15px; }
.dfy-cats__empty { text-align: center; color: var(--dropify-color-muted, #5B6B64); padding: 24px; }

.dfy-cats__grid { display: grid; grid-template-columns: repeat(var(--dfy-cat-cols), minmax(0, 1fr)); gap: var(--dfy-cat-gap); }
/* Swipe row: same card width as the grid would give, scrolls sideways (good on shop pages) */
.dfy-cats--scroll .dfy-cats__grid { grid-template-columns: none; grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--dfy-cat-cols) - 1) * var(--dfy-cat-gap)) / var(--dfy-cat-cols));
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: #CFDAD5 transparent; }
.dfy-cats--scroll .dfy-cat { scroll-snap-align: start; }

a.dfy-cat { position: relative; display: block; aspect-ratio: var(--dfy-cat-ratio); min-width: 0; overflow: hidden; isolation: isolate;
  border-radius: var(--dfy-cat-radius); background: #0B3B2D; color: #fff !important; text-decoration: none !important;
  box-shadow: 0 6px 18px rgba(18, 35, 29, .10); container-type: inline-size; -webkit-tap-highlight-color: transparent;
  transition: transform .3s ease, box-shadow .3s ease; }
@supports not (aspect-ratio: 1 / 1) { a.dfy-cat { height: 0; padding-top: 75%; } }
a.dfy-cat:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(18, 35, 29, .18); }
a.dfy-cat:focus-visible { outline: 3px solid var(--dropify-color-gold, #F6C84C); outline-offset: 3px; }
a.dfy-cat.is-active { box-shadow: 0 0 0 3px var(--dropify-color-primary, #0A7D5A), 0 10px 24px rgba(10, 125, 90, .25); }

.dfy-cat__media { position: absolute; inset: 0; z-index: 0; display: block; }
.dfy-cat__media img, .dfy-cat__media picture { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important;
  margin: 0 !important; border: 0 !important; border-radius: 0 !important; object-fit: cover; object-position: center; transition: transform .6s ease; }
a.dfy-cat:hover .dfy-cat__media img { transform: scale(1.06); }
.dfy-cat.is-noimg .dfy-cat__media { background: radial-gradient(120% 90% at 85% 0%, rgba(246,200,76,.35), transparent 55%), linear-gradient(150deg, #075C46, #0A7D5A); }

.dfy-cat__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 18, 14, calc(var(--dfy-cat-shade) * .55)) 0%, rgba(8, 18, 14, calc(var(--dfy-cat-shade) * .8)) 55%, rgba(8, 18, 14, var(--dfy-cat-shade)) 100%); }

.dfy-cat__body { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(6px, 4cqi, 14px); padding: 10% 8%; text-align: center; }
.dfy-cats .dfy-cat__name { margin: 0 !important; padding: 0 !important; color: var(--dfy-cat-name-color) !important; font-family: inherit;
  font-size: 18px; font-size: clamp(14px, 8.4cqi, 30px) !important; font-weight: 700 !important; line-height: 1.22 !important; letter-spacing: .005em; text-transform: none !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .55), 0 1px 2px rgba(0, 0, 0, .4); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dfy-cat__count { font-size: 12px; font-size: clamp(11px, 4.4cqi, 14px); font-weight: 600; color: rgba(255, 255, 255, .92); text-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
.dfy-cat__btn { display: inline-flex; align-items: center; gap: .3em; padding: .55em 1.25em .55em 1.45em; border-radius: 999px;
  background: var(--dfy-cat-btn-bg); color: var(--dfy-cat-btn-color); font-size: 15px; font-size: clamp(12px, 5.6cqi, 18px); font-weight: 600; line-height: 1;
  white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); transition: background .2s ease, transform .2s ease; }
.dfy-cat__btn svg { width: 1em; height: 1em; flex: none; transition: transform .2s ease; }
a.dfy-cat:hover .dfy-cat__btn { background: #fff; }
a.dfy-cat:hover .dfy-cat__btn svg { transform: translateX(2px); }
[dir="rtl"] .dfy-cat__btn svg { transform: scaleX(-1); }

/* Very small cards (e.g. 3+ per row on a phone): hide the button, keep the name readable */
@container (max-width: 120px) { .dfy-cat__btn { display: none; } }

@media (max-width: 767px) {
  .dfy-cats__head { margin-bottom: 16px; }
  .dfy-cat__body { padding: 8% 6%; }
}
@media (prefers-reduced-motion: reduce) {
  a.dfy-cat, .dfy-cat__media img, .dfy-cat__btn, .dfy-cat__btn svg { transition: none !important; }
  a.dfy-cat:hover { transform: none; }
  a.dfy-cat:hover .dfy-cat__media img { transform: none; }
}
@media (max-width: 767px) { .dfy-cats { --dfy-cat-gap: 12px; } }
/* Text position: bottom (default — keeps any text printed on the category image readable) or center */
.dfy-cats .dfy-cats__title { text-transform: none !important; letter-spacing: -.01em; }
.dfy-cats--text-bottom .dfy-cat__body { justify-content: flex-end; padding-bottom: 9%; }
.dfy-cats--text-bottom .dfy-cat__shade { background: linear-gradient(180deg, rgba(8, 18, 14, 0) 35%, rgba(8, 18, 14, calc(var(--dfy-cat-shade) * .7)) 62%, rgba(8, 18, 14, calc(var(--dfy-cat-shade) * 1.7)) 100%); }
.dfy-cats--text-bottom .dfy-cat.is-noimg .dfy-cat__body { justify-content: center; padding-bottom: 8%; }