/* COG Photo Reviews v3 — theme-proof */

.cog-section {
    width: 100% !important;
    padding: 4px 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    box-sizing: border-box !important;
}
.cog-section *, .cog-section *::before, .cog-section *::after {
    box-sizing: border-box !important;
}

.cog-nav-only {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    margin-bottom: 16px !important;
}
.cog-top-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    margin-bottom: 20px !important;
    gap: 16px !important;
}
.cog-header-left { flex: 1 !important; }
.cog-main-title {
    font-size: 22px !important; font-weight: 700 !important;
    color: #111 !important; margin: 0 0 5px 0 !important;
    line-height: 1.3 !important; padding: 0 !important;
}
.cog-sub-title {
    font-size: 14px !important; color: #555 !important;
    margin: 0 !important; line-height: 1.5 !important; padding: 0 !important;
}
.cog-nav-btns { display: flex !important; gap: 6px !important; flex-shrink: 0 !important; }
.cog-nbtn {
    width: 34px !important; height: 34px !important;
    border: 1px solid #d4d4d4 !important; border-radius: 8px !important;
    background: #fff !important; cursor: pointer !important;
    font-size: 20px !important; line-height: 1 !important; color: #444 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    padding: 0 !important; margin: 0 !important; min-width: unset !important; text-decoration: none !important;
}
.cog-nbtn:hover { background: #f5f5f5 !important; border-color: #bbb !important; }

/* Slider */
.cog-overflow { overflow: hidden !important; width: 100% !important; }
.cog-track {
    display: flex !important; flex-wrap: nowrap !important;
    gap: 16px !important; align-items: stretch !important;
    transition: transform .38s cubic-bezier(.4,0,.2,1) !important;
    margin: 0 !important; padding: 0 !important; list-style: none !important;
}

/* Card */
.cog-card {
    flex: 0 0 calc(25% - 12px) !important;
    width: calc(25% - 12px) !important;
    min-width: 240px !important;
    max-width: 340px !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    margin: 0 !important; padding: 0 !important;
}
.cog-card:hover { box-shadow: 0 6px 22px rgba(0,0,0,.09) !important; border-color: #d0d0d0 !important; }

/* Card image */
.cog-card-img {
    width: 100% !important; height: 210px !important;
    min-height: 210px !important; max-height: 210px !important;
    overflow: hidden !important; flex-shrink: 0 !important;
    background: #f2f2f2 !important; display: block !important;
    position: relative !important; padding: 0 !important; margin: 0 !important;
}
.cog-card-img > img {
    width: 100% !important; height: 100% !important; max-height: 210px !important;
    object-fit: cover !important; display: block !important;
    padding: 0 !important; margin: 0 !important;
    border: none !important; border-radius: 0 !important;
    transition: transform .3s ease !important;
}
.cog-card:hover .cog-card-img > img { transform: scale(1.04) !important; }

/* Empty placeholder */
.cog-card-img--empty {
    display: flex !important; align-items: center !important;
    justify-content: center !important;
    height: 210px !important; min-height: 210px !important; max-height: 210px !important;
    background: #f2f2f2 !important;
}
.cog-card-img--empty > svg {
    width: 52px !important; height: 52px !important;
    min-width: 52px !important; min-height: 52px !important;
    max-width: 52px !important; max-height: 52px !important;
    flex-shrink: 0 !important; display: block !important;
}

/* Card body */
.cog-card-body {
    padding: 14px 16px 18px !important;
    display: flex !important; flex-direction: column !important;
    gap: 10px !important; flex: 1 !important; background: #fff !important;
}

/* Meta */
.cog-meta {
    display: flex !important; align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important; padding: 0 !important;
}
.cog-verified {
    display: flex !important; align-items: center !important;
    gap: 5px !important; color: #555 !important; font-size: 11.5px !important;
}
.cog-verified > svg { width: 14px !important; height: 14px !important; flex-shrink: 0 !important; display: block !important; }
.cog-date { font-size: 11.5px !important; color: #999 !important; }

/* Stars */
.cog-stars { display: flex !important; gap: 2px !important; margin: 0 !important; padding: 0 !important; }
.cog-s-on  { font-size: 20px !important; color: #F59E0B !important; line-height: 1 !important; }
.cog-s-off { font-size: 20px !important; color: #e0e0e0 !important; line-height: 1 !important; }

/* Text */
.cog-text { font-size: 13.5px !important; color: #333 !important; line-height: 1.6 !important; margin: 0 !important; flex: 1 !important; padding: 0 !important; }
.cog-readmore { font-size: 12px !important; color: #444 !important; text-decoration: underline !important; display: inline-block !important; margin-top: -4px !important; padding: 0 !important; }

/* Author */
.cog-author { display: flex !important; flex-direction: column !important; gap: 2px !important; margin: 0 !important; padding: 0 !important; }
.cog-author > strong { font-size: 13.5px !important; font-weight: 600 !important; color: #111 !important; display: block !important; }
.cog-author > span   { font-size: 12px !important; color: #777 !important; display: block !important; }

/* Product pill */
.cog-pill {
    display: flex !important; align-items: center !important; gap: 9px !important;
    border: 1px solid #e8e8e8 !important; border-radius: 999px !important;
    padding: 6px 10px 6px 6px !important;
    text-decoration: none !important; background: #fff !important;
    margin-top: 2px !important; overflow: hidden !important;
}
.cog-pill:hover { border-color: #ccc !important; }

/* pill thumbnail — completely locked down */
.cog-pill-img {
    width: 30px !important; height: 30px !important;
    min-width: 30px !important; min-height: 30px !important;
    max-width: 30px !important; max-height: 30px !important;
    border-radius: 8px !important; overflow: hidden !important;
    background: #f0f0f0 !important; flex-shrink: 0 !important;
    display: block !important; padding: 0 !important; margin: 0 !important;
}
.cog-pill-img > img {
    width: 30px !important; height: 30px !important;
    max-width: 30px !important; max-height: 30px !important;
    object-fit: cover !important; display: block !important;
    border: none !important; border-radius: 0 !important;
    padding: 0 !important; margin: 0 !important;
}
.cog-pill-name {
    font-size: 12px !important; color: #1d4ed8 !important;
    font-weight: 500 !important; flex: 1 !important;
    white-space: nowrap !important; overflow: hidden !important;
    text-overflow: ellipsis !important; display: block !important;
}
.cog-pill-arr { flex-shrink: 0 !important; display: block !important; width: 14px !important; height: 14px !important; }

/* Product page inline */
.cog-inline-photo { margin-top: 14px !important; }
.cog-inline-photo img { max-width: 260px !important; border-radius: 12px !important; border: 1px solid #eee !important; display: block !important; }

/* Form */
.cog-field-location label, .cog-field-photo label { display: block !important; font-size: 14px !important; font-weight: 600 !important; margin-bottom: 6px !important; color: #333 !important; }
.cog-field-location input[type="text"] { width: 100% !important; max-width: 400px !important; padding: 9px 12px !important; border: 1px solid #ddd !important; border-radius: 8px !important; font-size: 14px !important; font-family: inherit !important; }
.cog-field-photo input[type="file"] { display: block !important; font-size: 13px !important; margin-bottom: 4px !important; }
.cog-hint { font-size: 12px !important; color: #999 !important; display: block !important; margin-bottom: 8px !important; }
#cog-prev-wrap { display: flex !important; align-items: flex-start !important; gap: 10px !important; margin-top: 6px !important; }
#cog-prev-img { width: 88px !important; height: 88px !important; object-fit: cover !important; border-radius: 10px !important; border: 1px solid #ddd !important; display: block !important; }
#cog-prev-remove { padding: 5px 12px !important; font-size: 12px !important; border: 1px solid #ddd !important; border-radius: 6px !important; background: #fff !important; cursor: pointer !important; color: #555 !important; }

/* Responsive */
@media (max-width: 1100px) { .cog-card { flex: 0 0 calc(33.333% - 11px) !important; width: calc(33.333% - 11px) !important; } }
@media (max-width: 780px)  { .cog-card { flex: 0 0 calc(50% - 8px) !important; width: calc(50% - 8px) !important; } }
@media (max-width: 520px)  {
    .cog-card { flex: 0 0 100% !important; width: 100% !important; }
    .cog-card-img, .cog-card-img--empty { height: 220px !important; min-height: 220px !important; max-height: 220px !important; }
}