/* ============================================================
   HSO COLLECTION BUILDER
   COMPLETE A-Z PREMIUM RESPONSIVE CSS

   SEQUENCE
   ------------------------------------------------------------
   BASIC
   DESIGN 01 — COLLECTION GRID
   DESIGN 02 — COLLECTION CAROUSEL
   DESIGN 03 — FEATURED COLLECTION
   DESIGN 04 — EDITORIAL
   DESIGN 05 — HIGHLIGHT
   DESIGN 06 — CIRCLE MARQUEE
   DESIGN 07 — RECOMMENDED COLLECTIONS
   DESIGN 08 — LOOKBOOK
   DESIGN 09 — HOTSPOTS
   RESPONSIVE SYSTEM
   TOUCH
   ACCESSIBILITY
   REDUCED MOTION
   ============================================================ */


/* ============================================================
   BASIC 01 — ROOT VARIABLES
   ============================================================ */

:root{
    --white:#fff;
    --success:#22c55e;

    --bg-decorative:rgba(var(--primary-rgb),.07);
    --bg-decorative-light:rgba(var(--primary-rgb),.05);

    --overlay:rgba(0,0,0,.58);
    --overlay-light:rgba(0,0,0,.45);

    --image-overlay:rgba(255,255,255,.82);
    --image-overlay-soft:rgba(255,255,255,.25);
    --image-bottom-overlay:rgba(27,27,27,.08);

    --shadow:
        0 8px 28px rgba(var(--primary-rgb),.08);

    --shadow-sm:
        0 4px 14px rgba(var(--primary-rgb),.06);

    --shadow-lg:
        0 18px 42px rgba(var(--primary-rgb),.15);

    --radius:10px;
    --radius-md:12px;
    --radius-lg:16px;
    --radius-xl:20px;

    --transition-fast:.2s ease;
    --transition:.35s ease;
    --transition-slow:.5s ease;

    --hover-lift:-6px;
    --hover-scale:1.08;

    --max-width:1200px;

    --primary-color:#1f7a5b;
    --primary-hover:#17684c;
    --primary-rgb:31,122,91;

    --text-dark:#1b1b1b;
    --text-light:#636363;
    --text-muted:#8f8f8f;

    --background:#f7faf8;
    --extra-light:#eef6f2;

    --border-color:#dce7e1;

    --bg-gradient-start:#eef6f2;
    --bg-gradient-middle:#f7faf8;
    --bg-gradient-end:#e8f3ee;

    --bg-border:#dce7e1;

    --bg-shadow:
        0 14px 45px rgba(var(--primary-rgb),.10);

    --hso-section-padding:70px;
    --hso-section-max-width:1200px;
}


/* ============================================================
   BASIC 02 — GLOBAL RESET
   ============================================================ */

*,
*::before,
*::after{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    width:100%;
    min-height:100%;
    font-family:Inter,sans-serif;
    color:var(--text-dark);
    background:var(--background);
}

body{
    font-size:12px;
    overflow-x:hidden;
}

img{
    max-width:100%;
}

button,
input,
textarea,
select{
    font:inherit;
}

button{
    -webkit-tap-highlight-color:transparent;
}

a{
    color:inherit;
}

h1,
h2,
h3,
h4,
h5,
h6,
p{
    overflow-wrap:break-word;
}


/* ============================================================
   BASIC 03 — BUILDER LAYOUT
   ============================================================ */

.ps-builder{
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

.ps-topbar{
    min-height:68px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 24px;
    background:var(--white);
    border-bottom:1px solid var(--border-color);
    gap:18px;
    position:sticky;
    top:0;
    z-index:50;
}

.ps-brand{
    display:flex;
    align-items:center;
    gap:11px;
    font-weight:800;
    white-space:nowrap;
}

.ps-brand-mark{
    width:42px;
    height:42px;
    border-radius:var(--radius);
    background:var(--primary-color);
    color:var(--white);
    display:grid;
    place-items:center;
    font-size:18px;
}

.ps-preview-head{
    display:flex;
    align-items:center;
    gap:12px;
    margin-left:auto;
}

.ps-preview-head h1{
    font-size:16px;
    margin:0;
}

.ps-device{
    display:flex;
    gap:3px;
    padding:3px;
    border:1px solid var(--border-color);
    border-radius:var(--radius);
    background:var(--white);
}

.ps-device button{
    border:0;
    background:transparent;
    border-radius:7px;
    padding:7px 10px;
    color:var(--text-muted);
    cursor:pointer;
}

.ps-device button.active{
    background:var(--extra-light);
    color:var(--primary-color);
}

.ps-top-actions{
    display:flex;
    gap:8px;
}

.ps-btn{
    min-height:40px;
    padding:0 14px;
    border:1px solid var(--border-color);
    border-radius:9px;
    background:var(--white);
    color:var(--text-dark);
    font-weight:700;
    cursor:pointer;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.ps-btn:hover{
    background:var(--background);
}

.ps-btn.primary{
    background:var(--primary-color);
    border-color:var(--primary-color);
    color:var(--white);
}

.ps-btn.primary:hover{
    background:var(--primary-hover);
    border-color:var(--primary-hover);
}


/* ============================================================
   BASIC 04 — MAIN BUILDER GRID
   ============================================================ */

.ps-layout{
    display:grid;
    grid-template-columns:88px 340px minmax(0,1fr);
    min-height:calc(100vh - 68px);
}

.ps-sidebar{
    width:100%;
    background:var(--extra-light);
    border-right:1px solid var(--border-color);
    padding:15px;
    overflow:auto;
    position:relative;
    z-index:30;
}

.ps-workspace{
    min-width:0;
    padding:22px;
    overflow:hidden;
}

.ps-canvas{
    height:calc(100vh - 112px);
    padding:25px;
    border-radius:var(--radius-lg);
    background:
        linear-gradient(
            135deg,
            var(--bg-gradient-start),
            var(--bg-gradient-middle),
            var(--bg-gradient-end)
        );
    box-shadow:var(--bg-shadow);
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:thin;
}

.ps-preview-frame{
    width:100%;
    max-width:none;
    margin:0 auto;
    background:var(--white);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow);
}

.ps-preview-frame.mobile{
    width:390px;
    max-width:100%;
}

.ps-preview-frame.mobile
.hso-collection-section-edit{
    display:none;
}


/* ============================================================
   BASIC 05 — SIDEBAR
   ============================================================ */

.ps-section{
    background:var(--white);
    border:1px solid var(--border-color);
    border-radius:11px;
    overflow:hidden;
    margin-bottom:14px;
}

.ps-section-head{
    min-height:52px;
    padding:15px 16px;
    border-bottom:1px solid var(--border-color);
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.ps-section-head h3{
    margin:0;
    font-size:14px;
}

.ps-section-body{
    padding:13px;
}

.ps-template-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.ps-saved-row,
.ps-add-section{
    width:100%;
    border:1px solid var(--border-color);
    background:var(--white);
    border-radius:10px;
    min-height:52px;
    padding:10px;
    display:flex;
    align-items:center;
    gap:9px;
    cursor:pointer;
    text-align:left;
}

.ps-saved-row:hover,
.ps-add-section:hover{
    border-color:var(--primary-hover);
    background:var(--background);
}

.ps-saved-row.active{
    border-color:var(--primary-color);
    background:var(--extra-light);
}

.ps-row-icon{
    width:30px;
    height:30px;
    border-radius:7px;
    background:var(--bg-decorative);
    display:grid;
    place-items:center;
    color:var(--primary-hover);
    flex:0 0 30px;
}

.ps-row-text{
    min-width:0;
    flex:1;
}

.ps-row-text b{
    display:block;
    font-size:11px;
}

.ps-row-text span{
    display:block;
    font-size:9px;
    color:var(--text-muted);
    margin-top:2px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ps-row-actions{
    display:flex;
    gap:4px;
}

.ps-icon-btn{
    width:30px;
    height:30px;
    border:1px solid var(--border-color);
    border-radius:8px;
    background:var(--white);
    cursor:pointer;
}

.ps-icon-btn:hover{
    color:var(--primary-color);
    border-color:var(--primary-hover);
}

.ps-add-section{
    justify-content:center;
    font-size:12px;
    font-weight:700;
    border-style:dashed;
    margin-top:10px;
}

.ps-add-section .plus{
    font-size:19px;
    font-weight:400;
}

.ps-hint{
    font-size:10px;
    color:var(--text-muted);
    line-height:1.5;
}


/* ============================================================
   BASIC 06 — EMPTY STATES
   ============================================================ */

.ps-builder-empty,
.hso-collection-builder-empty{
    padding:100px 20px;
    text-align:center;
    color:var(--text-muted);
    display:flex;
    flex-direction:column;
    gap:9px;
    align-items:center;
}

.hso-collection-builder-empty i{
    font-size:38px;
}

.hso-collection-builder-empty strong{
    font-size:14px;
    color:var(--text-light);
}

.hso-collection-empty{
    padding:70px 20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:8px;
    color:var(--text-muted);
}

.hso-collection-empty i{
    font-size:30px;
    opacity:.7;
}

.hso-collection-empty p{
    margin:0;
    font-size:11px;
    line-height:1.5;
}


/* ============================================================
   BASIC 07 — DRAWER
   ============================================================ */

.ps-drawer-overlay{
    position:fixed;
    inset:0;
    background:var(--bg-decorative);
    z-index:100;
    display:none;
}

.ps-drawer-overlay.open{
    display:block;
}

.ps-drawer{
    position:fixed;
    z-index:101;
    left:428px;
    top:12vh;
    width:min(820px,calc(100vw - 448px));
    height:76vh;
    background:var(--white);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow-lg);
    display:none;
    grid-template-columns:315px 1fr;
    overflow:hidden;
}

.ps-drawer.open{
    display:grid;
}

.ps-drawer-list{
    border-right:1px solid var(--border-color);
    overflow:auto;
}

.ps-drawer-head{
    padding:14px;
    border-bottom:1px solid var(--border-color);
    display:flex;
    gap:8px;
}

.ps-search{
    height:38px;
    flex:1;
    border:1px solid var(--border-color);
    border-radius:9px;
    padding:0 11px;
    outline:0;
}

.ps-search:focus{
    border-color:var(--primary-color);
    box-shadow:0 0 0 3px var(--bg-decorative);
}

.ps-drawer-close{
    width:38px;
    height:38px;
    border:1px solid var(--border-color);
    background:var(--white);
    border-radius:9px;
    cursor:pointer;
}

.ps-drawer-cats{
    padding:10px;
}

.ps-section-option{
    width:100%;
    display:flex;
    align-items:center;
    gap:9px;
    border:0;
    background:var(--white);
    padding:11px 9px;
    border-radius:9px;
    cursor:pointer;
    text-align:left;
}

.ps-section-option:hover{
    background:var(--extra-light);
}

.ps-option-icon{
    width:34px;
    height:34px;
    border:1px solid var(--border-color);
    border-radius:8px;
    display:grid;
    place-items:center;
    color:var(--primary-hover);
    font-size:9px;
    font-weight:800;
    flex:0 0 34px;
}

.ps-section-option b{
    display:block;
    font-size:11px;
}

.ps-section-option small{
    display:block;
    font-size:9px;
    color:var(--text-muted);
    line-height:1.45;
    margin-top:3px;
}

.ps-drawer-preview{
    background:var(--background);
    padding:20px;
    overflow:auto;
}

.ps-drawer-preview-inner{
    min-height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.ps-drawer-preview
.hso-collection-section-edit{
    display:none;
}

.ps-empty-preview{
    padding:50px 20px;
    text-align:center;
    color:var(--text-muted);
}


/* ============================================================
   BASIC 08 — MODAL
   ============================================================ */

.ps-modal{
    position:fixed;
    inset:0;
    z-index:200;
    background:var(--overlay);
    display:none;
    align-items:center;
    justify-content:center;
    padding:18px;
}

.ps-modal.open{
    display:flex;
}

.ps-modal-card{
    width:700px;
    max-width:100%;
    max-height:92vh;
    background:var(--white);
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-lg);
}

.ps-modal-head{
    padding:15px 18px;
    border-bottom:1px solid var(--border-color);
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.ps-modal-head h3{
    margin:0;
    font-size:15px;
}

.ps-modal-body{
    padding:18px;
    overflow:auto;
    max-height:70vh;
}

.ps-modal-foot{
    padding:14px 18px;
    border-top:1px solid var(--border-color);
    display:flex;
    justify-content:flex-end;
    gap:8px;
}


/* ============================================================
   BASIC 09 — FORM
   ============================================================ */

.ps-field{
    margin-bottom:13px;
}

.ps-field label{
    display:block;
    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    color:var(--text-light);
    margin-bottom:6px;
}

.ps-field input,
.ps-field textarea,
.ps-field select{
    width:100%;
    border:1px solid var(--border-color);
    border-radius:8px;
    padding:10px;
    outline:0;
    background:var(--white);
}

.ps-field textarea{
    min-height:80px;
    resize:vertical;
}

.ps-field input:focus,
.ps-field textarea:focus,
.ps-field select:focus{
    border-color:var(--primary-color);
    box-shadow:0 0 0 3px var(--bg-decorative);
}

.ps-grid2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.ps-editor-group{
    padding:14px 0;
    border-bottom:1px solid var(--border-color);
}

.ps-editor-group:first-child{
    padding-top:0;
}

.ps-editor-group:last-child{
    border-bottom:0;
}

.ps-editor-group-title{
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.6px;
    margin-bottom:12px;
}

.ps-editor-checks{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
}

.ps-switch-field{
    display:flex;
    align-items:center;
    gap:8px;
    padding:9px;
    border:1px solid var(--border-color);
    border-radius:9px;
    cursor:pointer;
}

.ps-switch-field input{
    display:none;
}

.ps-switch{
    width:32px;
    height:18px;
    border-radius:20px;
    background:var(--border-color);
    position:relative;
    flex:0 0 32px;
}

.ps-switch:after{
    content:"";
    position:absolute;
    width:14px;
    height:14px;
    border-radius:50%;
    background:var(--white);
    left:2px;
    top:2px;
    box-shadow:var(--shadow-sm);
    transition:var(--transition-fast);
}

.ps-switch-field input:checked + .ps-switch{
    background:var(--primary-color);
}

.ps-switch-field input:checked + .ps-switch:after{
    left:16px;
}

.ps-switch-field b{
    display:block;
    font-size:10px;
}

.ps-switch-field small{
    display:block;
    color:var(--text-muted);
    font-size:8px;
    margin-top:2px;
}


/* ============================================================
   BASIC 10 — COLLECTION PICKER
   ============================================================ */

.ps-collection-search-row{
    display:flex;
    gap:8px;
    align-items:center;
    margin-bottom:9px;
}

.ps-collection-search-row input{
    flex:1;
    border:1px solid var(--border-color);
    height:36px;
    border-radius:8px;
    padding:0 10px;
}

.ps-collection-search-row span{
    font-size:9px;
    color:var(--text-muted);
    white-space:nowrap;
}

.ps-collection-picker{
    max-height:320px;
    overflow:auto;
    border:1px solid var(--border-color);
    border-radius:10px;
}

.ps-collection-pick{
    display:grid;
    grid-template-columns:18px 54px 1fr;
    align-items:center;
    gap:8px;
    padding:8px;
    border-bottom:1px solid var(--border-color);
    cursor:pointer;
}

.ps-collection-pick:last-child{
    border-bottom:0;
}

.ps-collection-pick:hover{
    background:var(--background);
}

.ps-collection-pick input{
    margin:0;
}

.ps-collection-pick-image{
    width:54px;
    height:60px;
    display:block;
    overflow:hidden;
    background:var(--extra-light);
}

.ps-collection-pick-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.ps-collection-pick b{
    font-size:10px;
    display:block;
}

.ps-collection-pick small{
    font-size:8px;
    color:var(--text-muted);
    display:block;
    margin-top:3px;
}


/* ============================================================
   BASIC 11 — MARKERS / TOAST
   ============================================================ */

.ps-marker-row{
    padding:11px;
    border:1px solid var(--border-color);
    border-radius:10px;
    margin-bottom:9px;
    background:var(--background);
}

.ps-marker-row>b{
    font-size:10px;
    display:block;
    margin-bottom:8px;
}

.ps-remove-marker,
.ps-add-marker{
    border:1px solid var(--border-color);
    background:var(--white);
    border-radius:8px;
    padding:8px 10px;
    font-size:9px;
    font-weight:700;
    cursor:pointer;
}

.ps-add-marker{
    width:100%;
    border-style:dashed;
}

.ps-remove-marker:hover,
.ps-add-marker:hover{
    border-color:var(--primary-color);
    color:var(--primary-color);
}

.ps-toast{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:300;
    background:var(--primary-color);
    color:var(--white);
    border-radius:10px;
    padding:12px 16px;
    font-size:11px;
    font-weight:700;
    opacity:0;
    pointer-events:none;
    transform:translateY(10px);
    transition:var(--transition-fast);
}

.ps-toast.show{
    opacity:1;
    transform:none;
}


/* ============================================================
   BASIC 12 — COLLECTION EDIT BUTTON
   ============================================================ */

.hso-collection-section-edit{
    position:absolute;
    top:15px;
    right:15px;
    border:1px solid var(--border-color);
    background:var(--image-overlay);
    color:var(--text-dark);
    border-radius:8px;
    padding:7px 10px;
    font-size:9px;
    line-height:1;
    font-weight:800;
    cursor:pointer;
    z-index:20;
    box-shadow:var(--shadow-sm);
    backdrop-filter:blur(8px);
    transition:
        color var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}

.hso-collection-section-edit:hover{
    color:var(--white);
    background:var(--primary-color);
    border-color:var(--primary-color);
    transform:translateY(-2px);
}


/* ============================================================
   BASIC 13 — ALL COLLECTION SECTIONS
   ============================================================ */

.hso-collection-grid,
.hso-collection-carousel,
.hso-featured-collection,
.hso-collection-editorial,
.hso-collection-highlight,
.hso-collection-hotspots,
.hso-recommended-collections,
.hso-collection-lookbook,
.hso-collection-circle-marquee{
    position:relative;
    width:100%;
    padding-top:var(--hso-section-padding,70px);
    padding-bottom:var(--hso-section-padding,70px);
    box-sizing:border-box;
}

.hso-collection-grid-inner,
.hso-collection-carousel-inner,
.hso-featured-collection-inner,
.hso-featured-collection-secondary,
.hso-collection-editorial-shell,
.hso-collection-highlight-shell,
.hso-collection-hotspots-shell,
.hso-recommended-collections-shell,
.hso-collection-lookbook-shell,
.hso-collection-circle-marquee-shell{
    width:min(
        calc(100% - 32px),
        var(--hso-section-max-width,1200px)
    );
    margin-left:auto;
    margin-right:auto;
    box-sizing:border-box;
}


/* ============================================================
   BASIC 14 — UNIVERSAL HEADING SYSTEM
   ============================================================ */

.hso-collection-section-heading{
    position:relative;
    width:100%;
    min-width:0;
}

.hso-collection-section-heading
h2{
    margin:6px 0 10px;
    color:var(--text-dark);
    font-size:42px;
    line-height:.98;
    font-weight:800;
    letter-spacing:-1.7px;
    max-width:850px;
}

.hso-collection-section-heading
p{
    margin:0;
    max-width:620px;
    color:var(--text-light);
    font-size:12px;
    line-height:1.7;
    font-weight:400;
}

.hso-collection-section-heading
span,
.hso-collection-section-heading
small{
    display:inline-block;
    margin:0;
    color:var(--primary-color);
    font-size:8px;
    line-height:1.2;
    letter-spacing:2.2px;
    font-weight:800;
    text-transform:uppercase;
}

.hso-collection-eyebrow{
    display:inline-block;
    color:var(--primary-color);
    font-size:8px;
    line-height:1.2;
    letter-spacing:2px;
    font-weight:800;
    text-transform:uppercase;
}


/* ============================================================
   BASIC 15 — UNIVERSAL IMAGE PLACEHOLDER
   ============================================================ */

.hso-collection-image-placeholder{
    width:100%;
    height:100%;
    min-height:100px;
    display:grid;
    place-items:center;
    background:var(--extra-light);
    color:var(--text-muted);
}

.hso-collection-image-placeholder i{
    font-size:25px;
}


/* ============================================================
   BASIC 16 — UNIVERSAL COLLECTION CARD
   ============================================================ */

.hso-collection-card{
    position:relative;
    min-width:0;
}

.hso-collection-card-media{
    position:relative;
    width:100%;
    overflow:hidden;
    background:var(--extra-light);
}

.hso-collection-card-image-link{
    display:block;
    width:100%;
    height:100%;
    overflow:hidden;
}

.hso-collection-card-image{
    display:block;
    width:100%;
    max-width:100%;
    object-fit:cover;
    transition:
        transform .65s cubic-bezier(.2,.65,.25,1),
        filter .45s ease;
}

.hso-collection-card:hover
.hso-collection-card-image{
    transform:scale(1.045);
}

.hso-collection-card-body{
    position:relative;
    width:100%;
    padding:14px 2px 0;
}

.hso-collection-card-body.left{
    text-align:left;
}

.hso-collection-card-body.center{
    text-align:center;
}

.hso-collection-card-body.right{
    text-align:right;
}

.hso-collection-card-count{
    display:block;
    margin:0 0 6px;
    color:var(--text-muted);
    font-size:8px;
    line-height:1.2;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

.hso-collection-card-title{
    display:block;
    color:var(--text-dark);
    text-decoration:none;
}

.hso-collection-card-title h3{
    margin:0;
    color:var(--text-dark);
    font-size:14px;
    line-height:1.25;
    font-weight:800;
    letter-spacing:-.25px;
}

.hso-collection-card-description,
.hso-collection-card-body p{
    margin:7px 0 0;
    color:var(--text-light);
    font-size:10px;
    line-height:1.55;
}

.hso-collection-card-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    margin-top:10px;
    color:var(--text-dark);
    text-decoration:none;
    font-size:9px;
    line-height:1;
    font-weight:800;
    transition:
        color var(--transition-fast),
        gap var(--transition-fast),
        transform var(--transition-fast);
}

.hso-collection-card-cta:hover{
    color:var(--primary-color);
    gap:10px;
}

.hso-collection-badge{
    position:absolute;
    z-index:3;
    left:10px;
    top:10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:24px;
    padding:6px 9px;
    color:var(--text-dark);
    background:var(--white);
    border:1px solid rgba(var(--primary-rgb),.08);
    box-shadow:var(--shadow-sm);
    font-size:7px;
    line-height:1;
    letter-spacing:1px;
    font-weight:800;
    text-transform:uppercase;
}

.hso-collection-meta{
    color:var(--text-muted);
    font-size:8px;
}


/* ============================================================
   BASIC 17 — IMAGE RATIOS
   ============================================================ */

.hso-image-ratio-square
.hso-collection-card-image{
    aspect-ratio:1 / 1;
}

.hso-image-ratio-portrait
.hso-collection-card-image{
    aspect-ratio:4 / 5;
}

.hso-image-ratio-landscape
.hso-collection-card-image{
    aspect-ratio:4 / 3;
}

.hso-image-ratio-wide
.hso-collection-card-image{
    aspect-ratio:16 / 9;
}

.hso-image-ratio-original
.hso-collection-card-image{
    aspect-ratio:auto;
    height:auto;
}


/* ============================================================
   BASIC 18 — CARD ALIGNMENT
   ============================================================ */

.hso-collection-card[data-text-align="left"]
.hso-collection-card-body{
    text-align:left;
}

.hso-collection-card[data-text-align="center"]
.hso-collection-card-body{
    text-align:center;
}

.hso-collection-card[data-text-align="right"]
.hso-collection-card-body{
    text-align:right;
}


/* ============================================================
   BASIC 19 — CTA STYLE SYSTEM
   ============================================================ */

.hso-featured-collection-view{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:42px;
    padding:12px 18px;
    color:var(--white);
    background:var(--text-dark);
    border:1px solid var(--text-dark);
    text-decoration:none;
    font-size:9px;
    line-height:1;
    font-weight:800;
    letter-spacing:.4px;
    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.hso-featured-collection-view:hover{
    background:var(--primary-color);
    border-color:var(--primary-color);
    color:var(--white);
    transform:translateY(-2px);
    box-shadow:var(--shadow-sm);
}

.hso-cta-style-outline
.hso-featured-collection-view{
    color:var(--text-dark);
    background:transparent;
    border-color:var(--text-dark);
}

.hso-cta-style-outline
.hso-featured-collection-view:hover{
    color:var(--white);
    background:var(--text-dark);
    border-color:var(--text-dark);
}

.hso-cta-style-text
.hso-featured-collection-view,
.hso-cta-style-minimal
.hso-featured-collection-view{
    min-height:auto;
    padding-left:0;
    padding-right:0;
    color:var(--text-dark);
    background:transparent;
    border:0;
}

.hso-cta-style-text
.hso-featured-collection-view:hover,
.hso-cta-style-minimal
.hso-featured-collection-view:hover{
    color:var(--primary-color);
    background:transparent;
    border:0;
    box-shadow:none;
}

.hso-cta-style-ghost
.hso-featured-collection-view{
    color:var(--white);
    background:rgba(255,255,255,.12);
    border-color:rgba(255,255,255,.35);
    backdrop-filter:blur(8px);
}

.hso-cta-style-ghost
.hso-featured-collection-view:hover{
    background:var(--white);
    color:var(--text-dark);
    border-color:var(--white);
}


/* ============================================================
   BASIC 20 — EDITORIAL SETTINGS
   ============================================================ */

.hso-editorial-image-small
.hso-collection-editorial-lead-img{
    max-width:60%;
}

.hso-editorial-image-medium
.hso-collection-editorial-lead-img{
    max-width:78%;
}

.hso-editorial-image-large
.hso-collection-editorial-lead-img{
    max-width:100%;
}

.hso-editorial-image-full
.hso-collection-editorial-lead-img{
    width:100%;
    max-width:none;
}

.hso-editorial-content-small
.hso-collection-editorial-copy{
    max-width:360px;
}

.hso-editorial-content-medium
.hso-collection-editorial-copy{
    max-width:520px;
}

.hso-editorial-content-large
.hso-collection-editorial-copy{
    max-width:700px;
}

.hso-editorial-content-full
.hso-collection-editorial-copy{
    max-width:none;
}


/* ============================================================
   DESIGN 01 — COLLECTION GRID
   ============================================================ */

.hso-collection-grid{
    background:var(--white);
    overflow:hidden;
}

.hso-collection-grid
.hso-collection-section-heading{
    margin:0 0 38px;
}

.hso-collection-grid
.hso-collection-section-heading
h2{
    color:var(--text-dark);
    font-size:40px;
    line-height:1;
    font-weight:800;
    letter-spacing:-1.7px;
}

.hso-collection-grid
.hso-collection-section-heading
p{
    max-width:650px;
}

.hso-collection-grid-list{
    display:grid !important;
    grid-template-columns:
        repeat(
            var(--cs-cols,4),
            minmax(0,1fr)
        );
    gap:var(--cs-gap,20px);
    width:100%;
    align-items:start;
}

.hso-collection-grid-list > *{
    position:relative;
    min-width:0;
}

.hso-collection-grid-list
.hso-collection-card{
    width:100%;
}

.hso-collection-grid-list
.hso-collection-card-media{
    border-radius:var(--radius-md);
}

.hso-collection-grid-list
.hso-collection-card-body{
    padding-top:14px;
}

.hso-collection-grid-list
.hso-collection-card-title
h3{
    font-size:14px;
}

.hso-collection-grid-list
p{
    margin:6px 0 0;
    color:var(--text-muted);
    font-size:10px;
    line-height:1.5;
}

.hso-collection-grid-list
a{
    color:inherit;
    text-decoration:none;
}

.hso-collection-grid-footer{
    width:100%;
    text-align:center;
    margin-top:42px;
}

.hso-collection-grid-button{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:40px;
    padding:11px 20px;
    color:var(--text-dark);
    background:transparent;
    border:1px solid var(--text-dark);
    text-decoration:none;
    font-size:9px;
    line-height:1;
    font-weight:800;
    letter-spacing:.6px;
    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.hso-collection-grid-button:hover{
    background:var(--text-dark);
    color:var(--white);
    border-color:var(--text-dark);
    transform:translateY(-2px);
    box-shadow:var(--shadow-sm);
}

.hso-collection-grid
.hso-collection-empty{
    width:100%;
    padding:55px 20px;
    border:1px dashed var(--border-color);
    border-radius:var(--radius-md);
}


/* ============================================================
   DESIGN 02 — COLLECTION CAROUSEL
   ============================================================ */

.hso-collection-carousel{
    background:var(--white);
    overflow:hidden;
}

.hso-collection-carousel *,
.hso-collection-carousel *::before,
.hso-collection-carousel *::after{
    box-sizing:border-box;
}

.hso-collection-carousel-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    width:100%;
    gap:32px;
    margin-bottom:32px;
}

.hso-collection-carousel-head
.hso-collection-section-heading{
    min-width:0;
    flex:1 1 auto;
}

.hso-collection-carousel-head
.hso-collection-section-heading
h2{
    margin-top:6px;
}

.hso-collection-carousel-nav{
    display:flex;
    align-items:center;
    gap:8px;
    flex:0 0 auto;
}

.hso-collection-carousel-nav button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    flex:0 0 42px;
    padding:0;
    margin:0;
    border:1px solid var(--border-color);
    border-radius:50%;
    background:var(--white);
    color:var(--text-dark);
    cursor:pointer;
    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.hso-collection-carousel-nav button:hover{
    background:var(--text-dark);
    color:var(--white);
    border-color:var(--text-dark);
    transform:translateY(-2px);
    box-shadow:var(--shadow-sm);
}

.hso-collection-carousel-nav button:active{
    transform:scale(.94);
}

.hso-collection-carousel-viewport{
    position:relative;
    width:100%;
    min-width:0;
    overflow:hidden;
}

.hso-collection-carousel-track{
    display:flex;
    align-items:flex-start;
    width:100%;
    min-width:0;
    gap:20px;
    overflow:visible;
}

.hso-collection-carousel
.hso-collection-card{
    flex:0 0 calc(
        (
            100% -
            (
                20px *
                (var(--cs-slides,4) - 1)
            )
        )
        /
        var(--cs-slides,4)
    );
    min-width:0;
}

.hso-collection-carousel
.hso-collection-card-media{
    border-radius:var(--radius-md);
}

.hso-collection-carousel
.hso-collection-card-body{
    width:100%;
    padding:15px 2px 0;
}

.hso-collection-carousel
.hso-collection-card-title
h3{
    font-size:13px;
}

.hso-collection-carousel-dots{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:7px;
    width:100%;
    margin-top:28px;
}

.hso-collection-carousel-dots button{
    display:inline-block;
    width:7px;
    height:7px;
    min-width:7px;
    min-height:7px;
    padding:0;
    margin:0;
    border:0;
    border-radius:50%;
    background:var(--border-color);
    cursor:pointer;
    transition:
        width var(--transition-fast),
        background var(--transition-fast),
        transform var(--transition-fast);
}

.hso-collection-carousel-dots button:hover{
    background:var(--primary-color);
    transform:scale(1.2);
}

.hso-collection-carousel-dots
button.active,
.hso-collection-carousel-dots
button[aria-current="true"]{
    width:22px;
    border-radius:10px;
    background:var(--primary-color);
}


/* ============================================================
   DESIGN 03 — FEATURED COLLECTION
   ============================================================ */

.hso-featured-collection{
    background:
        linear-gradient(
            135deg,
            var(--bg-gradient-start),
            var(--bg-gradient-middle)
        );
    overflow:hidden;
}

.hso-featured-collection-inner{
    display:grid;
    grid-template-columns:
        minmax(0,1.15fr)
        minmax(360px,.85fr);
    gap:70px;
    align-items:center;
}

.hso-featured-collection-inner.left
.hso-featured-collection-gallery{
    order:1;
}

.hso-featured-collection-inner.left
.hso-featured-collection-content{
    order:2;
}

.hso-featured-collection-inner.right
.hso-featured-collection-gallery{
    order:2;
}

.hso-featured-collection-inner.right
.hso-featured-collection-content{
    order:1;
}

.hso-featured-collection-gallery{
    position:relative;
    width:100%;
    aspect-ratio:1 / 1.05;
    background:var(--border-color);
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow);
}

.hso-featured-collection-gallery
.hso-collection-badge{
    top:15px;
    left:15px;
}

.hso-featured-collection-image-link,
.hso-featured-collection-image{
    width:100%;
    height:100%;
    display:block;
}

.hso-featured-collection-image{
    object-fit:cover;
    transition:transform .7s cubic-bezier(.2,.65,.25,1);
}

.hso-featured-collection-gallery:hover
.hso-featured-collection-image{
    transform:scale(1.035);
}

.hso-featured-collection-content{
    min-width:0;
    padding:15px;
}

.hso-featured-collection-content.left{
    text-align:left;
}

.hso-featured-collection-content.center{
    text-align:center;
}

.hso-featured-collection-content.right{
    text-align:right;
}

.hso-featured-collection-content
.hso-collection-section-heading
h2{
    margin-bottom:15px;
}

.hso-featured-collection-content
h3{
    margin:0 0 14px;
    color:var(--text-dark);
    font-size:48px;
    line-height:.98;
    font-weight:800;
    letter-spacing:-2px;
}

.hso-featured-collection-count{
    display:block;
    margin:0 0 9px;
    color:var(--primary-hover);
    font-size:8px;
    line-height:1.2;
    letter-spacing:2px;
    font-weight:800;
    text-transform:uppercase;
}

.hso-featured-collection-content
p{
    max-width:500px;
    margin:0;
    color:var(--text-light);
    font-size:12px;
    line-height:1.75;
}

.hso-featured-collection-cta-row{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
}

.hso-featured-collection-content.center
.hso-featured-collection-cta-row{
    justify-content:center;
}

.hso-featured-collection-content.right
.hso-featured-collection-cta-row{
    justify-content:flex-end;
}

.hso-featured-collection-secondary{
    margin-top:42px;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
}


/* ============================================================
   DESIGN 04 — COLLECTION EDITORIAL
   ============================================================ */

.hso-collection-editorial{
    background:var(--white);
    overflow:hidden;
}

.hso-collection-editorial-shell{
    display:grid;
    grid-template-columns:minmax(280px,.65fr) minmax(0,1.35fr);
    gap:60px;
    align-items:start;
}

.hso-collection-editorial-copy{
    min-width:0;
    padding-top:30px;
}

.hso-collection-editorial-copy.left{
    text-align:left;
}

.hso-collection-editorial-copy.center{
    text-align:center;
}

.hso-collection-editorial-copy.right{
    text-align:right;
}

.hso-collection-editorial-copy
.hso-collection-section-heading
h2{
    font-size:46px;
}

.hso-collection-editorial-copy-rule{
    width:100%;
    height:1px;
    background:var(--border-color);
    margin:32px 0 18px;
}

.hso-collection-editorial-meta{
    display:flex;
    justify-content:space-between;
    gap:10px;
    color:var(--text-muted);
    font-size:7px;
    line-height:1.3;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.hso-collection-editorial-cta{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:40px;
    color:var(--text-dark);
    text-decoration:none;
    font-size:9px;
    line-height:1;
    font-weight:800;
    transition:
        color var(--transition-fast),
        gap var(--transition-fast);
}

.hso-collection-editorial-cta:hover{
    color:var(--primary-color);
    gap:11px;
}

.hso-collection-editorial-visual{
    min-width:0;
    display:grid;
    grid-template-columns:
        minmax(0,1.5fr)
        minmax(180px,.65fr);
    gap:18px;
}

.hso-collection-editorial-lead{
    position:relative;
    min-width:0;
}

.hso-collection-editorial-image-link{
    display:block;
    width:100%;
    overflow:hidden;
}

.hso-collection-editorial-lead-img{
    width:100%;
    height:620px;
    object-fit:cover;
    display:block;
    transition:transform .7s cubic-bezier(.2,.65,.25,1);
}

.hso-collection-editorial-lead:hover
.hso-collection-editorial-lead-img{
    transform:scale(1.025);
}

.hso-collection-editorial-caption{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    padding:12px 2px;
    font-size:10px;
    line-height:1.4;
}

.hso-collection-editorial-caption span{
    color:var(--text-muted);
}

.hso-collection-editorial-side{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:18px;
}

.hso-collection-editorial-side-item{
    min-width:0;
    display:grid;
    grid-template-columns:82px minmax(0,1fr);
    gap:10px;
    align-items:start;
}

.hso-collection-editorial-side-img{
    width:82px;
    height:105px;
    display:block;
    object-fit:cover;
    transition:transform var(--transition);
}

.hso-collection-editorial-side-item:hover
.hso-collection-editorial-side-img{
    transform:scale(1.035);
}

.hso-collection-editorial-side-item
span{
    font-size:7px;
    line-height:1;
    color:var(--text-muted);
}

.hso-collection-editorial-side-item
h3{
    margin:5px 0;
    color:var(--text-dark);
    font-size:10px;
    line-height:1.35;
    font-weight:800;
}

.hso-collection-editorial-side-item
small{
    color:var(--text-muted);
    font-size:8px;
    line-height:1.3;
}


/* ============================================================
   DESIGN 05 — COLLECTION HIGHLIGHT
   ============================================================ */

.hso-collection-highlight{
    background:var(--primary-color);
    color:var(--white);
    overflow:hidden;
}

.hso-collection-highlight-shell{
    display:grid;
    grid-template-columns:
        minmax(0,1.05fr)
        minmax(330px,.95fr);
    gap:60px;
    align-items:center;
}

.hso-collection-highlight-shell.image-left
.hso-collection-highlight-visual{
    order:1;
}

.hso-collection-highlight-shell.image-left
.hso-collection-highlight-info{
    order:2;
}

.hso-collection-highlight-shell.image-right
.hso-collection-highlight-visual{
    order:2;
}

.hso-collection-highlight-shell.image-right
.hso-collection-highlight-info{
    order:1;
}

.hso-collection-highlight-shell.image-top,
.hso-collection-highlight-shell.image-bottom{
    grid-template-columns:1fr;
}

.hso-collection-highlight-shell.image-bottom
.hso-collection-highlight-visual{
    order:2;
}

.hso-collection-highlight-shell.image-bottom
.hso-collection-highlight-info{
    order:1;
}

.hso-collection-highlight-visual{
    position:relative;
    width:100%;
    aspect-ratio:1 / 1.05;
    background:var(--primary-hover);
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-lg);
}

.hso-collection-highlight-main-image{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .7s cubic-bezier(.2,.65,.25,1);
}

.hso-collection-highlight-visual:hover
.hso-collection-highlight-main-image{
    transform:scale(1.035);
}

.hso-collection-highlight-number{
    position:absolute;
    right:20px;
    bottom:18px;
    color:var(--white);
    font-size:42px;
    line-height:1;
    font-weight:300;
    opacity:.75;
    z-index:2;
}

.hso-collection-highlight-info{
    min-width:0;
}

.hso-collection-highlight-info.left{
    text-align:left;
}

.hso-collection-highlight-info.center{
    text-align:center;
}

.hso-collection-highlight-info.right{
    text-align:right;
}

.hso-collection-highlight-info
.hso-collection-section-heading
h2{
    color:var(--white);
}

.hso-collection-highlight-info
h3{
    margin:8px 0 18px;
    color:var(--white);
    font-size:55px;
    line-height:.95;
    font-weight:800;
    letter-spacing:-2px;
}

.hso-collection-highlight-info
p{
    max-width:500px;
    margin:0;
    color:rgba(255,255,255,.72);
    line-height:1.75;
    font-size:12px;
}

.hso-collection-highlight-label{
    margin-top:20px;
    color:rgba(255,255,255,.75);
    font-size:8px;
    line-height:1.2;
    letter-spacing:2px;
    font-weight:800;
    text-transform:uppercase;
}

.hso-collection-highlight-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:16px;
}

.hso-collection-highlight-info.center
.hso-collection-highlight-actions{
    justify-content:center;
}

.hso-collection-highlight-info.right
.hso-collection-highlight-actions{
    justify-content:flex-end;
}

.hso-collection-highlight-view{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:42px;
    padding:12px 17px;
    color:var(--primary-color);
    background:var(--white);
    border:1px solid var(--white);
    text-decoration:none;
    font-size:9px;
    line-height:1;
    font-weight:800;
    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}

.hso-collection-highlight-view:hover{
    background:var(--primary-hover);
    border-color:var(--primary-hover);
    color:var(--white);
    transform:translateY(-2px);
}

.hso-collection-highlight-stack{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    border-top:1px solid var(--image-overlay-soft);
    padding-top:20px;
}

.hso-collection-highlight-mini{
    min-width:0;
    display:grid;
    grid-template-columns:75px minmax(0,1fr);
    gap:12px;
    align-items:center;
    padding:0 14px;
}

.hso-collection-highlight-mini
>span{
    color:rgba(255,255,255,.65);
    font-size:8px;
}

.hso-collection-highlight-mini
+ .hso-collection-highlight-mini{
    border-left:1px solid var(--image-overlay-soft);
}

.hso-collection-highlight-mini-img{
    width:75px;
    height:92px;
    display:block;
    object-fit:cover;
}

.hso-collection-highlight-mini
h4{
    margin:0 0 7px;
    color:var(--white);
    font-size:10px;
    line-height:1.3;
}

.hso-collection-highlight-mini
small{
    color:rgba(255,255,255,.65);
    font-size:8px;
}


/* ============================================================
   DESIGN 06 — CIRCLE MARQUEE
   DB KEY: collection_hotspots
   ============================================================ */

.hso-collection-circle-marquee{
    background:var(--white);
    color:var(--text-dark);
    overflow:hidden;
}

.hso-collection-circle-marquee *,
.hso-collection-circle-marquee *::before,
.hso-collection-circle-marquee *::after{
    box-sizing:border-box;
}

.hso-collection-circle-marquee-header{
    width:100%;
    margin-bottom:38px;
}

.hso-collection-circle-marquee-header
.hso-collection-section-heading{
    width:100%;
}

.hso-collection-circle-viewport{
    position:relative;
    width:100%;
    overflow:hidden;
    isolation:isolate;
}

.hso-collection-circle-track{
    display:flex;
    align-items:flex-start;
    flex-wrap:nowrap;
    width:200%;
    min-width:200%;
    gap:0;
    animation:
        hsoCollectionCircleMarquee
        var(--hso-marquee-duration,30s)
        linear
        infinite;
    will-change:transform;
    transform:translate3d(0,0,0);
}

.hso-collection-circle-set{
    display:flex;
    align-items:flex-start;
    flex-wrap:nowrap;
    flex:0 0 50%;
    width:50%;
    min-width:50%;
    gap:0;
}

.hso-collection-circle-item{
    position:relative;
    flex:0 0 calc(
        100% /
        var(--hso-circle-count,4)
    );
    width:calc(
        100% /
        var(--hso-circle-count,4)
    );
    min-width:0;
    text-align:center;
}

.hso-collection-circle-link{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    width:100%;
    color:inherit;
    text-decoration:none;
    outline:none;
}

.hso-collection-circle-image-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    width:var(--hso-circle-size,112px);
    height:var(--hso-circle-size,112px);
    flex:0 0 var(--hso-circle-size,112px);
    border-radius:50%;
    overflow:hidden;
    background:var(--extra-light);
    box-shadow:
        0 0 0 1px var(--border-color);
    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.hso-collection-circle-image{
    display:block;
    width:100%;
    height:100%;
    max-width:100%;
    object-fit:cover;
    border-radius:50%;
    user-select:none;
    -webkit-user-drag:none;
    transition:
        transform .55s cubic-bezier(.2,.65,.25,1),
        filter .35s ease;
}

.hso-collection-circle-image-placeholder{
    width:100%;
    height:100%;
    min-height:0;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--extra-light);
    color:var(--text-muted);
}

.hso-collection-circle-image-placeholder
i{
    font-size:24px;
}

.hso-collection-circle-info{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    min-width:0;
    margin-top:14px;
    gap:5px;
    padding:0 5px;
}

.hso-collection-circle-title{
    width:100%;
    color:var(--text-dark);
    font-size:11px;
    line-height:1.25;
    font-weight:800;
    text-align:center;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.hso-collection-circle-count{
    display:block;
    color:var(--text-muted);
    font-size:8px;
    line-height:1.2;
    letter-spacing:1px;
    text-transform:uppercase;
    white-space:nowrap;
}

.hso-collection-circle-footer{
    width:100%;
    margin-top:38px;
    text-align:center;
}

.hso-collection-circle-button{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:40px;
    padding:11px 19px;
    color:var(--text-dark);
    background:transparent;
    border:1px solid var(--text-dark);
    text-decoration:none;
    font-size:9px;
    line-height:1;
    font-weight:800;
    letter-spacing:.5px;
    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.hso-collection-circle-button:hover{
    background:var(--text-dark);
    color:var(--white);
    border-color:var(--text-dark);
    transform:translateY(-2px);
    box-shadow:var(--shadow-sm);
}

.hso-collection-circle-marquee
.hso-collection-empty{
    width:100%;
    padding:55px 20px;
    border:1px dashed var(--border-color);
    border-radius:var(--radius-md);
    font-size:11px;
}

@media (hover:hover){
    .hso-collection-circle-viewport:hover
    .hso-collection-circle-track{
        animation-play-state:paused;
    }

    .hso-collection-circle-link:hover
    .hso-collection-circle-image-wrap{
        transform:translateY(-4px);
        box-shadow:
            0 10px 25px rgba(var(--primary-rgb),.13),
            0 0 0 1px var(--primary-color);
    }

    .hso-collection-circle-link:hover
    .hso-collection-circle-image{
        transform:scale(1.07);
    }
}

.hso-collection-circle-link:focus-visible{
    outline:2px solid var(--primary-color);
    outline-offset:5px;
    border-radius:50%;
}

@keyframes hsoCollectionCircleMarquee{
    0%{
        transform:translate3d(0,0,0);
    }

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


/* ============================================================
   DESIGN 07 — RECOMMENDED COLLECTIONS
   ============================================================ */

.hso-recommended-collections{
    background:
        linear-gradient(
            135deg,
            var(--background),
            var(--extra-light)
        );
    overflow:hidden;
}

.hso-recommended-collections-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:20px;
    margin-bottom:32px;
}

.hso-recommended-collections-top
.hso-collection-section-heading{
    min-width:0;
}

.hso-recommended-collections-count{
    flex:0 0 auto;
    color:var(--text-muted);
    font-size:8px;
    line-height:1.2;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

.hso-recommended-collections-list{
    display:grid;
    grid-template-columns:
        repeat(
            var(--cs-rec-cols,3),
            minmax(0,1fr)
        );
    gap:var(--hso-card-gap,20px);
}

.hso-recommended-collections-list
.hso-collection-card-media{
    border-radius:var(--radius-md);
}

.hso-recommended-collections-list
.hso-collection-card-body{
    padding-top:14px;
}


/* ============================================================
   DESIGN 08 — COLLECTION LOOKBOOK
   ============================================================ */

.hso-collection-lookbook{
    background:
        linear-gradient(
            135deg,
            var(--bg-gradient-start),
            var(--bg-gradient-middle),
            var(--bg-gradient-end)
        );
    overflow:hidden;
}

.hso-collection-lookbook-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:20px;
    margin-bottom:25px;
}

.hso-collection-lookbook-head
>span{
    flex:0 0 auto;
    color:var(--text-light);
    font-size:8px;
    line-height:1.2;
    letter-spacing:2px;
    text-transform:uppercase;
}

.hso-collection-lookbook-stage{
    position:relative;
    min-height:720px;
    background:var(--border-color);
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow);
}

.hso-collection-lookbook-stage
>img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
}

.hso-lookbook-points{
    position:absolute;
    inset:0;
}

.hso-lookbook-point{
    position:absolute;
    transform:translate(-50%,-50%);
    border:0;
    background:transparent;
    padding:0;
    cursor:pointer;
    z-index:5;
}

.hso-lookbook-point
>span{
    display:grid;
    place-items:center;
    width:40px;
    height:40px;
    border:1px solid var(--image-overlay);
    background:var(--overlay-light);
    color:var(--white);
    border-radius:50%;
    font-size:8px;
    letter-spacing:1px;
    backdrop-filter:blur(7px);
    box-shadow:0 5px 18px rgba(0,0,0,.12);
    transition:
        background var(--transition-fast),
        transform var(--transition-fast),
        border-color var(--transition-fast);
}

.hso-lookbook-point:hover
>span,
.hso-lookbook-point.is-active
>span{
    background:var(--primary-color);
    border-color:var(--primary-color);
    transform:scale(1.08);
}

.hso-lookbook-card{
    position:absolute;
    left:20px;
    top:25px;
    width:290px;
    background:var(--white);
    display:grid;
    grid-template-columns:92px minmax(0,1fr);
    box-shadow:var(--shadow-lg);
    border-radius:var(--radius);
    opacity:0;
    pointer-events:none;
    transform:translateY(9px);
    transition:
        opacity var(--transition),
        transform var(--transition);
    text-align:left;
    padding:8px;
}

.hso-lookbook-point:hover
.hso-lookbook-card,
.hso-lookbook-point.is-active
.hso-lookbook-card{
    opacity:1;
    pointer-events:auto;
    transform:none;
}

.hso-lookbook-card
>div{
    height:120px;
    min-width:0;
    overflow:hidden;
}

.hso-lookbook-card-img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.hso-lookbook-card
section{
    min-width:0;
    padding:9px;
}

.hso-lookbook-card
small{
    display:block;
    color:var(--primary-hover);
    font-size:7px;
    line-height:1.2;
    letter-spacing:1.2px;
    font-weight:800;
    text-transform:uppercase;
}

.hso-lookbook-card
h3{
    margin:6px 0;
    color:var(--text-dark);
    font-size:10px;
    line-height:1.35;
    font-weight:800;
}

.hso-lookbook-card
p{
    margin:0 0 8px;
    color:var(--text-muted);
    font-size:8px;
    line-height:1.4;
}

.hso-lookbook-card
a{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--text-dark);
    text-decoration:none;
    font-size:8px;
    line-height:1;
    font-weight:800;
    transition:
        color var(--transition-fast),
        gap var(--transition-fast);
}

.hso-lookbook-card
a:hover{
    color:var(--primary-color);
    gap:9px;
}

.hso-lookbook-hint{
    text-align:center;
    color:var(--text-muted);
    font-size:9px;
    line-height:1.4;
    margin-top:12px;
}


/* ============================================================
   DESIGN 09 — COLLECTION HOTSPOTS
   ============================================================ */

.hso-collection-hotspots{
    background:var(--white);
    overflow:hidden;
}

.hso-collection-hotspots-shell{
    position:relative;
}

.hso-collection-hotspots-stage{
    position:relative;
    width:100%;
    overflow:hidden;
    background:var(--extra-light);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
}

.hso-collection-hotspots-stage
>img{
    display:block;
    width:100%;
    height:auto;
    object-fit:cover;
}

.hso-hotspot-point{
    position:absolute;
    transform:translate(-50%,-50%);
    width:40px;
    height:40px;
    padding:0;
    border:1px solid var(--white);
    border-radius:50%;
    background:var(--overlay-light);
    color:var(--white);
    display:grid;
    place-items:center;
    cursor:pointer;
    z-index:5;
    backdrop-filter:blur(6px);
    box-shadow:0 6px 20px rgba(0,0,0,.12);
    transition:
        transform var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast);
}

.hso-hotspot-point:hover{
    transform:translate(-50%,-50%) scale(1.08);
    background:var(--primary-color);
    border-color:var(--primary-color);
}

.hso-hotspot-card{
    position:absolute;
    width:260px;
    max-width:calc(100% - 20px);
    background:var(--white);
    box-shadow:var(--shadow-lg);
    border-radius:var(--radius);
    padding:10px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(8px);
    transition:
        opacity var(--transition-fast),
        visibility var(--transition-fast),
        transform var(--transition-fast);
    z-index:20;
}

.hso-hotspot-point:hover
+ .hso-hotspot-card,
.hso-hotspot-card.is-active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
}

.hso-hotspot-card
img{
    display:block;
    width:100%;
    aspect-ratio:4 / 5;
    object-fit:cover;
    border-radius:7px;
}

.hso-hotspot-card
h3{
    margin:10px 0 5px;
    color:var(--text-dark);
    font-size:12px;
    line-height:1.3;
    font-weight:800;
}

.hso-hotspot-card
p{
    margin:0;
    color:var(--text-muted);
    font-size:9px;
    line-height:1.5;
}

.hso-hotspot-card
a{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-top:9px;
    color:var(--text-dark);
    text-decoration:none;
    font-size:8px;
    line-height:1;
    font-weight:800;
    transition:
        color var(--transition-fast),
        gap var(--transition-fast);
}

.hso-hotspot-card
a:hover{
    color:var(--primary-color);
    gap:9px;
}


/* ============================================================
   RESPONSIVE 01 — LARGE DESKTOP 1201px+
   ============================================================ */

@media (min-width:1201px){

    .hso-collection-carousel{
        padding-left:40px;
        padding-right:40px;
        padding-top:80px;
        padding-bottom:80px;
    }

    .hso-collection-carousel-head{
        gap:32px;
        margin-bottom:34px;
    }

    .hso-collection-carousel-track{
        gap:22px;
    }

    .hso-collection-carousel
    .hso-collection-card{
        flex-basis:calc(
            (
                100% -
                (
                    22px *
                    (var(--cs-slides,4) - 1)
                )
            )
            /
            var(--cs-slides,4)
        );
    }

    .hso-collection-carousel
    .hso-collection-card-body{
        padding-top:16px;
    }

    .hso-collection-circle-marquee{
        padding-top:82px;
        padding-bottom:86px;
    }

    .hso-collection-circle-marquee-header{
        margin-bottom:42px;
    }
}


/* ============================================================
   RESPONSIVE 02 — LAPTOP 993px — 1200px
   ============================================================ */

@media (min-width:993px) and (max-width:1200px){

    .ps-layout{
        grid-template-columns:
            76px
            300px
            minmax(0,1fr);
    }

    .ps-workspace{
        padding:16px;
    }

    .ps-canvas{
        padding:18px;
    }

    .hso-collection-grid{
        padding-left:24px;
        padding-right:24px;
    }

    .hso-collection-section-heading
    h2{
        font-size:38px;
    }

    .hso-featured-collection-inner{
        gap:40px;
    }

    .hso-featured-collection-content
    h3{
        font-size:43px;
    }

    .hso-collection-highlight-shell{
        grid-template-columns:
            minmax(0,1fr)
            minmax(300px,.75fr);
        gap:40px;
    }

    .hso-collection-highlight-info
    h3{
        font-size:47px;
    }

    .hso-collection-editorial-shell{
        gap:40px;
    }

    .hso-collection-editorial-visual{
        grid-template-columns:
            minmax(0,1.5fr)
            minmax(170px,.65fr);
    }

    .hso-collection-editorial-lead-img{
        height:560px;
    }

    .hso-collection-lookbook-stage{
        min-height:620px;
    }

    .hso-collection-carousel{
        padding-left:32px;
        padding-right:32px;
        padding-top:64px;
        padding-bottom:64px;
    }

    .hso-collection-carousel-head{
        gap:26px;
        margin-bottom:30px;
    }

    .hso-collection-carousel-nav{
        gap:7px;
    }

    .hso-collection-carousel-nav button{
        width:40px;
        height:40px;
        flex-basis:40px;
    }

    .hso-collection-carousel-track{
        gap:18px;
    }

    .hso-collection-carousel
    .hso-collection-card{
        flex-basis:calc(
            (
                100% -
                (
                    18px *
                    (var(--cs-slides,4) - 1)
                )
            )
            /
            var(--cs-slides,4)
        );
    }

    .hso-collection-circle-marquee{
        padding-top:68px;
        padding-bottom:72px;
    }

    .hso-collection-circle-marquee-header{
        margin-bottom:34px;
    }

    .hso-recommended-collections-list{
        grid-template-columns:
            repeat(
                var(--cs-rec-tablet,3),
                minmax(0,1fr)
            );
    }
}


/* ============================================================
   RESPONSIVE 03 — TABLET 769px — 992px
   ============================================================ */

@media (min-width:769px) and (max-width:992px){

    .hso-collection-section-heading
    h2{
        font-size:34px;
        letter-spacing:-1.3px;
    }

    .hso-collection-section-heading
    p{
        font-size:11px;
        line-height:1.65;
    }

    .hso-collection-grid{
        padding:55px 24px 60px;
    }

    .hso-collection-grid
    .hso-collection-section-heading{
        margin-bottom:30px;
    }

    .hso-collection-grid-list{
        grid-template-columns:
            repeat(
                var(--cs-tablet-cols,3),
                minmax(0,1fr)
            );
        gap:calc(var(--cs-gap,20px) * .9);
    }

    .hso-collection-grid-list
    .hso-collection-card-title
    h3{
        font-size:13px;
    }

    .hso-collection-grid-footer{
        margin-top:34px;
    }

    .hso-collection-carousel{
        padding:56px 24px;
    }

    .hso-collection-carousel-head{
        align-items:center;
        gap:20px;
        margin-bottom:26px;
    }

    .hso-collection-carousel-nav{
        gap:7px;
    }

    .hso-collection-carousel-nav button{
        width:38px;
        height:38px;
        flex-basis:38px;
        font-size:12px;
    }

    .hso-collection-carousel-track{
        gap:16px;
    }

    .hso-collection-carousel
    .hso-collection-card{
        flex:0 0 calc(
            (100% - 16px) / 2
        );
    }

    .hso-featured-collection{
        padding-left:24px;
        padding-right:24px;
    }

    .hso-featured-collection-inner{
        grid-template-columns:
            minmax(0,1fr)
            minmax(280px,.9fr);
        gap:35px;
    }

    .hso-featured-collection-content
    h3{
        font-size:39px;
    }

    .hso-featured-collection-secondary{
        gap:14px;
    }

    .hso-collection-editorial{
        padding-left:24px;
        padding-right:24px;
    }

    .hso-collection-editorial-shell{
        grid-template-columns:
            minmax(230px,.7fr)
            minmax(0,1.3fr);
        gap:30px;
    }

    .hso-collection-editorial-copy{
        padding-top:15px;
    }

    .hso-collection-editorial-copy
    .hso-collection-section-heading
    h2{
        font-size:38px;
    }

    .hso-collection-editorial-visual{
        grid-template-columns:1fr;
    }

    .hso-collection-editorial-lead-img{
        height:520px;
    }

    .hso-collection-editorial-side{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:14px;
    }

    .hso-collection-highlight{
        padding-left:24px;
        padding-right:24px;
    }

    .hso-collection-highlight-shell{
        grid-template-columns:
            minmax(0,1fr)
            minmax(270px,.9fr);
        gap:35px;
    }

    .hso-collection-highlight-info
    h3{
        font-size:41px;
    }

    .hso-collection-highlight-stack{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }

    .hso-collection-highlight-mini{
        grid-template-columns:60px minmax(0,1fr);
        gap:9px;
        padding:0 8px;
    }

    .hso-collection-highlight-mini-img{
        width:60px;
        height:76px;
    }

    .hso-collection-circle-marquee{
        padding-top:58px;
        padding-bottom:62px;
    }

    .hso-collection-circle-marquee-shell{
        width:min(
            calc(100% - 28px),
            var(--hso-section-max-width,1200px)
        );
    }

    .hso-collection-circle-marquee-header{
        margin-bottom:30px;
    }

    .hso-collection-circle-item{
        flex:0 0 calc(
            100% /
            var(--hso-circle-count,4)
        );
        width:calc(
            100% /
            var(--hso-circle-count,4)
        );
    }

    .hso-collection-circle-info{
        margin-top:11px;
    }

    .hso-collection-circle-title{
        font-size:10px;
    }

    .hso-collection-circle-count{
        font-size:7px;
    }

    .hso-recommended-collections{
        padding-left:24px;
        padding-right:24px;
    }

    .hso-recommended-collections-list{
        grid-template-columns:
            repeat(
                var(--cs-rec-tablet,3),
                minmax(0,1fr)
            );
    }

    .hso-collection-lookbook{
        padding-left:20px;
        padding-right:20px;
    }

    .hso-collection-lookbook-stage{
        min-height:560px;
    }

    .hso-collection-hotspots{
        padding-left:20px;
        padding-right:20px;
    }
}


/* ============================================================
   RESPONSIVE 04 — MOBILE UNIVERSAL
   481px — 768px
   ============================================================ */

@media (min-width:481px) and (max-width:768px){

    .ps-topbar{
        height:auto;
        min-height:62px;
        padding:8px 12px;
        flex-wrap:wrap;
    }

    .ps-preview-head{
        order:3;
        width:100%;
        justify-content:space-between;
        margin:0;
    }

    .ps-top-actions{
        gap:5px;
    }

    .ps-top-actions
    .ps-btn{
        font-size:9px;
        padding:0 9px;
    }

    .ps-layout{
        display:flex;
        flex-direction:column;
    }

    .ps-sidebar{
        width:100%;
        border-right:0;
        border-bottom:1px solid var(--border-color);
    }

    .ps-workspace{
        padding:10px;
    }

    .ps-canvas{
        height:auto;
        min-height:500px;
        padding:7px;
    }

    .ps-drawer{
        left:8px !important;
        top:7vh;
        width:calc(100vw - 16px);
        height:86vh;
        grid-template-columns:1fr;
    }

    .ps-drawer-preview{
        display:none;
    }

    .ps-modal-card{
        max-height:96vh;
    }

    .ps-modal-body{
        max-height:76vh;
    }

    .ps-grid2,
    .ps-editor-checks{
        grid-template-columns:1fr;
    }

    .hso-collection-section-heading
    h2{
        font-size:30px;
        line-height:1;
        letter-spacing:-1px;
    }

    .hso-collection-section-heading
    p{
        font-size:10px;
        line-height:1.6;
    }

    .hso-collection-section-heading
    span,
    .hso-collection-section-heading
    small{
        font-size:7px;
        letter-spacing:1.7px;
    }

    .hso-collection-card-body{
        padding-top:10px;
    }

    .hso-collection-card-title
    h3{
        font-size:11px;
    }

    .hso-collection-card-description,
    .hso-collection-card-body
    p{
        font-size:8px;
        line-height:1.45;
    }

    .hso-collection-card-count{
        font-size:7px;
    }

    .hso-collection-card-cta{
        margin-top:8px;
        font-size:8px;
    }

    .hso-collection-badge{
        left:7px;
        top:7px;
        min-height:21px;
        padding:5px 7px;
        font-size:6px;
    }


    /* --------------------------------------------------------
       DESIGN 01
       -------------------------------------------------------- */

    .hso-collection-grid{
        padding:45px 16px 48px;
    }

    .hso-collection-grid-inner{
        width:100%;
    }

    .hso-collection-grid
    .hso-collection-section-heading{
        margin-bottom:24px;
    }

    .hso-collection-grid
    .hso-collection-section-heading
    h2{
        font-size:29px;
        line-height:1.02;
    }

    .hso-collection-grid-list{
        grid-template-columns:
            repeat(
                var(--cs-mobile-cols,2),
                minmax(0,1fr)
            ) !important;
        gap:
            clamp(
                9px,
                calc(var(--cs-gap,20px) * .7),
                14px
            ) !important;
    }

    .hso-collection-grid-list > *{
        width:100%;
        min-width:0;
        overflow:hidden;
    }

    .hso-collection-grid-list
    .hso-collection-card-media{
        border-radius:var(--radius);
    }

    .hso-collection-grid-list
    img{
        width:100%;
        height:auto;
        min-height:0;
        object-fit:cover;
    }

    .hso-collection-grid-list
    .hso-collection-card-title
    h3{
        font-size:11px;
    }

    .hso-collection-grid-footer{
        margin-top:28px;
    }

    .hso-collection-grid-button{
        min-height:36px;
        padding:10px 16px;
        font-size:8px;
    }


    /* --------------------------------------------------------
       DESIGN 02
       -------------------------------------------------------- */

    .hso-collection-carousel{
        padding:42px 0 44px 16px;
    }

    .hso-collection-carousel-inner{
        width:100%;
    }

    .hso-collection-carousel-head{
        align-items:center;
        gap:12px;
        margin-bottom:22px;
        padding-right:16px;
    }

    .hso-collection-carousel-head
    .hso-collection-section-heading{
        min-width:0;
    }

    .hso-collection-carousel-head
    .hso-collection-section-heading
    h2{
        margin-top:0;
        margin-bottom:6px;
    }

    .hso-collection-carousel-head
    .hso-collection-section-heading
    p{
        max-width:100%;
    }

    .hso-collection-carousel-nav{
        gap:5px;
    }

    .hso-collection-carousel-nav button{
        width:34px;
        height:34px;
        flex:0 0 34px;
        font-size:11px;
    }

    .hso-collection-carousel-viewport{
        width:calc(100vw - 16px);
        overflow-x:auto;
        overflow-y:hidden;
        -webkit-overflow-scrolling:touch;
        scroll-snap-type:x mandatory;
        overscroll-behavior-x:contain;
        scrollbar-width:none;
    }

    .hso-collection-carousel-viewport::-webkit-scrollbar{
        display:none;
        width:0;
        height:0;
    }

    .hso-collection-carousel-track{
        display:flex;
        width:max-content;
        min-width:100%;
        gap:13px;
        padding-right:16px;
        scroll-behavior:smooth;
    }

    .hso-collection-carousel
    .hso-collection-card{
        flex:0 0 calc(
            (100vw - 16px - 13px) * .86
        );
        width:calc(
            (100vw - 16px - 13px) * .86
        );
        min-width:0;
        scroll-snap-align:start;
    }

    .hso-collection-carousel
    .hso-collection-card-body{
        padding:12px 2px 0;
    }

    .hso-collection-carousel-dots{
        margin-top:20px;
        padding-right:16px;
        gap:6px;
    }

    .hso-collection-carousel-dots
    button{
        width:6px;
        height:6px;
        min-width:6px;
        min-height:6px;
    }


    /* --------------------------------------------------------
       DESIGN 03
       -------------------------------------------------------- */

    .hso-featured-collection{
        padding:55px 16px;
    }

    .hso-featured-collection-inner,
    .hso-featured-collection-inner.left,
    .hso-featured-collection-inner.right{
        grid-template-columns:1fr;
        gap:30px;
    }

    .hso-featured-collection-inner.left
    .hso-featured-collection-gallery,
    .hso-featured-collection-inner.right
    .hso-featured-collection-gallery{
        order:1;
    }

    .hso-featured-collection-inner.left
    .hso-featured-collection-content,
    .hso-featured-collection-inner.right
    .hso-featured-collection-content{
        order:2;
    }

    .hso-featured-collection-content{
        padding:4px 0;
    }

    .hso-featured-collection-content
    h3{
        font-size:40px;
        letter-spacing:-1.5px;
    }

    .hso-featured-collection-content
    p{
        font-size:10px;
        line-height:1.65;
    }

    .hso-featured-collection-cta-row{
        margin-top:15px;
    }

    .hso-featured-collection-secondary{
        grid-template-columns:1fr 1fr;
        gap:12px;
        margin-top:30px;
    }


    /* --------------------------------------------------------
       DESIGN 04
       -------------------------------------------------------- */

    .hso-collection-editorial{
        padding:60px 16px;
    }

    .hso-collection-editorial-shell{
        grid-template-columns:1fr;
        gap:32px;
        width:100%;
    }

    .hso-collection-editorial-copy{
        padding-top:0;
        max-width:none !important;
    }

    .hso-collection-editorial-copy
    .hso-collection-section-heading
    h2{
        font-size:54px;
        letter-spacing:-2px;
    }

    .hso-collection-editorial-copy-rule{
        margin:25px 0 16px;
    }

    .hso-collection-editorial-meta{
        font-size:6.5px;
    }

    .hso-collection-editorial-cta{
        margin-top:25px;
    }

    .hso-collection-editorial-visual{
        grid-template-columns:1fr;
        gap:16px;
    }

    .hso-collection-editorial-lead-img{
        height:480px;
    }

    .hso-collection-editorial-side{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:12px;
    }

    .hso-collection-editorial-side-item{
        grid-template-columns:58px minmax(0,1fr);
        gap:8px;
    }

    .hso-collection-editorial-side-img{
        width:58px;
        height:78px;
    }


    /* --------------------------------------------------------
       DESIGN 05
       -------------------------------------------------------- */

    .hso-collection-highlight{
        padding:60px 16px;
    }

    .hso-collection-highlight-shell,
    .hso-collection-highlight-shell.image-left,
    .hso-collection-highlight-shell.image-right{
        grid-template-columns:1fr;
        gap:30px;
    }

    .hso-collection-highlight-shell.image-left
    .hso-collection-highlight-visual,
    .hso-collection-highlight-shell.image-right
    .hso-collection-highlight-visual{
        order:1;
    }

    .hso-collection-highlight-shell.image-left
    .hso-collection-highlight-info,
    .hso-collection-highlight-shell.image-right
    .hso-collection-highlight-info{
        order:2;
    }

    .hso-collection-highlight-info
    h3{
        font-size:43px;
        letter-spacing:-1.5px;
    }

    .hso-collection-highlight-info
    p{
        font-size:10px;
        line-height:1.65;
    }

    .hso-collection-highlight-stack{
        grid-template-columns:1fr !important;
        gap:0;
        margin-top:5px;
    }

    .hso-collection-highlight-mini{
        grid-template-columns:75px minmax(0,1fr);
        padding:11px 0;
    }

    .hso-collection-highlight-mini
    + .hso-collection-highlight-mini{
        border-left:0;
        border-top:1px solid var(--image-overlay-soft);
    }


    /* --------------------------------------------------------
       DESIGN 06
       -------------------------------------------------------- */

    .hso-collection-circle-marquee{
        padding:45px 0 48px;
        --hso-circle-size:100px !important;
    }

    .hso-collection-circle-marquee-shell{
        width:100%;
        max-width:none;
    }

    .hso-collection-circle-marquee-header{
        width:calc(100% - 24px);
        margin-left:auto;
        margin-right:auto;
        margin-bottom:25px;
    }

    .hso-collection-circle-viewport{
        width:100%;
    }

    .hso-collection-circle-item{
        flex:0 0 33.333333%;
        width:33.333333%;
        min-width:33.333333%;
        max-width:33.333333%;
    }

    .hso-collection-circle-set{
        flex:0 0 50%;
        width:50%;
        min-width:50%;
    }

    .hso-collection-circle-track{
        width:200%;
        min-width:200%;
    }

    .hso-collection-circle-image-wrap{
        width:100px;
        height:100px;
        flex:0 0 100px;
    }

    .hso-collection-circle-info{
        margin-top:10px;
        gap:3px;
        padding:0 4px;
    }

    .hso-collection-circle-title{
        font-size:10px;
    }

    .hso-collection-circle-count{
        font-size:7px;
    }

    .hso-collection-circle-footer{
        margin-top:30px;
    }

    .hso-collection-circle-button{
        min-height:36px;
        padding:10px 16px;
        font-size:8px;
    }


    /* --------------------------------------------------------
       DESIGN 07
       -------------------------------------------------------- */

    .hso-recommended-collections{
        padding:50px 16px;
    }

    .hso-recommended-collections-top{
        align-items:center;
        gap:12px;
        margin-bottom:25px;
    }

    .hso-recommended-collections-list{
        grid-template-columns:
            repeat(
                var(--cs-rec-mobile,2),
                minmax(0,1fr)
            );
        gap:22px 10px;
    }


    /* --------------------------------------------------------
       DESIGN 08
       -------------------------------------------------------- */

    .hso-collection-lookbook{
        padding:45px 12px;
    }

    .hso-collection-lookbook-head{
        align-items:center;
        gap:12px;
        margin-bottom:18px;
    }

    .hso-collection-lookbook-stage{
        min-height:520px;
        border-radius:var(--radius);
    }

    .hso-lookbook-point
    >span{
        width:34px;
        height:34px;
        font-size:7px;
    }

    .hso-lookbook-card{
        position:fixed;
        left:50% !important;
        top:auto !important;
        bottom:15px;
        width:min(
            310px,
            calc(100vw - 30px)
        );
        transform:
            translate(-50%,10px) !important;
        z-index:50;
    }

    .hso-lookbook-point.is-active
    .hso-lookbook-card{
        transform:
            translate(-50%,0) !important;
    }


    /* --------------------------------------------------------
       DESIGN 09
       -------------------------------------------------------- */

    .hso-collection-hotspots{
        padding:45px 16px;
    }

    .hso-collection-hotspots-shell{
        width:100%;
    }

    .hso-collection-hotspots-stage{
        border-radius:var(--radius);
    }

    .hso-hotspot-point{
        width:34px;
        height:34px;
    }

    .hso-hotspot-card{
        width:230px;
        max-width:calc(100vw - 30px);
    }
}


/* ============================================================
   RESPONSIVE 05 — SMALL MOBILE
   360px — 480px
   ============================================================ */

@media (min-width:360px) and (max-width:480px){

    .hso-collection-grid,
    .hso-collection-carousel,
    .hso-featured-collection,
    .hso-collection-editorial,
    .hso-collection-highlight,
    .hso-collection-hotspots,
    .hso-recommended-collections,
    .hso-collection-lookbook,
    .hso-collection-circle-marquee{
        padding-top:min(
            var(--hso-section-padding,70px),
            50px
        );
        padding-bottom:min(
            var(--hso-section-padding,70px),
            50px
        );
    }

    .hso-collection-grid-inner,
    .hso-collection-carousel-inner,
    .hso-featured-collection-inner,
    .hso-featured-collection-secondary,
    .hso-collection-editorial-shell,
    .hso-collection-highlight-shell,
    .hso-collection-hotspots-shell,
    .hso-recommended-collections-shell,
    .hso-collection-lookbook-shell,
    .hso-collection-circle-marquee-shell{
        width:calc(100% - 24px);
    }

    .hso-collection-section-heading
    h2{
        font-size:27px;
        letter-spacing:-1px;
    }

    .hso-collection-section-heading
    p{
        font-size:9px;
        line-height:1.55;
    }

    .hso-collection-section-heading
    span,
    .hso-collection-section-heading
    small{
        font-size:6.5px;
        letter-spacing:1.5px;
    }


    /* --------------------------------------------------------
       DESIGN 01
       -------------------------------------------------------- */

    .hso-collection-grid{
        padding-left:12px;
        padding-right:12px;
    }

    .hso-collection-grid-inner{
        width:100%;
    }

    .hso-collection-grid
    .hso-collection-section-heading{
        margin-bottom:19px;
    }

    .hso-collection-grid
    .hso-collection-section-heading
    h2{
        font-size:25px;
    }

    .hso-collection-grid-list{
        gap:7px !important;
    }

    .hso-collection-grid-list
    .hso-collection-card-title
    h3{
        font-size:10px;
    }

    .hso-collection-grid-list
    p{
        font-size:7.5px;
    }

    .hso-collection-grid-footer{
        margin-top:25px;
    }

    .hso-collection-grid-button{
        min-height:34px;
        padding:9px 14px;
        font-size:7.5px;
    }


    /* --------------------------------------------------------
       DESIGN 02
       -------------------------------------------------------- */

    .hso-collection-carousel{
        padding-left:12px;
        padding-right:0;
        padding-top:34px;
        padding-bottom:38px;
    }

    .hso-collection-carousel-inner{
        width:100%;
    }

    .hso-collection-carousel-head{
        align-items:center;
        padding-right:12px;
        margin-bottom:19px;
        gap:8px;
    }

    .hso-collection-carousel-head
    .hso-collection-section-heading
    h2{
        margin-top:0;
        margin-bottom:5px;
    }

    .hso-collection-carousel-nav{
        gap:4px;
    }

    .hso-collection-carousel-nav button{
        width:32px;
        height:32px;
        flex:0 0 32px;
        font-size:10px;
    }

    .hso-collection-carousel-track{
        gap:11px;
        padding-right:12px;
    }

    .hso-collection-carousel
    .hso-collection-card{
        flex-basis:calc(
            (100vw - 12px - 11px) * .88
        );
        width:calc(
            (100vw - 12px - 11px) * .88
        );
    }

    .hso-collection-carousel
    .hso-collection-card-body{
        padding-top:11px;
    }

    .hso-collection-carousel-dots{
        padding-right:12px;
        margin-top:17px;
    }


    /* --------------------------------------------------------
       DESIGN 03
       -------------------------------------------------------- */

    .hso-featured-collection{
        padding-left:12px;
        padding-right:12px;
    }

    .hso-featured-collection-inner{
        gap:25px;
    }

    .hso-featured-collection-content
    h3{
        font-size:35px;
    }

    .hso-featured-collection-content
    p{
        font-size:9px;
    }

    .hso-featured-collection-secondary{
        gap:8px;
    }


    /* --------------------------------------------------------
       DESIGN 04
       -------------------------------------------------------- */

    .hso-collection-editorial{
        padding-left:12px;
        padding-right:12px;
    }

    .hso-collection-editorial-shell{
        width:100%;
    }

    .hso-collection-editorial-copy
    .hso-collection-section-heading
    h2{
        font-size:47px;
    }

    .hso-collection-editorial-lead-img{
        height:400px;
    }

    .hso-collection-editorial-side{
        grid-template-columns:1fr;
    }


    /* --------------------------------------------------------
       DESIGN 05
       -------------------------------------------------------- */

    .hso-collection-highlight{
        padding-left:12px;
        padding-right:12px;
    }

    .hso-collection-highlight-info
    h3{
        font-size:37px;
    }

    .hso-collection-highlight-info
    p{
        font-size:9px;
    }

    .hso-collection-highlight-mini{
        grid-template-columns:65px minmax(0,1fr);
        gap:9px;
    }

    .hso-collection-highlight-mini-img{
        width:65px;
        height:80px;
    }


    /* --------------------------------------------------------
       DESIGN 06
       -------------------------------------------------------- */

    .hso-collection-circle-marquee{
        padding-top:36px;
        padding-bottom:40px;
        --hso-circle-size:88px !important;
    }

    .hso-collection-circle-marquee-shell{
        width:100%;
        max-width:none;
    }

    .hso-collection-circle-marquee-header{
        width:calc(100% - 20px);
        margin-left:auto;
        margin-right:auto;
        margin-bottom:21px;
    }

    .hso-collection-circle-item{
        flex:0 0 33.333333%;
        width:33.333333%;
        min-width:33.333333%;
        max-width:33.333333%;
    }

    .hso-collection-circle-set{
        flex:0 0 50%;
        width:50%;
        min-width:50%;
    }

    .hso-collection-circle-track{
        width:200%;
        min-width:200%;
    }

    .hso-collection-circle-image-wrap{
        width:88px;
        height:88px;
        flex:0 0 88px;
    }

    .hso-collection-circle-info{
        margin-top:9px;
        gap:3px;
        padding:0 3px;
    }

    .hso-collection-circle-title{
        font-size:9px;
    }

    .hso-collection-circle-count{
        font-size:7px;
        letter-spacing:.7px;
    }

    .hso-collection-circle-footer{
        margin-top:26px;
    }


    /* --------------------------------------------------------
       DESIGN 07
       -------------------------------------------------------- */

    .hso-recommended-collections{
        padding-left:12px;
        padding-right:12px;
    }

    .hso-recommended-collections-top{
        margin-bottom:20px;
    }

    .hso-recommended-collections-list{
        grid-template-columns:
            repeat(
                var(--cs-rec-mobile,2),
                minmax(0,1fr)
            );
        gap:18px 8px;
    }


    /* --------------------------------------------------------
       DESIGN 08
       -------------------------------------------------------- */

    .hso-collection-lookbook{
        padding-left:10px;
        padding-right:10px;
    }

    .hso-collection-lookbook-shell{
        width:100%;
    }

    .hso-collection-lookbook-stage{
        min-height:440px;
    }

    .hso-lookbook-point
    >span{
        width:32px;
        height:32px;
    }


    /* --------------------------------------------------------
       DESIGN 09
       -------------------------------------------------------- */

    .hso-collection-hotspots{
        padding-left:12px;
        padding-right:12px;
    }

    .hso-collection-hotspots-shell{
        width:100%;
    }

    .hso-hotspot-point{
        width:32px;
        height:32px;
    }

    .hso-hotspot-card{
        width:210px;
    }
}


/* ============================================================
   RESPONSIVE 06 — VERY SMALL MOBILE
   BELOW 360px
   ============================================================ */

@media (max-width:359px){

    .ps-brand span{
        font-size:10px;
    }

    .ps-brand-mark{
        width:36px;
        height:36px;
    }

    .ps-preview-head h1{
        font-size:12px;
    }

    .hso-collection-section-heading
    h2{
        font-size:23px;
        letter-spacing:-.8px;
    }

    .hso-collection-section-heading
    p{
        font-size:8.5px;
    }

    .hso-collection-badge{
        min-height:19px;
        font-size:6px;
        padding:5px 6px;
        left:6px;
        top:6px;
    }

    .hso-collection-card-title
    h3{
        font-size:9px;
    }

    .hso-collection-card-cta{
        font-size:7px;
    }


    /* --------------------------------------------------------
       DESIGN 01
       -------------------------------------------------------- */

    .hso-collection-grid{
        padding:
            32px
            10px
            38px;
    }

    .hso-collection-grid-inner{
        width:100%;
    }

    .hso-collection-grid
    .hso-collection-section-heading{
        margin-bottom:17px;
    }

    .hso-collection-grid
    .hso-collection-section-heading
    h2{
        font-size:22px;
    }

    .hso-collection-grid-list{
        gap:7px !important;
    }

    .hso-collection-grid-list
    .hso-collection-card-title
    h3{
        font-size:9px;
    }

    .hso-collection-grid-list
    p{
        font-size:7px;
    }


    /* --------------------------------------------------------
       DESIGN 02
       -------------------------------------------------------- */

    .hso-collection-carousel{
        padding:
            30px
            0
            34px
            10px;
    }

    .hso-collection-carousel-head{
        align-items:center;
        padding-right:10px;
        margin-bottom:17px;
        gap:7px;
    }

    .hso-collection-carousel-nav{
        gap:3px;
    }

    .hso-collection-carousel-nav button{
        width:30px;
        height:30px;
        flex:0 0 30px;
        font-size:9px;
    }

    .hso-collection-carousel-track{
        gap:9px;
        padding-right:10px;
    }

    .hso-collection-carousel
    .hso-collection-card{
        flex-basis:calc(
            (100vw - 10px - 9px) * .90
        );
        width:calc(
            (100vw - 10px - 9px) * .90
        );
    }

    .hso-collection-carousel
    .hso-collection-card-body{
        padding:
            10px
            2px
            0;
    }

    .hso-collection-carousel-dots{
        padding-right:10px;
        margin-top:15px;
        gap:5px;
    }


    /* --------------------------------------------------------
       DESIGN 03
       -------------------------------------------------------- */

    .hso-featured-collection{
        padding-left:10px;
        padding-right:10px;
    }

    .hso-featured-collection-content
    h3{
        font-size:32px;
    }

    .hso-featured-collection-secondary{
        gap:7px;
    }


    /* --------------------------------------------------------
       DESIGN 04
       -------------------------------------------------------- */

    .hso-collection-editorial{
        padding-left:10px;
        padding-right:10px;
    }

    .hso-collection-editorial-copy
    .hso-collection-section-heading
    h2{
        font-size:41px;
    }

    .hso-collection-editorial-lead-img{
        height:350px;
    }


    /* --------------------------------------------------------
       DESIGN 05
       -------------------------------------------------------- */

    .hso-collection-highlight{
        padding-left:10px;
        padding-right:10px;
    }

    .hso-collection-highlight-info
    h3{
        font-size:33px;
    }

    .hso-collection-highlight-mini{
        grid-template-columns:58px minmax(0,1fr);
    }

    .hso-collection-highlight-mini-img{
        width:58px;
        height:72px;
    }


    /* --------------------------------------------------------
       DESIGN 06
       -------------------------------------------------------- */

    .hso-collection-circle-marquee{
        padding-top:32px;
        padding-bottom:36px;
        --hso-circle-size:78px !important;
    }

    .hso-collection-circle-marquee-shell{
        width:100%;
        max-width:none;
    }

    .hso-collection-circle-marquee-header{
        width:calc(100% - 20px);
        margin-left:auto;
        margin-right:auto;
        margin-bottom:18px;
    }

    .hso-collection-circle-item{
        flex:0 0 33.333333%;
        width:33.333333%;
        min-width:33.333333%;
        max-width:33.333333%;
    }

    .hso-collection-circle-set{
        flex:0 0 50%;
        width:50%;
        min-width:50%;
    }

    .hso-collection-circle-track{
        width:200%;
        min-width:200%;
    }

    .hso-collection-circle-image-wrap{
        width:78px;
        height:78px;
        flex:0 0 78px;
    }

    .hso-collection-circle-info{
        margin-top:8px;
        gap:3px;
        padding:0 2px;
    }

    .hso-collection-circle-title{
        font-size:8px;
    }

    .hso-collection-circle-count{
        font-size:6.5px;
    }


    /* --------------------------------------------------------
       DESIGN 07
       -------------------------------------------------------- */

    .hso-recommended-collections{
        padding-left:10px;
        padding-right:10px;
    }

    .hso-recommended-collections-list{
        gap:16px 7px;
    }


    /* --------------------------------------------------------
       DESIGN 08
       -------------------------------------------------------- */

    .hso-collection-lookbook{
        padding-left:8px;
        padding-right:8px;
    }

    .hso-collection-lookbook-stage{
        min-height:380px;
    }

    .hso-lookbook-point
    >span{
        width:29px;
        height:29px;
        font-size:6px;
    }


    /* --------------------------------------------------------
       DESIGN 09
       -------------------------------------------------------- */

    .hso-collection-hotspots{
        padding-left:10px;
        padding-right:10px;
    }

    .hso-hotspot-point{
        width:29px;
        height:29px;
    }

    .hso-hotspot-card{
        width:195px;
    }
}


/* ============================================================
   MOBILE CAROUSEL SCROLL
   ONLY MOBILE
   ============================================================ */

@media (max-width:768px){

    .hso-collection-grid-list{
        grid-template-columns:
            repeat(
                var(--cs-mobile-cols,2),
                minmax(0,1fr)
            );
    }

    .hso-recommended-collections-list{
        grid-template-columns:
            repeat(
                var(--cs-rec-mobile,2),
                minmax(0,1fr)
            );
    }

    .hso-collection-carousel[data-mobile-scroll="1"]
    .hso-collection-carousel-viewport{
        overflow-x:auto;
        overflow-y:hidden;
        scroll-snap-type:x proximity;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior-x:contain;
        scrollbar-width:none;
    }

    .hso-collection-carousel[data-mobile-scroll="1"]
    .hso-collection-carousel-viewport::-webkit-scrollbar{
        display:none;
    }

    .hso-collection-carousel[data-mobile-scroll="1"]
    .hso-collection-carousel-track{
        width:max-content;
        min-width:100%;
        scroll-behavior:smooth;
    }

    .hso-collection-carousel[data-mobile-scroll="1"]
    .hso-collection-card{
        scroll-snap-align:start;
    }
}


/* ============================================================
   TOUCH DEVICES
   ============================================================ */

@media (hover:none) and (pointer:coarse){

    .hso-collection-carousel-nav
    button:hover{
        background:var(--white);
        color:var(--text-dark);
        border-color:var(--border-color);
        transform:none;
        box-shadow:none;
    }

    .hso-collection-carousel-nav
    button:active{
        background:var(--text-dark);
        color:var(--white);
        border-color:var(--text-dark);
        transform:scale(.94);
    }

    .hso-collection-carousel-viewport{
        cursor:grab;
    }

    .hso-collection-carousel-viewport:active{
        cursor:grabbing;
    }

    .hso-collection-circle-viewport:hover
    .hso-collection-circle-track{
        animation-play-state:running;
    }

    .hso-collection-circle-link:active
    .hso-collection-circle-image-wrap{
        transform:scale(.97);
    }

    .hso-collection-card:hover
    .hso-collection-card-image{
        transform:none;
    }

    .hso-featured-collection-gallery:hover
    .hso-featured-collection-image,
    .hso-collection-editorial-lead:hover
    .hso-collection-editorial-lead-img,
    .hso-collection-highlight-visual:hover
    .hso-collection-highlight-main-image{
        transform:none;
    }
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

.hso-collection-carousel-nav
button:focus-visible,
.hso-collection-carousel-dots
button:focus-visible,
.hso-collection-carousel
a:focus-visible,
.hso-collection-grid
a:focus-visible,
.hso-featured-collection
a:focus-visible,
.hso-collection-editorial
a:focus-visible,
.hso-collection-highlight
a:focus-visible,
.hso-recommended-collections
a:focus-visible,
.hso-collection-lookbook
a:focus-visible,
.hso-collection-hotspots
a:focus-visible{
    outline:2px solid var(--primary-color);
    outline-offset:3px;
}

.hso-hotspot-point:focus-visible,
.hso-lookbook-point:focus-visible{
    outline:2px solid var(--primary-color);
    outline-offset:4px;
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
    }

    .hso-collection-grid *,
    .hso-collection-carousel *,
    .hso-featured-collection *,
    .hso-collection-editorial *,
    .hso-collection-highlight *,
    .hso-collection-hotspots *,
    .hso-recommended-collections *,
    .hso-collection-lookbook *,
    .hso-collection-circle-marquee *{
        transition:none !important;
        animation:none !important;
    }

    .hso-collection-circle-track{
        transform:none !important;
    }
}


/* ============================================================
   FINAL OVERFLOW SAFETY
   ============================================================ */

.hso-collection-grid,
.hso-collection-carousel,
.hso-featured-collection,
.hso-collection-editorial,
.hso-collection-highlight,
.hso-collection-hotspots,
.hso-recommended-collections,
.hso-collection-lookbook,
.hso-collection-circle-marquee{
    max-width:100%;
    min-width:0;
}

.hso-collection-grid-inner,
.hso-collection-carousel-inner,
.hso-featured-collection-inner,
.hso-featured-collection-secondary,
.hso-collection-editorial-shell,
.hso-collection-highlight-shell,
.hso-collection-hotspots-shell,
.hso-recommended-collections-shell,
.hso-collection-lookbook-shell,
.hso-collection-circle-marquee-shell{
    min-width:0;
    max-width:100%;
}

.hso-collection-grid-list,
.hso-recommended-collections-list{
    min-width:0;
    max-width:100%;
}

.hso-collection-card,
.hso-featured-collection-content,
.hso-collection-editorial-copy,
.hso-collection-highlight-info{
    min-width:0;
}


/* ============================================================
   END — HSO COLLECTION BUILDER COMPLETE CSS
   ============================================================ */