/*
 * Aristom Shop CSS v3.0
 * Matches desktop mockup exactly — accent #A81E24
 */

:root {
    --ar-red:        #A81E24;
    --ar-red-dark:   #7a1619;
    --ar-red-soft:   #FBECEC;
    --ar-ink:        #0F0F10;
    --ar-ink-2:      #3A3A3D;
    --ar-muted:      #7A7B80;
    --ar-line:       #ECECEE;
    --ar-bg:         #fff;
    --ar-bg-2:       #FAFAFA;
    --ar-img-bg:     #ffffff;
    --ar-radius:     14px;
    --ar-radius-sm:  10px;
    --ar-shadow:     0 1px 2px rgba(15,15,16,.04), 0 8px 24px rgba(15,15,16,.06);
    --ar-sidebar-w:  260px;
    --ar-gap:        40px;
    --ar-transition: .18s;
}

html, body { overflow-x: hidden; }

/* ── Login prompt ── */
.aristom-login-for-price {
    display:         inline-flex;
    align-items:     center;
    gap:             5px;
    background:      var(--ar-red-soft);
    color:           var(--ar-red);
    font-size:       12px;
    font-weight:     600;
    padding:         5px 10px;
    border-radius:   999px;
    text-decoration: none;
    border:          1px solid rgba(168,30,36,0.15);
    transition:      all var(--ar-transition);
    cursor:          pointer;
    font-family:     'Inter', sans-serif;
}
.aristom-login-for-price:hover { background: var(--ar-red); color: #fff; }
.aristom-login-cart {
    display:         flex;
    width:           100%;
    justify-content: center;
    padding:         13px 20px;
    font-size:       14px;
    margin-top:      10px;
    border-radius:   999px;
}

/* ── Breadcrumb bar — full width like mockup ── */
.ar-crumbs {
    padding:       18px 0;
    border-bottom: 1px solid var(--ar-line);
    background:    var(--ar-bg);
}

/* ── Page header — only used for category title now inside toolbar ── */
.aristom-page-head {
    padding:    0;
    background: var(--ar-bg);
}

.aristom-crumb {
    display:       flex;
    flex-wrap:     wrap;
    gap:           6px;
    align-items:   center;
    font-size:     12.5px;
    color:         var(--ar-muted);
    margin-bottom: 14px;
    font-family:   'Inter', sans-serif;
}
.aristom-crumb a       { color: var(--ar-muted); text-decoration: none; }
.aristom-crumb a:hover { color: var(--ar-ink); }
.aristom-crumb .sep    { opacity: .45; }
.aristom-crumb .curr   { color: var(--ar-ink); font-weight: 500; }

.aristom-head-row    { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.aristom-cat-title   { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 28px; line-height: 1.15; letter-spacing: -.015em; color: var(--ar-ink); margin: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.aristom-count-pill  { font-size: 13px; font-weight: 500; color: var(--ar-muted); background: var(--ar-bg-2); border: 1px solid var(--ar-line); padding: 4px 12px; border-radius: 999px; font-family: 'Inter', sans-serif; }
.aristom-cat-desc    { color: var(--ar-muted); margin-top: 6px; max-width: 600px; font-size: 14px; line-height: 1.6; font-family: 'Inter', sans-serif; }

/* ── Layout ── */
.aristom-container {
    max-width:  1280px;
    margin:     0 auto;
    padding:    0 28px;
    box-sizing: border-box;
}

.aristom-listing {
    display:               grid;
    grid-template-columns: var(--ar-sidebar-w) minmax(0, 1fr);
    gap:                   var(--ar-gap);
    padding:               40px 28px;
    max-width:             1280px;
    margin:                0 auto;
    box-sizing:            border-box;
    align-items:           start;
}

/* ── Sidebar / Filters ── */
.aristom-sidebar {
    position:   sticky;
    top:        88px;
    align-self: start;
    max-height: calc(100vh - 108px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(15,15,16,.1) transparent;
}
.aristom-sidebar::-webkit-scrollbar       { width: 4px; }
.aristom-sidebar::-webkit-scrollbar-thumb { background: rgba(15,15,16,.1); border-radius: 4px; }

.aristom-sidebar h3 {
    font-family:   'Inter', sans-serif;
    font-size:     13px;
    font-weight:   600;
    margin:        0 0 16px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color:         var(--ar-ink);
}

.ar-filtergroup {
    border-bottom: 1px solid var(--ar-line);
    padding:       18px 0;
}
.ar-filtergroup:first-of-type { padding-top: 0; }
.ar-filtergroup:last-of-type  { border-bottom: none; }

.ar-filter-label {
    font-family:   'Inter', sans-serif;
    font-size:     13.5px;
    font-weight:   600;
    color:         var(--ar-ink);
    margin-bottom: 12px;
    display:       flex;
    justify-content: space-between;
    align-items:   center;
    cursor:        pointer;
}
.ar-filter-label svg { width: 14px; height: 14px; color: var(--ar-muted); transition: transform var(--ar-transition); }
.ar-filter-label.open svg { transform: rotate(180deg); }

.ar-filter-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.ar-filter-item {
    font-family:  'Inter', sans-serif;
    font-size:    13px;
    color:        var(--ar-ink-2);
    display:      flex;
    align-items:  center;
    gap:          9px;
    cursor:       pointer;
    transition:   color var(--ar-transition);
}
.ar-filter-item:hover { color: var(--ar-ink); }

.ar-cb {
    width:         15px;
    height:        15px;
    border:        1.5px solid #C7CAD0;
    border-radius: 4px;
    flex-shrink:   0;
    display:       flex;
    align-items:   center;
    justify-content: center;
    transition:    all var(--ar-transition);
}
.ar-filter-item.checked .ar-cb {
    border-color: var(--ar-red);
    background:   var(--ar-red);
}
.ar-filter-item.checked .ar-cb::after {
    content: '';
    width:   5px;
    height:  9px;
    border:  solid #fff;
    border-width: 0 1.7px 1.7px 0;
    transform: rotate(45deg);
    margin-top: -2px;
}

.ar-filter-count { margin-left: auto; color: var(--ar-muted); font-size: 12px; }

/* Age pills */
.ar-pill-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ar-pill {
    border:        1px solid var(--ar-line);
    border-radius: 999px;
    padding:       6px 12px;
    font-family:   'Inter', sans-serif;
    font-size:     12px;
    color:         var(--ar-ink-2);
    cursor:        pointer;
    transition:    all var(--ar-transition);
    text-decoration: none;
}
.ar-pill:hover  { border-color: var(--ar-red); color: var(--ar-red); }
.ar-pill.active { border-color: var(--ar-red); color: var(--ar-red); background: var(--ar-red-soft); }

/* Price range */
.ar-price-range { display: flex; gap: 8px; margin-top: 10px; }
.ar-price-range input {
    flex:         1;
    border:       1px solid var(--ar-line);
    border-radius: var(--ar-radius-sm);
    padding:      8px 10px;
    font-family:  'Inter', sans-serif;
    font-size:    12.5px;
    color:        var(--ar-ink);
    outline:      none;
    transition:   border-color var(--ar-transition);
    background:   #fff;
}
.ar-price-range input:focus { border-color: var(--ar-ink); }

/* Color swatches in filter */
.ar-color-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ar-color-dot {
    width:         24px;
    height:        24px;
    border-radius: 50%;
    cursor:        pointer;
    border:        2px solid transparent;
    transition:    transform var(--ar-transition), box-shadow var(--ar-transition);
}
.ar-color-dot:hover  { transform: scale(1.15); }
.ar-color-dot.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ar-red); }

/* Apply filter button */
.ar-filter-apply {
    width:         100%;
    margin-top:    20px;
    padding:       12px;
    background:    var(--ar-ink);
    color:         #fff;
    border:        none;
    border-radius: 999px;
    font-family:   'Inter', sans-serif;
    font-size:     13.5px;
    font-weight:   600;
    cursor:        pointer;
    transition:    background var(--ar-transition);
}
.ar-filter-apply:hover { background: var(--ar-red); }

/* ── Content area ── */
.aristom-content { min-width: 0; }

/* ── Toolbar ── */
.aristom-toolbar {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-bottom:   24px;
    padding-bottom:  16px;
    border-bottom:   1px solid var(--ar-line);
    gap:             12px;
    flex-wrap:       wrap;
}
.aristom-toolbar-left h2 {
    font-family:   'Inter', sans-serif;
    font-size:     24px;
    font-weight:   700;
    letter-spacing: -.01em;
    color:         var(--ar-ink);
    margin:        0;
}
.aristom-results {
    font-family: 'Inter', sans-serif;
    font-size:   13px;
    color:       var(--ar-muted);
    margin:      4px 0 0;
}
.aristom-results strong { color: var(--ar-ink); }

.aristom-toolbar-right { display: flex; gap: 10px; align-items: center; }

.aristom-select-wrap { display: flex; align-items: center; gap: 6px; }
.aristom-select {
    border:        1px solid var(--ar-line);
    border-radius: 999px;
    padding:       7px 14px;
    font-family:   'Inter', sans-serif;
    font-size:     13px;
    color:         var(--ar-ink);
    background:    #fff;
    cursor:        pointer;
    outline:       none;
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
}
.aristom-select:focus { border-color: var(--ar-ink); }

.aristom-view-toggle { display: flex; gap: 4px; }
.aristom-view-btn {
    width:         34px;
    height:        34px;
    border:        1px solid var(--ar-line);
    border-radius: var(--ar-radius-sm);
    background:    #fff;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    color:         var(--ar-muted);
    transition:    all var(--ar-transition);
    font-size:     14px;
}
.aristom-view-btn.active { background: var(--ar-ink); color: #fff; border-color: var(--ar-ink); }
.aristom-view-btn:hover:not(.active) { border-color: var(--ar-ink); color: var(--ar-ink); }

.aristom-mobile-filter-btn {
    display:      none;
    align-items:  center;
    gap:          6px;
    border:       1px solid var(--ar-line);
    background:   #fff;
    color:        var(--ar-ink);
    padding:      8px 14px;
    border-radius: 999px;
    font-family:  'Inter', sans-serif;
    font-size:    13px;
    font-weight:  500;
    cursor:       pointer;
}

/* ── Chips ── */
.aristom-chips-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; align-items: center; }
.aristom-chip {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    background:    var(--ar-red-soft);
    border:        1px solid rgba(168,30,36,.15);
    color:         var(--ar-red);
    padding:       5px 10px;
    border-radius: 999px;
    font-family:   'Inter', sans-serif;
    font-size:     12px;
    font-weight:   600;
}
.aristom-chip-x { color: var(--ar-red); text-decoration: none; font-size: 11px; opacity: .7; }
.aristom-chip-x:hover { opacity: 1; }
.aristom-chip-clear { background: transparent; border: none; color: var(--ar-red); font-weight: 700; padding-left: 0; text-decoration: none; font-family: 'Inter', sans-serif; font-size: 12px; }

/* ── SKU copyable chip ── */
.ar-sku-chip {
    display:        inline-flex;
    align-items:    center;
    gap:            4px;
    background:     var(--ar-bg-2);
    border:         1px solid var(--ar-line);
    border-radius:  999px;
    padding:        3px 9px;
    font-family:    'Inter', sans-serif;
    font-size:      10.5px;
    font-weight:    600;
    color:          var(--ar-muted);
    cursor:         pointer;
    transition:     all .15s;
    letter-spacing: .02em;
    margin-bottom:  6px;
}
.ar-sku-chip:hover  { border-color: var(--ar-ink); color: var(--ar-ink); background: #fff; }
.ar-sku-chip.copied { border-color: #43A047; color: #43A047; background: #EAF4E1; }
.ar-sku-copy-icon,
.ar-sku-check-icon  { flex-shrink: 0; }

/* ── Product grid ── */
.aristom-product-grid {
    display:               grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:                   24px;
}

/* ── Product card — matches desktop mockup exactly ── */
.ar-card {
    background:      #fff;
    border:          1px solid var(--ar-line);
    border-radius:   var(--ar-radius);
    overflow:        hidden;
    transition:      border-color var(--ar-transition), box-shadow var(--ar-transition), transform var(--ar-transition);
    cursor:          pointer;
    position:        relative;
    text-decoration: none;
    color:           inherit;
    display:         flex;
    flex-direction:  column;
}
.ar-card:hover { border-color: var(--ar-ink); box-shadow: var(--ar-shadow); transform: translateY(-2px); }

.ar-card-img {
    aspect-ratio:    1;
    background:      var(--ar-img-bg);
    display:         flex;
    align-items:     center;
    justify-content: center;
    position:        relative;
    overflow:        hidden;
}
.ar-card-img img { width: 85%; height: 85%; object-fit: contain; display: block; }

.ar-card-tag {
    position:      absolute;
    top:           12px;
    left:          12px;
    background:    #fff;
    color:         var(--ar-ink);
    font-family:   'Inter', sans-serif;
    font-size:     10px;
    font-weight:   700;
    letter-spacing: .1em;
    padding:       5px 9px;
    border-radius: 999px;
    border:        1px solid var(--ar-line);
}
.ar-card-tag.red { background: var(--ar-red); color: #fff; border-color: var(--ar-red); }

.ar-card-body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; }

.ar-card-brand {
    font-family:    'Inter', sans-serif;
    font-size:      11px;
    font-weight:    600;
    letter-spacing: .12em;
    color:          var(--ar-muted);
    text-transform: uppercase;
    margin-bottom:  5px;
}

.ar-card-name {
    font-family:  'Inter', sans-serif;
    font-size:    14.5px;
    font-weight:  600;
    color:        var(--ar-ink);
    line-height:  1.35;
    margin:       0 0 auto;
    padding-bottom: 10px;
    min-height:   38px;
}

.ar-card-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-top:      10px;
}

.ar-card-price {
    font-family:  'Inter', sans-serif;
    font-size:    16px;
    font-weight:  700;
    color:        var(--ar-ink);
}
.ar-card-price small { font-size: 11px; color: var(--ar-muted); font-weight: 500; margin-left: 2px; }
.ar-card-price del   { font-size: 12px; color: var(--ar-muted); font-weight: 400; margin-right: 4px; }
.ar-card-price ins   { text-decoration: none; }

.ar-card-sku {
    font-family:    'Inter', sans-serif;
    font-size:      11px;
    color:          var(--ar-muted);
    letter-spacing: .04em;
    margin-bottom:  3px;
}

.ar-card-add {
    width:           34px;
    height:          34px;
    border-radius:   50%;
    background:      var(--ar-ink);
    color:           #fff;
    border:          none;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    transition:      background var(--ar-transition);
    flex-shrink:     0;
    text-decoration: none;
}
.ar-card-add:hover { background: var(--ar-red); }
.ar-card-add svg   { width: 14px; height: 14px; }

/* List view */
.aristom-product-grid.aristom-list-view                { grid-template-columns: 1fr; }
.aristom-product-grid.aristom-list-view .ar-card       { flex-direction: row; }
.aristom-product-grid.aristom-list-view .ar-card-img   { width: 180px; flex-shrink: 0; aspect-ratio: 1; }
.aristom-product-grid.aristom-list-view .ar-card-body  { padding: 20px; justify-content: center; }

/* ── Pagination ── */
.aristom-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 40px; flex-wrap: wrap; }
.aristom-pagination .page-numbers { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.aristom-pagination .page-numbers li { margin: 0; }
.aristom-pagination .page-numbers a,
.aristom-pagination .page-numbers span {
    width:           36px;
    height:          36px;
    border-radius:   50%;
    border:          1px solid var(--ar-line);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-family:     'Inter', sans-serif;
    font-size:       13px;
    color:           var(--ar-ink-2);
    text-decoration: none;
    transition:      all var(--ar-transition);
}
.aristom-pagination .page-numbers a:hover      { border-color: var(--ar-ink); color: var(--ar-ink); }
.aristom-pagination .page-numbers span.current { background: var(--ar-red); color: #fff; border-color: var(--ar-red); }
.aristom-pagination .page-numbers .dots        { border: none; background: transparent; }
.aristom-pagination .page-numbers .prev,
.aristom-pagination .page-numbers .next        { font-size: 16px; }
.aristom-showing { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--ar-muted); text-align: center; margin-bottom: 12px; }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .aristom-listing { grid-template-columns: 1fr; padding: 24px 20px; gap: 0; }
    .aristom-sidebar { position: static; max-height: none; display: none; margin-bottom: 24px; }
    .aristom-sidebar.open { display: block; }
    .aristom-mobile-filter-btn { display: inline-flex; }
    .aristom-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .aristom-page-head { padding: 24px 20px 16px; }
    .aristom-cat-title { font-size: 22px; }
}

@media (max-width: 600px) {
    .aristom-listing { padding: 16px; }
    .aristom-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .aristom-toolbar { flex-direction: column; align-items: flex-start; gap: 10px; }
    .aristom-toolbar-left h2 { font-size: 18px; }
    .aristom-toolbar-right { width: 100%; justify-content: space-between; }
    .ar-card-name { font-size: 13px; min-height: auto; }
    .ar-card-price { font-size: 14px; }
    .ar-card-body { padding: 10px 12px 12px; }
    .aristom-product-grid.aristom-list-view .ar-card     { flex-direction: column; }
    .aristom-product-grid.aristom-list-view .ar-card-img { width: 100%; }
}