/* ============================================
   WEAM Attribute Icons — Frontend Display v2.1
   Shapes, groups, grid layout
   ============================================ */

.weam-image-selector {
    display: flex;
    gap: 12px;
    margin: 8px 0;
}

/* Horizontal */
.weam-is-fe-horizontal { flex-direction: row; flex-wrap: wrap; align-items: flex-start; }

/* Vertical */
.weam-is-fe-vertical { flex-direction: column; align-items: flex-start; }

/* Grid (cols) */
.weam-is-fe-grid { display: grid; gap: 12px; }

/* --- Items --- */
.weam-is-fe-item {
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.15s, box-shadow 0.15s;
}
.weam-is-fe-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* --- Image --- */
.weam-is-fe-img {
    display: block;
    object-fit: cover;
}

/* --- Shape: Square --- */
.weam-is-shape-square .weam-is-fe-img { border-radius: 2px; }
.weam-is-shape-square .weam-is-fe-item { border-radius: var(--weam-r-sm); }

/* --- Shape: Rounded (default) --- */
.weam-is-shape-rounded .weam-is-fe-img { border-radius: var(--weam-r-lg); }
.weam-is-shape-rounded .weam-is-fe-item { border-radius: 10px; }

/* --- Shape: Circle --- */
.weam-is-shape-circle .weam-is-fe-img { border-radius: 50%; }
.weam-is-shape-circle .weam-is-fe-item { border-radius: 50%; }

/* --- Shape: Borderless --- */
.weam-is-shape-borderless .weam-is-fe-img { border-radius: var(--weam-r-sm); border: none; }
.weam-is-shape-borderless .weam-is-fe-item { border: none; box-shadow: none; }
.weam-is-shape-borderless .weam-is-fe-item:hover { box-shadow: none; }

/* Items with border (non-borderless) */
.weam-is-shape-square .weam-is-fe-item,
.weam-is-shape-rounded .weam-is-fe-item,
.weam-is-shape-circle .weam-is-fe-item {
    border: 1px solid var(--weam-border);
}

/* Vertical items with text */
.weam-is-fe-vertical .weam-is-fe-item {
    max-width: 280px;
    padding: 6px;
    background: var(--weam-slate-50);
}

/* --- Label --- */
.weam-is-fe-label {
    font-size: var(--weam-text-md);
    font-weight: 500;
    color: var(--weam-slate-700);
    line-height: 1.3;
}

/* --- Group headers --- */
.weam-is-fe-group {
    margin-bottom: 12px;
    width: 100%;
}
.weam-is-fe-group-label {
    font-size: var(--weam-text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--weam-slate-400);
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--weam-slate-100);
}
.weam-is-fe-group-items {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.weam-is-fe-group-items.weam-is-fe-vertical {
    flex-direction: column;
}

/* --- Responsive --- */
@media (max-width: 480px) {
    .weam-is-fe-horizontal { gap: 8px; }
}

/* --- Clickable Links --- */
.weam-is-fe-item.has-link { position: relative; }
.weam-is-fe-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}
.weam-is-fe-link:hover {
    transform: translateY(-2px);
}
.weam-is-fe-link:hover .weam-is-fe-img {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.weam-is-fe-link:hover .weam-is-fe-label {
    color: #2563EB;
}
/* Cursor */
.weam-is-fe-item.has-link .weam-is-fe-img {
    cursor: pointer;
}

/* ============================================
   PRODUCT PAGE INTEGRATION
   Replaces attribute values in WooCommerce
   ============================================ */
.weam-is-pp-wrap {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    vertical-align: middle;
}
.weam-is-pp-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.weam-is-pp-img {
    display: inline-block;
    object-fit: cover;
    vertical-align: middle;
}
.weam-is-pp-label {
    font-size: var(--weam-text-md);
    color: var(--weam-slate-700);
    font-weight: 500;
}
.weam-is-pp-text {
    font-size: var(--weam-text-md);
    color: var(--weam-slate-500);
}
/* Clickable links on product page */
.weam-is-pp-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}
.weam-is-pp-link:hover {
    transform: translateY(-1px);
}
.weam-is-pp-link:hover .weam-is-pp-img {
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.weam-is-pp-link:hover .weam-is-pp-label {
    color: #2563EB;
}

/* Shape variants for product page */
.weam-is-pp-wrap.weam-is-shape-square .weam-is-pp-img { border-radius: 2px; }
.weam-is-pp-wrap.weam-is-shape-rounded .weam-is-pp-img { border-radius: var(--weam-r-md); }
.weam-is-pp-wrap.weam-is-shape-circle .weam-is-pp-img { border-radius: 50%; }
.weam-is-pp-wrap.weam-is-shape-borderless .weam-is-pp-img { border-radius: 2px; border: none; }

/* Border on images (non-borderless) */
.weam-is-pp-wrap:not(.weam-is-shape-borderless) .weam-is-pp-img {
    border: 1px solid var(--weam-border);
}

/* WooCommerce table cell alignment fix */
.woocommerce-product-attributes-item__value .weam-is-pp-wrap {
    line-height: 1.4;
}

/* ============================================
   [weam-h-all] / [weam-v-all] — Combined output
   ============================================ */
.weam-is-fe-all {
    display: flex;
    gap: 8px;
    margin: 8px 0;
}
.weam-is-fe-all-horizontal { flex-direction: row; flex-wrap: wrap; align-items: center; }
.weam-is-fe-all-vertical { flex-direction: column; align-items: flex-start; }

/* Text fallback labels (missing=text) */
.weam-is-fe-text-label {
    display: inline-block;
    padding: 4px 10px;
    background: var(--weam-slate-100);
    border: 1px solid var(--weam-border);
    border-radius: var(--weam-r-sm);
    font-size: var(--weam-text-md);
    line-height: 1.4;
    color: var(--weam-slate-600);
}
.weam-is-fe-text-group {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}