/** Shopify CDN: Minification failed

Line 332:8 Unexpected "/"
Line 344:0 Unexpected "}"
Line 347:4 Unexpected "0%"
Line 561:4 Expected percentage but found "@media"

**/
/* ================================================
   IQRAFY.STORE — PREMIUM ELLA THEME CUSTOMIZATION
   Homepage + Product Page + Collection Page
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
  --iq-gold: #C9A84C;
  --iq-dark: #1A1A2E;
  --iq-green: #0A3D1F;
  --iq-red: #E53E3E;
}

body { font-family: 'Poppins', sans-serif; }

/* ─── ANNOUNCEMENT BAR ─── */
.announcement-bar__message {
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}
.announcement-bar {
  background: var(--iq-gold) !important;
  color: var(--iq-dark) !important;
}

/* ─── HEADER ─── */
.site-header,
.header {
  background: var(--iq-dark) !important;
  border-bottom: 2px solid var(--iq-gold) !important;
}
.site-nav__link,
.header__menu-item a,
.header a {
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
.site-nav__link:hover,
.header__menu-item a:hover {
  color: var(--iq-gold) !important;
}
.site-header__cart .icon,
.header__icon svg { color: #fff !important; fill: #fff !important; }

/* ─── COD TRUST BAR (Homepage ke neeche add karo) ─── */
.iq-cod-bar {
  background: var(--iq-green);
  color: #4ADE80;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px;
}

/* ─── HOMEPAGE HERO ─── */
.iq-hero {
  background: var(--iq-dark);
  padding: 60px 20px;
  text-align: center;
}
.iq-hero__badge {
  display: inline-block;
  background: var(--iq-gold);
  color: var(--iq-dark);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 6px 16px;
  margin-bottom: 14px;
}
.iq-hero h1 {
  color: #fff;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 12px;
}
.iq-hero h1 span { color: var(--iq-gold); }
.iq-hero p {
  color: #8B8FA8;
  font-size: 14px;
  max-width: 480px;
  margin: 0 auto 24px;
}
.iq-btn-gold {
  display: inline-block;
  background: var(--iq-gold);
  color: var(--iq-dark);
  padding: 14px 32px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
  margin: 4px;
}
.iq-btn-gold:hover { background: #fff; color: var(--iq-dark); }
.iq-btn-outline {
  display: inline-block;
  background: transparent;
  color: var(--iq-gold);
  padding: 13px 28px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid var(--iq-gold);
  cursor: pointer;
  transition: all 0.3s;
  margin: 4px;
}
.iq-btn-outline:hover {
  background: var(--iq-gold);
  color: var(--iq-dark);
}

/* ─── COLLECTION CATEGORIES ─── */
.collection-grid__item-title,
.card__heading {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--iq-dark) !important;
}

/* ─── PRODUCT CARDS ─── */
.card-wrapper,
.product-card,
.grid__item .card {
  transition: transform 0.25s, box-shadow 0.25s !important;
  border: 1px solid #f0f0f0 !important;
}
.card-wrapper:hover,
.product-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.12) !important;
}

/* Sale Badge */
.badge,
.badge--sale,
.product-badge {
  background: var(--iq-red) !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  border-radius: 0 !important;
  padding: 4px 8px !important;
}

/* Price */
.price--sale .price__regular,
.price-item--sale,
.product-price .money {
  color: var(--iq-gold) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}
.price__compare,
.price-item--regular .money {
  color: #bbb !important;
  font-size: 13px !important;
  text-decoration: line-through !important;
}

/* Quick Add Button */
.quick-add__submit,
.product-form__cart-submit,
.btn--add-to-cart {
  background: var(--iq-dark) !important;
  color: var(--iq-gold) !important;
  border: none !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-size: 12px !important;
  transition: all 0.25s !important;
}
.quick-add__submit:hover,
.product-form__cart-submit:hover,
.btn--add-to-cart:hover {
  background: var(--iq-gold) !important;
  color: var(--iq-dark) !important;
}

/* ─── PRODUCT PAGE ─── */
.product__title {
  font-size: 26px !important;
  font-weight: 700 !important;
  color: var(--iq-dark) !important;
}
.product__vendor {
  color: var(--iq-gold) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
.product__media-item {
  border: 1px solid #eee !important;
}

/* Variant Buttons (Size etc) */
.swatch__input:checked + .swatch__label,
.variant-input-wrap input:checked + label {
  border-color: var(--iq-dark) !important;
  background: var(--iq-dark) !important;
  color: var(--iq-gold) !important;
}
.swatch__label,
.variant-input-wrap label {
  border: 1.5px solid #ddd !important;
  transition: all 0.2s !important;
}
.swatch__label:hover { border-color: var(--iq-gold) !important; }

/* COD Badge — Product Page */
.iq-cod-product {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  padding: 10px 14px;
  margin: 12px 0;
  font-size: 12px;
  font-weight: 700;
  color: #166534;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ─── COLLECTION PAGE HEADER ─── */
.collection-hero,
.collection__title-wrapper {
  background: var(--iq-dark) !important;
  padding: 40px 20px !important;
  border-bottom: 3px solid var(--iq-gold) !important;
}
.collection-hero__title,
.collection__title {
  color: #fff !important;
  font-size: 28px !important;
  font-weight: 700 !important;
}

/* Filter Buttons */
.facets__label,
.facet-filters__label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
.facets__checkbox:checked ~ .facets__label,
.active-facets__button {
  background: var(--iq-gold) !important;
  color: var(--iq-dark) !important;
}

/* ─── TRUST BAR ─── */
.iq-trust-bar {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  background: var(--iq-dark);
  padding: 16px;
  gap: 12px;
}
.iq-trust-item {
  text-align: center;
  color: var(--iq-gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.iq-trust-item span {
  display: block;
  font-size: 22px;
  margin-bottom: 4px;
}

/* ─── FOOTER ─── */
.site-footer {
  background: var(--iq-dark) !important;
  border-top: 3px solid var(--iq-gold) !important;
  color: #8B8FA8 !important;
}
.site-footer a { color: #C9A84C !important; }
.site-footer a:hover { color: #fff !important; }
.site-footer__heading,
.footer__heading {
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid var(--iq-gold) !important;
  padding-bottom: 8px !important;
}

/* ─── MOBILE ─── */
@media (max-width: 749px) {
  .iq-hero h1 { font-size: 26px; }
  .product-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .product__title { font-size: 20px !important; }
} assets/custom.css
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(0, 50%, 0);
        transform: translate3d(0, 50%, 0);
    }

    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

.fadeInUp {
    animation-name: fadeInUp;
    animation-duration: .6s;
    animation-fill-mode: both;
}

@keyframes fadeInDown2 {
    from {
        -webkit-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
    }

    to {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes headerSlideDown {
    100% {
        transform: translateY(0);
    }
}

@keyframes loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes animateMenuOpen {
    0% {
        opacity: 0;
        transform: translateY(-1.5rem);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes appear-down {
    0% {
        opacity: 0;
        margin-top: -1rem;
    }

    100% {
        opacity: 1;
        margin-top: 0;
    }
}

@keyframes rotator {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(270deg);
    }
}

@keyframes dash {
    0% {
        stroke-dashoffset: 280;
    }

    50% {
        stroke-dashoffset: 75;
        transform: rotate(135deg);
    }

    100% {
        stroke-dashoffset: 280;
        transform: rotate(450deg);
    }
}

@-webkit-keyframes progress-bar-stripes {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 40px 0;
    }
}

@-moz-keyframes progress-bar-stripes {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 40px 0;
    }
}

@keyframes progress-bar-stripes {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 40px 0;
    }
}

@-webkit-keyframes shimmer {
    0% {
        background-position: -100% 0;
    }

    100% {
        background-position: 100% 0;
    }
}

@keyframes shimmer {
    0% {
        background-position: -1200px 0;
    }

    100% {
        background-position: 1200px 0;
    }
}

@-webkit-keyframes zoom-animation {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.5, 1.5, 1);
        transform: scale3d(1.5, 1.5, 1);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes zoom-animation {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }

    50% {
        -webkit-transform: scale3d(1.5, 1.5, 1);
        transform: scale3d(1.5, 1.5, 1);
    }

    to {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}

@keyframes box-shadow {

    0%,
    100% {
        -webkit-box-shadow: 0 0 0 0;
        -moz-box-shadow: 0 0 0 0;
        box-shadow: 0 0 0 0
    }

    50% {
        -webkit-box-shadow: 0 0 0 4px;
        -moz-box-shadow: 0 0 0 4px;
        box-shadow: 0 0 0 4px
    }
}

@keyframes dot-shadow {

    0%,
    100% {
        -webkit-box-shadow: 0 0 0 0 var(--dot-shadow-color);
        -moz-box-shadow: 0 0 0 0 var(--dot-shadow-color);
        box-shadow: 0 0 0 0 var(--dot-shadow-color);
    }

    50% {
        -webkit-box-shadow: 0 0 0 4px var(--dot-shadow-color);
        -moz-box-shadow: 0 0 0 4px var(--dot-shadow-color);
        box-shadow: 0 0 0 4px var(--dot-shadow-color);
    }
}

@keyframes animateDrawerOpen {
    @media screen and (max-width: 767px) {
        0% {
            opacity: 0;
            transform: translateX(100%);
        }

        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }

    @media screen and (min-width: 768px) {
        0% {
            opacity: 1;
            transform: translateX(100%);
        }

        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }
}

@keyframes spin-icon {
    0% {
        transform: translateY(-50%) rotate(0)
    }

    100% {
        transform: translateY(-50%) rotate(360deg)
    }
}

@keyframes halo-animateloader {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

@keyframes slowShow {
    0% {
        opacity: .01;
    }

    100% {
        opacity: 1;
    }
}

@keyframes prixClipFix {
    0% {
        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
    }

    25% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
    }

    50% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
    }

    75% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)
    }

    100% {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)
    }
}

@keyframes tilt-shaking {

    0%,
    18%,
    100% {
        transform: rotate(0)
    }

    2%,
    6%,
    10%,
    14% {
        transform: rotate(-2deg)
    }

    4%,
    8%,
    12%,
    16% {
        transform: rotate(2deg)
    }
}

@-webkit-keyframes tilt-shaking {

    0%,
    18%,
    100% {
        transform: rotate(0)
    }

    2%,
    6%,
    10%,
    14% {
        transform: rotate(-2deg)
    }

    4%,
    8%,
    12%,
    16% {
        transform: rotate(2deg)
    }
}

.an-tilt-shaking {
    animation: tilt-shaking 6s ease infinite;
    animation-delay: 5s;
    transform-origin: 50% 50%;
}

@-webkit-keyframes vertical-shaking {

    0%,
    18%,
    100% {
        transform: translate3d(0, 0, 0)
    }

    2%,
    6%,
    10%,
    14% {
        transform: translate3d(0, -2px, 0)
    }

    4%,
    8%,
    12%,
    16% {
        transform: translate3d(0, 2px, 0)
    }
}

@keyframes vertical-shaking {

    0%,
    18%,
    100% {
        transform: translate3d(0, 0, 0)
    }

    2%,
    6%,
    10%,
    14% {
        transform: translate3d(0, -2px, 0)
    }

    4%,
    8%,
    12%,
    16% {
        transform: translate3d(0, 2px, 0)
    }
}

.an-vertical-shaking {
    animation: vertical-shaking 6s ease infinite;
    animation-delay: 5s;
    transform-origin: 50% 50%;
}

@-webkit-keyframes horizontal-shaking {

    0%,
    18%,
    100% {
        transform: translate3d(0, 0, 0)
    }

    2%,
    6%,
    10%,
    14% {
        transform: translate3d(-5px, 0, 0)
    }

    4%,
    8%,
    12%,
    16% {
        transform: translate3d(5px, 0, 0)
    }
}

@keyframes horizontal-shaking {

    0%,
    18%,
    100% {
        transform: translate3d(0, 0, 0)
    }

    2%,
    6%,
    10%,
    14% {
        transform: translate3d(-5px, 0, 0)
    }

    4%,
    8%,
    12%,
    16% {
        transform: translate3d(5px, 0, 0)
    }
}

.an-horizontal-shaking {
    animation: horizontal-shaking 6s ease infinite;
    animation-delay: 5s;
    transform-origin: 50% 50%;
}

@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
        pointer-events: none;
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

@keyframes iconFadeLeft {
    0% {
        opacity: 0;
        transform: translate(-50%,-5px);
        pointer-events: none;
    }

    100% {
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
    }
}
@keyframes iconFadeRight {
    0% {
        opacity: 0;
        transform: translate(-50%,5px);
        pointer-events: none;
    }

    100% {
        opacity: 1;
        transform: translateX(0);
        pointer-events: auto;
    }
}

@keyframes scrollArrow {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
    50% {
        -webkit-transform: translateY(5px);
        transform: translateY(5px);
    }
    100% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
}

@keyframes slideUp {

    0%,
    50% {
        transform: translateY(100%);
        opacity: 0;
    }

    60%,
    100% {
        transform: translateY(0);
        opacity: 1;

    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        pointer-events: auto;
    }

    100% {
        opacity: 0;
        pointer-events: none;
    }
}

@-webkit-keyframes cursorInfinite {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(359.85deg);
        transform: rotate(359.85deg)
    }
}

@keyframes cursorInfinite {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    to {
        -webkit-transform: rotate(359.85deg);
        transform: rotate(359.85deg)
    }
}

@keyframes jelly {

    0%,
    100% {
        transform: scale(1, 1);
    }

    25% {
        transform: scale(0.9, 1.1);
    }

    50% {
        transform: scale(1.1, 0.9);
    }

    75% {
        transform: scale(0.95, 1.05);
    }
}

@keyframes lookbook-appear-down {
    0% {
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
}

@keyframes lookbook-disappear-up {
    0% {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    100% {
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
    }
}

@keyframes marquee {
    0% {
        transform: translate3d(0, 0, 0);
        visibility: visible;
    }

    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

.marquee-rtl {
    animation: marquee var(--timeScroll) infinite linear;
    animation-delay: 2s;
}

@keyframes marquee-ltr {
    0% {
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

.marquee-ltr {
    animation: marquee-ltr var(--timeScroll) infinite linear;
    animation-delay: 2s;
}

@keyframes widthAnimation {
    0% {
        max-width: 0;
    }
    100% {
        max-width: 100%;
    }
}

@keyframes moveUpDown {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(50px);
    }
}

@keyframes zoom-icon {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}