/* ==========================================================================
   ACF Block: New Arrivals — block-level styles only.
   Card styles live in assets/css/components/product-card.css (.pcard).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Block wrapper
   -------------------------------------------------------------------------- */
.new-arrivals-block {
    background-color: var(--block-bg-override, var(--ovelia-colors-semantic-surface-elevated));
    padding-block:    var(--ovelia-block-padding-block);
    border-top:       var(--block-border-top, none);
    border-bottom:    var(--block-border-bottom, none);
    color:            var(--ovelia-colors-semantic-text);
}

.na-inner {
    width:          min(100%, var(--ovelia-layout-max-width));
    margin:         0 auto;
    padding-inline: var(--ovelia-layout-side-padding);
}

/* --------------------------------------------------------------------------
   Header row
   -------------------------------------------------------------------------- */
.na-header {
    display:        flex;
    align-items:    flex-start;
    flex-direction: column;
    gap:            var(--ovelia-spacing-step-11);
    margin-bottom:  var(--ovelia-spacing-step-10);
}

@media (min-width: 1024px) {
    .na-header {
        flex-direction:  row;
        justify-content: space-between;
    }
}

.na-header__text {
    display:        flex;
    flex-direction: column;
    gap:            var(--ovelia-spacing-semantic-gap-sm);
}

@media (min-width: 1024px) {
    .na-header__text {
        flex-direction: column-reverse;
    }
}

.na-header__title {
    color:  var(--ovelia-colors-semantic-text);
    margin: 0;
}

.na-header__subtitle {
    color:          var(--ovelia-colors-semantic-text-subtle);
    text-transform: uppercase;
    margin:         0;
}

.na-header__cta {
    display:         inline-flex;
    align-items:     center;
    gap:             0.5em;
    font-size:       0.78rem;
    font-weight:     500;
    letter-spacing:  0.12em;
    text-transform:  uppercase;
    text-decoration: none;
    color:           var(--ovelia-colors-semantic-text);
    border-bottom:   1px solid var(--ovelia-colors-semantic-text-subtle);
    padding-bottom:  var(--ovelia-spacing-step-1);
    white-space:     nowrap;
    flex-shrink:     0;
    transition:      color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                     border-color 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.na-header__cta:hover,
.na-header__cta:focus,
.na-header__cta:active {
    color: var(--ovelia-colors-semantic-text);
}

/* --------------------------------------------------------------------------
   Product grid
   -------------------------------------------------------------------------- */
.na-grid {
    display:    flex;
    width:      100%;
    overflow-x: auto;
    gap:        var(--ovelia-spacing-semantic-gap-lg);
    list-style: none;
    margin:     0;
    padding:    0;
}

/* Mobile: cards fill ~70% so partial next card is visible (scroll hint) */
@media (max-width: 1023px) {
    .na-grid > .pcard--compact {
        flex-shrink: 0;
        flex-basis:  70%;
    }
}

@media (min-width: 1024px) {
    .na-grid {
        display:               grid;
        grid-template-columns: repeat(4, 1fr);
    }
}

/* --------------------------------------------------------------------------
   Empty notice (editor only)
   -------------------------------------------------------------------------- */
.na-empty-notice {
    text-align:     center;
    color:          var(--ovelia-colors-semantic-text-subtle);
    font-size:      0.875rem;
    padding:        2rem 0;
    border:         1px dashed rgba(15, 13, 11, 0.10);
    letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   Reduced motion — header CTA transition only (cards handled in product-card.css)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .na-header__cta {
        transition: none;
    }
}