.elementor-2232 .elementor-element.elementor-element-748b4e2{--display:flex;--min-height:90vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2232 .elementor-element.elementor-element-4e42d13{--display:flex;}.elementor-2232 .elementor-element.elementor-element-51ade40{--display:flex;--flex-direction:row-reverse;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap-reverse;--justify-content:center;--align-items:flex-end;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2232 .elementor-element.elementor-element-7231915{--e-filter-direction:row;--e-filter-white-space:nowrap;--e-filter-wrap:wrap;--e-filter-overflow-x:initial;--e-filter-space-between:22px;--e-filter-normal-text-color:#FFFFFF;--e-filter-hover-text-color:#C4C4C4;--e-filter-active-text-color:#000000;}.elementor-2232 .elementor-element.elementor-element-7231915.elementor-element{--align-self:flex-end;}.elementor-2232 .elementor-element.elementor-element-7231915 .e-filter-item:not( [aria-pressed=true] ):not( :hover ){text-shadow:0px 0px 10px rgba(0,0,0,0.3);}.elementor-2232 .elementor-element.elementor-element-4feecdd{--display:flex;}.elementor-2232 .elementor-element.elementor-element-eaa2d55{--display:flex;--margin-top:60px;--margin-bottom:35px;--margin-left:0px;--margin-right:0px;}.elementor-2232 .elementor-element.elementor-element-a44a9f4{--grid-columns:4;--grid-row-gap:19px;--auto-scroll-offset:0px;--grid-column-gap:19px;}@media(max-width:1024px){.elementor-2232 .elementor-element.elementor-element-a44a9f4{--grid-columns:2;}}@media(min-width:768px){.elementor-2232 .elementor-element.elementor-element-748b4e2{--content-width:100vw;}.elementor-2232 .elementor-element.elementor-element-4feecdd{--content-width:100vw;}}@media(max-width:767px){.elementor-2232 .elementor-element.elementor-element-748b4e2{--min-height:80vh;}.elementor-2232 .elementor-element.elementor-element-7231915{width:100%;max-width:100%;padding:0px 0px 0px 0px;--e-filter-item-border-radius:29px 29px 29px 29px;}.elementor-2232 .elementor-element.elementor-element-4feecdd{--margin-top:10px;--margin-bottom:-6px;--margin-left:0px;--margin-right:0px;}.elementor-2232 .elementor-element.elementor-element-eaa2d55{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-2232 .elementor-element.elementor-element-a44a9f4{--grid-columns:2;--grid-row-gap:15px;--auto-scroll-offset:0px;--grid-column-gap:15px;}}/* Start custom CSS for taxonomy-filter, class: .elementor-element-7231915 *//*
 * 1. DEFINE THE SHEEN ANIMATION
 * (Unchanged)
 */
 
 @font-face {
  font-family: 'Frutiger';
  src: url('https://visspan.com/newweb/wp-content/uploads/2025/10/Frutiger.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@keyframes sheen-sweep {
  0% {
    transform: translateX(-100%) skewX(-25deg);
    opacity: 0;
  }
  20% {
    opacity: 0.1;
  }
  80% {
    opacity: 0.1;
  }
  100% {
    transform: translateX(200%) skewX(-25deg);
    opacity: 0;
  }
}



/*
 * 2. THE MAIN GLASS EFFECT (Improved)
 */
.elementor-element-7231915 {
    /* --- BETTER GLASS FOR TEXT CLARITY --- */
    /* Much more translucent, allowing text to stand out while background still blurs */
   
    
    /* Slightly less blur for better text readability, but still a clear effect */
    -webkit-backdrop-filter: blur(10px); /* Was 15px */
    
    border-radius: 20px;
    
    /* Padding is good, keep as is */
    padding: 20px 25px; 
    
    /* Match border to new transparency */
    border: 2px solid rgba(255, 255, 255, 0.3); /* Was 0.4 */
    
    /* Keep shadow subtle */
    box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.1); /* Slightly smaller, softer shadow */
    
    position: relative;
    overflow: hidden;
}

/*
 * 3. THE SHEEN EFFECT
 * (Unchanged)
 */
.elementor-element-7231915::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.3) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    transform: translateX(-100%) skewX(-25deg);
    animation: sheen-sweep 8s ease-in-out infinite;
}


/*
 * 4. RE-ORDER, SIZE, AND ALIGN (Desktop - Refined)
 */
.elementor-element-7231915 .e-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end; /* This is key to your layout */
    
}

/* Default state for all buttons */
.elementor-element-7231915 .e-filter-item {
    font-size: 19px; 
    font-family: ;
    text-transform: uppercase;
  
    /* --- BETTER LOOK --- */
    color: #fff; /* Darker text for better contrast */
    font-weight: 500 !important;
    line-height: 2; /* More controlled line height */
    padding: 5px 10px; /* Better padding */
    
    margin: 0 5px;
    order: 1; /* (Unchanged) */
    
    /* --- BETTER LOOK --- */
    opacity: 0.7; /* Slightly more visible */
    
    transform: scale(0.9) translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* "All" button */
.elementor-element-7231915 .e-filter-item[data-filter="__all"] {
    order: 2; /* (Unchanged) */
}

/* Active button styles */
.elementor-element-7231915 .e-filter-item[aria-pressed="true"] {
    font-size: 60px;
    font-weight: 600;
    order: 3; /* (Unchanged) */
    
    /* --- BETTER LOOK --- */
    color: #fff; /* Explicitly set color */
    line-height: 1.1; /* Tighter line-height for the large qfont */
    font-family: Frutiger ;
    opacity: 1;
    transform: scale(1) translateY(0);
    text-align: left;
    margin: 0;
    padding: ;
    margin-left: auto; /* (Unchanged - This is what moves it right) */
}


/*
 * 5. MOBILE STYLES (Unchanged)
 * Your mobile layout logic is preserved.
 */
@media (max-width: 767px) {
    
    .elementor-element-7231915 .e-filter {
      justify-content: center;
      gap: 5px 0; 
      padding-bottom:20px;
    }

    .elementor-element-7231915 .e-filter-item[aria-pressed="true"] {
        font-size: 35px;
        order: 4; 
        flex-basis: 100%; 
        text-align: center; 
        margin-left: 0; 
    }

    .elementor-element-7231915 .e-filter-item {
        font-size: 14px;
        margin: 0 3px; 
        padding-bottom:1px;
        order: 2; 
        line-height:5;
    }

    .elementor-element-7231915 .e-filter-item[data-filter="__all"] {
        order: 3; 
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-02d01d6 *//* ===========================================
 * NEW VISSPAN COLLECTION STYLES (Modern UI)
 * =========================================== */

/* 1. THE MAIN CONTAINER (CARD)
 * We're creating a modern "card" look with a soft shadow
 * and more breathing room (padding).
 */
.mobile-collection-details {
  font-family: 'vazirmatn', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background-color: #ffffff;
  border-radius: 16px; /* Softer corners */
  border: 1px solid #e9e9e9;
  box-shadow: 0 8px 24px rgba(0, 40, 79, 0.05); /* Subtle shadow */
  padding: 30px;
  margin: 20px;
  position: relative;
  overflow: hidden;
}

/* 2. THE LOGO
 * Removed absolute positioning. The logo now sits cleanly
 * at the top of the card.
 */
.mobile-details-logo {
  display: block;
  max-height: 45px; /* Controls logo size */
  width: auto;
  margin-bottom: 30px; /* Space below logo */
  opacity: 0.8;
}

/* 3. ANIMATION
 * Kept your original logic but smoothed the transition slightly.
 */
.mobile-collection-details .collection-text {
  display: none;
  opacity: 0;
  transform: scale(0.99) translateY(5px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}
.mobile-collection-details .collection-text.active {
  display: block;
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* 4. DEFAULT STATE ("__all" collection)
 * This is the initial prompt. We'll center it to make
 * it clear it's an instruction.
 */
.mobile-collection-details .collection-text[data-collection="__all"] {
  text-align: center;
  padding: 20px 0;
}
.mobile-collection-details .collection-text[data-collection="__all"] h3 {
  font-size: 22px;
  font-weight: 600;
  color: #333;
  margin: 0 0 8px 0;
}
.mobile-collection-details .collection-text[data-collection="__all"] .collection-lead {
  font-size: 16px;
  color: #555;
  max-width: 400px;
  margin: 0 auto;
}

/* 5. LAYOUT WRAPPER (2-Column)
 * This controls the mobile (stack) and desktop (row) layouts.
 */
.collection-content-wrapper {
  display: flex;
  flex-direction: column; /* Mobile-first: stacks text and specs */
  gap: 30px;
  width: 100%;
}

/* 6. TEXT COLUMN (Right side in RTL)
 * Styles for the H3 title and P description.
 */
.collection-text-column {
  flex: 1.8; /* Give text column more space */
  min-width: 0;
}

.collection-title {
  font-family: 'vazirmatn', sans-serif;
  font-size: 30px; /* 2.2em -> 30px for more control */
  font-weight: 700;
  color: #005a8c; /* Use brand color for title */
  margin: 0 0 15px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid #eeeeee; /* Lighter, cleaner border */
  display: inline-block; /* Title border only spans the text */
}

.collection-lead {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7; /* Increased line-height for readability */
  color: #333333;
  margin: 0;
  max-width: 700px; /* Keep this for long text */
}

/* 7. SPECS COLUMN (Left side in RTL)
 * This is the new, cleaner spec list style.
 */
.collection-specs-column {
  flex: 1.2; /* Give specs column less space */
  min-width: 0;
}

.spec-list {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  direction: rtl; /* IMPORTANT: Keeps your RTL layout */
  border-top: 1px solid #eeeeee; /* Add a top border on mobile */
}

.spec-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid #eeeeee; /* Lighter divider */
  padding: 16px 0; /* More vertical space */
  font-size: 16px;
}

.spec-item:last-child {
  border-bottom: none; /* Remove line from last item */
}

.spec-label {
  font-weight: 600; /* Bolder label */
  color: #111;
  padding-left: 15px; /* Space between label and value */
  flex-shrink: 0;
}

.spec-value {
  font-weight: 400;
  color: #333;
  text-align: left;
  flex-grow: 1;
  direction: ltr; /* IMPORTANT: Keeps numbers LTR */
}

.spec-num {
  color: #222; /* Darker numbers for clarity */
}

.spec-divider {
  color: #005a8c; /* Use brand color for the divider */
  font-weight: 600;
  margin: 0 0.5em;
}

/* 8. DESKTOP LAYOUT (Media Query)
 * On screens > 768px, switch to a 2-column row.
 */
@media (min-width: 768px) {
  .collection-content-wrapper {
    flex-direction: row; /* Two columns on desktop */
    gap: 50px; /* More space between columns */
  }
  
  .collection-specs-column {
     /* Add a small top padding to align list with text, not title */
    padding-top: 120px;
  }

  .spec-list {
    border-top: none; /* Remove top border on desktop */
  }

  .collection-title {
    font-size: 34px; /* Slightly larger title on desktop */
  }
}

/* 9. CLEANUP (Remove old unused classes)
 * These were in your original CSS but aren't needed.
 */
.collection-main-column,
.collection-details-column {
  width: auto;
  flex: none;
}/* End custom CSS */
/* Start custom CSS */*{
    font-family: vazirmatn;
}/* End custom CSS */