/** Shopify CDN: Minification failed

Line 390:0 Unexpected "{"
Line 390:1 Expected identifier but found "%"
Line 392:0 Unexpected "{"
Line 392:1 Expected identifier but found "%"
Line 393:0 Unexpected "{"
Line 394:2 Expected identifier but found "\"name\""

**/
.custom-luxury-slider-section {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .luxury-slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
  }

  .luxury-slider-track {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-areas: "slide";
    align-items: stretch;
    outline: none;
  }

  /* Slide Items Stacked via CSS Grid for Butter-Smooth Fade / Transitions */
  .luxury-slide {
    grid-area: slide;
    position: relative;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0.8s;
    pointer-events: none;
    box-sizing: border-box;
  }

  .luxury-slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
    pointer-events: auto;
  }

  /* Responsive Heights (Mobile <750px) */
  @media screen and (max-width: 749px) {
    .luxury-slide {
      height: var(--slider-height-mobile, 480px);
      min-height: 240px;
    }
  }

  /* Responsive Heights (Desktop ≥750px) */
  @media screen and (min-width: 750px) {
    .luxury-slide {
      height: var(--slider-height-desktop, 620px);
    }
  }

  /* Media Container */
  .luxury-slide__media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
  }

  .luxury-slide__media picture,
  .luxury-slide__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1);
    transition: transform 6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .luxury-slide.is-active .luxury-slide__image {
    transform: scale(1.03);
  }

  /* Full Slide Link for Image-Only Mode */
  .luxury-slide__full-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
  }

  /* Dark / Custom Overlay */
  .luxury-slide__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
  }

  /* Editorial Content Wrapper */
  .luxury-slide__content-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    display: flex;
    padding: clamp(1.5rem, 5vw, 4rem);
    box-sizing: border-box;
  }

  .luxury-slide__content {
    max-width: 650px;
    width: 100%;
    display: flex;
    flex-direction: column;
    color: #ffffff;
  }

  /* Alignment: Desktop */
  @media screen and (min-width: 750px) {
    .luxury-slide__content-wrapper--h-left { justify-content: flex-start; }
    .luxury-slide__content-wrapper--h-center { justify-content: center; }
    .luxury-slide__content-wrapper--h-right { justify-content: flex-end; }

    .luxury-slide__content-wrapper--v-top { align-items: flex-start; }
    .luxury-slide__content-wrapper--v-center { align-items: center; }
    .luxury-slide__content-wrapper--v-bottom { align-items: flex-end; }

    .luxury-slide__content--align-left { text-align: left; align-items: flex-start; }
    .luxury-slide__content--align-center { text-align: center; align-items: center; }
    .luxury-slide__content--align-right { text-align: right; align-items: flex-end; }
  }

  /* Alignment: Mobile */
  @media screen and (max-width: 749px) {
    .luxury-slide__content-wrapper--mob-h-left { justify-content: flex-start; }
    .luxury-slide__content-wrapper--mob-h-center { justify-content: center; }
    .luxury-slide__content-wrapper--mob-h-right { justify-content: flex-end; }

    .luxury-slide__content-wrapper--mob-v-top { align-items: flex-start; }
    .luxury-slide__content-wrapper--mob-v-center { align-items: center; }
    .luxury-slide__content-wrapper--mob-v-bottom { align-items: flex-end; }

    .luxury-slide__content--mob-align-left { text-align: left; align-items: flex-start; }
    .luxury-slide__content--mob-align-center { text-align: center; align-items: center; }
    .luxury-slide__content--mob-align-right { text-align: right; align-items: flex-end; }
  }

  /* Typography */
  .luxury-slide__eyebrow {
    margin: 0 0 0.8rem;
    font-size: var(--slide-eyebrow-size, 13px);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.9;
  }

  .luxury-slide__heading {
    margin: 0 0 1rem;
    font-size: var(--slide-heading-size, 44px);
    font-family: var(--font-heading-family, serif);
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.15;
    color: inherit;
  }

  @media screen and (max-width: 749px) {
    .luxury-slide__heading {
      font-size: clamp(22px, calc(var(--slide-heading-size, 44px) * 0.7), 34px);
    }
  }

  .luxury-slide__description {
    margin: 0 0 2rem;
    font-size: var(--slide-desc-size, 16px);
    line-height: 1.6;
    opacity: 0.88;
  }

  .luxury-slide__description p {
    margin: 0;
  }

  /* Buttons */
  .luxury-slide__buttons {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 1rem;
  }

  .luxury-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 2.2rem;
    border-radius: 9999px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-sizing: border-box;
  }

  .luxury-btn--primary {
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #ffffff;
  }
  .luxury-btn--primary:hover {
    background-color: #e5e5e5;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  }

  .luxury-btn--secondary {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .luxury-btn--secondary:hover {
    background-color: rgba(255, 255, 255, 0.3);
    border-color: #ffffff;
    transform: translateY(-2px);
  }

  /* ======================================================= */
  /* LUXURY NAVIGATION ARROWS                                */
  /* ======================================================= */
  .luxury-slider__nav-arrows {
    position: absolute;
    z-index: 10;
    display: flex;
    gap: 0.8rem;
    pointer-events: none;
  }

  /* Floating Sides */
  .luxury-slider__nav-arrows--sides {
    top: 50%;
    left: clamp(1rem, 3vw, 2.5rem);
    right: clamp(1rem, 3vw, 2.5rem);
    transform: translateY(-50%);
    justify-content: space-between;
  }

  /* Bottom Corners */
  .luxury-slider__nav-arrows--bottom_right {
    bottom: clamp(1.5rem, 4vw, 3rem);
    right: clamp(1.5rem, 4vw, 3rem);
  }

  .luxury-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background-color: var(--arrow-bg, rgba(0, 0, 0, 0.4));
    color: var(--arrow-color, #ffffff);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    pointer-events: auto;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .luxury-arrow:hover {
    background-color: rgba(255, 255, 255, 0.9);
    color: #000000;
    border-color: #ffffff;
    transform: scale(1.08);
  }

  .luxury-arrow .arrow-svg {
    width: 20px;
    height: 20px;
  }

  /* Hover Only Visibility */
  .luxury-slider-container--nav-hover .luxury-arrow {
    opacity: 0;
    transform: scale(0.9);
  }
  .luxury-slider-container--nav-hover:hover .luxury-arrow {
    opacity: 1;
    transform: scale(1);
  }

  /* ======================================================= */
  /* LUXURY PAGINATION INDICATORS                            */
  /* ======================================================= */
  .luxury-slider__pagination {
    position: absolute;
    bottom: clamp(1.2rem, 3vw, 2.5rem);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }

  .luxury-slider__pagination--center {
    left: 50%;
    transform: translateX(-50%);
  }
  .luxury-slider__pagination--left {
    left: clamp(1.5rem, 4vw, 3.5rem);
  }
  .luxury-slider__pagination--right {
    right: clamp(1.5rem, 4vw, 3.5rem);
  }

  .luxury-pagination-item {
    background: transparent;
    border: none;
    padding: 6px 3px;
    cursor: pointer;
  }

  /* Luxury Dashes / Progress Style (Chanel / Tom Ford style) */
  .luxury-slider__pagination--dashes .luxury-pagination-indicator {
    display: block;
    width: 28px;
    height: 3px;
    background-color: rgba(255, 255, 255, 0.35);
    border-radius: 2px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  .luxury-slider__pagination--dashes .luxury-pagination-item.is-active .luxury-pagination-indicator {
    width: 50px;
    background-color: var(--dot-color, #ffffff);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
  }

  /* Glass Dots Style */
  .luxury-slider__pagination--dots .luxury-pagination-indicator {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
  }
  .luxury-slider__pagination--dots .luxury-pagination-item.is-active .luxury-pagination-indicator {
    transform: scale(1.4);
    background-color: #ffffff;
    border-color: #ffffff;
  }

  /* Numeric Counter */
  .luxury-pagination__counter {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1rem;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
  }
  .luxury-pagination__counter .divider { opacity: 0.5; }
  .luxury-pagination__counter .total-slides { opacity: 0.7; }
{% endstylesheet %}

{% schema %}
{
  "name": "Luxury Banner Slider",
  "tag": "section",
  "class": "section-luxury-banner-slider",
  "settings": [
    {
      "type": "header",
      "content": "1. Banner Dimensions (Slider Controls)"
    },
    {
      "type": "select",
      "id": "width",
      "label": "Section width",
      "options": [
        { "value": "full-width", "label": "Full width" },
        { "value": "page-width", "label": "Page width" }
      ],
      "default": "full-width"
    },
    {
      "type": "range",
      "id": "border_radius",
      "label": "Slideshow corner radius",
      "min": 0,
      "max": 40,
      "step": 2,
      "unit": "px",
      "default": 0,
      "info": "Adds rounded corners to the slideshow banner (recommended when using page-width)."
    },
    {
      "type": "select",
      "id": "desktop_height_mode",
      "label": "Desktop height mode",
      "options": [
        { "value": "custom", "label": "Custom Slider Height (px)" },
        { "value": "fullscreen", "label": "Full screen (100vh)" }
      ],
      "default": "custom"
    },
    {
      "type": "range",
      "id": "desktop_height",
      "label": "Desktop banner height",
      "min": 300,
      "max": 950,
      "step": 10,
      "unit": "px",
      "default": 620
    },
    {
      "type": "select",
      "id": "mobile_height_mode",
      "label": "Mobile height mode",
      "options": [
        { "value": "custom", "label": "Custom Slider Height (px)" },
        { "value": "fullscreen", "label": "Full screen (100vh)" }
      ],
      "default": "custom"
    },
    {
      "type": "range",
      "id": "mobile_height",
      "label": "Mobile banner height",
      "min": 200,
      "max": 750,
      "step": 10,
      "unit": "px",
      "default": 480
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Section background color"
    },
    {
      "type": "header",
      "content": "2. Navigation & Arrows"
    },
    {
      "type": "checkbox",
      "id": "show_arrows",
      "label": "Show navigation arrows",
      "default": true
    },
    {
      "type": "select",
      "id": "arrow_position",
      "label": "Arrow position",
      "options": [
        { "value": "sides", "label": "Floating Sides (Center)" },
        { "value": "bottom_right", "label": "Bottom Right" }
      ],
      "default": "sides"
    },
    {
      "type": "select",
      "id": "arrow_visibility",
      "label": "Arrow visibility",
      "options": [
        { "value": "always", "label": "Always Visible" },
        { "value": "hover", "label": "On Hover Only" }
      ],
      "default": "always"
    },
    {
      "type": "color",
      "id": "arrow_color",
      "label": "Arrow icon color",
      "default": "#ffffff"
    },
    {
      "type": "color",
      "id": "arrow_bg",
      "label": "Arrow circle background",
      "default": "rgba(0,0,0,0.35)"
    },
    {
      "type": "header",
      "content": "3. Pagination Indicators"
    },
    {
      "type": "select",
      "id": "pagination_style",
      "label": "Pagination style",
      "options": [
        { "value": "dashes", "label": "Luxury Dashes / Progress Line" },
        { "value": "dots", "label": "Glass Dots" },
        { "value": "counter", "label": "Numeric Counter (01 / 03)" },
        { "value": "none", "label": "None (Hidden)" }
      ],
      "default": "dashes"
    },
    {
      "type": "select",
      "id": "pagination_position",
      "label": "Pagination position",
      "options": [
        { "value": "center", "label": "Bottom Center" },
        { "value": "left", "label": "Bottom Left" },
        { "value": "right", "label": "Bottom Right" }
      ],
      "default": "center"
    },
    {
      "type": "color",
      "id": "pagination_color",
      "label": "Active indicator color",
      "default": "#ffffff"
    },
    {
      "type": "header",
      "content": "4. Autoplay Settings"
    },
    {
      "type": "checkbox",
      "id": "autoplay",
      "label": "Enable autoplay",
      "default": true
    },
    {
      "type": "range",
      "id": "autoplay_speed",
      "label": "Slide transition speed",
      "min": 3,
      "max": 12,
      "step": 1,
      "unit": "s",
      "default": 5
    },
    {
      "type": "header",
      "content": "5. Section Padding"
    },
    {
      "type": "range",
      "id": "padding-block-start",
      "label": "Top padding",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "default": 0
    },
    {
      "type": "range",
      "id": "padding-block-end",
      "label": "Bottom padding",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "default": 0
    }
  ],
  "blocks": [
    {
      "type": "slide",
      "name": "Slide",
      "settings": [
        {
          "type": "header",
          "content": "Media"
        },
        {
          "type": "image_picker",
          "id": "desktop_image",
          "label": "Desktop banner image"
        },
        {
          "type": "image_picker",
          "id": "mobile_image",
          "label": "Mobile banner image",
          "info": "Optional. Falls back to desktop image if left blank."
        },
        {
          "type": "url",
          "id": "slide_link",
          "label": "Slide link",
          "info": "Used when Image-Only Mode is enabled to make entire slide clickable."
        },
        {
          "type": "header",
          "content": "Mode"
        },
        {
          "type": "checkbox",
          "id": "image_only_mode",
          "label": "Enable Image-Only Mode",
          "info": "If checked, all rich text, buttons, and overlays will be hidden (perfect for pre-designed banners).",
          "default": false
        },
        {
          "type": "header",
          "content": "Content & Typography"
        },
        {
          "type": "color",
          "id": "background_color",
          "label": "Text color scheme basis",
          "placeholder": "t:settings.default"
        },
        {
          "type": "color",
          "id": "overlay_color",
          "label": "Overlay tint color",
          "default": "#000000"
        },
        {
          "type": "range",
          "id": "overlay_opacity",
          "label": "Overlay tint opacity",
          "min": 0,
          "max": 90,
          "step": 5,
          "unit": "%",
          "default": 15
        },
        {
          "type": "text",
          "id": "eyebrow",
          "label": "Eyebrow tag",
          "default": "Luxury Perfumery"
        },
        {
          "type": "range",
          "id": "eyebrow_font_size",
          "label": "Eyebrow font size (px)",
          "min": 10,
          "max": 22,
          "step": 1,
          "unit": "px",
          "default": 13
        },
        {
          "type": "text",
          "id": "heading",
          "label": "Heading",
          "default": "Discover Your Signature Scent"
        },
        {
          "type": "range",
          "id": "heading_font_size",
          "label": "Heading font size (px)",
          "min": 18,
          "max": 72,
          "step": 1,
          "unit": "px",
          "default": 44
        },
        {
          "type": "richtext",
          "id": "description",
          "label": "Description",
          "default": "<p>100% authentic luxury fragrances from the world's most celebrated perfume houses.</p>"
        },
        {
          "type": "range",
          "id": "description_font_size",
          "label": "Description font size (px)",
          "min": 12,
          "max": 28,
          "step": 1,
          "unit": "px",
          "default": 16
        },
        {
          "type": "text",
          "id": "button_label",
          "label": "Primary button label",
          "default": "Shop Collection"
        },
        {
          "type": "url",
          "id": "button_link",
          "label": "Primary button link"
        },
        {
          "type": "text",
          "id": "secondary_button_label",
          "label": "Secondary button label",
          "default": "Explore Brands"
        },
        {
          "type": "url",
          "id": "secondary_button_link",
          "label": "Secondary button link"
        },
        {
          "type": "header",
          "content": "Desktop Alignment"
        },
        {
          "type": "select",
          "id": "desktop_horizontal_position",
          "label": "Horizontal alignment",
          "options": [
            { "value": "left", "label": "Left" },
            { "value": "center", "label": "Center" },
            { "value": "right", "label": "Right" }
          ],
          "default": "left"
        },
        {
          "type": "select",
          "id": "desktop_vertical_position",
          "label": "Vertical alignment",
          "options": [
            { "value": "top", "label": "Top" },
            { "value": "center", "label": "Center" },
            { "value": "bottom", "label": "Bottom" }
          ],
          "default": "center"
        },
        {
          "type": "select",
          "id": "text_alignment",
          "label": "Text alignment",
          "options": [
            { "value": "left", "label": "Left" },
            { "value": "center", "label": "Center" },
            { "value": "right", "label": "Right" }
          ],
          "default": "left"
        },
        {
          "type": "header",
          "content": "Mobile Alignment"
        },
        {
          "type": "select",
          "id": "mobile_horizontal_position",
          "label": "Horizontal alignment",
          "options": [
            { "value": "left", "label": "Left" },
            { "value": "center", "label": "Center" },
            { "value": "right", "label": "Right" }
          ],
          "default": "center"
        },
        {
          "type": "select",
          "id": "mobile_vertical_position",
          "label": "Vertical alignment",
          "options": [
            { "value": "top", "label": "Top" },
            { "value": "center", "label": "Center" },
            { "value": "bottom", "label": "Bottom" }
          ],
          "default": "center"
        },
        {
          "type": "select",
          "id": "mobile_text_alignment",
          "label": "Text alignment",
          "options": [
            { "value": "left", "label": "Left" },
            { "value": "center", "label": "Center" },
            { "value": "right", "label": "Right" }
          ],
          "default": "center"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Luxury Banner Slider",
      "blocks": [
        { "type": "slide" },
        { "type": "slide" }
      ]
    }
  ]
}