/* ---------- Product tabs + carousel ---------- */
/* Astra styles bare <button> with its own background on hover and focus.
   These controls are icon buttons, so that has to be neutralised. */
.avg-ptabs button,
.avg-ptabs button:hover,
.avg-ptabs button:focus,
.avg-ptabs button:active,
.avg-ptabs button:focus-visible {
    box-shadow: none;
    outline: none;
}

.avg-ptabs__tab,
.avg-ptabs__tab:hover,
.avg-ptabs__tab:focus,
.avg-ptabs__tab:active,
.avg-ptabs__tab:focus-visible {
    background: none;
    border: none;
}

.avg-ptabs {
    --avg-cols: 4;
    --avg-gap: 24px;
    --avg-gold: #DFB869;
    --avg-media-bg: #000;
    position: relative;
}

.avg-ptabs__bar {
    display: flex;
    justify-content: center;
    gap: clamp(15px, 7.6923076923076925vw, 100px);
    margin: 0px 0 5px;
    padding: 6px 0;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 0 20px 2px #492a0005;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.avg-ptabs__bar::-webkit-scrollbar {
    display: none;
}

.avg-ptabs__tab {
    position: relative;
    flex-shrink: 0;
    padding: 5px 10px;
    background: none;
    border: none;
    font-size: clamp(12px, 1.1538461538461537vw, 15px);
    font-weight: 600 !important;
    line-height: clamp(22px, 1.9230769230769231vw, 25px);
    color: #333;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Inter';
    font-size: 16px;
}

.avg-ptabs__tab:hover,
.avg-ptabs__tab.is-active {
    color: #dfb869;
}

.avg-ptabs__panel {
    position: relative;
    padding: 20px 0 0;
}

.avg-ptabs__panel[hidden] {
    display: none;
}

/* Live: only the "Toate produsele" container carries Dawn's
   scroll-trigger animate--slide-in (the other tab containers carry nothing).
   It slides up 2rem (20px) from opacity .01 over .6s cubic-bezier(0,0,.3,1)
   when it first scrolls into view, and again every time the tab is shown,
   because the panel goes from display:none back to display:block and CSS
   restarts the animation. The other tabs appear instantly, as on live. */
@media (prefers-reduced-motion: no-preference) {
    .avg-ptabs__panel--reveal {
        opacity: .01;
        transform: translateY(20px);
    }
    .avg-ptabs__panel--reveal:not(.is-offscreen) {
        animation: avgPtabsSlideIn .6s cubic-bezier(0, 0, .3, 1) forwards;
        animation-delay: calc(var(--animation-order, 0) * 75ms);
    }
}
@keyframes avgPtabsSlideIn {
    from { transform: translateY(20px); opacity: .01; }
    to   { transform: translateY(0); opacity: 1; }
}

.avg-ptabs__empty {
    padding: 40px 0;
    text-align: center;
    color: #777;
}

.avg-ptabs__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-x pan-y;
}

.avg-ptabs__viewport::-webkit-scrollbar {
    display: none;
}

.avg-pgrid {
    display: flex;
    gap: var(--avg-gap);
    align-items: stretch;
    padding: 4px;
}

.avg-pcard {
    flex: 0 0 calc((100% - (var(--avg-cols) - 1) * var(--avg-gap)) / var(--avg-cols));
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    background: #fff;
    border-radius: 10px;
    padding: 10px 10px 20px;
    overflow: hidden;
    box-shadow: 0 0 20px 2px #492a0005;
    transition: box-shadow 0.3s, transform 0.3s;
}

.avg-pcard__media {
    position: relative;
    height: 272px;
    width: 100%;
    background: var(--avg-media-bg);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avg-pcard__imglink {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.avg-pcard__img {
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 245px;
    object-fit: contain;
    transition: opacity 0.3s ease;
}

.avg-pcard__img.is-secondary {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.avg-pcard:hover .avg-pcard__img.is-secondary {
    opacity: 1;
}

.avg-pcard__wish {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: #fff;
    border: 1px solid #DFB869;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.avg-pcard__wish:hover,
.avg-pcard__wish:focus {
    background: #fff;
    border-color: #DFB869;
}

.avg-pcard__wish svg path {
    fill: none;
    transition: fill 0.2s ease;
}

.avg-pcard__wish[aria-pressed="true"] svg path {
    fill: #dfb869;
}

/* White pill with sentence-case text, as on the storefront, rather than the
   gold uppercase chip this was. */
.avg-pcard__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    padding: 6px 12px;
    border-radius: 4px;
    background: #fff;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
    color: #111;
}

.avg-pcard__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 5px;
}

/* Dots were translucent white on the black media box; now the same grey
   and gold pair the carousel dots elsewhere use. Only the colours change:
   size, spacing and which dot is active are untouched. */
.avg-pcard__dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #d0d0d0;
}

.avg-pcard__dots i:first-child {
    background: #dfb869;
}

.avg-pcard:hover .avg-pcard__dots i:first-child {
    background: #d0d0d0;
}

.avg-pcard:hover .avg-pcard__dots i:last-child {
    background: #dfb869;
}

.avg-pcard__title {
    margin: 16px 0 5px;
    font-family: Inter, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.18px;
    color: #000;
}

.avg-pcard__title a {
    color: inherit;
    text-decoration: none;
}

.avg-pcard__title a:hover {
    color: var(--avg-gold);
}

.avg-pcard__price {
    margin-top: 6px;
    font-family: Inter, sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #dfb869;
}

.avg-pcard__price del {
    margin-right: 6px;
    opacity: 0.55;
    font-weight: 400;
}

.avg-pcard__dual {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 9px;
    padding-top: 0px;
}

.avg-pcard__dualcol {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.avg-pcard__dualcol.is-right {
    text-align: right;
}

.avg-pcard__dualcol span {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #333333;
}

.avg-pcard__dualcol .amount {
    font-weight: 600;
    color: #000;
}

.avg-pcard__dualcol .woocommerce-Price-currencySymbol{
 font-weight: 600;
    color: #000;
}

.avg-pcard__dualcol strong {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #000;
}

.avg-pcard__foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 16px;
}









/* Rating: value then star, matching the storefront's .card__rating.
   The star is a 24px SVG next to 14px text, so without an explicit flex the
   SVG sits on the text baseline and rides high. Centring both on the cross
   axis is what keeps them level whatever the score's line-height. */
.avg-pcard__rating {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    line-height: 1;
}

.avg-pcard__ratingval {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #000;
}

.avg-pcard__ratingstar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* display:block removes the inline descender gap under the SVG, which is the
   other half of the misalignment. */
.avg-pcard__ratingstar svg {
    display: block;
    width: 24px;
    height: auto;
}

/* Keeps the row height stable when a product has no score, so cards in the
   same row still line their footers up. */
.avg-pcard__rating.is-empty {
    min-height: 24px;
}

.avg-pcard__qty {
    display: flex;
    align-items: center;
    margin-left: 0;
    border-radius: 4px;
    overflow: hidden;
    background: #fbfbfb;
}

/* Astra styles input[type="number"] and bare <button> globally, and an
   attribute selector outranks a single class. These are scoped one level
   deeper so the component wins without needing !important. */
.avg-pcard__qty button.avg-qty__btn {
    width: 30px;
    height: 40px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: #fbfbfb;
    box-shadow: none;
    color: #333;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.avg-pcard__qty button.avg-qty__btn:hover,
.avg-pcard__qty button.avg-qty__btn:focus,
.avg-pcard__qty button.avg-qty__btn:active {
    background: #fbfbfb;
    color: #333;
    box-shadow: none;
    outline: none;
}

.avg-qty__btn svg {
    width: 12px;
    height: auto;
}

.avg-pcard__qty input.avg-qty__val,
.avg-pcard__qty input.avg-qty__val:focus,
.avg-pcard__qty input.avg-qty__val:hover {
    width: 40px;
    min-width: 0;
    height: 40px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: #fbfbfb;
    box-shadow: none;
    outline: none;
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 40px;
    color: #000;
    flex: 0 0 auto;
    -moz-appearance: textfield;
    appearance: textfield;
}

.avg-qty__val::-webkit-outer-spin-button,
.avg-qty__val::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.avg-pcard__cart {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 40px;
    height: 40px;
    margin-left: auto;
    background: #dfb869;
    border: none;
    border-radius: 4px;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.avg-pcard__qty + .avg-pcard__cart {
    margin-left: auto;
}

.avg-pcard__cart svg {
    width: 19px;
    height: auto;
}

.avg-pcard__cart:hover,
.avg-pcard__cart:focus {
    background: #dfb869;
    color: #000;
}

.avg-pcard__cart.loading {
    opacity: 0.6;
}

.avg-pcard__cart.added:after {
    content: '';
}

.avg-pcard__cart + .added_to_cart {
    display: none;
}

.avg-ptabs__arrow {
    position: absolute;
    top: 50%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #000;
    cursor: pointer;
    transform: translateY(-50%);
    transition: all 0.3s ease;
}

/* No fill on hover. Kept explicit so Astra's button:hover cannot reintroduce one. */
/* Live: .products-slider-container .swiper-button-*:hover { background:#000 }
   with the icon inverted to white. 48x48 already matches. */
.avg-ptabs__arrow:hover,
.avg-ptabs__arrow:focus,
.avg-ptabs__arrow:active {
    background: #000;
    color: #fff;
}

.avg-ptabs__arrow.is-prev {
    left: -50px;
}

.avg-ptabs__arrow.is-next {
    right: -50px;
}

.avg-ptabs__arrow.is-next svg {
    transform: rotate(180deg);
}

.avg-ptabs__arrow[disabled] {
    color: #7e7e7e;
    opacity: 1;
    cursor: default;
    pointer-events: none;
}

/* Live's disabled arrow is its black icon at opacity .5 over the #fbfbfb
   section, which renders as #7e7e7e. Set that colour directly (the SVG
   strokes with currentColor) and lock it for every interaction state, so
   hover/focus/active fills can never show on a disabled arrow. */
.avg-ptabs__arrow[disabled]:hover,
.avg-ptabs__arrow[disabled]:focus,
.avg-ptabs__arrow[disabled]:active {
    background: transparent;
    color: #7e7e7e;
    opacity: 1;
}

@media (max-width: 1360px) {
    .avg-ptabs__arrow.is-prev {
        left: 2px;
    }
    .avg-ptabs__arrow.is-next {
        right: 2px;
    }
}

@media (max-width: 767px) {
    .avg-ptabs__bar {
        justify-content: flex-start;
        padding: 6px 12px;
    }
}


/* Arrows in a row under the carousel (reference uses position:static here) */
.avg-ptabs__nav {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 34px;
}

.avg-ptabs__nav .avg-ptabs__arrow,
.avg-ptabs__nav .avg-ptabs__arrow.is-prev,
.avg-ptabs__nav .avg-ptabs__arrow.is-next {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    width: 48px;
    height: 48px;
}

@media (max-width: 767px) {
    .avg-ptabs__nav {
        gap: 16px;
        margin-top: 24px;
    }
}

/* ---------- About Metalor: layered video / image collage ---------- */
/* Elementor owns this container's layout via --display and --width, set in
   the widget settings. This only stops the flex children refusing to shrink
   below their content width. */
.avg-about-row > * {
    min-width: 0;
}

.avg-vt {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: clamp(400px, 58.46153846153846vw, 760px);
    height: auto;
}

.avg-vt__top,
.avg-vt__bottom {
    position: absolute;
    width: 100%;
}

.avg-vt__wrap {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    border-radius: 10px;
    overflow: hidden;
}

.avg-vt__wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avg-vt__top {
    top: 0;
    bottom: auto;
    left: 50%;
    z-index: 1;
    max-width: clamp(105px, 15.384615384615385vw, 200px);
}

.avg-vt__bottom {
    top: auto;
    bottom: 0;
    right: 5%;
    z-index: 0;
    max-width: clamp(177px, 25.846153846153847vw, 336px);
}

.avg-vt__video {
    position: relative;
    z-index: 2;
    max-width: 79%;
    margin-top: auto;
    margin-bottom: auto;
    border-radius: 10px;
    transform: translateY(-10%);
}

.avg-vt__cover {
    position: relative;
    display: block;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.avg-vt__cover:hover {
    transform: scale(1.02);
}

.avg-vt__cover img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.avg-vt__play {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #dfb869;
    transform: translate(-50%, -50%);
    transition: transform 0.3s ease, color 0.3s ease;
}

.avg-vt__cover:hover .avg-vt__play {
    color: #e8cc93;
    transform: translate(-50%, -50%) scale(1.1);
}

.avg-vt__play svg {
    display: block;
}

.avg-vt__badge {
    position: absolute;
    bottom: -50%;
    left: 20px;
    z-index: 2;
    width: 176px;
    height: auto;
    border-radius: 50%;
    overflow: hidden;
    transform: translateY(-50%);
}

.avg-vt__badge img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Feature list beside the collage */
.avg-about-features .elementor-icon-list-items {
    margin: 42px 0;
}

/* Live desktop: li { padding-left: 20px }, li:before { left:-150px; top:0; width:150px; height:2px } */
.avg-about-features .elementor-icon-list-item {
    position: relative;
    padding-left: 20px;
    margin-bottom: clamp(16px, 2.3076923076923075vw, 30px);
}

.avg-about-features .elementor-icon-list-item:before {
    content: '';
    position: absolute;
    top: 0;
    left: -150px;
    width: 150px;
    height: 2px;
    background: linear-gradient(to right, #f9f6bb, #dfb869);
    opacity: 0.5;
}

.avg-about-features .elementor-icon-list-text {
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: #dfb869;
}

@media (max-width: 1024px) {
    .avg-vt__badge {
        width: 130px;
    }
}

@media (max-width: 767px) {
    .avg-vt {
        min-height: 420px;
    }
    .avg-vt__badge {
        width: 80px;
        height: 80px;
        bottom: 15px;
        left: 15px;
        transform: none;
    }
    .avg-vt__play svg {
        width: 40px;
        height: 40px;
    }
    .avg-about-features .elementor-icon-list-item {
        padding-left: 32px;
    }
    .avg-about-features .elementor-icon-list-item:before {
        width: 22px;
    }
}

/* Video lightbox */
.avg-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.88);
}

.avg-lightbox[hidden] {
    display: none;
}

.avg-lightbox__inner {
    position: relative;
    width: 100%;
    max-width: 900px;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

.avg-lightbox__inner iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.avg-lightbox__close {
    position: absolute;
    top: 18px;
    right: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    color: #fff;
    cursor: pointer;
}

.avg-lightbox__close:hover,
.avg-lightbox__close:focus {
    background: transparent;
    color: var(--avg-gold, #DFB869);
}

@media (max-width: 767px) {
    .avg-lightbox {
        padding: 14px;
    }
    .avg-lightbox__close {
        top: 6px;
        right: 6px;
    }
}

/* ---------- Testimonials carousel ---------- */
.avg-tst {
    --avg-gold: #DFB869;
    --avg-cols: 2;
    --avg-gap: 26px;
    position: relative;
}

.avg-tst__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-x pan-y;
    cursor: grab;
}

/* Snapping must stay off for the whole gesture AND the settle animation;
   re-enabling it mid-flight makes the browser jump to its own snap point. */
.avg-tst__viewport.is-dragging,
.avg-tst__viewport.is-settling {
    scroll-snap-type: none;
}

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

.avg-tst__viewport::-webkit-scrollbar {
    display: none;
}

.avg-tst__track {
    display: flex;
    gap: var(--avg-gap);
    align-items: stretch;
    padding: 22px 4px 4px;
}

.avg-tst__card {
    position: relative;
    flex: 0 0 calc((100% - (var(--avg-cols) - 1) * var(--avg-gap)) / var(--avg-cols));
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    padding: 48px 30px;
    background: #fff;
    border: 1px solid #DFB869;
    border-radius: 10px;
    box-shadow: 0 0 20px 2px #492a0005;
}

/* Oversized quote mark straddling the top border, as on the reference */
/* Live: .testimonial-card .quote-icon { top:-15px; left:20px; width:40px; height:30px } */
.avg-tst__mark {
    position: absolute;
    top: -30px;
    left: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    pointer-events: none;
}

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

.avg-tst__quote {
    margin: 0 0 18px;
    padding: 0;
    border: 0;
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 400;
    font-style: normal;
    line-height: 25px;
    color: #333;
    quotes: none;
}

.avg-tst__quote p {
    margin: 0 0 10px;
}

.avg-tst__quote p:last-child {
    margin-bottom: 0;
}

.avg-tst__author {
    margin: auto 0 0;
    font-family: var(--font-heading-family, 'Playfair Display', serif);
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    color: var(--avg-gold);
}

.avg-tst__author span {
    color: var(--avg-gold);
}

/* Live: .mobile-navigation is display:none by default and display:flex only
   under 768px; .desktop-navigation is display:none!important at every width.
   So arrows + dots appear on tablet/mobile only, never on desktop. */
.avg-tst__nav {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: nowrap;
    margin-top: 24px;
}

@media (max-width: 768px) {
    .avg-tst__nav {
        display: flex;
    }
}

.avg-tst__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    transition: background 0.3s ease, opacity 0.3s ease;
}

.avg-tst__arrow::after {
    content: "";
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M21 12L3.5 12" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M10 19L3 12L10 5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    transition: filter 0.3s ease;
}

.avg-tst__arrow--next::after {
    transform: rotate(180deg);
}

.avg-tst__arrow:hover {
    background: #000;
}

.avg-tst__arrow:hover::after {
    filter: invert(1);
}

/* Live loops, so its arrows never disable. Ours does not clone slides, so the
   ends are real and the arrow is faded rather than silently doing nothing. */
.avg-tst__arrow[disabled] {
    opacity: 0.35;
    cursor: default;
}

.avg-tst__arrow[disabled]:hover {
    background: transparent;
}

.avg-tst__arrow[disabled]:hover::after {
    filter: none;
}

.avg-tst__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
}

.avg-tst__dot {
    position: relative;
    width: 12px;
    height: 12px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: border-color 0.25s;
}

.avg-tst__dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #d0d0d0;
    border-radius: 50%;
}

.avg-tst__dot.is-active {
    border-color: #DFB869;
}

.avg-tst__dot.is-active::before {
    background: linear-gradient(177deg, #f9f6bb -28.82%, #dfb869 111.37%);
}

@media (max-width: 767px) {
    .avg-tst__card {
        padding: 40px 20px 20px;
    }
    .avg-tst__mark {
        top: -15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .avg-tst__viewport {
        scroll-behavior: auto;
    }
}

/* ---------- Header main menu (scoped to .avg-mainmenu only) ---------- */
/* Live: .header__inline-menu .list-menu { gap: 40px } */
.avg-mainmenu .xpro-elementor-horizontal-navbar-nav {
    gap: 40px;
}

.avg-mainmenu .xpro-elementor-horizontal-navbar-nav > li {
    margin: 0;
}

/* Live spacing is the 40px gap alone; Xpro adds its own link padding on top,
   which is what made ours read wider. */
.avg-mainmenu .xpro-elementor-horizontal-navbar-nav > li > a {
    padding-left: 0;
    padding-right: 0;
}

/* Live underline: background-size: 100% .1em, colour #d99a5a */
.avg-mainmenu .xpro-elementor-horizontal-navbar-nav > li > a:before {
    height: 0.1em;
    background-color: #d99a5a;
}

/* ---------- Batch 2: header (live-matched) ---------- */
/* #1 + #26 live: .promotional-ribbon__content { padding: 14px 0; min-height: 52px }
   .promotional-ribbon__image { min-width: 100px }
   .promotional-ribbon__image-el { height: 96px; width: auto; position: absolute; top: 50%; transform: translateY(-50%); left: 0 } */
.avg-announce {
    min-height: 52px;
    padding-top: 14px;
    padding-bottom: 14px;
    overflow: hidden;
}

.avg-announce .avg-ann-img {
    position: relative;
    min-width: 100px;
}

.avg-announce .avg-ann-img img {
    position: absolute;
    top: 50%;
    left: 0;
    width: auto;
    height: 96px;
    transform: translateY(-50%);
}

/* #4 live: .badge-wrapper a { color: #ffffffbf }, :hover { color: #dfb869 } */
.avg-infobar .elementor-icon-list-text,
.avg-infobar .elementor-icon-list-item > a {
    color: #ffffffbf;
}

.avg-infobar .elementor-icon-list-item > a:hover,
.avg-infobar .elementor-icon-list-item:hover .elementor-icon-list-text {
    color: #dfb869;
}

/* #7 live: .header__icon .svg-wrapper uses hamburger-frame.svg, a 1px stroke
   with a #F9F6BB -> #DFB869 gradient and rx 3.5 (radius 4px). */
.avg-ic-burger .elementor-icon {
    position: relative;
    border-radius: 4px;
}

.avg-ic-burger .elementor-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 4px;
    padding: 1px;
    background: linear-gradient(180deg, #F9F6BB 0%, #DFB869 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* #28 live: .header__heading-logo { max-width: clamp(127px, 11.538461538461538vw, 150px) } */
.avg-logo-col .xpro-site-logo img {
    width: 100%;
    max-width: clamp(127px, 11.538461538461538vw, 150px);
    height: auto;
}

/* #8 live: .header-wrapper--border-bottom:after { height:.5px; width:100%;
   background: linear-gradient(to right,#f9f6bb,#dfb869); position:absolute; bottom:0; left:0; z-index:1 }
   Ours sat on the ticker (one row too high). Moved to the bottom of .avg-mainbar,
   the last row of the header stack, so it also travels with the fixed bar on scroll. */
.avg-ticker {
    border-bottom: 0 !important;
}

.avg-mainbar::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.5px;
    background: linear-gradient(to right, #f9f6bb, #dfb869);
    z-index: 1;
    pointer-events: none;
}

/* ---------- News carousel ---------- */
.avg-nws {
    --avg-gold: #DFB869;
    --avg-cols: 2;
    --avg-gap: 24px;
    position: relative;
    padding: 0 60px;
}

.avg-nws__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    touch-action: pan-x pan-y;
}

.avg-nws__viewport::-webkit-scrollbar {
    display: none;
}

.avg-nws__track {
    display: flex;
    gap: var(--avg-gap);
    align-items: stretch;
    padding: 4px;
}

.avg-nws__card {
    flex: 0 0 calc((100% - (var(--avg-cols) - 1) * var(--avg-gap)) / var(--avg-cols));
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    padding: 10px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.avg-nws__media {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    overflow: hidden;
}

.avg-nws__media a {
    display: block;
    height: 100%;
}

.avg-nws__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.avg-nws__media:hover img {
    transform: scale(1.05);
}

.avg-nws__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 25px;
}

.avg-nws__title {
    margin: 0;
    font-family: Inter, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    color: #000;
}

.avg-nws__title a {
    color: #000;
    text-decoration: none;
    transition: color 0.3s ease;
}

.avg-nws__title a:hover {
    color: var(--avg-gold);
}

.avg-nws__meta {
    margin: 0;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: #333;
    text-transform: none;
    letter-spacing: normal;
}

/* Gold gradient text on the read link, as on the reference */
.avg-nws__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    padding-top: 22px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    text-decoration: none;
    color: var(--avg-gold);
    transition: opacity 0.3s ease;
}

.avg-nws__link span {
    background: linear-gradient(177deg, #F9F6BB -28.82%, #DFB869 111.37%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.avg-nws__link svg {
    flex: 0 0 auto;
    transition: transform 0.3s ease;
}

.avg-nws__link:hover {
    opacity: 0.8;
}

.avg-nws__link:hover svg {
    transform: translateX(5px);
}

.avg-nws__arrow {
    position: absolute;
    top: 50%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: #000;
    cursor: pointer;
    transform: translateY(-50%);
    transition: color 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}

.avg-nws__arrow:hover,
.avg-nws__arrow:focus,
.avg-nws__arrow:active {
    /* Focus / press keep the default look (2026-09-28). Both declarations stay:
       they beat the theme's global button:hover / button:focus rules (gold
       background, coloured text). Was: color var(--avg-gold). */
    background: transparent;
    color: #000;
}

/* Hover as on the live site: black square, white arrow (live: background #000 +
   inverted icon, 0.3s). Pointer hover only - it clears when the mouse leaves. */
.avg-nws__arrow:not([disabled]):hover {
    background: #000;
    color: #fff;
}

.avg-nws__arrow[disabled]:hover,
.avg-nws__arrow[disabled]:focus,
.avg-nws__arrow[disabled]:active {
    color: #000;
}

.avg-nws__arrow.is-prev {
    left: 0;
}

.avg-nws__arrow.is-next {
    right: 0;
}

.avg-nws__arrow.is-next svg {
    transform: rotate(180deg);
}

/* Mobile nav bar: prev + dots + next, hidden on desktop (source shows it only <=768px) */
.avg-nws__nav {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

.avg-nws__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.avg-nws__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    background: rgba(223, 184, 105, 0.35);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}

.avg-nws__dot:hover,
.avg-nws__dot:focus {
    background: rgba(223, 184, 105, 0.6);
}

.avg-nws__dot.is-active {
    background: var(--avg-gold);
    transform: scale(1.25);
}

.avg-nws__arrow[disabled] {
    opacity: 0.25;
    cursor: default;
}

@media (max-width: 1024px) {
    .avg-nws {
        padding: 0 44px;
    }
}

@media (max-width: 768px) {
    .avg-nws {
        --avg-gap: 12px;
        padding-left: 0;
        padding-right: 0;
    }
    /* Right-edge bleed. The viewport's containing block is .avg-nws, which is
       the centred Elementor content box, so (50% - 50vw) lands its right edge
       exactly on the viewport edge. overflow-x on the viewport does the clipping,
       so no box extends past the viewport and the page cannot scroll sideways.
       .avg-nws__nav stays inside the un-bled .avg-nws and remains centred. */
    .avg-nws__viewport {
        margin-right: calc(50% - 50vw);
    }
    /* vw-based so the card is independent of the container once the track bleeds.
       Also beats the Elementor mobile override of --avg-cols. */
    .avg-nws__card {
        flex: 0 0 78vw;
    }
    .avg-nws__arrow {
        display: none;
    }
    .avg-nws__nav {
        display: flex;
    }
    .avg-nws__nav .avg-nws__arrow {
        display: flex;
        position: static;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
    }
    .avg-nws__body {
        padding: 10px;
    }
    .avg-nws__title {
        font-size: 17px;
        line-height: 24px;
    }
}

/* ---------- Collapsible SEO text ---------- */
.avg-col {
    --avg-gold: #DFB869;
    --avg-text: #333333;
    text-align: center;
}

.avg-col__heading {
    margin: 0 0 6px;
    font-family: var(--font-heading-family, 'Playfair Display', serif);
    font-size: clamp(26px, 3vw, 40px);
    font-weight: 400;
    line-height: 1.25;
    color: var(--avg-gold);
}

.avg-col__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: #000;
    cursor: pointer;
}

.avg-col__toggle:hover,
.avg-col__toggle:focus,
.avg-col__toggle:active {
    background: transparent;
    color: var(--avg-gold);
}

.avg-col__toggle svg {
    transition: transform 0.3s ease;
}

.avg-col.is-open .avg-col__toggle svg {
    transform: rotate(180deg);
}

.avg-col__panel {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.45s ease;
}

.avg-col__panel[hidden] {
    display: block;
    max-height: 0;
}

.avg-col.is-open .avg-col__panel {
    max-height: 4000px;
}

.avg-col__body {
    padding-top: 26px;
    text-align: left;
}

.avg-col__body,
.avg-col__body p,
.avg-col__body li {
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--avg-text);
}

.avg-col__body p {
    margin: 0 0 24px;
}

.avg-col__body p:last-child {
    margin-bottom: 0;
}

.avg-col__body a {
    color: var(--avg-gold);
    text-decoration: none;
    transition: opacity 0.25s ease;
}

.avg-col__body a:hover,
.avg-col__body a:focus {
    color: var(--avg-gold);
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    .avg-col__panel {
        transition: none;
    }
}

@media (max-width: 767px) {
    .avg-col__body {
        padding-top: 18px;
    }
    .avg-col__body p {
        margin-bottom: 18px;
    }
}

/* ---------- Shop / category archive ----------
   Values below come from the storefront's own stylesheets (component-card.css,
   component-facets.css, component-collection-hero.css, style.css), so the two
   pages measure the same rather than merely resembling each other. Shopify's
   root font size is 10px, so its rem figures are converted: 1.4rem = 14px. */
.avg-arch {
    --avg-gold: #DFB869;
    /* The shared card reads these; without them its media box loses the black
       backdrop outside the Elementor carousels that used to set them. */
    --avg-media-bg: #000;
    --avg-gap: 24px;
    --avg-cols: 3;
    background: #fff;
}

/* Astra pads .ast-container on archives, which would show as a white band
   between the header and the avg-arch flush banner. Scoped to product
   archives so no other template loses its spacing. */
.post-type-archive-product #content > .ast-container,
.tax-product_cat #content > .ast-container,
.avg-collection-alias #content > .ast-container {
    padding-top: 0;
    padding-bottom: 0;
}

/* ---- Banner ---- */
/* Full bleed: the archive renders inside Astra's content container, so the
   hero is pulled out to the viewport edges. Negative margins rather than
   width:100vw, because 100vw counts the scrollbar and would overflow. */
.avg-arch__hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    min-height: 260px;
    overflow: hidden;
    background: #111 center / cover no-repeat;
    text-align: center;
}

.avg-arch__heroveil {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

.avg-arch__herobody {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1280px;
    padding: 40px 20px;
}

.avg-arch__title {
    margin: 0;
    font-family: var(--font-heading-family, 'Playfair Display', serif);
    font-size: clamp(32px, 3.6923vw, 48px);
    font-weight: 500;
    line-height: 1.2;
    color: #dfb869;
}

/* Alias collections with storefront banner copy (a tag archive served at
   /collections/<alias>/, marked by archive-product.php) use the storefront
   collection-hero title: 34px to 50px, the same scale as the category
   collections' .tax-product_cat .avg-arch__title. */
.avg-arch__hero--collection .avg-arch__title {
    font-size: clamp(34px, 3.8462vw, 50px);
    line-height: 1.1;
    letter-spacing: .6px;
}

.avg-arch__sub {
    margin: 16px 0 0;
    font-family: Inter, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #fff;
}

/* ---- Breadcrumbs ----
   Matching the storefront's .section-breadcrumbs: 12px, #333, a chevron after
   every crumb, the trailing one hidden, and the current crumb gold and inert. */
.avg-arch__crumbs {
    max-width: 1240px;
    margin: 0 auto;
    padding: 56px 0 0;
}

.avg-crumbs ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    row-gap: clamp(5px, 0.7692vw, 10px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.avg-crumbs ol li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: Inter, sans-serif;
    font-size: 12px;
    line-height: 1.4;
    color: #333;
}

.avg-crumbs ol li a {
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: #333;
    text-decoration: none;
}

.avg-crumbs ol li a:hover {
    color: var(--avg-gold);
}

.avg-crumbs__sep {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: #333;
}

/* The chevron is rendered on every crumb and hidden on the last, so the
   markup stays uniform and no crumb needs to know it is final. */
.avg-crumbs ol li:last-child .avg-crumbs__sep {
    display: none;
}

.avg-crumbs ol li:last-child a,
.avg-crumbs ol li:last-child a:hover {
    color: var(--avg-gold);
    pointer-events: none;
}
/* ---- Section bands ----
   The storefront tints the filter/product block and the FAQ block #FBFBFB
   edge to edge, while their content stays on the 1240px column. The band is a
   full-width wrapper, so no negative-margin trick is needed and nothing can
   overflow horizontally. */
.avg-arch__crumbband,
.avg-arch__band,
.avg-arch__faqband {
    /* The archive renders inside Astra's 1240px container, so the band is
       pulled to the viewport edges the same way the hero is. Negative margins
       rather than 100vw, because 100vw counts the scrollbar and would
       overflow. The inner column keeps its own max-width and stays centred. */
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    background: #FBFBFB;
}

/* ---- Layout ---- */
.avg-arch__main {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 30px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 27px 0 75px;
}

.avg-arch__side {
    align-self: start;
}

.avg-arch__filterlabel {
    margin: 0 0 15px;
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #333;
}

.avg-arch__clear {
    display: inline-block;
    margin-bottom: 20px;
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: #333;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.avg-arch__clear:hover {
    color: var(--avg-gold);
}

/* Phone-only echo of the active chips; the sidebar copy covers desktop. */
.avg-arch__mobilechips {
    display: none;
}

/* The price ceiling, stated above the De la / Catre fields. */
.avg-filter__pricemax {
    margin: 0 0 14px;
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.4;
    color: #777;
}

/* Drawer-only, like the head it sits in. */
.avg-arch__drawercount {
    display: none;
}

/* ---- Filter head and active chips ---- */
.avg-arch__filterhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
}

.avg-arch__filterhead .avg-arch__filterlabel {
    margin: 0;
}

.avg-arch__clear {
    margin: 0;
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: var(--avg-gold);
    text-decoration: none;
}

.avg-arch__clear:hover {
    color: var(--avg-gold);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.avg-chips {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.avg-chips__item {
    margin: 0;
    max-width: 100%;
}

.avg-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    padding: 7px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 40px;
    background: #fff;
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 1.3;
    color: #333;
    text-decoration: none;
    transition: border-color 0.2s ease;
}

.avg-chip:hover,
.avg-chip:focus {
    border-color: var(--avg-gold);
    color: #333;
}

.avg-chip__x {
    flex: 0 0 auto;
    font-size: 16px;
    line-height: 1;
    color: #777;
}

.avg-chip:hover .avg-chip__x {
    color: var(--avg-gold);
}

.avg-filter__selected {
    color: inherit;
}

/* ---- Filter disclosures ---- */
.avg-filter {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.avg-filter__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 15px 0;
    cursor: pointer;
    list-style: none;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.75);
}

.avg-filter__summary::-webkit-details-marker {
    display: none;
}

.avg-filter[open] .avg-filter__summary,
.avg-filter__summary:hover {
    color: #000;
}

.avg-filter__summary:hover .avg-filter__label {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Chevron drawn with borders, so there is no data URI to escape. */
.avg-filter__caret {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.avg-filter[open] .avg-filter__caret {
    margin-top: 2px;
    transform: rotate(225deg);
}

.avg-filter__body {
    padding-bottom: 15px;
}

.avg-filter__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.avg-filter__item.is-extra {
    display: none;
}

.avg-filter.is-expanded .avg-filter__item.is-extra {
    display: block;
}

.avg-filter__opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px 10px 0;
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #333;
    text-decoration: none;
}

/* The storefront underlines only the option label on hover and keeps the
   colour at #333, so the row never changes weight or colour. */
.avg-filter__opt:hover,
.avg-filter__opt:focus {
    color: #333;
}

.avg-filter__opt:hover .avg-filter__textlabel,
.avg-filter__opt:focus-visible .avg-filter__textlabel {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.avg-filter__text {
    min-width: 0;
}

/* Box and tick are SVG stroked/filled with currentColor, so they follow the
   row's colour, including the disabled grey, with no extra rules. */
.avg-filter__box {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    width: 16px;
    height: 16px;
}

.avg-filter__square {
    display: block;
    width: 16px;
    height: 16px;
}

.avg-filter__check {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
}

.avg-filter__check svg {
    width: 11px;
    height: 7px;
}

.avg-filter__opt.is-on .avg-filter__check {
    visibility: visible;
}

.avg-filter__count {
    color: inherit;
}

/* Zero-count options stay visible but inert, as on the storefront: the
   shopper can still see the option exists. Rendered without an href, so
   the grey is a real disabled state and not just a colour. */
.avg-filter__opt.is-disabled {
    color: #bdbdbd;
    cursor: default;
    pointer-events: none;
}
.avg-filter__more {
    margin: 4px 0 0;
    padding: 0;
    background: none;
    border: 0;
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: var(--avg-gold);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.avg-filter__more:hover,
.avg-filter__more:focus {
    background: none;
    color: var(--avg-gold);
}

.avg-filter__hint {
    margin: 0 0 10px;
    font-family: Inter, sans-serif;
    font-size: 13px;
    color: #333;
}

/* LIVE stacks a small label above each price input. */
.avg-filter__pricefield {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.avg-filter__pricefield label {
    font-family: Inter, sans-serif;
    font-size: 12px;
    color: #777;
}

.avg-filter__price {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 5px 5px 5px 0;
}

.avg-filter__cur {
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #333;
}

.avg-arch input.avg-filter__field {
    width: 72px;
    height: 40px;
    min-height: 0;
    margin: 0;
    padding: 0 8px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    background: #fff;
    box-shadow: none;
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #333;
}

.avg-arch button.avg-filter__apply {
    height: 40px;
    min-height: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 4px;
    background: var(--avg-gold);
    font-family: Inter, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #000;
    cursor: pointer;
}

.avg-arch button.avg-filter__apply:hover,
.avg-arch button.avg-filter__apply:focus {
    background: var(--avg-gold);
    color: #000;
}

/* ---- Price slider ----
   Two range inputs share one rail. The inputs are transparent and inert; only
   their thumbs take pointer events, so the upper input cannot swallow a click
   meant for the lower one. Every appearance reset is repeated on the element
   and on the thumb, because a bare `appearance:none` on the input alone still
   leaves Chrome painting its default blue thumb. */
.avg-filter--price .avg-filter__body {
    padding-bottom: 18px;
}

.avg-filter__pricerow {
    display: flex;
    align-items: flex-end;
    gap: 18px;
}

.avg-filter__cur {
    flex: 0 0 auto;
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 30px;
    color: #000;
}

.avg-filter__pricefield {
    display: flex;
    min-width: 0;
    flex: 1 1 0;
    flex-direction: column;
    gap: 0;
}

.avg-filter__pricefield label {
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    color: #8a8a8a;
}

/* The value reads as text, not as a form control, but stays a real input so
   it can still be typed into and still submits with JS off. */
.avg-arch input.avg-filter__field,
.avg-arch input.avg-filter__field:hover,
.avg-arch input.avg-filter__field:focus {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    font-family: Inter, sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.4;
    color: #000;
    appearance: textfield;
    -moz-appearance: textfield;
}

.avg-arch input.avg-filter__field::-webkit-outer-spin-button,
.avg-arch input.avg-filter__field::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

/* Rail, progress and thumbs reproduce the storefront's .price_range-wrapper:
   both inputs run 0-100 and sit in the same grid cell, so they share one rail;
   the gold bar is positioned from two custom properties written on the wrapper,
   which means it is correct on first paint before any JS runs. */
.avg-range {
    --range-track-top: 10px;
    --min-thumb-percent: 0;
    --max-thumb-percent: 100;
    --range-progress-w: calc((var(--max-thumb-percent) - var(--min-thumb-percent)) * 1%);
    --range-progress-left: calc(var(--min-thumb-percent) * 1%);
    position: relative;
    display: grid;
    width: 100%;
    margin-top: 14px;
}

.avg-range__track {
    position: absolute;
    top: var(--range-track-top);
    z-index: 0;
    width: 100%;
    height: 3px;
    border-radius: 10px;
    background-color: #ababab;
}

.avg-range__progress {
    position: absolute;
    top: var(--range-track-top);
    left: var(--range-progress-left);
    z-index: 1;
    width: var(--range-progress-w);
    height: 3px;
    border-radius: 10px;
    background-color: #dfb869;
}

.avg-range__thumbs {
    display: grid;
    z-index: 2;
    margin-top: 8px;
}

/* Both inputs occupy grid-area 1/1, so they overlap exactly. The element is
   click-through and only the thumbs accept the pointer, so whichever thumb is
   under the cursor gets the drag. */
.avg-arch .avg-range__thumbs input[type=range].avg-range__input {
    grid-area: 1 / 1;
    width: 100%;
    height: 7px;
    min-height: 0;
    margin: 0;
    margin-top: 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: none;
    box-shadow: none;
    outline: none;
    pointer-events: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.avg-arch .avg-range__thumbs input[type=range].avg-range__input::-webkit-slider-runnable-track {
    height: 7px;
    border: 0;
    border-radius: 0;
    /* Astra paints the rail itself with a two-layer grey box-shadow on the
       runnable track; without clearing it a rounded outline sits around the
       whole slider. */
    box-shadow: none;
    background: none;
}

.avg-arch .avg-range__thumbs input[type=range].avg-range__input::-webkit-slider-thumb {
    width: 13px;
    height: 13px;
    margin-top: -3px;
    border: 0;
    border-radius: 50%;
    background-color: #dfb869;
    box-shadow: none;
    cursor: pointer;
    pointer-events: auto;
    appearance: none;
    -webkit-appearance: none;
}

.avg-arch .avg-range__thumbs input[type=range].avg-range__input::-moz-range-track {
    height: 7px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: none;
}

.avg-arch .avg-range__thumbs input[type=range].avg-range__input::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border: 0;
    border-radius: 50%;
    background-color: #dfb869;
    box-shadow: none;
    cursor: pointer;
    pointer-events: auto;
    -moz-appearance: none;
}

.avg-range__input:focus-visible::-webkit-slider-thumb {
    outline: 2px solid #000;
    outline-offset: 2px;
}
/* Aplica is redundant once the handles apply on release, so JS hides it by
   adding .is-enhanced. Without JS the class never lands and the button stays,
   which is the only way to submit the range then. */
.avg-filter__price.is-enhanced .avg-filter__apply {
    display: none;
}
/* ---- Toolbar: sorting then count, both right aligned ---- */
.avg-arch__toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.avg-arch__sort {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin: 0;
}

/* nowrap so the two words stay on one line however tight the toolbar gets;
   the 20px right margin is the storefront's .facet-filters__label spacing. */
.avg-arch__sortlabel {
    flex: 0 0 auto;
    margin: 0 20px 0 0;
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: rgba(18, 18, 18, .85);
    white-space: nowrap;
}

/* Positions the caret over the select. The native arrow is removed, so this
   is the only one drawn. */
.avg-arch__sortfield {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.avg-arch select.avg-arch__sortselect {
    /* Live (Dawn .facet-filters__sort): unboxed, transparent, 14px, text 75%,
       caret at the right edge. The box seen when the list is open on live is
       the focus ring, drawn below. */
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0 17.5px 0 0;
    background: transparent;
    background-image: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: Inter, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: .04rem;
    color: rgba(18, 18, 18, .75);
    white-space: nowrap;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.avg-arch select.avg-arch__sortselect:hover,
.avg-arch select.avg-arch__sortselect:focus {
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
}
.avg-arch select.avg-arch__sortselect:focus-visible {
    outline: 2px solid rgba(18, 18, 18, .5);
    outline-offset: 10px;
    box-shadow: 0 0 0 10px #fff, 0 0 2px 12px rgba(18, 18, 18, .3);
}

/* Astra draws its own arrow as a background image on selects; without this the
   two carets sit on top of each other. */
.avg-arch select.avg-arch__sortselect::-ms-expand {
    display: none;
}

.avg-arch__sortcaret {
    position: absolute;
    top: 50%;
    right: 0;
    width: 10px;
    height: 6px;
    margin-top: -3px;
    color: #333;
    pointer-events: none;
}
.avg-arch__count {
    margin: 0;
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #333;
    margin-left: 11px; /* + the toolbar's 24px gap = live's 3.5rem */
}

/* ---- Grid ---- */
.avg-arch__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* The card is the shared component; in a grid it must drop its carousel
   flex-basis. */
.avg-arch__grid .avg-pcard {
    flex: none;
    width: auto;
}

.avg-arch__empty {
    padding: 50px 0;
    font-family: Inter, sans-serif;
    color: #777;
}

/* Filters active, no products (collections): live's Dawn
   .collection--empty .title--primary. Playfair 400, fluid 32-44px, line-height
   1.1, #333, .6px tracking, centred in the results column (50px side padding,
   20px on phones), 100px above and 150px below; "elimină-le pe toate" is the
   gold link at 85%. The search page keeps its own rule (inc/search-results.php). */
.avg-arch:not(.avg-arch--search) .avg-arch__empty--filters {
    margin: 100px 0 150px;
    padding: 0 50px;
    font-family: var(--font-heading-family, 'Playfair Display', serif);
    font-size: clamp(32px, 3.3846vw, 44px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: .6px;
    text-align: center;
    color: #333;
}
.avg-arch:not(.avg-arch--search) .avg-arch__empty--filters a,
.avg-arch:not(.avg-arch--search) .avg-arch__empty--filters a:visited {
    /* inline-block, as live: the link drops to its own line rather than
       breaking at the hyphen in "elimină-le". */
    display: inline-block;
    color: rgba(223, 184, 105, .85);
    text-decoration: none;
}
.avg-arch:not(.avg-arch--search) .avg-arch__empty--filters a:hover,
.avg-arch:not(.avg-arch--search) .avg-arch__empty--filters a:focus-visible {
    color: rgba(223, 184, 105, .85);
    text-decoration: underline;
    text-underline-offset: 3px;
}
@media (max-width: 749px) {
    .avg-arch:not(.avg-arch--search) .avg-arch__empty--filters { padding: 0 20px; }
}

/* ---- Mobile filter trigger and drawer ---- */
/* Trigger: storefront styling, gold text and icon, never a boxed button. */
.avg-arch button.avg-arch__filterbtn {
    display: none;
    align-items: center;
    gap: 10px;
    width: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font-family: Inter, sans-serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1.2;
    color: var(--avg-gold);
    cursor: pointer;
}

.avg-arch button.avg-arch__filterbtn:hover,
.avg-arch button.avg-arch__filterbtn:focus,
.avg-arch button.avg-arch__filterbtn:active {
    background: none;
    box-shadow: none;
    color: var(--avg-gold);
}

.avg-arch__filterbtn .icon-filter {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--avg-gold);
}
/* Astra styles bare buttons, and a single class loses to it. Every rule for
   this button is raised to element+class so the theme's padding and colours
   cannot leak in. */
.avg-arch button.avg-arch__drawerclose {
    display: none;
}

.avg-arch__scrim {
    display: none;
}

/* ---- Copy block ---- */
.avg-arch__copy {
    max-width: 1240px;
    margin: 0 auto;
    padding: 60px 20px 50px;
}

.avg-arch__copy h2 {
    margin: 0 0 20px;
    font-family: var(--font-heading-family, 'Playfair Display', serif);
    font-size: clamp(24px, 2.6vw, 34px);
    font-weight: 400;
    color: #111;
}

.avg-arch__copy p {
    margin: 0 0 20px;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #333;
}

.avg-arch__copy a {
    color: var(--avg-gold);
    text-decoration: none;
}

.avg-arch__copy a:hover {
    text-decoration: underline;
}

/* ---- FAQ accordion ----
   Values taken from the storefront's .component-text-faqs: #111 rows separated
   by a 1px gap, a rounded clip on the list, and a chip that turns gold and
   rotates its chevron when the row is open. */
.avg-arch__faq {
    max-width: 1240px;
    margin: 0 auto;
    padding: clamp(40px, 7.6923vw, 68px) 20px clamp(40px, 7.6923vw, 100px);
}

.avg-arch__faq h2 {
    margin: 0 0 clamp(24px, 3vw, 40px);
    font-family: var(--font-heading-family, 'Playfair Display', serif);
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 400;
    color: #111;
}

/* The radius lives on the list so the first and last rows clip to it. */
.avg-arch__faqlist {
    border-radius: 10px;
    overflow: hidden;
}

.avg-faq__item {
    background-color: #111;
    margin-bottom: 1px;
    padding: clamp(20px, 1.8461vw, 24px) clamp(20px, 3.0769vw, 40px);
    border: 0;
}

.avg-faq__item:last-of-type {
    margin-bottom: 0;
}

.avg-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    list-style: none;
    font-family: var(--font-heading-family, 'Playfair Display', serif);
    font-size: clamp(18px, 1.8461vw, 24px);
    line-height: clamp(22px, 2.7692vw, 36px);
}

.avg-faq__q::-webkit-details-marker {
    display: none;
}

.avg-faq__qtext {
    flex: 1;
    padding-right: 20px;
    font-family: var(--font-heading-family, 'Playfair Display', serif);
    font-size: clamp(18px, 1.8461vw, 24px);
    line-height: clamp(22px, 2.7692vw, 36px);
    font-weight: 400;
    color: #fff;
    transition: color 0.3s ease;
}

.avg-faq__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(20px, 3.0769vw, 40px);
    height: clamp(20px, 3.0769vw, 40px);
    border-radius: 50%;
    background: #090d16;
    color: #fff;
    transition: all 0.3s ease;
}

.avg-faq__icon svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.avg-faq__q:hover .avg-faq__qtext,
.avg-faq__item[open] .avg-faq__qtext {
    color: var(--avg-gold);
}

.avg-faq__q:hover .avg-faq__icon,
.avg-faq__item[open] .avg-faq__icon {
    border-radius: 4px;
    background: var(--avg-gold);
    color: #111;
}

.avg-faq__q:hover .avg-faq__icon svg,
.avg-faq__item[open] .avg-faq__icon svg {
    transform: rotate(90deg);
}

.avg-faq__a {
    padding: 24px 0 0;
}

/* details reveals its content by unhiding it, so the panel is animated on
   open with a keyframe rather than a max-height transition, which would never
   run from display:none. */
.avg-faq__item[open] .avg-faq__a {
    animation: avgFaqOpen 0.3s ease-out;
}

@keyframes avgFaqOpen {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.avg-faq__a,
.avg-faq__a p {
    margin: 0;
    font-family: Inter, sans-serif;
    font-size: 15px;
    line-height: 25px;
    font-weight: 200;
    color: #f6f6f6;
}

.avg-faq__a p + p {
    margin-top: 12px;
}

.avg-faq__a a {
    color: var(--avg-gold);
    text-decoration: underline;
}

.avg-faq__a a:hover {
    color: #e8cc93;
}
/* ---- Responsive ----
   Desktop  >1200px : sidebar + three-up grid, unchanged.
   Tablet   768-1200: same structure, sidebar still in the page, one card per row.
   Mobile   <=767px : sidebar becomes an off-canvas drawer opened by the trigger. */

/* Astra caps the archive container at 1240px. Widened to 1280px, with the
   centring above kept in the same rule set: raising the width without it is
   what pinned the whole page to the left edge before. Astra's own 922px
   breakpoint, so nothing changes below it. */
/* The archive and product templates lay out their own centred columns, so the
   theme container is released to full width here. That removes every
   calc(50% - 50vw) bleed: 100vw counts the scrollbar, so those were making the
   page a scrollbar-width too wide and shifting it sideways. */
.tax-product_cat .site-content > .ast-container,
.post-type-archive-product .site-content > .ast-container,
.single-product .site-content > .ast-container,
.avg-collection-alias .site-content > .ast-container {
    /* Astra sets .site-content .ast-container to display:flex above 922px for
       its sidebar layouts. These templates have no Astra sidebar, and as a
       flex item the archive shrink-wraps to its content and sits at
       flex-start, which reads as the whole page hugging the left edge.
       Block layout lets it fill the row; the inner columns keep their own
       max-width and stay centred. */
    display: block;
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

/* Belt and braces: fill the row even if something restores flex. */
.avg-arch,
.avg-pdp {
    width: 100%;
    flex: 1 1 100%;
    min-width: 0;
}

/* Desktop only: drops the sidebar so its first facet lines up with the top
   of the product grid, past the sorting row. Scoped above 1200px because the
   tablet layout is tighter and the mobile drawer sets its own padding. */
@media (min-width: 1201px) {
    .avg-arch__side {
        padding-top: 64px;
    }
}

/* Tablet: structure identical to desktop, only the grid narrows to one column. */
@media (max-width: 1200px) {
    /* Side padding from tablet down, so the crumbs clear the viewport edge
       once the container stops leaving a gutter. */
    .avg-arch__crumbs {
        padding: 56px 20px 0;
    }
    .avg-arch__main {
        grid-template-columns: 240px 1fr;
        gap: 24px;
        padding: 24px 20px 60px;
    }
    .avg-arch__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* From tablet up the drawer chrome has no purpose: the sidebar is on the page,
   sorting stays in the toolbar and the sections are a plain accordion. */
@media (min-width: 768px) {
    .avg-arch__drawerhead,
    .avg-arch__drawerfoot,
    .avg-arch__drawersort,
    .avg-arch__side .avg-filter__summary .icon-arrow {
        display: none;
    }

    /* The sub-panel back button only exists for the mobile drawer. Above the
       drawer breakpoint the sections are a plain accordion, so it must be
       hidden or Astra styles it as a full button in the sidebar. */
    .avg-arch button.avg-filter__back {
        display: none;
    }
}

/* Mobile only. */
@media (max-width: 767px) {
    .avg-arch__main {
        display: block;
        padding: 16px 20px 40px;
    }
    .avg-arch__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .avg-arch button.avg-arch__filterbtn {
        display: inline-flex;
        order: -1;
        margin-right: auto;
    }

    /* Off-canvas, so the sidebar never pushes the grid down the page. */
    .avg-arch__side {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        /* Explicit height as well as top/bottom: dvh tracks the collapsing
           mobile browser chrome, and it overrides any inherited max-height
           that was leaving the panel short of the viewport. */
        height: 100vh;
        height: 100dvh;
        max-height: none;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        width: min(88vw, 400px);
        padding: 0;
        overflow: hidden;
        overscroll-behavior: contain;
        background: #fff;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);
        transform: translateX(100%);
        transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
        visibility: hidden;
    }
    .avg-arch__side.is-open {
        transform: translateX(0);
        visibility: visible;
    }
    .avg-arch__scrim {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9998;
        background: rgba(0, 0, 0, 0.45);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.32s ease, visibility 0.32s ease;
    }
    .avg-arch__scrim.is-open {
        opacity: 1;
        visibility: visible;
    }

    /* Column, because the head now carries a count line under the title.
       The close button is absolutely positioned, so it is out of this flow
       and stays centred against the whole block. */
    .avg-arch__drawerhead {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        flex: 0 0 auto;
        padding: 14px 20px;
        border-bottom: 1px solid #ececec;
    }

    .avg-arch__drawercount {
        display: block;
        margin: 0;
        font-family: Inter, sans-serif;
        font-size: 12px;
        font-weight: 400;
        line-height: 1.3;
        color: #777;
    }
    .avg-arch__drawertitle {
        margin: 0;
        font-family: Inter, sans-serif;
        font-size: 15px;
        font-weight: 500;
        color: #111;
    }
    .avg-arch button.avg-arch__drawerclose {
        position: absolute;
        top: 50%;
        right: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        width: 32px;
        min-width: 0;
        height: 32px;
        min-height: 0;
        margin: 0;
        padding: 0;
        transform: translateY(-50%);
        border: 0;
        border-radius: 50%;
        background: #f4f4f4;
        box-shadow: none;
        font-size: 18px;
        line-height: 1;
        color: #333;
        cursor: pointer;
    }

    .avg-arch button.avg-arch__drawerclose:hover,
    .avg-arch button.avg-arch__drawerclose:focus {
        background: #ececec;
        color: #000;
    }

    /* Head and foot are fixed; only the middle scrolls, so the footer buttons
       stay reachable however long the option list is. */
    .avg-arch__filterhead,
    .avg-chips,
    .avg-arch__side .avg-filter,
    .avg-arch__drawersort {
        flex: 0 0 auto;
    }
    /* The drawer has its own title bar, so the "Filtreaza:" label is
       redundant here. The only other thing this row can hold is the
       clear-all link, and the drawer footer carries that permanently, so the
       whole row goes rather than leaving an empty padded box behind. */
    .avg-arch__filterhead {
        display: none;
    }
    .avg-chips {
        margin: 14px 0 0;
        padding: 0 20px;
    }

    .avg-arch__mobilechips {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        margin-bottom: 16px;
    }

    /* The drawer's .avg-chips rule is written without a parent, so it lands
       on this copy too; reset the drawer's gutter and offset here.

       flex-basis 100% plus min-width 0 is what makes the chips wrap. The list
       already carries flex-wrap, but as a flex item it defaults to
       min-width: auto, so it refused to shrink below its max-content width and
       ran off the right edge instead of breaking. */
    .avg-arch__mobilechips .avg-chips {
        flex: 1 1 100%;
        min-width: 0;
        margin: 0;
        padding: 0;
    }

    /* Sections become drill-down panels, built on the same <details>. */
    .avg-arch__side .avg-filter {
        border-top: 0;
        border-bottom: 1px solid #ececec;
    }
    .avg-arch__side .avg-filter__summary {
        padding: 18px 20px;
        font-size: 15px;
        color: #111;
    }
    .avg-arch__side .avg-filter__caret {
        display: none;
    }
    .avg-arch__side .avg-filter__summary .icon-arrow {
        flex: 0 0 auto;
        width: 14px;
        height: 10px;
        color: #111;
        transition: transform 0.2s ease;
    }

    .avg-arch__side.is-drilled .avg-filter[open] {
        border-bottom: 0;
    }

    .avg-arch__drawersort:not(:empty) {
        padding: 18px 20px;
        border-bottom: 1px solid #ececec;
    }
    .avg-arch__drawersort .avg-arch__sort {
        justify-content: space-between;
        width: 100%;
    }
    .avg-arch__drawersort .avg-arch__sortlabel {
        display: block;
        font-size: 15px;
        color: #111;
    }

    .avg-arch__drawerfoot {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        flex: 0 0 auto;
        margin-top: auto;
        padding: 16px 20px;
        border-top: 1px solid #ececec;
    }
    .avg-arch__drawerclear {
        font-family: Inter, sans-serif;
        font-size: 14px;
        color: var(--avg-gold);
        text-decoration: none;
    }
    .avg-arch button.avg-arch__drawerapply {
        display: inline-flex;
        align-items: center;
        gap: 30px;
        min-height: 48px;
        padding: 0 18px;
        border: 0;
        border-radius: 5px;
        background: var(--avg-gold);
        font-family: Inter, sans-serif;
        font-size: 15px;
        font-weight: 500;
        color: #000;
        cursor: pointer;
    }
    .avg-arch__drawerapply .icon-arrow {
        width: 14px;
        height: 10px;
    }

    /* ---- Two-pane drawer ----
       The root list and the open sub-panel slide as one: root items shift left
       while the sub-panel comes in from the right, both over 0.3s.
       .avg-arch__drawerbody is the only positioned, clipped ancestor, so the
       sub-panel measures against it and nothing escapes the drawer. */
    .avg-arch__drawerbody {
        position: relative;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
    }

    /* The root items are transformed individually rather than via a wrapper,
       so no element becomes a containing block for the absolute sub-panel. */
    .avg-arch__drawerbody > .avg-arch__filterhead,
    .avg-arch__drawerbody > .avg-chips,
    .avg-arch__drawerbody > .avg-arch__drawersort,
    .avg-arch__side .avg-filter__summary {
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .avg-arch__side.is-drilled .avg-arch__drawerbody > .avg-arch__filterhead,
    .avg-arch__side.is-drilled .avg-arch__drawerbody > .avg-chips,
    .avg-arch__side.is-drilled .avg-arch__drawerbody > .avg-arch__drawersort,
    .avg-arch__side.is-drilled .avg-filter__summary {
        transform: translateX(-100%);
        opacity: 0;
    }

    /* Root column scrolls on its own when the option list is long. */
    .avg-arch__side:not(.is-drilled) .avg-arch__drawerbody {
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .avg-arch__side .avg-filter__body {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        padding: 0 20px 20px;
        overflow-y: auto;
        overscroll-behavior: contain;
        background: #fff;
        transform: translateX(100%);
        transition: transform 0.3s ease;
        visibility: hidden;
    }

    .avg-arch__side .avg-filter[open] .avg-filter__body {
        transform: translateX(0);
        visibility: visible;
    }

    /* Two columns inside the drill-down panel, as on the storefront. The
       option rows carry their own 10px vertical padding, so only a column
       gap is added here. minmax(0, 1fr) keeps a long label from widening
       its column past half the panel. */
    .avg-arch__side .avg-filter__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 16px;
    }

    /* The show-more toggle spans both columns rather than sitting in one. */
    .avg-arch__side .avg-filter__list + .avg-filter__more {
        grid-column: 1 / -1;
    }

    /* Back control, sticky so it stays put while the options scroll. */
    .avg-arch button.avg-filter__back {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 14px;
        width: calc(100% + 40px);
        margin: 0 -20px 4px;
        padding: 18px 20px;
        border: 0;
        border-bottom: 1px solid var(--avg-gold, #DFB869);
        border-radius: 0;
        background: #fff;
        font-family: Inter, sans-serif;
        font-size: 15px;
        font-weight: 400;
        line-height: 1.2;
        color: #111;
        text-align: left;
        cursor: pointer;
    }

    /* The label is a child span and the chevron an SVG on currentColor, so
       both are named explicitly: inheritance alone was losing to the theme's
       own button colour, which rendered them blue. */
    .avg-arch button.avg-filter__back span,
    .avg-arch button.avg-filter__back svg {
        color: #111;
        fill: currentColor;
    }

    .avg-arch button.avg-filter__back:hover,
    .avg-arch button.avg-filter__back:focus,
    .avg-arch button.avg-filter__back:active,
    .avg-arch button.avg-filter__back:visited {
        background: #fff;
        color: #111;
    }

    .avg-filter__back .icon-arrow {
        flex: 0 0 auto;
        width: 14px;
        height: 10px;
        transform: rotate(180deg);
    }

    /* The summary is only the row that opens a panel now, so it never needs to
       double as a back button. */
    .avg-arch__side.is-drilled .avg-filter:not([open]) {
        display: none;
    }
    /* Trigger left, count right; sorting moves into the drawer. */
    .avg-arch__toolbar {
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 18px;
    }
    .avg-arch__content > .avg-arch__toolbar .avg-arch__sort {
        display: none;
    }

    .avg-arch__crumbs {
        padding: 50px 20px 0;
    }
    .avg-arch__copy,
    .avg-arch__faq {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* At 320px the trigger and the count no longer share a line. */
@media (max-width: 360px) {
    .avg-arch__toolbar {
        flex-wrap: wrap;
        row-gap: 8px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .avg-arch__side,
    .avg-arch__scrim,
    .avg-filter__caret,
    .avg-faq__q:after {
        transition: none;
    }
}
/* Main menu link typography */
.avg-mainmenu .menu-link {
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
}

/* Caret on the item that opens the mega menu. Xpro ships its own toggle
   glyph, so that is hidden and the storefront caret used instead. */
.avg-mainmenu .xpro-dropdown-menu-toggle,
.avg-mainmenu .dropdown-menu-toggle {
    display: none;
}

.avg-mainmenu .avg-has-mega > a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.avg-mainmenu .avg-has-mega > a:after {
    content: '';
    width: 10px;
    height: 6px;
    flex: 0 0 auto;
    /* Painted through a mask so the colour is CSS-controlled (client doc #68): white at
       rest exactly as live's caret, gold on hover/focus via the rule below. */
    background-color: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M9.354.646a.5.5 0 0 0-.708 0L5 4.293 1.354.646a.5.5 0 0 0-.708.708l4 4a.5.5 0 0 0 .708 0l4-4a.5.5 0 0 0 0-.708' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%23ffffff' fill-rule='evenodd' d='M9.354.646a.5.5 0 0 0-.708 0L5 4.293 1.354.646a.5.5 0 0 0-.708.708l4 4a.5.5 0 0 0 .708 0l4-4a.5.5 0 0 0 0-.708' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat center / contain;
    transition: transform 0.3s ease;
}

/* #68 Live: the caret is fill=currentColor inside the menu item, so it turns gold
   (#DFB869) with the item on hover. Follows the link's own hover colour. */
.avg-mainmenu .avg-has-mega > a:hover:after,
.avg-mainmenu .avg-has-mega > a:focus-visible:after {
    background-color: currentColor;
}

.avg-mainbar.avg-mega-open .avg-mainmenu .avg-has-mega > a:after {
    transform: rotate(180deg);
}

/* Mega card hover, matching the storefront */
/* Card is exactly 80px: the 72px image plus 14px padding was making it ~100 */
.avg-mega-card {
    display: flex;
    align-items: center;
    height: 80px;
    min-height: 80px;
    padding: 8px 14px;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Live: .header__submenu-card-img { width:auto; height:auto;
   max-height:60px; max-width:90px }
   Elementor also caps the image wrapper at width:30% per widget
   (.elementor-330 .elementor-element-XXXX .elementor-image-box-wrapper
   .elementor-image-box-img{width:30%}), which would hold the image below
   90px whatever the img rule says, so the wrapper is released to auto too.
   No unit is breakpoint-dependent, so one rule covers desktop, tablet
   and mobile. Card box stays 80px tall with 8px padding: a 60px cap still
   clears it, so no card geometry changes. */
.avg-mega-card .elementor-image-box-wrapper .elementor-image-box-img {
    width: auto !important;
    max-width: 90px;
    flex: 0 0 auto;
}

.avg-mega-card .elementor-image-box-img img {
    width: auto;
    height: auto;
    max-height: 60px;
    max-width: 90px;
    object-fit: contain;
}

/* Whole card clickable. The title link is stretched over the card rather
   than wrapping it, so there is still one link and one accessible name. */
.avg-mega-card {
    position: relative;
}

.avg-mega-card .elementor-image-box-title a:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
}

/* The image already links to the same place; keep it out of the tab order
   so the card is a single stop for keyboard users. */
.avg-mega-card .elementor-image-box-img a {
    pointer-events: none;
}

/* Elementor's right-positioned image box right-aligns its text; override */
.avg-mega-card .elementor-image-box-wrapper {
    width: 100%;
}

.avg-mega-card .elementor-image-box-content,
.avg-mega-card .elementor-image-box-title,
.avg-mega-card .elementor-image-box-title a {
    text-align: left;
}


.avg-mega-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    background-color: #dfb869;
}

/* ---------- CTA buttons ---------- */
/* The chevron block is a pseudo-element, so Elementor's own icon is hidden. */
.avg-btn-gold .elementor-button-icon,
.avg-btn-dark .elementor-button-icon {
    display: none;
}

.avg-btn-gold .elementor-button,
.avg-btn-dark .elementor-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    padding: 11px 30px;
    padding-right: 80px;
    border: 0;
    border-radius: 5px;
    overflow: hidden;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.1rem;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
    transition: all 0.2s ease-in-out;
}

.avg-btn-gold .elementor-button .elementor-button-content-wrapper,
.avg-btn-dark .elementor-button .elementor-button-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.avg-btn-gold .elementor-button .elementor-button-text,
.avg-btn-dark .elementor-button .elementor-button-text {
    flex-grow: 0;
    white-space: nowrap;
}

.avg-btn-gold .elementor-button:after,
.avg-btn-dark .elementor-button:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 8px 14px;
    transition: all 0.2s ease-in-out;
}

/* Gold body, black chevron block */
.avg-btn-gold .elementor-button {
    background-color: #DFB869;
    color: #000;
}

.avg-btn-gold .elementor-button:after {
    background-color: #000000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14' fill='none'%3E%3Cpath d='M7.25 7L1 13.25L0.125 12.375L5.5 7L0.125001 1.625L1 0.75L7.25 7Z' fill='white'/%3E%3C/svg%3E");
}

/* Dark body, white chevron block */
.avg-btn-dark .elementor-button {
    background-color: #000000;
    color: #DFB869;
}

.avg-btn-dark .elementor-button:after {
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14' fill='none'%3E%3Cpath d='M7.25 7L1 13.25L0.125 12.375L5.5 7L0.125001 1.625L1 0.75L7.25 7Z' fill='black'/%3E%3C/svg%3E");
}

/* Hover keeps its colours and simply lifts 2px */
.avg-btn-gold .elementor-button:hover,
.avg-btn-gold .elementor-button:focus,
.avg-btn-dark .elementor-button:hover,
.avg-btn-dark .elementor-button:focus {
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .avg-btn-gold .elementor-button,
    .avg-btn-dark .elementor-button {
        transition: none;
    }
    .avg-btn-gold .elementor-button:hover,
    .avg-btn-dark .elementor-button:hover {
        transform: none;
    }
}

/* About Metalor: white chevron block on the dark section */
.avg-sec-about .avg-btn-gold .elementor-button:after {
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14' fill='none'%3E%3Cpath d='M7.25 7L1 13.25L0.125 12.375L5.5 7L0.125001 1.625L1 0.75L7.25 7Z' fill='black'/%3E%3C/svg%3E");
}

@media (max-width: 767px) {
    .avg-btn-gold .elementor-button,
    .avg-btn-dark .elementor-button {
        padding: 11px 22px;
        padding-right: 66px;
        font-size: 15px;
        letter-spacing: 0.06rem;
    }
    .avg-btn-gold .elementor-button:after,
    .avg-btn-dark .elementor-button:after {
        width: 44px;
    }

    /* Locations CTA: the label is the longest on the page. Measured in
       Inter Medium it is 272.5px at 15px with the 0.06rem tracking, and
       the shared 22 + 66 padding takes the button to 360.5px against a
       343px column at 375px wide, so it overflowed and sat flush to the
       right edge instead of centring. Live shrinks this one button's
       padding for the same reason (.component-locations-map .cta-wrapper
       .section-cta { padding-left: 5px; padding-right: 55px } below
       992px). Those figures bring it to 332.5px, which centres with an
       equal gutter either side. Padding only: size, weight, tracking,
       colour and the chevron block are untouched. */
    .avg-sec-loc .avg-btn-gold .elementor-button {
        max-width: 100%;
        padding-left: 5px;
        padding-right: 55px;
    }

    /* Below about 360px even the reduced padding cannot fit one line, so
       the label is allowed to wrap rather than spill past the edge again.
       At 375px it still fits on one line, so nothing changes there. */
    .avg-sec-loc .avg-btn-gold .elementor-button .elementor-button-text {
        white-space: normal;
        text-align: center;
    }
}

/* ---------- Footer ---------- */
/* Menu list flush left with the column heading */
.avg-footer-menu .xpro-elementor-horizontal-navbar-nav,
.avg-footer-menu ul,
.avg-footer-menu .xpro-menu-item,
.avg-footer-menu li {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
}

.avg-footer-menu .xpro-menu-item > a,
.avg-footer-menu li > a {
    padding-left: 0;
    padding-right: 0;
}

.avg-footer-contact .elementor-icon-list-items,
.avg-footer-social .elementor-icon-list-items {
    padding-left: 0;
    margin-left: 0;
}

/* Separator sits on the boxed inner so it lines up with the container, not
   the full-bleed parent. */
.avg-footer-line > .e-con-inner {
    position: relative;
    padding-top: clamp(28px, 3.5vw, 48px);
}

.avg-footer-line > .e-con-inner:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(to right, #f9f6bb, #dfb869);
}

/* Bottom bar policy links (Termeni si conditii / Politica de confidentialitate):
   as on the storefront (.copyright__content a) they keep the bar's black text,
   with no underline, and stay black on hover. */
.elementor-332 .elementor-element-4fee743 .elementor-heading-title a,
.elementor-332 .elementor-element-4fee743 .elementor-heading-title a:hover,
.elementor-332 .elementor-element-4fee743 .elementor-heading-title a:focus {
    color: inherit;
    text-decoration: none;
}

/* Column headings: gold gradient text */
.avg-sec-footer-heading,
.elementor-332 .foot-border .avg-footer-col-heading .elementor-heading-title {
    margin-top: 0;
    margin-bottom: clamp(8px, 1.8461538461538463vw, 0px);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.1;
    background: var(--Gold-Gradient, linear-gradient(177deg, #F9F6BB -28.82%, #DFB869 111.37%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Menu + list links */
.avg-footer-menu .xpro-menu-item,
.avg-footer-menu a,
.avg-footer-contact .elementor-icon-list-text,
.avg-footer-social .elementor-icon-list-text {
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
}

/* Underline sweeps in from the left on hover and out to the right on exit */
.avg-footer-menu a,
.avg-footer-social .elementor-icon-list-items .elementor-icon-list-item > a,
.avg-footer-contact .elementor-icon-list-items .elementor-icon-list-item > a {
    position: relative;
    display: inline-flex;
    width: auto;
    max-width: max-content;
    padding-bottom: 2px;
    text-decoration: none;
}

.avg-footer-social .elementor-icon-list-item,
.avg-footer-contact .elementor-icon-list-item {
    width: auto;
    max-width: max-content;
}

.avg-footer-menu a:after,
.avg-footer-social .elementor-icon-list-item > a:after,
.avg-footer-contact .elementor-icon-list-item > a:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, #f9f6bb, #dfb869);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.35s ease;
}

.avg-footer-menu a:hover:after,
.avg-footer-menu a:focus-visible:after,
.avg-footer-social .elementor-icon-list-item > a:hover:after,
.avg-footer-contact .elementor-icon-list-item > a:hover:after {
    transform: scaleX(1);
    transform-origin: left center;
}

/* Footer > Contact underline, live parity (footer-block__contact-link.link).
   Company and phone: never underlined (plain text on live).
   Emails: live's .link underline - 0.1em #DFB869 line under the text only,
   0% at rest, sweeping to 100% on hover. No padding or layout change. */
.elementor-332 .elementor-element-37d2f1e.avg-footer-contact .elementor-icon-list-item > a::after {
    content: none;
}
.elementor-332 .elementor-element-37d2f1e.avg-footer-contact .elementor-icon-list-item > a[href^="mailto:"] .elementor-icon-list-text {
    background-image: linear-gradient(#DFB869, #DFB869);
    background-size: 0% .1em;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    transition: background-size .2s ease-in-out;
}
.elementor-332 .elementor-element-37d2f1e.avg-footer-contact .elementor-icon-list-item > a[href^="mailto:"]:hover .elementor-icon-list-text,
.elementor-332 .elementor-element-37d2f1e.avg-footer-contact .elementor-icon-list-item > a[href^="mailto:"]:focus-visible .elementor-icon-list-text {
    background-size: 100% .1em;
    background-position-x: 0%;
}

/* Icons: swap Font Awesome glyphs for the supplied artwork */
.avg-footer-contact .elementor-icon-list-icon i,
.avg-footer-social .elementor-icon-list-icon i,
.avg-footer-contact .elementor-icon-list-icon svg,
.avg-footer-social .elementor-icon-list-icon svg {
    display: none;
}

.avg-footer-contact .elementor-icon-list-icon,
.avg-footer-social .elementor-icon-list-icon {
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.avg-footer-social .elementor-icon-list-icon {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
}

.avg-footer-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding: 0;
}

.avg-footer-trust .elementor-widget-image {
    width: auto;
}

.avg-footer-trust img {
    display: block;
    width: 115px;
    height: 33px;
    object-fit: contain;
    border-radius: 3px;
}

/* Bottom bar */
.avg-footer-bottom {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 18px;
    min-height: 30px;
    padding: 4px 20px;
    background: #DFB869;
}

.avg-footer-bottom .elementor-heading-title,
.avg-footer-bottom .elementor-heading-title a {
    margin: 0;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: #000;
}

.avg-footer-bottom .elementor-widget {
    width: auto;
}

/* WhatsApp bubble. Elementor's custom positioning is a Pro feature and Pro
   is not active here, so the fixed placement is done in CSS. */
.avg-whatsapp {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 99;
    width: 58px;
    margin: 0;
    line-height: 0;
}

.avg-whatsapp img {
    display: block;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
    transition: transform 0.25s ease;
}

.avg-whatsapp img:hover {
    transform: scale(1.06);
}

/* Back-to-top removed. Astra's script sets an inline display, which beats a
   plain rule, so this needs !important as a backstop to the option. */
#ast-scroll-top,
.ast-scroll-top-icon,
.ast-scroll-to-top-right,
#scroll-to-top,
.xpro-scroll-to-top {
    display: none !important;
}

@media (max-width: 767px) {
    .elementor-332 .foot-border .avg-footer-col-heading .elementor-heading-title {
        font-size: 24px;
    }
    .avg-footer-menu .xpro-menu-item,
    .avg-footer-menu a,
    .avg-footer-contact .elementor-icon-list-text,
    .avg-footer-social .elementor-icon-list-text {
        font-size: 14px;
    }
    .avg-footer-trust img {
        width: 105px;
        height: 30px;
    }
    .avg-footer-bottom {
        flex-direction: column;
        gap: 2px;
        padding: 8px 16px;
        text-align: center;
    }
    .avg-whatsapp img {
        width: 48px;
        height: 48px;
    }
}

/* Footer icon artwork */
.avg-footer-contact .elementor-icon-list-item:nth-child(1) .elementor-icon-list-icon {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M9.9375 10.5C9.9375 10.3508 9.99676 10.2077 10.1023 10.1023C10.2077 9.99676 10.3508 9.9375 10.5 9.9375H13.5C13.6492 9.9375 13.7923 9.99676 13.8977 10.1023C14.0032 10.2077 14.0625 10.3508 14.0625 10.5C14.0625 10.6492 14.0032 10.7923 13.8977 10.8977C13.7923 11.0032 13.6492 11.0625 13.5 11.0625H10.5C10.3508 11.0625 10.2077 11.0032 10.1023 10.8977C9.99676 10.7923 9.9375 10.6492 9.9375 10.5ZM21.5625 6.75V18.75C21.5625 19.0981 21.4242 19.4319 21.1781 19.6781C20.9319 19.9242 20.5981 20.0625 20.25 20.0625H3.75C3.4019 20.0625 3.06806 19.9242 2.82192 19.6781C2.57578 19.4319 2.4375 19.0981 2.4375 18.75V6.75C2.4375 6.4019 2.57578 6.06806 2.82192 5.82192C3.06806 5.57578 3.4019 5.4375 3.75 5.4375H7.6875V4.5C7.6875 3.95299 7.9048 3.42839 8.29159 3.04159C8.67839 2.6548 9.20299 2.4375 9.75 2.4375H14.25C14.797 2.4375 15.3216 2.6548 15.7084 3.04159C16.0952 3.42839 16.3125 3.95299 16.3125 4.5V5.4375H20.25C20.5981 5.4375 20.9319 5.57578 21.1781 5.82192C21.4242 6.06806 21.5625 6.4019 21.5625 6.75ZM8.8125 5.4375H15.1875V4.5C15.1875 4.25136 15.0887 4.0129 14.9129 3.83709C14.7371 3.66127 14.4986 3.5625 14.25 3.5625H9.75C9.50136 3.5625 9.2629 3.66127 9.08709 3.83709C8.91127 4.0129 8.8125 4.25136 8.8125 4.5V5.4375ZM3.5625 6.75V10.7616C6.14554 12.1892 9.04868 12.9379 12 12.9375C14.9515 12.938 17.8547 12.189 20.4375 10.7606V6.75C20.4375 6.70027 20.4177 6.65258 20.3826 6.61742C20.3474 6.58225 20.2997 6.5625 20.25 6.5625H3.75C3.70027 6.5625 3.65258 6.58225 3.61742 6.61742C3.58225 6.65258 3.5625 6.70027 3.5625 6.75ZM20.4375 18.75V12.0347C17.8246 13.3674 14.9332 14.0623 12 14.0625C9.06688 14.0628 6.17542 13.3682 3.5625 12.0356V18.75C3.5625 18.7997 3.58225 18.8474 3.61742 18.8826C3.65258 18.9177 3.70027 18.9375 3.75 18.9375H20.25C20.2997 18.9375 20.3474 18.9177 20.3826 18.8826C20.4177 18.8474 20.4375 18.7997 20.4375 18.75Z' fill='white'/></svg>");
}

.avg-footer-contact .elementor-icon-list-item:nth-child(2) .elementor-icon-list-icon {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M16.6292 13.891L17.0852 13.438L16.0262 12.374L15.5722 12.827L16.6292 13.891ZM18.6142 13.248L20.5252 14.287L21.2402 12.969L19.3302 11.931L18.6142 13.248ZM20.8922 16.351L19.4722 17.764L20.5292 18.827L21.9492 17.415L20.8922 16.351ZM18.6062 18.218C17.1562 18.354 13.4062 18.233 9.34417 14.195L8.28617 15.258C12.7182 19.665 16.9372 19.881 18.7462 19.712L18.6062 18.218ZM9.34417 14.195C5.47317 10.345 4.83117 7.10796 4.75117 5.70296L3.25317 5.78796C3.35317 7.55596 4.14817 11.144 8.28617 15.258L9.34417 14.195ZM10.7192 8.01496L11.0062 7.72896L9.95017 6.66596L9.66317 6.95096L10.7192 8.01496ZM11.2342 4.09396L9.97417 2.40996L8.77317 3.30996L10.0332 4.99296L11.2342 4.09396ZM5.73317 2.04296L4.16317 3.60296L5.22117 4.66696L6.79017 3.10696L5.73317 2.04296ZM10.1912 7.48296C9.66117 6.95096 9.66117 6.95096 9.66117 6.95296H9.65917L9.65617 6.95696C9.60865 7.00487 9.5661 7.05748 9.52917 7.11396C9.47517 7.19396 9.41617 7.29896 9.36617 7.43196C9.24445 7.77529 9.21412 8.14437 9.27817 8.50296C9.41217 9.36796 10.0082 10.511 11.5342 12.029L12.5922 10.965C11.1632 9.54496 10.8232 8.68096 10.7602 8.27296C10.7302 8.07896 10.7612 7.98296 10.7702 7.96096C10.7762 7.94763 10.7762 7.94563 10.7702 7.95496C10.7613 7.96876 10.7512 7.9818 10.7402 7.99396L10.7302 8.00396L10.7202 8.01296L10.1912 7.48296ZM11.5342 12.029C13.0612 13.547 14.2102 14.139 15.0762 14.271C15.5192 14.339 15.8762 14.285 16.1472 14.184C16.299 14.1284 16.4408 14.0487 16.5672 13.948L16.6172 13.903L16.6242 13.897L16.6272 13.894L16.6282 13.892C16.6282 13.892 16.6292 13.891 16.1002 13.359C15.5702 12.827 15.5732 12.826 15.5732 12.826L15.5752 12.824L15.5772 12.822L15.5832 12.817L15.5932 12.807L15.6312 12.777C15.6405 12.771 15.6382 12.7716 15.6242 12.779C15.5992 12.788 15.5012 12.819 15.3042 12.789C14.8902 12.725 14.0202 12.385 12.5922 10.965L11.5342 12.029ZM9.97417 2.40896C8.95417 1.04896 6.95017 0.83296 5.73317 2.04296L6.79017 3.10696C7.32217 2.57796 8.26617 2.63296 8.77317 3.30996L9.97417 2.40896ZM4.75217 5.70396C4.73217 5.35796 4.89117 4.99596 5.22117 4.66796L4.16217 3.60396C3.62517 4.13796 3.20217 4.89396 3.25317 5.78796L4.75217 5.70396ZM19.4722 17.764C19.1982 18.038 18.9022 18.192 18.6072 18.219L18.7462 19.712C19.4812 19.643 20.0822 19.273 20.5302 18.828L19.4722 17.764ZM11.0062 7.72896C11.9912 6.74996 12.0642 5.20296 11.2352 4.09496L10.0342 4.99396C10.4372 5.53296 10.3772 6.23996 9.94917 6.66696L11.0062 7.72896ZM20.5262 14.288C21.3432 14.732 21.4702 15.778 20.8932 16.352L21.9512 17.415C23.2912 16.082 22.8782 13.859 21.2412 12.97L20.5262 14.288ZM17.0852 13.439C17.4692 13.057 18.0872 12.963 18.6152 13.249L19.3312 11.932C18.2472 11.342 16.9032 11.505 16.0272 12.375L17.0852 13.439Z' fill='white'/></svg>");
}

.avg-footer-contact .elementor-icon-list-item:nth-child(3) .elementor-icon-list-icon {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M2.85 4.09496L8.1 1.25496C8.68373 0.939872 9.33666 0.774902 10 0.774902C10.6633 0.774902 11.3163 0.939872 11.9 1.25496L17.15 4.09496C17.7835 4.4369 18.313 4.94348 18.6826 5.56124C19.0522 6.17901 19.2482 6.88507 19.25 7.60496V15.225C19.25 16.2858 18.8286 17.3032 18.0784 18.0534C17.3283 18.8035 16.3109 19.225 15.25 19.225H4.75C3.68913 19.225 2.67172 18.8035 1.92157 18.0534C1.17143 17.3032 0.75 16.2858 0.75 15.225V7.60496C0.751791 6.88507 0.947826 6.17901 1.31743 5.56124C1.68703 4.94348 2.21651 4.4369 2.85 4.09496Z' stroke='white' stroke-width='1.5'/><path d='M0.910156 6.49512L8.00016 10.5951C8.60823 10.9462 9.29801 11.131 10.0002 11.131C10.7023 11.131 11.3921 10.9462 12.0002 10.5951L19.1402 6.59512' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

.avg-footer-contact .elementor-icon-list-item:nth-child(4) .elementor-icon-list-icon {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M2.85 4.09496L8.1 1.25496C8.68373 0.939872 9.33666 0.774902 10 0.774902C10.6633 0.774902 11.3163 0.939872 11.9 1.25496L17.15 4.09496C17.7835 4.4369 18.313 4.94348 18.6826 5.56124C19.0522 6.17901 19.2482 6.88507 19.25 7.60496V15.225C19.25 16.2858 18.8286 17.3032 18.0784 18.0534C17.3283 18.8035 16.3109 19.225 15.25 19.225H4.75C3.68913 19.225 2.67172 18.8035 1.92157 18.0534C1.17143 17.3032 0.75 16.2858 0.75 15.225V7.60496C0.751791 6.88507 0.947826 6.17901 1.31743 5.56124C1.68703 4.94348 2.21651 4.4369 2.85 4.09496Z' stroke='white' stroke-width='1.5'/><path d='M0.910156 6.49512L8.00016 10.5951C8.60823 10.9462 9.29801 11.131 10.0002 11.131C10.7023 11.131 11.3921 10.9462 12.0002 10.5951L19.1402 6.59512' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

.avg-footer-social .elementor-icon-list-item:nth-child(1) .elementor-icon-list-icon {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M11.6673 11.25H13.7507L14.584 7.91663H11.6673V6.24996C11.6673 5.39163 11.6673 4.58329 13.334 4.58329H14.584V1.78329C14.3123 1.74746 13.2865 1.66663 12.2032 1.66663C9.94065 1.66663 8.33398 3.04746 8.33398 5.58329V7.91663H5.83398V11.25H8.33398V18.3333H11.6673V11.25Z' fill='%23ffffff'/></svg>");
}

.avg-footer-social .elementor-icon-list-item:nth-child(2) .elementor-icon-list-icon {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'><path d='M9 12.3333C9.88406 12.3333 10.7319 11.9821 11.357 11.357C11.9821 10.7319 12.3333 9.88401 12.3333 9C12.3333 8.1159 11.9821 7.26806 11.357 6.64294C10.7319 6.01782 9.88406 5.66663 9 5.66663C8.11595 5.66663 7.2681 6.01782 6.64298 6.64294C6.01786 7.26806 5.66667 8.1159 5.66667 9C5.66667 9.88401 6.01786 10.7319 6.64298 11.357C7.2681 11.9821 8.11595 12.3333 9 12.3333Z' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/><path d='M1.5 12.3333V5.66667C1.5 4.5616 1.93899 3.50179 2.72039 2.72039C3.50179 1.93899 4.5616 1.5 5.66667 1.5H12.3333C13.4384 1.5 14.4982 1.93899 15.2796 2.72039C16.061 3.50179 16.5 4.5616 16.5 5.66667V12.3333C16.5 13.4384 16.061 14.4982 15.2796 15.2796C14.4982 16.061 13.4384 16.5 12.3333 16.5H5.66667C4.5616 16.5 3.50179 16.061 2.72039 15.2796C1.93899 14.4982 1.5 13.4384 1.5 12.3333Z' stroke='%23ffffff' stroke-width='1.5'/><path d='M13.5833 4.42506L13.5916 4.41589' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

.avg-footer-social .elementor-icon-list-item:nth-child(3) .elementor-icon-list-icon {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'><path d='M21.6 7.2s-.2-1.4-.8-2c-.75-.8-1.6-.8-2-.85C16 4.2 12 4.2 12 4.2h-.01s-4 0-6.8.15c-.4.05-1.25.05-2 .85-.6.6-.8 2-.8 2S2.2 8.85 2.2 10.5v1.55c0 1.65.2 3.3.2 3.3s.2 1.4.8 2c.75.8 1.75.78 2.2.87 1.6.15 6.8.2 6.8.2s4 0 6.8-.16c.4-.05 1.25-.05 2-.85.6-.6.8-2 .8-2s.2-1.65.2-3.3V10.5c0-1.65-.2-3.3-.2-3.3ZM9.9 14.1V8.4l5.15 2.86L9.9 14.1Z' fill='%23ffffff'/></svg>");
}

.avg-footer-social .elementor-icon-list-item:nth-child(4) .elementor-icon-list-icon {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M13.8332 4.85C13.2637 4.19961 12.9498 3.3645 12.9499 2.5H10.3749V12.8333C10.3554 13.3927 10.1195 13.9226 9.71681 14.3112C9.31413 14.6999 8.77622 14.917 8.21655 14.9167C7.03322 14.9167 6.04989 13.95 6.04989 12.75C6.04989 11.3167 7.43322 10.2417 8.85822 10.6833V8.05C5.98322 7.66667 3.46655 9.9 3.46655 12.75C3.46655 15.525 5.76655 17.5 8.20822 17.5C10.8249 17.5 12.9499 15.375 12.9499 12.75V7.50833C13.9941 8.25821 15.2477 8.66054 16.5332 8.65833V6.08333C16.5332 6.08333 14.9666 6.15833 13.8332 4.85Z' fill='%23ffffff'/></svg>");
}

.avg-footer-social .elementor-icon-list-item:nth-child(5) .elementor-icon-list-icon {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 512 512' fill='%23ffffff'><path d='M116.5,500.2V170.7H7V500.2H116.5z M61.8,125.7c38.2,0,62-25.3,62-57c-0.7-32.3-23.8-56.9-61.3-56.9C25,11.8,0.5,36.4,0.5,68.7c0,31.6,23.8,57,60.5,57H61.8z M177.1,500.2c0,0,1.4-298.6,0-329.6h109.5v47.8h-0.7c14.4-22.5,40.4-55.5,99.4-55.5c72.1,0,126.1,47.1,126.1,148.3v189H402V323.9c0-44.3-15.8-74.5-55.5-74.5c-30.3,0-48.3,20.4-56.2,40.1c-2.9,7-3.6,16.9-3.6,26.7v184H177.1z'/></svg>");
}


/* ---------- Investment calculator ---------- */
.avg-calc {
    --avg-gold: #DFB869;
    --avg-profit: #7DC783;
    --avg-gold-gradient: linear-gradient(177deg, #F9F6BB -28.82%, #DFB869 111.37%);
    color: #fff;
}

.avg-calc__tabs {
    margin-bottom: 26px;
}

.avg-calc__tab:hover{
  opacity: 0.8;
}

.avg-calc__tab {
    padding: 12px 30px;
    background: transparent;
    border: 1px solid var(--avg-gold);
    border-radius: 4px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--avg-gold);
    cursor: pointer;
}

/* Live: .metal-tabs .tab-btn:hover { opacity: .8 } is the only hover effect,
   and the active tab border is #F9F6BB. */
.avg-calc__tab:hover,
.avg-calc__tab:focus,
.avg-calc__tab.is-active {
    background: transparent;
    color: var(--avg-gold);
}

.avg-calc__tab:hover,
.avg-calc__tab:focus {
    opacity: 0.8;
    border-color: #F9F6BB;
}

.avg-calc__tab.is-active {
    opacity: 1;
    border-color: #F9F6BB;
}

/* Gold gradient text, per the storefront spec */
.avg-calc__label {
    display: block;
    margin-bottom: 33px;
    font-family: var(--font-heading-family, 'Playfair Display', serif);
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 34px;
    text-align: left;
    background: var(--Gold-Gradient, linear-gradient(177deg, #F9F6BB -28.82%, #DFB869 111.37%));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.avg-calc__sliderwrap {
    position: relative;
    margin-bottom: 25px;
}

.avg-calc__bubble {
    position: absolute;
    bottom: 25px;
    left: 0;
    padding: 0 10px;
    background-color: #fff;
    border-radius: 4px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    white-space: nowrap;
    color: #000;
    pointer-events: none;
    transform: translate(-50%);
}

/* Astra styles input[type=range] and its thumb, so these are scoped deeper. */
.avg-calc input.avg-calc__slider {
    width: 100%;
    height: 3px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 10px;
    outline: none;
    background: transparent;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    cursor: pointer;
}

.avg-calc input.avg-calc__slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 3px;
    border: none;
    border-radius: 10px;
    box-shadow: none;
    background: linear-gradient(to right, #DFB869 0%, #DFB869 var(--avg-progress, 0%), rgba(255, 255, 255, 0.5) var(--avg-progress, 0%), rgba(255, 255, 255, 0.5) 100%);
    cursor: pointer;
}

.avg-calc input.avg-calc__slider:focus::-webkit-slider-runnable-track {
    background: linear-gradient(to right, #DFB869 0%, #DFB869 var(--avg-progress, 0%), rgba(255, 255, 255, 0.5) var(--avg-progress, 0%), rgba(255, 255, 255, 0.5) 100%);
}

.avg-calc input.avg-calc__slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 9px;
    height: 9px;
    margin-top: -3px;
    border: 0 none;
    border-color: transparent;
    border-radius: 50%;
    background: #dfb869;
    background-color: #dfb869;
    box-shadow: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.avg-calc input.avg-calc__slider::-moz-range-track {
    width: 100%;
    height: 3px;
    border: none;
    border-radius: 10px;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.5);
}

.avg-calc input.avg-calc__slider::-moz-range-progress {
    height: 3px;
    border-radius: 10px;
    background: #dfb869;
}

.avg-calc input.avg-calc__slider::-moz-range-thumb {
    width: 9px;
    height: 9px;
    border: none;
    border-radius: 50%;
    background: #dfb869;
    cursor: pointer;
    transition: all 0.3s ease;
}

.avg-calc__monthly {
    margin-bottom: 25px;
}

.avg-calc__check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    color: #fff;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

.avg-calc__check .avg-calc__checkbox {
    position: absolute;
    width: 16px;
    height: 16px;
    opacity: 0;
    cursor: pointer;
}

.avg-calc__box {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: 1px solid #FFF;
    border-radius: 2px;
}

.avg-calc__check .avg-calc__checkbox:checked + .avg-calc__box {
    background-color: transparent;
}

.avg-calc__check .avg-calc__checkbox:checked + .avg-calc__box:after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #FFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.avg-calc__check .avg-calc__checkbox:focus-visible + .avg-calc__box {
    outline: 2px solid var(--avg-gold);
    outline-offset: 2px;
}

.avg-calc__check > span:not(.avg-calc__box) {
    pointer-events: none;
    color: #fff;
}

.avg-calc__monthlywrap {
    position: relative;
    padding-top: 33px;
    margin-bottom: 0;
}

.avg-calc__monthlywrap[hidden] {
    display: none;
}

.avg-calc__result {
    margin: 30px 0 18px;
}

.avg-calc__resultlabel {
    margin: 0 0 6px;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

.avg-calc__total {
    margin: 0 0 5px;
    font-family: Inter, sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 42px;
    background: linear-gradient(177deg, #F9F6BB -28.82%, #DFB869 111.37%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.avg-calc__profit {
    margin: 0;
    font-family: Inter, sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

.avg-calc__profit strong {
    color: var(--avg-profit);
    font-weight: 600;
}

.avg-calc__chart {
    min-height: 300px;
    margin-top: 10px;
}

.avg-calc__error {
    padding: 30px 0;
    font-family: Inter, sans-serif;
    color: rgba(255, 255, 255, 0.7);
}

.avg-calc__tip {
    padding: 10px 12px;
    font-family: Inter, sans-serif;
    font-size: 13px;
    line-height: 1.5;
}

.avg-calc__tipdate {
    font-weight: 600;
    color: #fff;
}

.avg-calc__tipprice {
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 767px) {
    .avg-calc__tab {
        padding: 10px 22px;
    }
    .avg-calc__label {
        font-size: 20px;
        line-height: 28px;
        margin-bottom: 28px;
    }
    .avg-calc__total {
        font-size: 26px;
        line-height: 34px;
    }
    .avg-calc__chart {
        min-height: 220px;
    }
}


/* ---------- Locations map (key-free, Mercator-projected pins) ---------- */
.avg-map {
    --avg-gold: #DFB869;
    --avg-map-h: 500px;
    display: grid;
    grid-template-columns: 2fr minmax(auto, 309px);
    gap: clamp(24px, 6vw, 78px);
    margin-top: 50px;
}

.avg-map__col {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.avg-map__canvas {
    position: relative;
    width: 100%;
    height: var(--avg-map-h);
}

.avg-map__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    user-select: none;
    pointer-events: none;
}

.avg-map__pins {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

/* Pins are placed as a percentage of the image box, so they track it at
   every size. The image is 'contain', so the box is letterboxed: the pin
   layer is inset to match the painted image rather than the element. */
/* Client doc #3/#21: live map layout rules not previously ported.
   Live .locations-map-wrapper stacks at <=992px; markers are 30px at <=768px,
   anchored at x=20px (live anchor Point(20,30)); About us uses
   .hide-location-details: map only, max-width 800px, centred. */
/* Selectors carry one extra class so they hold over the older responsive
   .avg-map rules that come later in this stylesheet. */
@media (min-width: 993px) and (max-width: 1024px) {
    .elementor-widget-avangard-locations-map .avg-map { grid-template-columns: 2fr minmax(auto, 309px); }
}
@media (max-width: 992px) {
    .elementor-widget-avangard-locations-map .avg-map { grid-template-columns: 1fr; }
    .elementor-widget-avangard-locations-map .avg-map__panel { height: auto; }
}
@media (max-width: 768px) {
    .avg-map__pins .avg-map__pin { width: 30px; height: 30px; transform: translate(-20px, -100%); }
    .avg-map__pins .avg-map__pin:hover, .avg-map__pins .avg-map__pin:focus { transform: translate(-20px, -100%) scale(1.12); }
}
.avg-dn-map .avg-map.avg-map { grid-template-columns: 1fr; }
.avg-dn-map .avg-map .avg-map__info { display: none; }
.avg-dn-map .avg-map .avg-map__col { width: 100%; max-width: 800px; margin: 0 auto; }
/* The static map widget always spans its container. Its image is absolutely
   positioned (live-projection layout), so it gives the map column no
   intrinsic width; inside a flex column with align-items:center (homepage
   .avg-sec-loc) the widget shrank to the 309px info panel and the map column
   collapsed to 0. Only widgets holding .avg-map (Home, About) are matched. */
.elementor-widget-avangard-locations-map:has(.avg-map) { width: 100%; max-width: 100%; align-self: stretch; }
.avg-map { width: 100%; }
/* Google (live) rendering active: the real map replaces the static image, the
   static pin buttons and the imitation attribution/zoom controls; Google draws
   its own logo and terms, as on live. */
.avg-map__gmap { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; }
.avg-map.is-google .avg-map__img,
.avg-map.is-google .avg-map__pins,
.avg-map.is-google .avg-map__attrib,
.avg-map.is-google .avg-map__controls { display: none !important; }

.avg-map__pin {
    position: absolute;
    z-index: 2;
    pointer-events: auto;
    width: 40px; /* live marker scaledSize 40 (client doc #3/#21) */
    height: 40px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    transform: translate(-50%, -100%);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.avg-map__pin:hover,
.avg-map__pin:focus {
    background: none;
    transform: translate(-50%, -100%) scale(1.12);
}

.avg-map__pin.is-active {
    z-index: 3;
    background: none;
}

.avg-map__pin img {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.avg-map__status {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0;
    text-align: center;
    font-family: Inter, sans-serif;
    font-size: 14px;
    color: #888;
    transform: translateY(-50%);
}

.avg-map__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: var(--avg-map-h);
    padding: 40px 30px;
    border: 1px solid var(--avg-gold);
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    background-color: #111;
    background-image:
        linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.75) 0%,
            rgba(0, 0, 0, 0.75) 100%
        ),
        url('/wp-content/uploads/2026/08/shop-facade.png');
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.avg-map__placeholder[hidden],
.avg-map__content[hidden] {
    display: none;
}

.avg-map__placeholder {
    color: rgba(255, 255, 255, 0.75);
}

.avg-map__pinicon {
    display: block;
    margin-bottom: 16px;
    font-size: 48px;
}

.avg-map__placeholder h3 {
    margin: 0 0 8px;
    font-family: var(--font-heading-family, 'Playfair Display', serif);
    font-size: 22px;
    font-weight: 400;
    color: #fff;
}

.avg-map__placeholder p {
    margin: 0;
    font-family: Inter, sans-serif;
    font-size: 14px;
}

.avg-map__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
    animation: avgMapFade 0.5s ease;
}

.avg-map__content::-webkit-scrollbar {
    display: none;
}

@keyframes avgMapFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.avg-map__city {
    margin: 0 0 25px;
    font-family: var(--font-heading-family, 'Playfair Display', serif);
    font-size: clamp(20px, 1.85vw, 24px);
    line-height: clamp(30px, 2.6vw, 34px);
    font-weight: 400;
    background: linear-gradient(177deg, #F9F6BB -28.82%, #DFB869 111.37%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.avg-map__list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    text-align: center;
}

.avg-map__item {
    display: block;
    text-decoration: none;
    cursor: pointer;
}

.avg-map__itemname {
    display: block;
    margin: 0 0 7px;
    font-family: Inter, sans-serif;
    font-size: clamp(14px, 1.23vw, 16px);
    line-height: clamp(24px, 2vw, 26px);
    font-weight: 400;
    text-transform: uppercase;
    color: #fff;
    transition: color 0.2s ease;
}

.avg-map__item:hover .avg-map__itemname,
.avg-map__item:focus .avg-map__itemname {
    color: var(--avg-gold);
}

/* Address expands on hover, as on the reference */
.avg-map__itemaddr {
    max-height: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    font-family: Inter, sans-serif;
    font-size: 10px;
    line-height: 12px;
    color: rgba(255, 255, 255, 0.8);
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin 0.3s ease-out;
}

.avg-map__item:hover .avg-map__itemaddr,
.avg-map__item:focus-visible .avg-map__itemaddr {
    max-height: 50px;
    margin-top: 4px;
    opacity: 1;
}



/* Bottom-left caption. Sits inside the canvas but outside the zoom
   transform, so it stays put while the map pans and zooms. */
.avg-map__attrib {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 10px;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    font-family: Roboto, Arial, sans-serif;
    line-height: 16px;
    user-select: none;
}

/* The wordmark sits larger and darker than the right-hand notes, as it
   does on the storefront. */
.avg-map__attrib-brand {
    flex: 0 0 auto;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.5px;
    color: #5F6368;
    text-decoration: none;
}

.avg-map__attrib-end {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.avg-map__attrib-note,
.avg-map__attrib-terms {
    font-size: 10px;
    letter-spacing: 0;
    color: #5F6368;
    white-space: nowrap;
}

.avg-map__attrib-terms {
    text-decoration: none;
}

.avg-map__attrib-brand:hover,
.avg-map__attrib-terms:hover,
.avg-map__attrib-brand:focus,
.avg-map__attrib-terms:focus {
    color: #202124;
    text-decoration: none;
}

@media (max-width: 767px) {
    .avg-map__attrib {
        left: 10px;
        right: 10px;
        bottom: 8px;
        gap: 8px;
    }

    .avg-map__attrib-brand {
        font-size: 15px;
    }

    .avg-map__attrib-end {
        gap: 10px;
    }

    /* The copyright note is the first thing to go when there is no room
       for it; the wordmark and Terms stay. */
    .avg-map__attrib-note {
        display: none;
    }
}

/* Pan / zoom controls. Every zoom rule is behind .is-zoomed, so the map at
   rest renders exactly as it did before these were added. */
/* Lifted clear of the attribution bar, which sits at bottom:10px on a
   16px line and so occupies the lowest ~26px. 40px leaves a small gap
   above it; the fly-out menu is positioned from this box, so it rises
   with it. */
.avg-map__controls {
    position: absolute;
    right: 14px;
    bottom: 40px;
    z-index: 5;
}

.avg-map__ctrl {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: #fff;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.3);
    color: #666;
    cursor: pointer;
    transition: color 0.2s ease;
}

.avg-map__ctrl:hover,
.avg-map__ctrl:focus {
    background: #fff;
    color: #111;
}

.avg-map__ctrl[disabled] {
    color: #d1d1d1;
    cursor: default;
}

.avg-map__ctrlmenu {
    position: absolute;
    right: 0;
    bottom: 50px;
    width: 140px;
    height: 140px;
}

.avg-map__ctrlmenu[hidden] {
    display: none;
}

.avg-map__ctrlmenu .avg-map__ctrl {
    position: absolute;
}

.avg-map__ctrl--up {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.avg-map__ctrl--left {
    bottom: 50%;
    left: 0;
    transform: translateY(50%);
}

.avg-map__ctrl--right {
    bottom: 50%;
    right: 0;
    transform: translateY(50%);
}

.avg-map__ctrl--down {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.avg-map__ctrl--in {
    top: 0;
    right: 0;
}

.avg-map__ctrl--out {
    bottom: 0;
    right: 0;
}

/* --- only from here on does anything touch the map itself --- */
.avg-map.is-zoomed .avg-map__canvas {
    overflow: hidden;
}

.avg-map.is-zoomed .avg-map__img,
.avg-map.is-zoomed .avg-map__pins {
    transform: translate(var(--avg-tx, 0px), var(--avg-ty, 0px)) scale(var(--avg-z, 1));
    transform-origin: center center;
}

.avg-map.is-zoomed .avg-map__pin {
    transform: translate(-50%, -100%) scale(calc(1 / var(--avg-z, 1)));
    transform-origin: center bottom;
}

.avg-map.is-zoomed .avg-map__pin:hover,
.avg-map.is-zoomed .avg-map__pin:focus {
    transform: translate(-50%, -100%) scale(calc(1.12 / var(--avg-z, 1)));
}

.avg-map.is-zoomed .avg-map__canvas {
    cursor: grab;
    touch-action: none;
}

.avg-map.is-zoomed.is-dragging .avg-map__canvas {
    cursor: grabbing;
}

.avg-map.is-dragging .avg-map__img,
.avg-map.is-dragging .avg-map__pins {
    transition: none;
}

@media (max-width: 767px) {
    /* The copyright note is hidden here, but the wordmark and Terms still
       sit at bottom:8px, so the control clears those. */
    .avg-map__controls {
        right: 10px;
        bottom: 32px;
    }
    .avg-map__ctrl {
        width: 34px;
        height: 34px;
    }
    .avg-map__ctrlmenu {
        width: 120px;
        height: 120px;
        bottom: 44px;
    }
}

@media (max-width: 1024px) {
    .avg-map {
        grid-template-columns: 1.6fr minmax(auto, 260px);
        gap: 28px;
    }
}

@media (max-width: 767px) {
    .avg-map {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 30px;
    }
    .avg-map__panel {
        height: auto;
        min-height: 260px;
        padding: 30px 20px;
    }
    .avg-map__pin {
        width: 26px;
        height: 26px;
    }
}

/* Location addresses (2026-09-28): hidden until the item is hovered at every
   width and on touch screens, as on live (live has no small-screen or
   hover:none override). Removed here: the max-width:767px and (hover: none)
   rules that forced every address open. The focus trigger is :focus-visible
   so an address does not stay open after a mouse click. */

/* ---------- Press logos (second section, mirrors live .component-logos) ---------- */
/* Live: static centred row above 768px, snap carousel + dots at 768px and below. */
.avg-prs {
    --avg-prs-gap: clamp(6px, 1.85vw, 24px);
    position: relative;
    width: 100%;
}

.avg-prs__viewport {
    overflow: visible;
}

.avg-prs__track {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--avg-prs-gap);
}

.avg-prs__card {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 120px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 20px 2px #492a0005;
}

.avg-prs__link {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding: 18px 30px;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.avg-prs__link:hover {
    opacity: 0.8;
}

.avg-prs__img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%) brightness(1);
    opacity: 0.5;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.avg-prs__link:hover .avg-prs__img {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
}

.avg-prs__dots {
    display: none;
}

@media (max-width: 768px) {
    .avg-prs__viewport {
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
        touch-action: pan-x pan-y;
        cursor: grab;
    }

    .avg-prs__viewport::-webkit-scrollbar {
        display: none;
    }

    .avg-prs__viewport.is-dragging,
    .avg-prs__viewport.is-settling {
        scroll-snap-type: none;
    }

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

    /* Live centres a narrow track and lets the neighbours spill outside it,
       which is what produces the partial cards either side. */
    .avg-prs__track {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 20px;
        padding-left: calc(50% - 100px);
        padding-right: calc(50% - 100px);
    }

    .avg-prs__card {
        scroll-snap-align: center;
        height: 100px;
    }

    .avg-prs__link {
        padding: 14px 24px;
    }

    .avg-prs__dots {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin-top: 20px;
    }

    .avg-prs__dot {
        position: relative;
        width: 8px;
        height: 8px;
        padding: 0;
        background: rgba(255, 255, 255, 0.3);
        border: 0;
        border-radius: 50%;
        cursor: pointer;
        transition: background 0.3s ease;
    }

    .avg-prs__dot::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.5);
        width: 14px;
        height: 14px;
        border: 1px solid #DFB869;
        border-radius: 50%;
        background: transparent;
        opacity: 0;
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .avg-prs__dot.is-active {
        background: #DFB869;
    }

    .avg-prs__dot.is-active::before {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* ---------- Product carousel: tablet + mobile (live parity) ---------- */
/* Measured from avangardgold.ro, not estimated. Live at <=768px does:
     .products-slider-container { margin-left/right: calc((100% - 100vw)/2) }
     .component-products-slider .products-swiper { padding: 0 10% !important }
     .mobile-navigation { display:flex; justify-content:center; gap:12px; margin-top:20px }
     .mobile-navigation .swiper-button-* { width:48px; height:48px }
     bullets 12px with an 8px inner dot, gold ring + gold gradient when active.
   Swiper configs read from the page source:
     Vezi produsele noastre  = 1 card / 12px, 768 -> 2 cards / 15px
     Alegerea Colectionarilor = 1 card / 20px, 640 -> 2 / 20px, 768 -> 3 / 30px */

.avg-ptabs__nav.is-mobile {
    display: none;
}

.avg-ptabs__dots {
    display: none;
}

.avg-ptabs__dot {
    position: relative;
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.avg-ptabs__dot:hover,
.avg-ptabs__dot:focus,
.avg-ptabs__dot:active {
    background: transparent;
}

.avg-ptabs__dot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d0d0d0;
}

.avg-ptabs__dot.is-active {
    border-color: #DFB869;
}

.avg-ptabs__dot.is-active::before {
    background: linear-gradient(177deg, #f9f6bb -28.82%, #dfb869 111.37%);
}

@media (max-width: 768px) {
    /* Full bleed to both viewport edges, then 10vw of inset, exactly as live.
       The negative margins resolve against .avg-ptabs__panel, which is the
       centred Elementor content box, so the viewport's edges land on the
       browser viewport's edges. overflow-x on the viewport clips the track,
       so no box extends past the viewport and the page cannot scroll sideways.
       scroll-padding-left keeps snap points aligned to the padded content. */
    .avg-ptabs__viewport {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding-left: 10vw;
        padding-right: 10vw;
        scroll-padding-left: 10vw;
    }

    /* Overlay arrows off, the row below takes over. The previous selector was
       .avg-ptabs > .avg-ptabs__arrow, which never matched: the overlay arrows
       are rendered inside .avg-ptabs__panel, not as children of .avg-ptabs. */
    .avg-ptabs__panel > .avg-ptabs__arrow {
        display: none;
    }

    .avg-ptabs__nav,
    .avg-ptabs__nav.is-mobile,
    .avg-ptabs__nav.is-bottom {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 12px;
        margin-top: 20px;
    }

    .avg-ptabs__nav .avg-ptabs__arrow,
    .avg-ptabs__nav .avg-ptabs__arrow.is-prev,
    .avg-ptabs__nav .avg-ptabs__arrow.is-next {
        flex: 0 0 auto;
        width: 48px;
        height: 48px;
    }

    .avg-ptabs__dots {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: clamp(10px, 1.0769230769230769vw, 14px);
    }

    /* Alegerea Colectionarilor carries its own Swiper gaps on live. Custom
       properties need !important here to beat Elementor's per-widget CSS,
       which is enqueued after the theme stylesheet. */
    .elementor-element-e1ebc4e .avg-ptabs {
        --avg-gap: 20px !important;
    }
}

@media (min-width: 640px) and (max-width: 767px) {
    .elementor-element-e1ebc4e .avg-ptabs {
        --avg-cols: 2 !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .elementor-element-e1ebc4e .avg-ptabs {
        --avg-cols: 3 !important;
        --avg-gap: 30px !important;
    }
}

/* ===== PRODUCT SECTION + CARD: live parity v3 (avangardgold.ro component_tabs_products_slider / Dawn card) ===== */
/* Section box: live .page-width (max 1340, 50px sides from 750px, 20px below). */
.avg-sec-products.e-con{--padding-left:50px!important;--padding-right:50px!important;--gap:0px 0px!important;--row-gap:0px!important;--column-gap:0px!important}
@media (max-width:749px){.avg-sec-products.e-con{--padding-left:20px!important;--padding-right:20px!important}}
.avg-sec-products > .e-con-inner > .elementor-widget{margin:0!important}
/* Intro: .section-pre-title / .section-title / .section-paragraphs */
.avg-sec-products > .e-con-inner > .avg-eyebrow{margin:0 0 clamp(15px,1.9230769230769231vw,25px)!important}
.avg-sec-products .avg-eyebrow .elementor-heading-title{display:flex;justify-content:center;align-items:flex-start;font-family:Inter,sans-serif!important;font-size:clamp(12px,1.0769230769230769vw,14px)!important;font-weight:400!important;line-height:1!important;letter-spacing:.03em!important;text-transform:uppercase!important;color:#000!important}
.avg-sec-products .avg-eyebrow .elementor-heading-title:before{flex:0 0 auto;width:clamp(16px,1.6153846153846154vw,21px);height:clamp(11px,1.0769230769230769vw,14px);margin-right:12px;vertical-align:top}
@media (max-width:768px){.avg-sec-products .avg-eyebrow .elementor-heading-title:before{margin-right:2px}}
.avg-sec-products .avg-eyebrow + .elementor-widget-heading .elementor-heading-title{font-size:clamp(28px,3.6923076923076925vw,48px)!important;line-height:clamp(34px,4.461538461538462vw,58px)!important;font-weight:400!important;letter-spacing:normal!important;color:#dfb869!important;margin:0}
.avg-sec-products > .e-con-inner > .elementor-widget-text-editor{margin-top:clamp(10px,1.9230769230769231vw,25px)!important;letter-spacing:.06rem}
.avg-sec-products > .e-con-inner > .elementor-widget-text-editor p{margin:0}
/* Tabs: .products-slider-tabs / .tab-button */
.avg-sec-products .avg-ptabs__bar{margin:50px 0 0;padding:6px 0;border-radius:7px;gap:clamp(15px,7.6923076923076925vw,100px)}
.avg-sec-products .avg-ptabs__tab,.avg-sec-products .avg-ptabs__tab:hover,.avg-sec-products .avg-ptabs__tab:focus{font-family:revert;font-size:clamp(12px,1.1538461538461537vw,15px);line-height:clamp(22px,1.9230769230769231vw,25px);letter-spacing:normal;padding:5px 10px;border-radius:0}
@media (max-width:1024px){.avg-sec-products .avg-ptabs__bar{gap:clamp(15px,3.8461538461538463vw,50px)}}
@media (max-width:768px){.avg-sec-products .avg-ptabs__bar{margin-top:30px;justify-content:flex-start}.avg-sec-products .avg-ptabs__tab,.avg-sec-products .avg-ptabs__tab:hover,.avg-sec-products .avg-ptabs__tab:focus{padding:8px 15px}}
/* Carousel: Swiper breakpoints 1024 -> 4/24, 768 -> 2/15, else 1/12; cards 40px under the tabs. */
.avg-sec-products .avg-ptabs{--avg-cols:4!important;--avg-gap:24px!important}
@media (max-width:1023px){.avg-sec-products .avg-ptabs{--avg-cols:2!important;--avg-gap:15px!important}}
@media (max-width:767px){.avg-sec-products .avg-ptabs{--avg-cols:1!important;--avg-gap:12px!important}}
.avg-sec-products .avg-ptabs__panel{padding-top:40px}
.avg-sec-products .avg-pgrid{padding:0}
.avg-sec-products .avg-ptabs__panel > .avg-ptabs__arrow{margin-top:-2px}
@media (min-width:769px){.avg-sec-products .avg-ptabs__panel > .avg-ptabs__arrow.is-prev{left:-50px}.avg-sec-products .avg-ptabs__panel > .avg-ptabs__arrow.is-next{right:-50px}}
@media (max-width:768px){.avg-ptabs .avg-pcard{padding:6px}}
/* CTA: live .products-slider-cta .button (15px / .1rem / 30px + 80px, 50px arrow box). */
.avg-sec-products > .e-con-inner > .avg-btn-gold{margin-top:50px!important}
.avg-sec-products .avg-btn-gold .elementor-button{padding:11px 80px 11px 30px!important;font-size:15px!important;letter-spacing:1px!important;line-height:18px!important}
.avg-sec-products .avg-btn-gold .elementor-button:after{width:50px!important}
@media (max-width:768px){.avg-sec-products > .e-con-inner > .avg-btn-gold{margin-top:24px!important;align-self:stretch;text-align:center}.avg-sec-products .avg-btn-gold .elementor-button{width:100%;max-width:320px}}
/* Card (shared with the collection grids): live .card-wrapper values. */
.avg-pcard__media .avg-pcard__wish,.avg-pcard__media .avg-pcard__wish:hover,.avg-pcard__media .avg-pcard__wish:focus{background-color:revert}
.avg-pcard__dots{gap:2px}
.avg-pcard__title{margin:17px 0 0;font-size:clamp(16px,1.3846153846153846vw,18px)}
@media (max-width:749px){.avg-pcard__title{margin-top:13px}}
.avg-pcard__price{margin-top:7px;line-height:1.4;letter-spacing:.06rem}
@media (max-width:749px){.avg-pcard__price{font-size:14px}}
.avg-pcard__dual{margin:12px 0 12px;gap:0}
.avg-pcard__dualcol{gap:0}
.avg-pcard__dualcol span,.avg-pcard__dualcol strong{font-size:14px;line-height:1.4;letter-spacing:.06rem}
.avg-pcard__dualcol span{font-weight:400}
.avg-pcard__foot{gap:8px;padding:29px 10px 0}
@media (max-width:749px){.avg-pcard__foot{padding-top:25px}}
.avg-pcard__foot > .avg-pcard__rating,.avg-pcard__foot > .avg-pcard__qty{flex-shrink:0}
.avg-pcard__rating{gap:0}
.avg-pcard__ratingval{line-height:1.8;letter-spacing:.06rem}
/* Cart button states, as the storefront's component-product-card.js paints them:
   spinner on a grey button while the request runs, a tick for 2s after a
   successful add, a red "Error" for 2s when the add is refused. */
@keyframes avgCardSpin{to{transform:rotate(360deg)}}
.avg-pcard__cart.loading{background:#ccc;opacity:1;pointer-events:none;cursor:not-allowed}
.avg-pcard__cart.loading svg,.avg-pcard__cart.avg-cart--done svg,.avg-pcard__cart.avg-cart--error svg{display:none}
.avg-pcard__cart.loading::after{content:'';display:block;box-sizing:border-box;width:20px;height:20px;border:2px solid #f3f3f3;border-top-color:#DFB869;border-radius:50%;animation:avgCardSpin 1s linear infinite}
.avg-pcard__cart.avg-cart--done,.avg-pcard__cart.avg-cart--done:hover{background:#DFB869}
.avg-pcard__cart.avg-cart--done::after{content:'\2713';color:#000;font:400 13.3333px/1 Arial,sans-serif}
.avg-pcard__cart.avg-cart--error,.avg-pcard__cart.avg-cart--error:hover,.avg-pcard__cart.avg-cart--error:focus{background:#dc3545;padding:1px 6px;color:#dfb869;font:400 13.3333px/normal Arial,sans-serif;text-decoration:none}
.avg-pcard__cart.avg-cart--error::before{content:'\2717';color:#000}
.avg-pcard__cart.avg-cart--error::after{content:'Error'}