/* css/inspo-shop.css */
/* 
 * Inspo Shop Redesign - The Thrift Bin 
 * Modular styles for the "Thrift Haul" experience.
 */

:root {
    /* Theme overrides for the shop container only */
    --shop-bg: #eceae4;
    /* Softer, paper-like off-white */
    --shop-ink: #2b2826;
    /* Softer black */
    --shop-accent: #d94d30;
    /* Sticker red */
}

.shop-theme {
    background-color: var(--shop-bg);
    color: var(--shop-ink);
    font-family: var(--font-body);
}

/* Masonry Container */
.shop-masonry {
    column-count: 2;
    column-gap: 12px;
    padding: 12px;
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 600px) {
    .shop-masonry {
        column-count: 3;
    }
}

@media (min-width: 900px) {
    .shop-masonry {
        column-count: 4;
    }
}

/* Card Base */
.shop-item {
    break-inside: avoid;
    margin-bottom: 24px;
    position: relative;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    cursor: pointer;

    /* Initial state: slight random rotation set by JS --rot variable */
    transform: rotate(var(--rot, 0deg)) translateY(0);
    transition: box-shadow 0.2s ease;
}

/* Stable active state instead of hover lift */
.shop-item:active {
    transform: rotate(var(--rot, 0deg)) scale(0.98);
}

/* Content Area - STABILITY ENFORCED */
.shop-content {
    position: relative;
    overflow: hidden;
    border-radius: 2px 2px 0 0;
    background: #f4f4f4;
    /* Placeholder stability */
    width: 100%;
}

/* Enforce Aspect Ratios */
.card-std .shop-content {
    aspect-ratio: 1;
}

.card-tall .shop-content {
    aspect-ratio: 3/4;
}

.card-wide .shop-content {
    aspect-ratio: 16/9;
}

.shop-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    mix-blend-mode: multiply;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.shop-content img[src] {
    opacity: 1;
}

/* Texture overlay for fabric feel */
/* Texture overlay for fabric feel */
.shop-content::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opactiy='0.1'/%3E%3C/svg%3E");
    opacity: 0.04;
    pointer-events: none;
    mix-blend-mode: overlay;
}


/* Price Tag (Sticker Style) - BIGGER */
.shop-tag {
    position: absolute;
    top: 16px;
    /* Moved down slightly */
    right: -8px;
    background: white;
    padding: 0;
    border-radius: 2px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.15);
    transform: rotate(-3deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    min-width: 60px;
    /* Wider */
    z-index: 3;
}


.tag-price {
    background: var(--shop-accent);
    color: white;
    font-weight: 800;
    font-family: var(--font-heading);
    padding: 8px 12px;
    /* Even Bigger padding */
    font-size: 18px;
    /* Bigger font (15->18) */
    width: 100%;
    text-align: center;
}

.tag-label {
    padding: 6px 10px;
    font-size: 12px;
    /* Bigger font (11->12) */
    text-transform: uppercase;
    color: #666;
    font-weight: 700;
}

/* Tape Strip Accent */
.shop-tape {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(2deg);
    width: 60px;
    height: 18px;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(2px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    z-index: 2;
    border: 1px solid rgba(255, 255, 255, 0.3);
}


/* Size Variants */
/* card-wide and card-tall styles are handled by grid-row/grid-column in main css or generic utility */
/* Explicitly defining aspect ratios again for clarity if needed, avoiding empty blocks */

.card-wide .shop-content {
    aspect-ratio: 16/9;
}

.card-tall .shop-content {
    aspect-ratio: 3/4;
}

.card-giant {
    column-span: all;
    /* If possible, else just wider */
}


/* Mystery Tag Variant */
.card-mystery .shop-content img {
    filter: blur(20px) grayscale(0.8);
    transition: filter 0.4s ease;
}

.card-mystery .mystery-cover {
    position: absolute;
    inset: 0;
    /* Manila/Folder vibe */
    background: #e3dcd1;
    background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.02) 0px, rgba(0, 0, 0, 0.02) 2px, transparent 2px, transparent 6px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform-origin: top center;
    backface-visibility: hidden;
    z-index: 20;
    /* Higher than name overlay (10) to obscure it */
    height: 92%;
    /* Covers partially the name at the bottom */
    /* Purposefully short/badly placed */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-bottom: 2px solid rgba(0, 0, 0, 0.05);
}

/* Reveal interaction (JS driven .revealed class only for persistence) */
.card-mystery.revealed .mystery-cover {
    transform: translateY(-85%) rotate(-2deg);
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
}

.card-mystery.revealed .shop-content img {
    filter: none;
    /* Peek on hover */
}

/* Lore Card Styles */
.card-lore {
    background: #fdfbf7;
    /* Off-white paper */
    padding: 16px;
    transform: rotate(var(--rot)) scale(0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid #e8e4dc;
}

.card-lore:hover {
    transform: rotate(0deg) scale(1.0) translateY(-2px);
    z-index: 15;
}

/* Remove default image overlay for lore cards */
.card-lore .shop-content {
    background: transparent;
    padding: 0;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.card-lore .shop-content::after {
    display: none;
}

.card-lore .shop-tape {
    background: rgba(240, 220, 100, 0.3);
    /* Yellowish tape */
    border-color: rgba(200, 180, 80, 0.4);
    transform: translateX(-50%) rotate(-1deg);
}

.lore-pin {
    font-size: 20px;
    margin-bottom: 8px;
    opacity: 0.8;
    filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.2));
}

.lore-text {
    font-family: 'Courier New', Courier, monospace;
    /* Typewriter style */
    font-size: 19px;
    line-height: 1.4;
    color: #4a4a4a;
    font-style: italic;
    margin: 0;
}

.lore-footer {
    margin-top: 12px;
    font-size: 10px;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 1px;
    font-weight: 700;
}

/* Shop Modal (Acquire Overlay) */
.shop-modal-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 32px;
    text-align: center;
    max-width: 400px;
    margin: 0 auto;
    color: var(--shop-ink);
}

.shop-modal-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    background: #f4f4f4;
}

.shop-modal-title {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 800;
    margin: 0;
}

.shop-modal-type {
    font-family: monospace;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 2px;
    font-size: 14px;
    font-size: 14px;
    margin-top: 8px;
}

.shop-btn-big {
    background: var(--shop-accent);
    color: white;
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 800;
    padding: 16px 32px;
    border: 2px solid var(--shop-accent);
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    transition: transform 0.1s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 12px rgba(217, 77, 48, 0.3);
}

.shop-btn-big:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(217, 77, 48, 0.4);
}

.shop-btn-big:active {
    transform: scale(0.98);
}

.shop-btn-big:disabled {
    background: #ccc;
    border-color: #ccc;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

/* Old Name Overlay removed - using updated version below */


/* Shop Name Overlay */
.shop-name-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 10px 42px 10px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    pointer-events: none;
    z-index: 10;
    display: flex;
    align-items: flex-end;
}

.shop-name {
    color: #fff;
    font-family: inherit;
    /* Inherit global font or specify header font */
    font-weight: 700;
    line-height: 1.1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    word-wrap: break-word;
    /* Ensure multi-line */
}

.shop-name.name-lg {
    font-size: 1.4rem;
}

.shop-name.name-md {
    font-size: 1.1rem;
}

.shop-name.name-sm {
    font-size: 0.85rem;
}

/* Static Acquire Button (Restored) */
.shop-btn-static {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: #fff;
    color: var(--shop-black);
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 6px 10px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 12;
    /* Above name overlay */
    transition: all 0.2s ease;
}

.shop-btn-static:hover {
    background: var(--shop-accent);
    color: #fff;
    border-color: var(--shop-accent);
    transform: translateY(-2px);
}

/* Inventory Count Badge */
.shop-inventory-badge {
    margin-top: 10px;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}