/* --- Category Latest Offers Styles v2.5.0 --- */
/* --- Mobile-First Premium Design - Matching SKP/SOA Language --- */
/*
 * v2.5.0 CHANGES (CODE CARD FIX):
 * - NEW: .clo-code-content wrapper for code cards (like .clo-sale-content for sales)
 * - Both wrappers use flex-grow:1 to absorb whitespace above action group
 * - Now BOTH card types have proper magnetic footer behavior
 *
 * v2.4.0 CHANGES (FINAL FIX - height:100%):
 * - CRITICAL: Added height:100% to .clo-code-card and .clo-sale-card
 *   (Without this, cards shrink to content and margin-top:auto has no space to push)
 * - Cards now fill their grid cells, allowing magnetic footer to work
 * - Also styled .clo-source as gray pill for visual consistency
 *
 * v2.3.0 CHANGES (TRUE Magnetic Footer):
 * - REMOVED fixed min-heights (they don't work with variable content)
 * - NEW: .clo-action-group wraps date row + CTA row as a single unit
 * - .clo-action-group uses margin-top:auto to stick to card bottom
 * - Content area (.clo-sale-content) uses flex-grow:1 to absorb whitespace
 * - Result: All CTAs align horizontally regardless of content length
 *
 * v2.2.0 CHANGES (3 Golden Rules - SUPERSEDED):
 * - ELASTIC CORE: Added min-height to .clo-sale-content and .clo-tagline-row
 *   (Ensures CTA buttons align horizontally across card rows)
 * - MAGNETIC FOOTER: .clo-cta-row already has margin-top:auto (working)
 * - MOBILE RESPONSIVENESS: Removed min-heights on mobile for fluid content
 *
 * v2.1.0 CHANGES:
 * - DESIGN: Option B - Secondary "Vaata kõiki pakkumisi" is now a text link
 *   (Creates clear visual hierarchy: primary CTA button + subtle secondary link)
 *
 * v2.0.8 CHANGES:
 * - FIX: .clo-view-brand border replaced with inset box-shadow
 *   (border + border-radius was causing bottom clipping bug)
 *
 * v2.0.5 CHANGES:
 * - NUCLEAR FIX: Removed ALL flexbox from cta-row and buttons
 * - Using display:block and display:inline-block instead
 * - Massive bottom padding on view-brand button
 * - All critical properties have !important
 *
 * v2.0.0 CHANGES:
 * - Brand names more prominent (larger, bolder, distinct color)
 * - Visit Store CTA (primary button style)
 * - View Brand link (secondary, subtle)
 * - Tagline row for discount codes
 * - Improved visual hierarchy
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    /* Premium Color Palette - Matching SKP/SOA */
    --clo-card-bg: #ffffff;
    --clo-card-bg-gradient: linear-gradient(145deg, #ffffff 0%, #fafbfc 100%);
    --clo-card-border-internal: #e8edf2;
    --clo-card-shadow: 
        0 1px 2px rgba(0, 0, 0, 0.02),
        0 4px 8px rgba(0, 0, 0, 0.04),
        0 12px 24px rgba(0, 0, 0, 0.04);
    --clo-card-hover-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.02),
        0 8px 16px rgba(0, 0, 0, 0.06),
        0 20px 40px rgba(0, 0, 0, 0.06);
    
    /* Accent Colors - Brand Green */
    --clo-accent-color: #00C896;
    --clo-accent-darker: #00A67D;
    --clo-accent-lighter: #E6FBF5;
    --clo-accent-glow: rgba(0, 200, 150, 0.15);
    --clo-accent-text: #ffffff;
    
    /* v2.0.0: Brand name color - distinctive but professional */
    --clo-brand-color: #1a2332;
    --clo-brand-hover: #00A67D;
    
    /* Text Colors */
    --clo-text-primary: #1a2332;
    --clo-text-secondary: #5c6a7f;
    --clo-text-muted: #8b97a8;
    
    /* Code Display */
    --clo-code-color: #00A67D;
    --clo-code-bg: linear-gradient(135deg, #f8fafb 0%, #f0f4f7 100%);
    --clo-code-border: #e2e8ed;
    
    /* Badge */
    --clo-badge-bg: linear-gradient(135deg, var(--clo-accent-color) 0%, var(--clo-accent-darker) 100%);
    --clo-badge-text: #ffffff;
    
    /* v2.0.0: Visit Store button (primary CTA) */
    --clo-cta-primary-bg: linear-gradient(135deg, var(--clo-accent-color) 0%, var(--clo-accent-darker) 100%);
    --clo-cta-primary-hover: linear-gradient(135deg, var(--clo-accent-darker) 0%, #008F6B 100%);
    --clo-cta-primary-text: #ffffff;
    
    /* v2.0.0: View Brand link (secondary CTA) */
    --clo-cta-secondary-bg: transparent;
    --clo-cta-secondary-border: #e0e4e8;
    --clo-cta-secondary-text: #5c6a7f;
    --clo-cta-secondary-hover-bg: #f5f7f9;
    
    /* Evergreen badge */
    --clo-evergreen-bg: #E8F5E9;
    --clo-evergreen-text: #2E7D32;
    
    /* Expired States */
    --clo-expired-bg: #fafbfc;
    --clo-expired-border: #e0e4e8;
    --clo-expired-text: #a8b3c0;
    --clo-expired-opacity: 0.7;
    
    /* Source Badge */
    --clo-source-color: #7d8a9a;
    
    /* Transitions */
    --clo-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --clo-transition-smooth: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* === Main Wrapper === */
.clo-wrapper {
    margin: 2rem auto;
    max-width: 1200px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--clo-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
    padding: 0 1rem;
}

/* === Section Styling === */
.clo-section {
    margin-bottom: 3rem;
}

.clo-section:last-child {
    margin-bottom: 0;
}

/* v2.7.2: Section header flex row — heading left, sort dropdown right */
.clo-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.clo-section-heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--clo-text-primary);
    margin: 0;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--clo-accent-color);
    display: inline-block;
}

/* === Cards Grid - Mobile First === */
.clo-cards-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

/* Tablet: 2 columns */
@media (min-width: 600px) {
    .clo-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
}

/* Desktop: Up to 3 columns for codes, 2 for sales */
@media (min-width: 900px) {
    .clo-codes-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .clo-sales-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Large desktop: Max widths */
@media (min-width: 1200px) {
    .clo-cards-grid {
        gap: 1.5rem;
    }
}

/* === Base Card Styling === */
/* v2.4.0: CRITICAL - height:100% fills grid cell so margin-top:auto works */
/* v2.0.3: overflow:visible + extra bottom padding since CTA button is now at card bottom */
.clo-code-card,
.clo-sale-card {
    background: var(--clo-card-bg-gradient);
    border: 2px dashed var(--clo-accent-color);
    border-radius: 16px;
    box-shadow: var(--clo-card-shadow);
    transition:
        transform var(--clo-transition-smooth),
        box-shadow var(--clo-transition-smooth),
        border-color var(--clo-transition-smooth);
    overflow: visible;
    padding: 1.25rem 1.25rem 1.5rem 1.25rem;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%; /* v2.4.0: CRITICAL - Fill grid cell so magnetic footer works */
}

/* Glow effect */
/* v2.0.3: clip-path contains glow since card no longer has overflow:hidden */
.clo-code-card::before,
.clo-sale-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(180deg, var(--clo-accent-glow) 0%, transparent 100%);
    opacity: 0;
    transition: opacity var(--clo-transition-smooth);
    pointer-events: none;
    border-radius: 14px 14px 0 0;
    clip-path: inset(0 0 0 0 round 14px 14px 0 0);
}

.clo-code-card.active:hover,
.clo-sale-card.active:hover {
    transform: translateY(-4px);
    box-shadow: var(--clo-card-hover-shadow);
    border-color: var(--clo-accent-darker);
}

.clo-code-card.active:hover::before,
.clo-sale-card.active:hover::before {
    opacity: 1;
}

/* === Card Header === */
.clo-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--clo-card-border-internal);
    flex-wrap: wrap;
}

/* v2.4.0: Source styled as gray pill for visual consistency with other badges */
.clo-source {
    font-size: 0.65rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f3f4f6;
    padding: 4px 10px;
    border-radius: 20px;
}

.clo-source .source-icon {
    font-size: 0.7rem;
}

/* Badges */
.clo-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--clo-badge-bg);
    color: var(--clo-badge-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 6px rgba(0, 200, 150, 0.25);
}

.clo-expired-badge {
    font-size: 0.6rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    color: var(--clo-expired-text);
    border: 1px solid var(--clo-expired-border);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* === v2.0.0: Brand Row - MORE VISIBLE === */
.clo-brand-row {
    margin-bottom: 0.75rem;
}

.clo-brand-name {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--clo-brand-color);
    display: block;
    line-height: 1.3;
    /* Subtle text shadow for depth */
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

/* === Code Display (Discount Cards) === */
.clo-code-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--clo-code-bg);
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--clo-code-border);
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.clo-code {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--clo-code-color);
    letter-spacing: 1px;
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    word-break: break-all;
}

/* Copy Button */
.clo-copy-btn {
    background: var(--clo-badge-bg);
    color: var(--clo-accent-text);
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--clo-transition-fast);
    flex-shrink: 0;
    box-shadow: 0 2px 4px rgba(0, 200, 150, 0.2);
    font-family: inherit;
}

.clo-copy-btn:hover {
    background: var(--clo-cta-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 200, 150, 0.25);
}

.clo-copy-btn .copied-text {
    display: none;
}

.clo-copy-btn.copied .copy-text {
    display: none;
}

.clo-copy-btn.copied .copied-text {
    display: inline;
}

.clo-copy-btn.copied {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

/* === v2.5.0: Code Card Content Wrapper === */
/* Equivalent to .clo-sale-content for sale cards - absorbs whitespace */
.clo-code-content {
    flex-grow: 1; /* MAGNETIC FOOTER: Absorbs whitespace so action group goes to bottom */
    display: flex;
    flex-direction: column;
}

/* === v2.0.0: Tagline Row (for discount codes) === */
.clo-tagline-row {
    margin-bottom: 0.75rem;
}

.clo-tagline {
    font-size: 0.85rem;
    color: var(--clo-text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* === Sale Card Content === */
/* v2.3.0: Content grows to fill space, action group sticks to bottom */
.clo-sale-content {
    margin-bottom: 0.75rem;
    flex-grow: 1; /* Absorbs whitespace so action group goes to bottom */
}

.clo-headline {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--clo-text-primary);
    margin: 0 0 6px 0;
    line-height: 1.3;
}

/* === v2.3.0: Action Group - TRUE MAGNETIC FOOTER === */
/* Wraps card-footer + cta-row as one unit that sticks to bottom */
.clo-action-group {
    margin-top: auto; /* MAGNETIC FOOTER: Pushes entire group to card bottom */
    display: flex;
    flex-direction: column;
}

/* === Card Footer === */
.clo-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 0.75rem;
    border-top: 1px solid var(--clo-card-border-internal);
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.clo-expires {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--clo-accent-darker);
}

/* v2.0.0: Evergreen offer styling */
.clo-expires.clo-evergreen {
    color: var(--clo-evergreen-text);
    background: var(--clo-evergreen-bg);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
}

/* Toggle Button */
.clo-toggle-desc {
    background: transparent;
    border: 1px solid var(--clo-card-border-internal);
    color: var(--clo-text-secondary);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 16px;
    transition: all var(--clo-transition-fast);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
}

.clo-toggle-desc:hover {
    background: var(--clo-accent-lighter);
    border-color: var(--clo-accent-color);
    color: var(--clo-accent-darker);
}

.clo-toggle-desc[aria-expanded="true"] {
    background: var(--clo-accent-lighter);
    border-color: var(--clo-accent-color);
    color: var(--clo-accent-darker);
}

.clo-toggle-desc .toggle-arrow {
    font-size: 0.6rem;
    transition: transform var(--clo-transition-smooth);
}

.clo-toggle-desc[aria-expanded="true"] .toggle-arrow {
    transform: rotate(180deg);
}

/* Description */
.clo-description {
    background: linear-gradient(135deg, #f8fafb 0%, #f3f6f8 100%);
    padding: 14px 16px;
    border-top: 1px dashed var(--clo-card-border-internal);
    font-size: 0.85rem;
    color: var(--clo-text-secondary);
    line-height: 1.6;
    margin: 0 -1.25rem;
    margin-bottom: 0.75rem;
}

.clo-description p {
    margin: 0 0 10px 0;
}

.clo-description p:last-child {
    margin-bottom: 0;
}

.clo-no-desc {
    font-style: italic;
    opacity: 0.7;
    text-align: center;
    color: var(--clo-text-muted);
}

/* === v2.1.0: CTA Row - Primary Button + Secondary Text Link === */
/* v2.3.0: margin-top:auto moved to parent .clo-action-group */
.clo-cta-row {
    display: block !important;
    padding-top: 0.75rem;
    padding-bottom: 0;
    border-top: 1px solid var(--clo-card-border-internal);
    text-align: center;
    overflow: visible !important;
    line-height: normal !important;
}

/* v2.0.0: Visit Store - PRIMARY CTA (full-width green button) */
.clo-visit-store {
    display: block;
    background: var(--clo-cta-primary-bg);
    color: var(--clo-cta-primary-text) !important;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none !important;
    text-align: center;
    padding: 12px 20px;
    border-radius: 24px;
    transition: all var(--clo-transition-fast);
    box-shadow: 0 4px 12px rgba(0, 200, 150, 0.25);
    margin-bottom: 0;
}

.clo-visit-store:hover {
    background: var(--clo-cta-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 200, 150, 0.3);
    color: var(--clo-cta-primary-text) !important;
}

.clo-visit-store .clo-arrow {
    margin-left: 8px;
    display: inline;
    transition: transform var(--clo-transition-fast);
}

.clo-visit-store:hover .clo-arrow {
    transform: translateX(4px);
}

/* v2.1.0: View Brand - SECONDARY as subtle text link (Option B) */
.clo-view-brand {
    display: block !important;
    width: auto !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--clo-text-secondary) !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    text-align: center !important;
    padding: 10px 0 0 0 !important;
    border-radius: 0 !important;
    transition: color var(--clo-transition-fast) !important;
    overflow: visible !important;
}

.clo-view-brand .clo-arrow {
    display: inline;
    transition: transform var(--clo-transition-fast);
}

.clo-view-brand:hover {
    background: none !important;
    color: var(--clo-accent-color) !important;
    transform: none !important;
    box-shadow: none !important;
}

.clo-view-brand:hover .clo-arrow {
    transform: translateX(3px);
}

/* === Expired Card States === */
.clo-code-card.expired,
.clo-sale-card.expired {
    background: var(--clo-expired-bg);
    border-color: var(--clo-expired-border);
    opacity: var(--clo-expired-opacity);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.clo-code-card.expired::before,
.clo-sale-card.expired::before {
    display: none;
}

.clo-code-card.expired:hover,
.clo-sale-card.expired:hover {
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.clo-code-card.expired .clo-card-header,
.clo-sale-card.expired .clo-card-header {
    border-bottom-color: var(--clo-expired-border);
}

.clo-code-card.expired .clo-source,
.clo-sale-card.expired .clo-source {
    color: var(--clo-expired-text);
}

.clo-code-card.expired .clo-brand-name,
.clo-sale-card.expired .clo-brand-name {
    color: var(--clo-expired-text);
}

.clo-code-card.expired .clo-code-row {
    background: linear-gradient(135deg, #f5f7f9 0%, #eef1f4 100%);
    border-color: var(--clo-expired-border);
}

.clo-code-card.expired .clo-code {
    color: var(--clo-expired-text);
}

.clo-code-card.expired .clo-copy-btn {
    background: linear-gradient(135deg, #a8b3c0 0%, #8b97a8 100%);
    box-shadow: none;
}

.clo-sale-card.expired .clo-headline {
    color: var(--clo-expired-text);
}

.clo-sale-card.expired .clo-tagline,
.clo-code-card.expired .clo-tagline {
    color: var(--clo-expired-text);
}

.clo-sale-card.expired .clo-card-footer,
.clo-code-card.expired .clo-card-footer {
    border-top-color: var(--clo-expired-border);
}

.clo-sale-card.expired .clo-expires,
.clo-code-card.expired .clo-expires {
    color: var(--clo-expired-text);
}

.clo-sale-card.expired .clo-toggle-desc,
.clo-code-card.expired .clo-toggle-desc {
    color: var(--clo-expired-text);
    border-color: var(--clo-expired-border);
}

.clo-sale-card.expired .clo-toggle-desc:hover,
.clo-code-card.expired .clo-toggle-desc:hover {
    background: transparent;
    color: var(--clo-expired-text);
    border-color: var(--clo-expired-border);
}

.clo-sale-card.expired .clo-description,
.clo-code-card.expired .clo-description {
    background: linear-gradient(135deg, #f5f7f9 0%, #eef1f4 100%);
    border-top-color: var(--clo-expired-border);
    color: var(--clo-expired-text);
}

.clo-code-card.expired .clo-cta-row,
.clo-sale-card.expired .clo-cta-row {
    border-top-color: var(--clo-expired-border);
}

.clo-code-card.expired .clo-visit-store,
.clo-sale-card.expired .clo-visit-store {
    background: linear-gradient(135deg, #a8b3c0 0%, #8b97a8 100%);
    box-shadow: none;
}

.clo-code-card.expired .clo-visit-store:hover,
.clo-sale-card.expired .clo-visit-store:hover {
    transform: none;
    box-shadow: none;
}

/* v2.1.0: Expired view-brand text link styling */
.clo-code-card.expired .clo-view-brand,
.clo-sale-card.expired .clo-view-brand {
    color: var(--clo-expired-text) !important;
}

.clo-code-card.expired .clo-view-brand:hover,
.clo-sale-card.expired .clo-view-brand:hover {
    color: var(--clo-expired-text) !important;
}

/* === Fade-in Animation (Progressive Enhancement) === */
.clo-wrapper.clo-animate .clo-code-card,
.clo-wrapper.clo-animate .clo-sale-card {
    opacity: 0;
    transform: translateY(20px);
}

.clo-wrapper.clo-animate .clo-code-card.clo-visible,
.clo-wrapper.clo-animate .clo-sale-card.clo-visible {
    opacity: 1;
    transform: translateY(0);
    transition: 
        opacity 0.4s ease-out,
        transform 0.4s ease-out,
        box-shadow var(--clo-transition-smooth),
        border-color var(--clo-transition-smooth);
}

/* Stagger animation for cards */
.clo-wrapper.clo-animate .clo-cards-grid .clo-code-card:nth-child(1).clo-visible,
.clo-wrapper.clo-animate .clo-cards-grid .clo-sale-card:nth-child(1).clo-visible { transition-delay: 0.05s; }
.clo-wrapper.clo-animate .clo-cards-grid .clo-code-card:nth-child(2).clo-visible,
.clo-wrapper.clo-animate .clo-cards-grid .clo-sale-card:nth-child(2).clo-visible { transition-delay: 0.1s; }
.clo-wrapper.clo-animate .clo-cards-grid .clo-code-card:nth-child(3).clo-visible,
.clo-wrapper.clo-animate .clo-cards-grid .clo-sale-card:nth-child(3).clo-visible { transition-delay: 0.15s; }
.clo-wrapper.clo-animate .clo-cards-grid .clo-code-card:nth-child(4).clo-visible,
.clo-wrapper.clo-animate .clo-cards-grid .clo-sale-card:nth-child(4).clo-visible { transition-delay: 0.2s; }
.clo-wrapper.clo-animate .clo-cards-grid .clo-code-card:nth-child(5).clo-visible,
.clo-wrapper.clo-animate .clo-cards-grid .clo-sale-card:nth-child(5).clo-visible { transition-delay: 0.25s; }

/* === Mobile Optimizations === */
@media (max-width: 480px) {
    .clo-wrapper {
        padding: 0 0.75rem;
    }

    .clo-section-header {
        flex-wrap: wrap;
    }

    .clo-section-heading {
        font-size: 1.25rem;
    }

    .clo-code-card,
    .clo-sale-card {
        padding: 1rem 1rem 1.25rem 1rem;
        border-radius: 14px;
    }

    .clo-card-header {
        margin-bottom: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .clo-brand-name {
        font-size: 1.05rem;
    }

    .clo-code-row {
        padding: 10px 12px;
        justify-content: center;
        text-align: center;
    }

    .clo-code {
        font-size: 1.1rem;
        width: 100%;
        text-align: center;
        margin-bottom: 8px;
    }

    .clo-copy-btn {
        width: 100%;
    }

    .clo-headline {
        font-size: 1rem;
    }

    .clo-description {
        margin: 0 -1rem;
        padding: 12px 14px;
        margin-bottom: 0.5rem;
    }

    .clo-visit-store {
        padding: 10px 16px;
        font-size: 0.85rem;
    }

    .clo-view-brand {
        padding: 8px 0 0 0 !important;
        font-size: 0.8rem !important;
    }
}

/* === Link Resets === */
.clo-wrapper a,
.clo-wrapper a:link,
.clo-wrapper a:visited,
.clo-wrapper a:hover,
.clo-wrapper a:active {
    text-decoration: none !important;
    border-bottom: none !important;
    line-height: normal !important;
}

/* v2.0.3: Force proper text rendering in all clickable elements */
.clo-wrapper a,
.clo-wrapper button {
    overflow: visible !important;
    text-overflow: clip !important;
}