/* ---------- Global link hover ---------- */
/* Placed first, as a base default, so every component rule that already
   sets its own hover colour keeps winning on specificity. Bare a:hover is
   only (0,1,1), so the button, card, breadcrumb and menu rules further
   down are all unaffected. */
a:hover,
a:focus {
    color: #f3d182;
}

.avg-hero{position:relative;overflow:hidden;background:#000}
.avg-hero__viewport{display:grid}
.avg-slide{grid-area:1/1;position:relative;display:flex;align-items:center;min-height:520px;background-size:cover;background-position:center;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s}
.avg-slide.is-active{opacity:1;visibility:visible}
.avg-slide__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: #000;
    opacity: 0.65;
    pointer-events: none;
}
.avg-slide__inner{position:relative;z-index:3;width:100%;max-width:1240px;margin:0 auto;padding:60px 20px}
.avg-slide__eyebrow{margin:0 0 18px;font-family:Inter,sans-serif;font-size:13px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#DFB869}
.avg-slide__eyebrow:before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 21px;
    height: 14px;
    margin-right: 12px;
    background: var(--avg-arrow-url) no-repeat center / contain;
}
.avg-slide__title{margin:0 0 18px;max-width:680px;font-family:'Playfair Display',serif;font-size:48px;font-weight:400;letter-spacing:.06rem;line-height:1.3;color:#fff}
.avg-slide__text{margin:0 0 30px;max-width:580px;font-family:Inter,sans-serif;font-size:16px;line-height:26px;color:#e4e4e4}
.avg-slide__cta{display:inline-block;padding:14px 30px;font-family:Inter,sans-serif;font-size:15px;font-weight:600;color:#fff;border:1px solid rgba(233,209,138,.65);text-decoration:none;transition:background .25s,border-color .25s}
.avg-slide__cta:hover{color:#fff;border-color:#DFB869;background:rgba(223,184,105,.15)}
/* fade-up on the active slide */
.avg-anim{opacity:0;transform:translateY(26px)}
.avg-slide.is-active .avg-anim{animation:avgFadeUp .75s cubic-bezier(.22,.61,.36,1) forwards;animation-delay:var(--avg-d,0s)}
@keyframes avgFadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.avg-anim{opacity:1;transform:none}.avg-slide.is-active .avg-anim{animation:none}}
/* ---------- strip: links, hover thumbnail, slide progress ---------- */
.avg-strip {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 26px 20px 22px;
    background: #000;
}

.avg-strip__btn {
    position: relative;
    display: block;
    padding: 0 0 12px;
    background: none;
    border: 0;
    text-decoration: none;
    cursor: pointer;
}

.avg-strip__label {
    display: block;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-align: left;
    color: rgba(255, 255, 255, 0.55);
    transition: color 0.25s, opacity 0.2s;
}

.avg-strip__btn:hover .avg-strip__label {
    color: #fff;
    opacity: 0;
}

.avg-strip__btn.is-active .avg-strip__label {
    color: #DFB869;
}

/* progress rail: replaces the old static border-bottom */
.avg-strip__track {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    overflow: hidden;
    background: rgba(233, 209, 138, 0.28);
}

.avg-strip__btn.is-active .avg-strip__track {
    height: 3px;
    background: rgba(255, 255, 255, 0.22);
}

.avg-strip__fill {
    display: block;
    width: 100%;
    height: 100%;
    background: #DFB869;
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}

/* hover preview */
.avg-strip__preview {
    position: absolute;
    left: 0;
    bottom: 12px;
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.avg-strip__btn:hover .avg-strip__preview,
.avg-strip__btn:focus-visible .avg-strip__preview {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.avg-strip__plabel {
    display: block;
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    text-align: left;
    color: #fff;
}

.avg-strip__preview img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.65);
}

@media (max-width: 1024px) {
    .avg-slide {
        min-height: 430px;
    }
    .avg-strip {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
    .avg-strip__preview {
        display: none;
    }
    .avg-strip__btn:hover .avg-strip__label {
        opacity: 1;
    }
}

@media (max-width: 767px) {
    .avg-slide {
        min-height: 380px;
    }
    .avg-strip {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

/* ---------- Banner: foreground cut-out ---------- */
/* Sits above the overlay but below the text, centred in the slide, matching
   the storefront's .hero-foreground-image. */
.avg-slide__fg {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.avg-slide__fg img {
    display: block;
    height: 100%;
    width: auto;
    object-fit: contain;
}

@media (max-width: 1024px) {
    .avg-slide__fg {
        left: auto;
        right: 0;
        transform: translateY(-50%);
        height: 82%;
        opacity: 0.9;
    }
}

/* On phones the cut-out would sit under the headline, so it is hidden. */
@media (max-width: 767px) {
    .avg-slide__fg {
        display: none;
    }
}

/* ---------- Banner: Metalor stamp (Media Library: icon-stamp.svg) ---------- */
.avg-slide__stamp {
    position: absolute;
    top: 50%;
    right: max(20px, calc((100% - 1240px) / 2));
    z-index: 2;
    width: clamp(180px, 20vw, 250px);
    height: auto;
    transform: translateY(-50%);
    pointer-events: none;
    user-select: none;
}

/* ---------- Banner: touch / swipe ---------- */
.avg-hero__viewport {
    touch-action: pan-y;
    cursor: grab;
}

.avg-hero__viewport.is-dragging {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
}

.avg-hero__viewport.is-dragging .avg-slide__cta {
    pointer-events: none;
}

@media (max-width: 1024px) {
    .avg-slide__stamp {
        right: 20px;
        width: clamp(150px, 22vw, 220px);
    }
}

@media (max-width: 767px) {
    .avg-slide__stamp {
        top: auto;
        right: 14px;
        bottom: 16px;
        width: 104px;
        transform: none;
        opacity: 0.85;
    }
}

/* ---------- Hero: tablet + mobile (live parity at 768px and below) ---------- */
/* Values read from avangardgold.ro style.css, not estimated:
   .hero-swiper/.swiper-slide -> min-height: clamp(400px, 34.6vw, 450px); height: auto
     (34.6vw is 266px at 768, so the clamp resolves to its 400px floor)
   .section-title  -> clamp(28px, 3.69vw, 48px) / clamp(34px, 4.46vw, 58px) -> 28px/34px
   .section-paragraphs -> 16px/26px, margin-top clamp(10px, 1.92vw, 25px) -> 15px
   .hero-content   -> padding: 40px 0 0
   .cta-wrap       -> margin-top: 40px; .section-cta padding: 0 20px
   .hero-content .button -> width 100%, max-width 320px, solid #000, colour #dfb869
   .hero-slider-nav -> gap 10px, padding 15px 0; tabs font-size 0, min-width 40px, height 20px */
@media (max-width: 768px) {
    .avg-slide {
        min-height: 400px;
        height: auto;
    }

    .avg-slide__inner {
        padding: 40px 20px 0;
    }

    .avg-slide__title {
        max-width: 100%;
        margin: 0 0 15px;
        font-size: 28px;
        line-height: 34px;
    }

    .avg-slide__text {
        max-width: 100%;
        margin: 0 0 40px;
        font-size: 16px;
        line-height: 26px;
    }

    .avg-slide__cta {
        display: block;
        width: 100%;
        max-width: 320px;
        padding: 14px 20px;
        background: #000;
        color: #DFB869;
        text-align: center;
    }

    .avg-strip {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 15px 20px;
    }

    .avg-strip__btn {
        flex: 0 1 auto;
        min-width: 40px;
        height: 20px;
        padding: 0;
        background: transparent;
        font-size: 0;
    }

    .avg-strip__label {
        display: none;
    }
}