/* =============================================================
   ABCD Foods Plugin Styles - Complete with Height Priority
   Version: 2.1 - Images show full height, width adjusts
   ============================================================= */

/* ── Variables ── */
:root {
    --abcdf-primary:     #1a4731;
    --abcdf-primary-lg:  #2a6b4a;
    --abcdf-accent:      #e8a838;
    --abcdf-accent-dk:   #c78a1e;
    --abcdf-bg:          #f4f6f2;
    --abcdf-card-bg:     #ffffff;
    --abcdf-text:        #2c2c2c;
    --abcdf-text-muted: #6b7280;
    --abcdf-border:      #e2e6df;
    --abcdf-radius:      12px;
    --abcdf-shadow:      0 4px 24px rgba(26,71,49,.08);
    --abcdf-shadow-hover:0 8px 40px rgba(26,71,49,.16);
}

/* ── Utility Buttons ── */
.abcdf-btn {
    display:           inline-flex;
    align-items:       center;
    gap:               6px;
    padding:           10px 24px;
    border:            none;
    border-radius:     8px;
    font-size:         0.95rem;
    font-weight:       600;
    cursor:            pointer;
    text-decoration:   none;
    transition:        all .25s ease;
    letter-spacing:    .3px;
}
.abcdf-btn--outline {
    background:  transparent;
    border:      2px solid var(--abcdf-primary);
    color:       var(--abcdf-primary);
}
.abcdf-btn--outline:hover {
    background:  var(--abcdf-primary);
    color:       #fff;
}
.abcdf-btn--primary {
    background:  var(--abcdf-accent);
    color:       var(--abcdf-primary);
}
.abcdf-btn--primary:hover {
    background:  var(--abcdf-accent-dk);
    box-shadow:  0 4px 16px rgba(232,168,56,.35);
}


/* ═══════════════════════════════════════════════════════════════
   CATEGORY CARDS  (homepage grid)
   ═══════════════════════════════════════════════════════════════ */
.abcdf-cat-card {
    background:     var(--abcdf-card-bg);
    border-radius:  var(--abcdf-radius);
    box-shadow:     var(--abcdf-shadow);
    padding:        32px 28px 28px;
    display:        flex;
    flex-direction: column;
    transition:     transform .3s ease, box-shadow .3s ease;
    position:       relative;
    overflow:       hidden;
}
.abcdf-cat-card::before {
    content:    '';
    position:   absolute;
    top:        0; left:0; right:0;
    height:     4px;
    background: linear-gradient(90deg, var(--abcdf-primary), var(--abcdf-accent));
}
.abcdf-cat-card:hover {
    transform:  translateY(-4px);
    box-shadow: var(--abcdf-shadow-hover);
}
.abcdf-cat-card__icon {
    width:           56px;
    height:          56px;
    border-radius:   50%;
    background:      linear-gradient(135deg, #e8f5e9, #c8e6c9);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.6rem;
    color:           var(--abcdf-primary);
    margin-bottom:   18px;
}
.abcdf-cat-card__title {
    font-size:     1.35rem;
    color:         var(--abcdf-primary);
    margin:        0 0 8px;
}
.abcdf-cat-card__desc {
    font-size:     0.9rem;
    color:         var(--abcdf-text-muted);
    line-height:   1.6;
    margin:        0 0 16px;
    flex-grow:     1;
}
.abcdf-cat-card__featured {
    display:       flex;
    flex-wrap:     wrap;
    gap:           6px;
    margin-bottom: 20px;
}
.abcdf-cat-card__tag {
    background:  rgba(26,71,49,.07);
    color:       var(--abcdf-primary);
    font-size:   0.78rem;
    font-weight: 600;
    padding:     4px 10px;
    border-radius:20px;
    letter-spacing:.2px;
}
.abcdf-cat-card__footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-top:      auto;
}
.abcdf-cat-card__count {
    font-size:   0.82rem;
    color:       var(--abcdf-text-muted);
    font-weight: 500;
}


/* ═══════════════════════════════════════════════════════════════
   CATEGORY HERO  (detail page top)
   ═══════════════════════════════════════════════════════════════ */
.abcdf-cat-hero {
    position:   relative;
    background: linear-gradient(135deg, var(--abcdf-primary) 0%, var(--abcdf-primary-lg) 100%);
    padding:    80px 24px;
    text-align: center;
    overflow:   hidden;
}
.abcdf-cat-hero::after {
    content:         '';
    position:        absolute;
    bottom:          -2px;
    left:            0; right:0;
    height:          40px;
    background:      var(--abcdf-bg);
    clip-path:       ellipse(55% 100% at 50% 100%);
}
.abcdf-cat-hero__overlay {
    position:   absolute;
    inset:      0;
    background: radial-gradient(ellipse at 20% 50%, rgba(255,255,255,.06) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 30%, rgba(232,168,56,.08) 0%, transparent 50%);
    pointer-events: none;
}
.abcdf-cat-hero__content {
    position:  relative;
    z-index:   1;
    max-width: 680px;
    margin:    0 auto;
    padding-left: 24px;
    padding-right: 24px;
}
.abcdf-cat-hero__icon {
    font-size:     2.8rem;
    color:         var(--abcdf-accent);
    margin-bottom: 16px;
    display:       block;
}
.abcdf-cat-hero__title {
    font-size:     2.6rem;
    color:         #fff;
    margin:        0 0 12px;
    font-weight:   700;
}
.abcdf-cat-hero__desc {
    font-size:  1.05rem;
    color:      rgba(255,255,255,.75);
    margin:     0;
    line-height:1.7;
}

/* Increase hero padding on larger screens */
@media (min-width: 768px) {
    .abcdf-cat-hero__content {
        padding-left: 40px;
        padding-right: 40px;
    }
}


/* ═══════════════════════════════════════════════════════════════
   FEATURED STRIP
   ═══════════════════════════════════════════════════════════════ */
.abcdf-featured-strip {
    background: #fff;
    padding:    60px 24px;
}
.abcdf-featured-strip__inner {
    max-width: 1100px;
    margin:    0 auto;
}
.abcdf-featured-strip__heading {
    text-align:      center;
    font-size:       1.5rem;
    color:           var(--abcdf-primary);
    margin:          0 0 36px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             16px;
}
.abcdf-featured-strip__line {
    flex:       1;
    max-width:  80px;
    height:     2px;
    background: var(--abcdf-accent);
    border-radius:2px;
}
.abcdf-featured-strip__grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap:                   24px;
}

/* Featured Card */
.abcdf-featured-card {
    border-radius: var(--abcdf-radius);
    overflow:      hidden;
    box-shadow:    var(--abcdf-shadow);
    display:       flex;
    flex-direction:column;
    background:    var(--abcdf-card-bg);
    transition:    transform .3s, box-shadow .3s;
}
.abcdf-featured-card:hover {
    transform:  translateY(-3px);
    box-shadow: var(--abcdf-shadow-hover);
}

/* Featured Card Image - FULL HEIGHT PRESERVED, width adjusts */
.abcdf-featured-card__img {
    position:   relative;
    width:      100%;
    min-height: 250px;
    background: linear-gradient(135deg, #e8f5e9, #a5d6a7);
    overflow:   hidden;
    display:    flex;
    align-items: center;
    justify-content: center;
}
.abcdf-featured-card__img img {
    width:      auto;
    height:     100%;
    max-width:  100%;
    object-fit: contain;
    object-position: center;
    display:    block;
}
.abcdf-featured-card__placeholder {
    width:      100%;
    height:     100%;
    display:    flex;
    align-items:center;
    justify-content:center;
    font-size:  2.5rem;
    color:      rgba(26,71,49,.2);
}
.abcdf-featured-card__badge {
    position:       absolute;
    top:            14px;
    left:           14px;
    background:     var(--abcdf-accent);
    color:          var(--abcdf-primary);
    font-size:      0.72rem;
    font-weight:    700;
    padding:        4px 10px;
    border-radius:  20px;
    letter-spacing: .4px;
    text-transform: uppercase;
    z-index:        10;
}
.abcdf-featured-card__body {
    padding:    24px;
    flex:       1;
    display:    flex;
    flex-direction: column;
}
.abcdf-featured-card__body h3 {
    font-size:   1.1rem;
    color:       var(--abcdf-primary);
    margin:      0 0 8px;
    line-height: 1.3;
}
.abcdf-featured-card__body p {
    font-size:  0.88rem;
    color:      var(--abcdf-text-muted);
    line-height:1.6;
    margin:     0 0 12px;
    flex:       1;
}
.abcdf-featured-card__price {
    font-size:  0.85rem;
    font-weight:600;
    color:      var(--abcdf-accent-dk);
    display:    none;
}


/* ═══════════════════════════════════════════════════════════════
   ALL PRODUCTS GRID
   ═══════════════════════════════════════════════════════════════ */
.abcdf-all-products {
    background: var(--abcdf-bg);
    padding:    60px 24px 80px;
}
.abcdf-all-products__inner {
    max-width: 1100px;
    margin:    0 auto;
}
.abcdf-all-products__heading {
    font-size:   1.4rem;
    color:       var(--abcdf-primary);
    margin:      0 0 32px;
    text-align:  center;
}
.abcdf-all-products__grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap:                   24px;
}

/* Product Card */
.abcdf-product-card {
    background:    var(--abcdf-card-bg);
    border-radius: var(--abcdf-radius);
    box-shadow:    var(--abcdf-shadow);
    overflow:      hidden;
    transition:    transform .25s, box-shadow .25s;
    display:       flex;
    flex-direction:column;
}
.abcdf-product-card:hover {
    transform:  translateY(-2px);
    box-shadow: var(--abcdf-shadow-hover);
}
.abcdf-product-card--featured {
    border: 2px solid var(--abcdf-accent);
}

/* Product Card Image - FULL HEIGHT PRESERVED, width adjusts */
.abcdf-product-card__img {
    position:   relative;
    width:      100%;
    min-height: 200px;
    background: linear-gradient(135deg, #f1f8f4, #dcedc8);
    overflow:   hidden;
    display:    flex;
    align-items: center;
    justify-content: center;
}
.abcdf-product-card__img img {
    width:      auto;
    height:     100%;
    max-width:  100%;
    object-fit: contain;
    object-position: center;
    display:    block;
}
.abcdf-product-card__placeholder {
    width:      100%;
    height:     100%;
    display:    flex;
    align-items:center;
    justify-content:center;
    font-size:  2rem;
    color:      rgba(26,71,49,.18);
}
.abcdf-product-card__body {
    padding:    20px;
    flex:       1;
    display:    flex;
    flex-direction:column;
}
.abcdf-product-card__body h3 {
    font-size:   1rem;
    color:       var(--abcdf-primary);
    margin:      0 0 6px;
    line-height: 1.3;
}
.abcdf-product-card__body p {
    font-size:  0.82rem;
    color:      var(--abcdf-text-muted);
    line-height:1.55;
    margin:     0;
    flex:       1;
}
.abcdf-product-card__meta {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-top:      12px;
}
.abcdf-product-card__price {
    font-size:  0.82rem;
    font-weight:600;
    color:      var(--abcdf-accent-dk);
    display:    none;
}
.abcdf-product-card__star {
    color:     var(--abcdf-accent);
    font-size: 1rem;
}


/* ═══════════════════════════════════════════════════════════════
   MOQ STYLING
   ═══════════════════════════════════════════════════════════════ */

/* MOQ in Featured Cards */
.abcdf-featured-card__moq {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--abcdf-border);
    display: flex;
    align-items: center;
    gap: 6px;
}

.abcdf-moq-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--abcdf-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.abcdf-moq-value {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--abcdf-accent-dk);
}

/* MOQ in Product Cards */
.abcdf-product-card__moq {
    font-size: 0.82rem;
    color: var(--abcdf-text-muted);
}

.abcdf-product-card__moq strong {
    font-weight: 700;
    color: var(--abcdf-primary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    font-size: 0.78rem;
}


/* ═══════════════════════════════════════════════════════════════
   CONTACT FORM
   ═══════════════════════════════════════════════════════════════ */
.abcdf-contact {
    background: var(--abcdf-bg);
    padding:    72px 24px;
}
.abcdf-contact__inner {
    max-width: 780px;
    margin:    0 auto;
}
.abcdf-contact__header {
    text-align: center;
    margin-bottom: 40px;
}
.abcdf-contact__header h2 {
    font-size: 2rem;
    color:     var(--abcdf-primary);
    margin:    0 0 10px;
}
.abcdf-contact__header p {
    color:     var(--abcdf-text-muted);
    font-size: 0.95rem;
    margin:    0;
}

.abcdf-contact__row {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   20px;
}
.abcdf-contact__field {
    display:        flex;
    flex-direction: column;
    margin-bottom:  20px;
}
.abcdf-contact__field label {
    font-size:     0.82rem;
    font-weight:   600;
    color:         var(--abcdf-text);
    margin-bottom: 6px;
    text-transform:uppercase;
    letter-spacing:.5px;
}
.abcdf-contact__req { color: var(--abcdf-accent-dk); }

.abcdf-contact__field input,
.abcdf-contact__field select,
.abcdf-contact__field textarea {
    border:        1px solid var(--abcdf-border);
    border-radius: 8px;
    padding:       12px 16px;
    font-size:     0.92rem;
    color:         var(--abcdf-text);
    background:    #fff;
    transition:    border-color .25s, box-shadow .25s;
    font-family:   inherit;
    outline:       none;
}
.abcdf-contact__field input:focus,
.abcdf-contact__field select:focus,
.abcdf-contact__field textarea:focus {
    border-color: var(--abcdf-primary-lg);
    box-shadow:   0 0 0 3px rgba(42,107,74,.12);
}
.abcdf-contact__field textarea {
    resize: vertical;
}

.abcdf-contact__actions {
    text-align: center;
    margin-top: 8px;
}
.abcdf-contact__note {
    font-size: 0.76rem;
    color:     var(--abcdf-text-muted);
    margin:    14px 0 0;
}

/* Success / Error banners */
.abcdf-contact__success,
.abcdf-contact__error {
    border-radius: var(--abcdf-radius);
    padding:       24px 28px;
    text-align:    center;
    margin-bottom: 24px;
}
.abcdf-contact__success {
    background: #e8f5e9;
    color:      var(--abcdf-primary);
}
.abcdf-contact__success i { font-size:1.8rem; color: var(--abcdf-primary-lg); }
.abcdf-contact__error {
    background: #fdecea;
    color:      #b71c1c;
}
.abcdf-contact__error i { font-size:1.8rem; color:#ef5350; }
.abcdf-contact__success p,
.abcdf-contact__error p   { margin:10px 0 0; font-size:.92rem; }


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .abcdf-featured-strip__grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
        gap: 20px;
    }
    
    .abcdf-all-products__grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 20px;
    }
}

@media (max-width: 640px) {
    .abcdf-contact__row {
        grid-template-columns: 1fr;
    }
    .abcdf-cat-hero__title {
        font-size: 1.8rem;
    }
}

@media (max-width: 480px) {
    .abcdf-featured-strip__grid,
    .abcdf-all-products__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}