/** Shopify CDN: Minification failed

Line 602:9 Expected identifier but found whitespace
Line 602:10 Unexpected "1px"
Line 609:0 Expected "}" to go with "{"

**/
/* ============================================
   LOOPCUT CUSTOM STYLES FOR SHOPIFY
   Premium Handcrafted Rugs Theme
   ============================================ */

/* ============================================
   1. CSS CUSTOM PROPERTIES
   ============================================ */
:root {
  /* Loopcut Luxury Light Cream Palette */
  --loopcut-bg: #FDFCF9; /* pristine cream */
  --loopcut-bg-alt: #F4F1EA; /* warm secondary bg */
  --loopcut-bg-dark: #231F1C; /* deep charcoal/brown for high contrast sections */
  --loopcut-bg-card: #FFFFFF;
  
  --loopcut-text: #1C1917;
  --loopcut-text-secondary: #5C544E;
  --loopcut-text-muted: #9A9188;
  --loopcut-text-inverse: #FFFFFF;
  
  --loopcut-accent: #A87C51; /* sophisticated gold/terracotta */
  --loopcut-accent-dark: #87623E;
  --loopcut-accent-light: #D1AD8A;
  
  --loopcut-border: #E6E2DA;
  
  /* Typography */
  --loopcut-font-display: 'Playfair Display', Georgia, serif;
  --loopcut-font-body: 'DM Sans', -apple-system, sans-serif;
  --loopcut-font-accent: 'Cormorant Garamond', Georgia, serif;

  /* Type scale */
  --lp-text-xs: 0.6875rem;
  --lp-text-sm: 0.8125rem;
  --lp-text-sm2: 0.875rem;
  --lp-text-base: 0.9375rem;
  --lp-text-md: 1rem;
  --lp-text-body: 1.0625rem;
  --lp-text-body-lg: 1.1875rem;
  --lp-text-lg: 1.25rem;
  --lp-text-xl: 1.375rem;
  --lp-text-2xl: 1.625rem;
  --lp-heading-sm: 2rem;
  --lp-heading-md: 2.75rem;
  --lp-heading-hero: clamp(3.5rem, 6vw, 5.5rem);
  --lp-heading-hero-mobile: clamp(2.25rem, 8vw, 3.25rem);
  
  /* Extra scale */
  --lp-text-2xs: 0.5625rem;
  --lp-text-xxs: 0.625rem;
  --lp-text-xsm: 0.75rem;
  --lp-text-body-xl: 1.5rem;
  --lp-text-body-2xl: 1.75rem;
  --lp-heading-xs: 2.25rem;

  /* Spacing */
  --loopcut-space-xs: 8px;
  --loopcut-space-sm: 16px;
  --loopcut-space-md: 24px;
  --loopcut-space-lg: 48px;
  --loopcut-space-xl: 80px;
  --loopcut-space-2xl: 120px;
  
  /* Radius */
  --loopcut-radius-sm: 4px;
  --loopcut-radius-md: 8px;
  --loopcut-radius-lg: 16px;
  --loopcut-radius-xl: 24px;
  
  /* Shadows - Smooth & Premium */
  --loopcut-shadow-sm: 0 2px 8px rgba(28, 25, 23, 0.04), 0 1px 2px rgba(28, 25, 23, 0.02);
  --loopcut-shadow-md: 0 8px 24px rgba(28, 25, 23, 0.06), 0 2px 8px rgba(28, 25, 23, 0.04);
  --loopcut-shadow-lg: 0 16px 48px rgba(28, 25, 23, 0.08), 0 8px 24px rgba(28, 25, 23, 0.04);
  
  /* Transitions */
  --loopcut-ease: cubic-bezier(0.33, 1, 0.68, 1);
  --loopcut-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --loopcut-duration: 400ms;
}

/* ============================================
   2. BASE OVERRIDES
   ============================================ */
body {
  background-color: var(--loopcut-bg) !important;
  color: var(--loopcut-text) !important;
  font-family: var(--loopcut-font-body) !important;
}

h1, h2, h3, h4, h5, h6,
.h0, .h1, .h2, .h3, .h4, .h5 {
  font-family: var(--loopcut-font-display) !important;
  color: var(--loopcut-text) !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
}

/* ============================================
   3. HEADER STYLES
   ============================================ */
.header-wrapper {
  background-color: transparent !important;
  border-bottom: none !important;
}

.header-wrapper.scrolled-past-header,
.header-wrapper--border-bottom {
  background-color: rgba(250, 250, 248, 0.95) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--loopcut-border) !important;
}

.header__heading-logo-image {
  max-width: 160px !important;
}

.header__menu-item {
  font-family: var(--loopcut-font-body) !important;
  font-size: var(--lp-text-base) !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: var(--loopcut-text) !important;
}

.header__menu-item:hover {
  color: var(--loopcut-accent) !important;
}

/* ============================================
   4. HERO / IMAGE BANNER
   ============================================ */
.banner {
  min-height: 90vh !important;
}

.banner__box {
  background: transparent !important;
  max-width: 700px !important;
}

.banner__heading {
  font-family: var(--loopcut-font-display) !important;
  font-size: var(--lp-heading-hero) !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  color: var(--loopcut-text-inverse) !important;
  text-shadow: 0 2px 40px rgba(0,0,0,0.3) !important;
}

.banner__text {
  font-size: var(--lp-text-lg) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  max-width: 500px !important;
}

/* Hero Button Styling */
.banner .button--secondary {
  background: var(--loopcut-accent) !important;
  border-color: var(--loopcut-accent) !important;
  color: var(--loopcut-text-inverse) !important;
  font-family: var(--loopcut-font-body) !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 18px 36px !important;
  font-size: var(--lp-text-sm) !important;
  border-radius: var(--loopcut-radius-sm) !important;
  transition: all var(--loopcut-duration) var(--loopcut-ease) !important;
}

.banner .button--secondary:hover {
  background: var(--loopcut-accent-dark) !important;
  border-color: var(--loopcut-accent-dark) !important;
  transform: translateY(-2px) !important;
}

/* ============================================
   5. SECTION HEADERS
   ============================================ */
.section-header__title,
.title {
  font-family: var(--loopcut-font-display) !important;
  font-weight: 500 !important;
}

.collection__title {
  font-family: var(--loopcut-font-display) !important;
  font-size: var(--lp-heading-md) !important;
}

/* ============================================
   6. PRODUCT CARDS
   ============================================ */
.card-wrapper {
  background: var(--loopcut-bg-card) !important;
  border-radius: var(--loopcut-radius-md) !important;
  box-shadow: var(--loopcut-shadow-sm) !important;
  transition: all var(--loopcut-duration) var(--loopcut-ease) !important;
  overflow: hidden !important;
}

.card-wrapper:hover {
  transform: translateY(-8px) !important;
  box-shadow: var(--loopcut-shadow-lg) !important;
}

.card__heading {
  font-family: var(--loopcut-font-display) !important;
  font-size: var(--lp-text-body-lg) !important;
  font-weight: 500 !important;
  color: var(--loopcut-text) !important;
  line-height: 1.35 !important;
}

.card__heading a:hover {
  color: var(--loopcut-accent) !important;
}

.price-item {
  font-size: var(--lp-text-body) !important;
  font-weight: 600 !important;
  color: var(--loopcut-text) !important;
}

.price--on-sale .price-item--regular {
  color: var(--loopcut-text-muted) !important;
}

/* Sale Badge */
.badge--sale,
.card__badge .badge {
  background: var(--loopcut-accent) !important;
  color: var(--loopcut-text-inverse) !important;
  font-size: var(--lp-text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border-radius: var(--loopcut-radius-sm) !important;
}

/* ============================================
   7. BUTTONS
   ============================================ */
.button,
.shopify-challenge__button {
  font-family: var(--loopcut-font-body) !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border-radius: var(--loopcut-radius-sm) !important;
  transition: all var(--loopcut-duration) var(--loopcut-ease) !important;
}

.button--primary {
  background: var(--loopcut-accent) !important;
  border-color: var(--loopcut-accent) !important;
  color: var(--loopcut-text-inverse) !important;
}

.button--primary:hover {
  background: var(--loopcut-accent-dark) !important;
  border-color: var(--loopcut-accent-dark) !important;
}

.button--secondary {
  background: transparent !important;
  border: 2px solid var(--loopcut-text) !important;
  color: var(--loopcut-text) !important;
}

.button--secondary:hover {
  background: var(--loopcut-text) !important;
  color: var(--loopcut-text-inverse) !important;
}

/* ============================================
   8. MULTICOLUMN (TRUST BAR)
   ============================================ */
.multicolumn {
  background: var(--loopcut-bg-alt) !important;
  padding: var(--loopcut-space-xl) 0 !important;
}

.multicolumn-card {
  background: var(--loopcut-bg-card) !important;
  border-radius: var(--loopcut-radius-md) !important;
  box-shadow: var(--loopcut-shadow-sm) !important;
  padding: var(--loopcut-space-md) !important;
  text-align: center !important;
}

.multicolumn-card__info h3 {
  font-family: var(--loopcut-font-display) !important;
  font-size: var(--lp-text-xl) !important;
  color: var(--loopcut-text) !important;
  margin-bottom: 8px !important;
}

.multicolumn-card__info p {
  color: var(--loopcut-text-secondary) !important;
  font-size: var(--lp-text-md) !important;
}

/* ============================================
   9. IMAGE WITH TEXT (STORY SECTION)
   ============================================ */
.image-with-text {
  padding: var(--loopcut-space-xl) 0 !important;
}

.image-with-text__content {
  padding: var(--loopcut-space-lg) !important;
}

.image-with-text__heading {
  font-family: var(--loopcut-font-display) !important;
  font-size: var(--lp-heading-md) !important;
  color: var(--loopcut-text) !important;
}

.image-with-text__text {
  font-size: var(--lp-text-body-lg) !important;
  line-height: 1.85 !important;
  color: var(--loopcut-text-secondary) !important;
}

.image-with-text .media {
  border-radius: var(--loopcut-radius-lg) !important;
  box-shadow: var(--loopcut-shadow-lg) !important;
  overflow: hidden !important;
}

/* ============================================
   10. NEWSLETTER
   ============================================ */
.newsletter {
  background: var(--loopcut-bg-dark) !important;
  padding: var(--loopcut-space-xl) 0 !important;
}

.newsletter__heading {
  font-family: var(--loopcut-font-display) !important;
  color: var(--loopcut-text-inverse) !important;
}

.newsletter__subheading {
  color: rgba(255, 255, 255, 0.7) !important;
}

.newsletter .field__input {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: var(--loopcut-text-inverse) !important;
  border-radius: var(--loopcut-radius-sm) !important;
}

.newsletter .field__input::placeholder {
  color: rgba(255, 255, 255, 0.5) !important;
}

.newsletter .button--primary {
  background: var(--loopcut-accent) !important;
  border-color: var(--loopcut-accent) !important;
}

/* ============================================
   11. FOOTER
   ============================================ */
.footer {
  background: var(--loopcut-bg-dark) !important;
  padding: var(--loopcut-space-xl) 0 var(--loopcut-space-md) !important;
  color: var(--loopcut-text-inverse) !important;
}

.footer__content-top {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.footer-block__heading {
  font-family: var(--loopcut-font-body) !important;
  font-size: var(--lp-text-sm2) !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--loopcut-text-inverse) !important;
}

.footer-block__details-content a,
.footer-block__details-content p {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: var(--lp-text-md) !important;
}

.footer-block__details-content a:hover {
  color: var(--loopcut-accent-light) !important;
}

.footer__copyright {
  color: rgba(255, 255, 255, 0.4) !important;
  font-size: var(--lp-text-sm2) !important;
}

/* Social Icons */
.footer .list-social__link {
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all var(--loopcut-duration) !important;
}

.footer .list-social__link:hover {
  background: var(--loopcut-accent) !important;
}

.footer .list-social__link svg {
  fill: rgba(255, 255, 255, 0.7) !important;
}

.footer .list-social__link:hover svg {
  fill: var(--loopcut-text-inverse) !important;
}

/* ============================================
   12. PRODUCT PAGE
   ============================================ */
.product__title {
  font-family: var(--loopcut-font-display) !important;
  font-size: var(--lp-heading-md) !important;
  font-weight: 500 !important;
}

.product__text {
  color: var(--loopcut-text-secondary) !important;
  font-size: var(--lp-text-body) !important;
  line-height: 1.8 !important;
}

.product-form__submit {
  background: var(--loopcut-accent) !important;
  border-color: var(--loopcut-accent) !important;
  font-family: var(--loopcut-font-body) !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  padding: 18px 36px !important;
}

.product-form__submit:hover {
  background: var(--loopcut-accent-dark) !important;
  border-color: var(--loopcut-accent-dark) !important;
}

/* Variant Pills */
.variant-picker label,
.variant-input .field__label {
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-size: var(--lp-text-sm) !important;
}

/* ============================================
   13. COLLECTION PAGE
   ============================================ */
.collection-hero__title {
  font-family: var(--loopcut-font-display) !important;
}

.facets__main {
  color: var(--loopcut-text) !important;
}

/* ============================================
   14. CART
   ============================================ */
.cart__heading {
  font-family: var(--loopcut-font-display) !important;
}

.cart-item__name a {
  font-family: var(--loopcut-font-display) !important;
  color: var(--loopcut-text) !important;
}

/* ============================================
   15. ANIMATIONS
   ============================================ */
@keyframes loopcut-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   16. ALL PAGES – main sections, blog, account, search
   ============================================ */
.main-page .title,
.main-article .article__title,
.main-blog .title {
  font-family: var(--loopcut-font-display) !important;
  font-size: var(--lp-heading-md) !important;
  font-weight: 500 !important;
}

.main-collection-banner .title {
  font-family: var(--loopcut-font-display) !important;
}

.main-collection-product-grid .card__heading,
.main-collection-product-grid .price-item {
  font-family: var(--loopcut-font-display) !important;
}

.main-collection-product-grid .price-item {
  font-size: var(--lp-text-body) !important;
}

.main-search .title {
  font-family: var(--loopcut-font-display) !important;
}

.main-account .customer h1,
.main-addresses .customer h1,
.main-order .customer h1,
.main-login .customer h1,
.main-register .customer h1,
.main-reset-password .customer h1,
.main-activate-account .customer h1 {
  font-family: var(--loopcut-font-display) !important;
  font-size: var(--lp-heading-sm) !important;
}

.main-account .customer,
.main-addresses .customer,
.main-order .customer,
.main-login .customer,
.main-register .customer {
  font-family: var(--loopcut-font-body) !important;
}

.article-card__title {
  font-family: var(--loopcut-font-display) !important;
  font-size: var(--lp-text-body-lg) !important;
}

.predictive-search__item-heading {
  font-family: var(--loopcut-font-display) !important;
}

/* ============================================
   17. RESPONSIVE
   ============================================ */
@media (max-width: 989px) {
  .banner__heading {
    font-size: var(--lp-heading-hero-mobile) !important;
  }
  
  .banner {
    min-height: 70vh !important;
  }
}

@media (max-width: 749px) {
  .multicolumn-card {
    margin-bottom: var(--loopcut-space-sm) !important;
  }
  
  .image-with-text__heading {
    font-size: var(--lp-heading-sm) !important;
  }
}
/* Styles Moved to loopcut-product-card.css */
  border: 1px solid rgba(0,0,0,0.04);
}

.loopcut-product-card:hover {
  transform: translateY(-12px);
/* Premium Cards handled by loopcut-product-card.css */