/** Shopify CDN: Minification failed

Line 16:0 Unexpected "{"
Line 16:1 Expected identifier but found "%"
Line 17:0 All "@import" rules must come first
Line 184:0 Unexpected "{"
Line 184:1 Expected identifier but found "%"
Line 186:0 Unexpected "<"
Line 189:5 Expected identifier but found "%"
Line 190:6 Unexpected "{"
Line 190:7 Unexpected "{"
Line 190:16 Expected ":"
... and 15 more hidden warnings

**/
{% stylesheet %}
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Inter:wght@300;400;500;600&display=swap');

.sb-hero{
  position:relative;
  min-height:92vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#111;
}
.sb-slider{
    width:100%;
    height:92vh;
    position:relative;
    overflow:hidden;
}

.sb-slide{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    background-size:cover;
    background-position:center;
    opacity:0;
    transition:opacity .8s;
}

.sb-slide.active{
    opacity:1;
    z-index:2;
}

.sb-hero__bg{
  position:right center;
  inset:0;
}

.sb-hero__bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.sb-hero__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
      90deg,
      rgba(0,0,0,.68) 0%,
      rgba(0,0,0,.45) 40%,
      rgba(0,0,0,.15) 100%
  );
}

.sb-hero__inner{
  position:relative;
  z-index:2;
  max-width:1400px;
  margin:0 auto;
  width:100%;
  padding:0 80px;
}

.sb-content{
    width:520px;
    padding:20px;
    margin-right:640px;
    transform: translateY(-60px);
}


.sb-title{
  margin:0;
  font-family:'Cormorant Garamond',serif;
  font-size:96px;
  line-height:.88;
  font-weight:300;
  color:#fff;
  letter-spacing:-2px;
}

.sb-title span{
  display:block;
  color:#C8A05A;
  font-style:italic;
  font-weight:400;
}

.sb-subtitle{
    display:flex;
    align-items:center;
    gap:18px;
    margin:22px 0 28px;
    font-family:'Cormorant Garamond',serif;
    font-size:30px;
    font-weight:300;
    letter-spacing:0.02em;
    color:#F4EFE3;
}

.sb-subtitle:before,
.sb-subtitle:after{
    content:"";
    width:60px;
    height:1px;
    background:#C8A05A;
}

.sb-subtitle::before,
.sb-subtitle::after{
    content:"";
    width:55px;
    height:1px;
    background:#D7B46A;
    opacity:.9;
}

.sb-features{
    color:#E8D6AE;
    font-family:'Inter',sans-serif;
    font-size:17px;
    font-weight:400;
    letter-spacing:.02em;
    margin-bottom:42px;
}

.sb-text{
  margin-top:18px;
  font-family:'Inter',sans-serif;
  color:#F5F2EA;
  font-size:16px;
  line-height:1.9;
  letter-spacing:.06em;
}

.sb-btn{
  display:inline-block;
  margin-top:40px;
  padding:18px 48px;
  background:#c8a35c;
  color:#fff;
  text-decoration:none;
  font-family:'Inter',sans-serif;
  font-size:14px;
  letter-spacing:.18em;
  text-transform:uppercase;
  transition:.3s;
}

.sb-btn:hover{
  background:#b48d46;
}

.sb-text{
    color:#F8F5EF !important;
    opacity:1 !important;
    text-shadow:0 1px 2px rgba(0,0,0,.35);
}

.sb-title .sb-gold{
    color:#C8A05A !important;
    display:block;
    font-style:italic;
}

{% endstylesheet %}

<section class="sb-hero">

  <div class="sb-hero__bg">
    {% if section.settings.image != blank %}
      {{ section.settings.image | image_url: width: 2400 | image_tag:
        loading: 'eager',
        widths: '1200,1600,2000,2400',
        class: 'sb-bg-image',
        alt: section.settings.heading }}
    {% endif %}
    <div class="sb-hero__overlay"></div>
  </div>

  <div class="sb-hero__inner">
    <div class="sb-content">

      <h1 class="sb-title">
        Luxury Fur
        <span>Accessories</span>
      </h1>

      <div class="sb-subtitle">
        Handmade in Canada
      </div>

      <div class="sb-text">
        Genuine Fur • Premium Quality • Worldwide Shipping
      </div>

      {% if section.settings.button_link != blank %}
        <a class="sb-btn" href="{{ section.settings.button_link }}">
          {{ section.settings.button_text }}
        </a>
      {% endif %}

    </div>
  </div>

</section>

{% schema %}
{
  "name": "SB Hero Banner",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "type": "image_picker",
      "id": "image",
      "label": "Background image"
    },
    {
      "type": "text",
      "id": "heading",
      "label": "Heading",
      "default": "Luxury Fur Accessories"
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button text",
      "default": "SHOP NOW"
    },
    {
      "type": "url",
      "id": "button_link",
      "label": "Button link"
    }
  ],
  "presets": [
    {
      "name": "SB Hero Banner"
    }
  ]
}
{% endschema %}

/* ---------- Hero Slider ---------- */

.sb-slider{
    position:relative;
    width:100%;
    height:92vh;
    overflow:hidden;
}

.sb-slide{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    opacity:0;
    transition:opacity .8s ease;
}

.sb-slide.active{
    opacity:1;
    z-index:2;
}

.sb-slide .page-width{
    width:100%;
}

.sb-slide::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.28);
}

.sb-slide .sb-content{
    position:relative;
    z-index:2;
}

/* ---------- Slider Arrows ---------- */

.sb-arrows{
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:20;
}

.sb-prev,
.sb-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:54px;
    height:54px;
    border:none;
    border-radius:50%;
    background:rgba(20,20,20,.45);
    color:#E5C27A;
    font-size:28px;
    cursor:pointer;
    transition:.3s;
    pointer-events:auto;
}

.sb-prev{
    left:30px;
}

.sb-next{
    right:30px;
}

.sb-prev:hover,
.sb-next:hover{
    background:rgba(20,20,20,.75);
    color:#fff;
}

/* ---------- Slider Dots ---------- */

.sb-dots{
    position:absolute;
    left:50%;
    bottom:28px;
    transform:translateX(-50%);
    display:flex;
    gap:12px;
    z-index:30;
}

.sb-dot{
    width:12px;
    height:12px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.8);
    background:transparent;
    cursor:pointer;
    transition:.3s;
}

.sb-dot.active{
    background:#D7B46A;
    border-color:#D7B46A;
}

.sb-dot:hover{
    border-color:#D7B46A;
}