/* ===== Home Animation V2 — Mosaic Columns ===== */

.ss2_grid_wrapper {
    --ss2-gap: 20px;
    --ss2-col-w: 200px;   /* set by JS */
    width: 100%;
    height: 90vh;
    max-height: 100%;
    position: relative;
    overflow: hidden;
}

.ss2_grid_section {
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    touch-action: pan-y;
    position: relative;
}
.ss2_grid_section.ss2_grabbing { cursor: grabbing; }

/* The horizontally-scrolling strip of columns */
.ss2_strip {
    display: flex;
    gap: var(--ss2-gap);
    height: 100%;
    padding: 0;
    align-items: center;
    will-change: transform;
}

/* Column — always fills the wrapper height; frames flex-split it */
.ss2_col {
    flex: 0 0 var(--ss2-col-w);
    width: var(--ss2-col-w);
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--ss2-gap);
}

/* Frame — splits column height equally (gap between frames already accounted for).
   Aspect ratios end up very close to 4:5 / 4:7.5 / 4:15 — a small drift
   (a few px) is accepted in exchange for uniform column heights. */
.ss2_frame {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transform: scale(0);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.4s ease;
}
.ss2_frame.ss2_visible { transform: scale(1); opacity: 1; }
.ss2_frame.ss2_pop { animation: ss2_popIn 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both; }

.ss2_frame img {
    width: 100%;
    height: 100%!important;
    object-fit: cover;
    object-position: center;
    display: block;
    pointer-events: none;
    transition: transform 0.3s ease;
}
.ss2_frame:hover img { transform: scale(1.04); }

/* Cursor badge */
.ss2_cursor_badge {
    position: fixed;
    pointer-events: none;
    z-index: 100;
    background: #222;
    color: #fff;
    font-family: 'Figtree', sans-serif;
    font-size: 18px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.15s ease;
    transform: translate(16px, 16px);
}
.ss2_cursor_badge.ss2_badge_visible { opacity: 1; }

/* ===== Popup (identical to V1 with ss2_ prefix) ===== */

.ss2_popup *,
.ss2_popup *::before,
.ss2_popup *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.ss2_popup_overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.ss2_popup_overlay.ss2_open { opacity: 1; pointer-events: auto; }

.ss2_popup {
    padding: 20px;
    background: #FBFAF7;
    width: 460px;
    max-width: 92vw;
    max-height: 90vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #2D2420 transparent;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    transform: translateY(20px) scale(0.96);
    transition: transform 0.3s ease;
    font-family: "Figtree", sans-serif;
}
.ss2_popup::-webkit-scrollbar { width: 6px; }
.ss2_popup::-webkit-scrollbar-track { background: transparent; }
.ss2_popup::-webkit-scrollbar-thumb { background: #2D2420; border-radius: 3px; }
.ss2_popup_overlay.ss2_open .ss2_popup { transform: translateY(0) scale(1); }

.ss2_popup_img {
    width: 100%;
    aspect-ratio: 4 / 5;
    background: #eeedea;
    border-radius: 0;
    overflow: hidden;
    position: relative;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
}
.ss2_popup_slider {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.35s ease;
}
.ss2_popup_slider_item {
    flex: 0 0 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ss2_popup_slider_item img {
    width: 100%;
    height: 70%;
    object-fit: contain;
}

.ss2_popup_dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding-top: 10px;
}
.ss2_popup_dots span {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #bbb;
    cursor: pointer;
    transition: background 0.2s ease;
}
.ss2_popup_dots span.ss2_dot_active { background: #444; }

.ss2_popup_body { padding: 28px 0 0; }

.ss2_popup_stock {
    display: inline-block;
    border: 1px solid #34C759;
    color: #2D2420 !important;
    font-size: clamp(0.75rem, 0.75rem + 0vw, 0.75rem) !important;
    font-weight: 400 !important;
    padding: 0px 6px;
    border-radius: 0;
    margin-bottom: 5px;
}
.ss2_popup_stock::before {
    content: '';
    display: inline-block;
    width: 7px; height: 7px;
    background: #34C759;
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    margin-bottom: 1px;
}
.ss2_popup_stock.ss2_stock_outofstock { border-color: #FF3B30; }
.ss2_popup_stock.ss2_stock_outofstock::before { background: #FF3B30; }
.ss2_popup_stock.ss2_stock_backorder { border-color: #FF9500; }
.ss2_popup_stock.ss2_stock_backorder::before { background: #FF9500; }

.ss2_popup_title {
    font-size: clamp(1.5rem, 1.294rem + 0.784vw, 2rem) !important;
    font-weight: bold !important;
    color: #2D2420 !important;
    margin-bottom: 14px !important;
    font-family: "Nanum Myeongjo", serif !important;
}
.ss2_popup_price {
    font-size: clamp(1.25rem, 1.199rem + 0.196vw, 1.375rem) !important;
    font-weight: 400 !important;
    color: #2D2420 !important;
    margin-bottom: 24px !important;
}
.ss2_popup_desc {
    font-size: clamp(1rem, 1rem + 0vw, 1rem) !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: #2D2420 !important;
    margin-bottom: 28px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ss2_popup_mat_label {
    font-size: clamp(1rem, 1rem + 0vw, 1rem) !important;
    font-weight: bold !important;
    color: #2D2420 !important;
    margin-bottom: 6px !important;
}
.ss2_popup_mat_value {
    font-size: clamp(1rem, 1rem + 0vw, 1rem) !important;
    font-weight: 400 !important;
    color: #2D2420 !important;
    margin-bottom: 46px !important;
}

.ss2_popup_actions { display: flex; gap: 12px; margin-bottom: 0; }
.ss2_popup_actions button,
.ss2_popup_actions a {
    flex: 1;
    padding: 10px !important;
    font-size: clamp(0.875rem, 0.875rem + 0vw, 0.875rem) !important;
    font-weight: 400 !important;
    border-radius: 0 !important;
    cursor: pointer;
    font-family: "Figtree", sans-serif !important;
    text-align: center !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.ss2_btn_details,
.ss2_btn_details:hover,
.ss2_btn_details:focus,
.ss2_btn_details:active {
    background: transparent !important;
    border: 1px solid #2D2420 !important;
    color: #2D2420 !important;
}
.ss2_btn_cart,
.ss2_btn_cart:hover,
.ss2_btn_cart:focus,
.ss2_btn_cart:active {
    background: #2D2420 !important;
    border: 1px solid #2D2420 !important;
    color: #fff !important;
}
.ss2_btn_cart.ss2_btn_disabled { opacity: 0.5; cursor: not-allowed; }

.ss2_popup_close {
    display: none;
    text-align: center;
    margin-top: 20px;
    font-size: clamp(0.875rem, 0.875rem + 0vw, 0.875rem);
    font-weight: 400;
    color: #2D2420;
    text-decoration: underline;
    cursor: pointer;
    font-family: "Figtree", sans-serif;
}

@media (max-width: 768px) {
    .ss2_grid_wrapper { height: 76vh; }
    .ss2_popup { padding: 0; }
    .ss2_popup_body { padding: 32px 15px 18px; }
    .ss2_popup_close { display: block; }
    .ss2_popup_title { margin-bottom: 5px !important; }
}

@keyframes ss2_popIn {
    0%   { transform: scale(0); opacity: 0; }
    70%  { transform: scale(1.12); opacity: 1; }
    85%  { transform: scale(0.97); }
    100% { transform: scale(1); opacity: 1; }
}