/* =============================================================================
   NF Add to Cart V2 Widget
   ============================================================================= */

/* ─── Custom Properties ──────────────────────────────────────────────────── */
.nf-atc2 {
    --green:        #33AB59;
    --green-dark:   #178a47;
    --green-bg:     #f0faf4;
    --border:       #e2e8f0;
    --border-hover: #b8ddc8;
    --text:         #1a1a1a;
    --text-muted:   #64748b;
    --badge-bg:            #DE1528;
    /* Hang past .nf-atc2__pack-label top-right (~⅕ width / ~¼ height ref.) */
    --badge-shift-x:       8px;
    --badge-shift-y:       6px;
    /* Bottom-left of trapezoid: inset from left (diagonal left edge) */
    --badge-ribbon-cut:    46%;
    /* Right edge only (works with polygon clip-path); diagonal stays straight */
    --badge-corner-radius: 8px;
    --card-bg:      #F9F9FA;
    --card-active:  #ECECEE;
    --radius-card:  12px;
    --radius-pill:  40px;
    --shadow:       0 2px 16px rgba(0, 0, 0, .07);
}

/* ─── Container ──────────────────────────────────────────────────────────── */
.nf-atc2 {
    font-family: inherit;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 16px 7px 14px;
    box-shadow: var(--shadow);
    max-width: 100%;
    /* Allow pack-label badges to extend slightly past padding */
    overflow-x: visible;
    /* Avoid browser scroll anchoring when inner blocks change height (purchase toggle). */
    overflow-anchor: none;
}

/* ─── Top: price row ─────────────────────────────────────────────────────── */
.nf-atc2__top {
    margin-bottom: 16px;
    margin-left: 4px;
}

.nf-atc2__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
}

.nf-atc2__main {
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
    color: var(--text);
}

.nf-atc2__main .woocommerce-Price-amount {
    font-weight: 500;
}

.nf-atc2__main-asterisk {
    font-size: 0.55em;
    font-weight: 500;
    vertical-align: super;
    line-height: 1;
    color: var(--text);
}

.nf-atc2__subscr-asterisk {
    font-size: 0.9em;
    font-weight: 500;
    vertical-align: top;
    line-height: 1.4;
    margin-left: 0;
    letter-spacing: 0;
}

.nf-atc2__regular {
    font-size: 18px;
    font-weight: 300;
    color: var(--text);
    text-decoration: line-through;
}

.nf-atc2__regular .woocommerce-Price-amount {
    font-weight: 300;
}

.nf-atc2__price-per-kg {
    font-size: 12px;
    color: var(--text);
    width: 100%;
    margin-top: -5px;
}

.nf-atc2__price-per-kg .woocommerce-Price-amount {
    font-weight: 500;
}

/* ─── Pack selector ──────────────────────────────────────────────────────── */
.nf-atc2__qselect {
    display: grid;
    gap: 6px;
    margin-bottom: 10px;
    align-items: start;
    overflow: visible;
}

/* Single pack: same column width as one tile in 3-up (avoid full-width stretch) */
.nf-atc2__qselect.grid-1 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.nf-atc2__qselect.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nf-atc2__qselect.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.nf-atc2__pack-label {
    cursor: pointer;
    display: block;
    position: relative;
    min-width: 0;
    overflow: visible;
}

/* hide native radio */
.nf-atc2__pack-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.nf-atc2__pack {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    text-align: center;
    background: var(--card-bg);
    border: 1px solid #DCDCDC;
    border-radius:10px;
    transition: border-color .15s, background .15s, box-shadow .15s;
    box-sizing: border-box;
    min-width: 0;
    /* visible so discount ribbon can sit past the rounded corner */
    overflow: visible;
    /* Bottom spacing only from padding — no height stretch in grid rows */
    padding: 8px 4px;
}

/*
 * Row 1: radio pinned left (absolute). Match horizontal inset on both sides so “1 pack / 2× …”
 * centers in the card (same optical margin as the 18px radio + small gap).
 */
.nf-atc2__pack-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Pack quantity — custom radio (same visual language as .nf-atc2__opt-radio-ui) */
.nf-atc2__pack-radio-ui {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 1px solid var(--border);
    border-radius: 50%;
    box-sizing: border-box;
    background: #fff;
    transition: border-color .15s;
    pointer-events: none;
}

/* Selected: green ring, white inner, green center dot */
.nf-atc2__pack-label:has(input:checked) .nf-atc2__pack-radio-ui {
    border-color: var(--green);
    background: #fff;
}

.nf-atc2__pack-label:has(input:checked) .nf-atc2__pack-radio-ui::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Thin white ring: 18px control − 4px border = 14px inner; dot fills nearly all */
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--green);
}

/* Selected state (use ~ so discount badge between input and .nf-atc2__pack doesn’t break styling) */
.nf-atc2__pack-label > .nf-atc2__qty:checked ~ .nf-atc2__pack {
    border: 1px solid var(--green);
    background: var(--card-active);
}

/* Selected pack stays green border on hover (no mint hover from removed global .nf-atc2__pack:hover) */
.nf-atc2__pack-label:has(.nf-atc2__qty:checked) .nf-atc2__pack:hover {
    border-color: var(--green);
}

/* 2-pack “MOST POPULAR”: card body + black tab as one unit; tab overlaps pack bottom border */
.nf-atc2__pack-label--popular {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.nf-atc2__pack-label--popular > .nf-atc2__qty ~ .nf-atc2__pack {
    border-radius: var(--radius-card) var(--radius-card) 0 0;
}

/* Second pack option only: single rounded top-left corner */
.nf-atc2__qselect > .nf-atc2__pack-label:nth-child(2) .nf-atc2__pack {
    border-radius: 10px 0 0;
}

/* Discount ribbon — anchored to .nf-atc2__pack-label top-right, hangs slightly outside */
.nf-atc2__pack-label > .nf-atc2__badge {
    position: absolute;
    top: calc(4px - var(--badge-shift-y));
    right: calc(5px - var(--badge-shift-x));
    left: auto;
    bottom: auto;
    z-index: 3;
    display: block;
    box-sizing: border-box;
    width: max-content;
    max-width: calc(100% - 40px);
    margin: 0;
    padding: 5px 8px 3px 18px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.02em;
    overflow: visible;
}

/* Keep quantity clear of discount ribbon (badge is top-right on the label) */

.nf-atc2__badge::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--badge-bg);
    border-radius: 0 var(--badge-corner-radius) var(--badge-corner-radius) 0;
    /*
     * polygon() is reliable cross-browser; clip-path: path() with % often fails → full rect (“square”).
     * Trapezoid: one vertical right edge; diagonal from top-left to --badge-ribbon-cut on bottom.
     */
    clip-path: polygon(0 0, 100% 0, 100% 100%, var(--badge-ribbon-cut) 130%);
}

.nf-atc2__pack-qty {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.10em;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.25;
    color: var(--text);
    margin: 0;
    text-align: center;
}

.nf-atc2__pack-label:has(.nf-atc2__qty:checked) .nf-atc2__pack-qty {
    font-weight: 500;
}

.nf-atc2__pack-price-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    align-content: center;
    margin: 0;
    line-height: 1.25;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    margin: 3px 0;
}

.nf-atc2__pack-price {
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.25;
    margin: 0;
    min-width: 0;
    max-width: 100%;
    text-align: center;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.nf-atc2__pack-price .woocommerce-Price-amount {
    font-weight: 500;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.nf-atc2__pack-price .woocommerce-Price-amount bdi {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.nf-atc2__pack-per {
    font-size: 12px;
    font-weight: 300;
    color: var(--text);
    margin: 0;
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
    text-align: center;
    line-height: 1.25;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.nf-atc2__pack-save {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0 0.25em;
    font-size: 10px;
    font-weight: 300;
    margin: 0;
    line-height: 1.25;
    text-align: center;
    min-width: 0;
    width: 100%;
    overflow-wrap: break-word;
}

.nf-atc2__pack-save-main {
    font-size: 12px;
    font-weight: 300;
    color: var(--green);
}

.nf-atc2__pack-save-main .woocommerce-Price-amount {
    font-weight: 500;
}

.nf-atc2__qselect > .nf-atc2__pack-label:nth-child(2) .nf-atc2__pack-save-main {
    margin-bottom: 2px;
}

/* MOST POPULAR — continues the pack card; overlaps its bottom border; rounded bottom only */
.nf-atc2__pack-label--popular .nf-atc2__popular {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
    margin: -6px 0 0;
    padding: 4px;
    background: #000;
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.2;
    border-radius: 0 0 10px 10px;
    
}


/* ─── Purchase type radios ───────────────────────────────────────────────── */
.nf-atc2__purchase {
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nf-atc2__opt {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 10px;
    border: 1.5px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    /* No transition: animated border/background reads as a “zoom” when toggling purchase type */
    transition: none;
    position: relative;
    box-sizing: border-box;
}

.nf-atc2__opt:has(input:checked) {
    border-color: var(--green);
    background: var(--green-bg);
}

.nf-atc2__opt--onetime:has(input:checked) {
    border-color: #33ab59;
    background: #ececee;
}

/* hide native radio */
.nf-atc2__opt input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* custom radio circle — green ring, white inner, green dot when checked */
.nf-atc2__opt-radio-ui {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 1px solid var(--border);
    border-radius: 50%;
    margin-top: 1px;
    background: #fff;
    transition: none;
    position: relative;
}

.nf-atc2__opt:has(input:checked) .nf-atc2__opt-radio-ui {
    border-color: var(--green);
    background: #fff;
}

.nf-atc2__opt:has(input:checked) .nf-atc2__opt-radio-ui::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--green);
}

.nf-atc2__opt-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.nf-atc2__opt-sep {
    color: #000;
    font-weight: 300;
}

.nf-atc2__opt.nf-atc2__opt--onetime {
    /* Match .nf-atc2__opt vertical padding so the two rows don’t shift when selection changes */
    padding: 9px 10px;
}
.nf-atc2__opt--onetime .nf-atc2__opt-line-title {
    font-weight: 700;
}

.nf-atc2__opt--onetime .nf-atc2__opt-line-supply {
    font-weight: 300;
    font-size: 12px;
}

/* Subscribe header: title row + (badge | supply) + price column */
.nf-atc2__opt-label--subscr {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.nf-atc2__opt-subscr-headrow {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px 14px;
    width: 100%;
    font-size: 12px;
}

/* 14px titles & main price, 12px secondary (supply, /unit, save, badge) */
.nf-atc2__opt-subscr-headrow .nf-atc2__opt-subscr-title {
    font-size: 14px;
    line-height: 1.3;
}

.nf-atc2__opt-subscr-headrow .nf-atc2__opt-subscr-row--supply {
    font-size: 12px;
}

.nf-atc2__opt-subscr-headrow .nf-atc2__opt-line-supply {
    font-size: 12px;
}

.nf-atc2__opt-subscr-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nf-atc2__opt-subscr-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    width: 100%;
}

.nf-atc2__opt-subscr-row--title {
    font-weight: 700;
    color: #000;
}

.nf-atc2__opt-subscr-title {
    font-weight: 700;
}

.nf-atc2__opt-subscr-row--supply {
    justify-content: flex-start;
    font-weight: 700;
    color: #000;
}

.nf-atc2__opt--subscr .nf-atc2__opt-line-supply {
    font-weight: 300;
    font-size: 12px;
}

.nf-atc2__opt-subscr-priceCol {
    flex-shrink: 0;
    text-align: right;
    min-width: 0;
    max-width: 46%;
}

.nf-atc2__subscr-pp-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0;
    gap: 2px 4px;
    line-height: 1.2;
}

.nf-atc2__subscr-pp-val {
    font-size: 16px;
    font-weight: 500;
    color: var(--text);
}

.nf-atc2__subscr-pp-val .woocommerce-Price-amount {
    font-weight: 500;
}

.nf-atc2__opt-subscr-headrow .nf-atc2__subscr-save-line {
    font-size: 12px;
}

.nf-atc2__subscr-save-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 4px;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    justify-content: flex-end;
}

.nf-atc2__subscr-save-intro {
    color: var(--green);
    font-weight: 400;
}

.nf-atc2__subscr-save-amt {
    color: var(--green);
}

.nf-atc2__subscr-save-amt .woocommerce-Price-amount {
    font-weight: 500;
}

.nf-atc2__subscr-save-suffix,
.nf-atc2__subscr-save-suffix-label {
    font-size: 10px;
    font-weight: 300;
    color: #000;
    display: none;
}

/* BEST VALUE pill + checkmark */
.nf-atc2__best-value {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--green);
    color: #fff;
    font-size: 10px;
    font-weight: 300;
    letter-spacing: .04em;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    vertical-align: middle;
    flex-shrink: 0;
}

.nf-atc2__opt-subscr-headrow .nf-atc2__best-value {
    font-size: 12px;
    padding: 3px 8px;
}

/* White disc + green check (path uses stroke="currentColor") */
.nf-atc2__best-value-ico {
    flex-shrink: 0;
    display: block;
    width: 12px;
    height: 12px;
    box-sizing: border-box;
    padding: 3px;
    border-radius: 50%;
    background: #fff;
    color: var(--green);
}

/* Radio border needs to contrast against the #e1e0e2 row background */
.nf-atc2__opt.nf-atc2__opt--subscr .nf-atc2__opt-radio-ui {
    border-color: #b0adb3;
}

/* Subscribe row strip — no bottom border (panel sits flush below) */
.nf-atc2__opt.nf-atc2__opt--subscr {
    background: #e1e0e2;
    border-bottom: none;
}

.nf-atc2__opt.nf-atc2__opt--subscr:has(input:checked) {
    background: #e1e0e2;
    border-bottom: none;
}
/*
 * Subscription bundle: keep border / overflow / background stable so toggling
 * one-time vs subscribe doesn’t resize the block (avoids layout jump).
 */
.nf-atc2__subscr-bundle {
    box-sizing: border-box;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    transition: none;
}

.nf-atc2__subscr-bundle:has(.nf-atc2__purchase-radio[value="subscribe"]:checked) {
    border-color: var(--green);
}

/*
 * Critical: never use border:none on the subscribe row when selected — that drops
 * the 1.5px stroke and inner content reflows (looks like zoom). Keep the same
 * border box; only swap side colors to transparent when the outer card shows green.
 */
.nf-atc2__subscr-bundle .nf-atc2__opt.nf-atc2__opt--subscr {
    border: none;
    border-radius: 10px 10px 0 0;
    box-sizing: border-box;
}

/* Beats .nf-atc2__opt:has(input:checked) { border-color: green } so inner edge stays invisible next to outer green card */
.nf-atc2__subscr-bundle:has(.nf-atc2__purchase-radio[value="subscribe"]:checked) .nf-atc2__opt.nf-atc2__opt--subscr:has(input:checked) {
    border-color: transparent;
    background: #e1e0e2;
}

/* ─── Subscription panel (always visible; no collapse) ───────────────────── */
.nf-atc2__subscr-panel {
    overflow: visible;
    opacity: 1;
    background: #f9f9fa;
    padding: 12px 14px 14px;
}

/* Divider between header strip and details — same weight/color as outer card when subscribe is selected */
.nf-atc2__subscr-bundle:has(.nf-atc2__purchase-radio[value="subscribe"]:checked) .nf-atc2__subscr-panel {
    border-top: 1.5px solid var(--green);
}

.nf-atc2__subscr-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.nf-atc2__subscr-list li {
    font-size: 13px;
    font-weight: 400;
    color: var(--text);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.45;
}

/* One wrapper so <strong> + following text stay one sentence (not separate flex items). */
.nf-atc2__subscr-item-text {
    flex: 1;
    min-width: 0;
}

.nf-atc2__subscr-list li strong {
    font-weight: 700;
    color: #000;
}

.nf-atc2__subscr-list-lead {
    font-weight: 400;
}

/*
 * List bullets: black check (two strokes, square ends) — border L rotated 45°
 */
.nf-atc2__subscr-list li::before {
    content: '';
    flex-shrink: 0;
    display: block;
    width: 5px;
    height: 10px;
    margin-top: 1px;
    margin-right: 2px;
    box-sizing: border-box;
    border: solid #000;
    border-width: 0 2px 2px 0;
    border-radius: 0;
    transform: rotate(45deg);
    background: transparent;
    align-self: flex-start;
}

.nf-atc2__subscr-list-muted {
    color: var(--text);
}

/* Hint + dropdown stacked inside one cell so ::before check stays on the first line */
.nf-atc2__subscr-delivery-wrap {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.nf-atc2__subscr-delivery-hint {
    font-weight: 400;
    color: #000;
}

/* Period: native select invisible over styled face (mixed font weights not possible on <select>) */
.nf-atc2__period-wrap {
    position: relative;
    display: inline-block;
    width: max-content;
    max-width: 100%;
    vertical-align: top;
}

.nf-atc2__period {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    font-size: 16px;
    appearance: none;
}

.nf-atc2__period-face {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0 0.35em;
    min-width: max-content;
    padding: 4px 32px 4px 12px;
    border: 1.5px solid var(--border);
    border-radius: 24px;
    background: #fff
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231a1a1a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
        right 12px center/10px no-repeat;
    font-size: 13px;
    color: #000;
    line-height: 1.25;
    pointer-events: none;
}

.nf-atc2__period-days {
    font-weight: 700;
}

.nf-atc2__period-rec {
    font-weight: 400;
}

.nf-atc2__period-rec:empty {
    display: none;
}

.nf-atc2__period-wrap:focus-within .nf-atc2__period-face {
    border-color: var(--green);
}

/* Free gift (dummy or from settings) */
.nf-atc2__gift {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 5px 10px;
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
    color: var(--text);
}

.nf-atc2__gift-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
}

.nf-atc2__gift-text {
    color: #000;
    line-height: 1.35;
}

/* Default copy: bold lead + weight 300 tail; custom admin text stays one weight */
.nf-atc2__gift-text-strong {
    font-weight: 700;
    margin-right: 0.3em;
}

.nf-atc2__gift-text-light {
    font-weight: 300;
}

.nf-atc2__gift-text--custom {
    font-weight: 600;
}

/* ─── CTA block: primary button + trust row ─────────────────────────────── */
.nf-atc2__cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
}

/* ─── Add to Cart button ─────────────────────────────────────────────────── */
/* Force white label (Woo / theme `.button` rules often recolor links). */
.nf-atc2__cta .nf-atc2__btn,
.nf-atc2__cta a.nf-atc2__btn:link,
.nf-atc2__cta a.nf-atc2__btn:visited,
.nf-atc2__cta a.nf-atc2__btn:hover,
.nf-atc2__cta a.nf-atc2__btn:focus {
    color: #fff !important;
    -webkit-text-fill-color: #fff;
}

.nf-atc2__btn {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    background: var(--green) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
    padding: 10px 16px !important;
    border-radius: 9999px !important;
    border: none !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .06), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background .15s, transform .1s, box-shadow .15s;
    box-sizing: border-box;
    margin: 0 0 14px !important;
}

.nf-atc2__btn:hover,
.nf-atc2__btn:focus {
    background: var(--green-dark) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(23, 138, 71, .28) !important;
}

.nf-atc2__btn--soldout {
    background: #9ca3af !important;
    border: none !important;
    box-shadow: none !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    cursor: not-allowed;
    transform: none !important;
}

/* Loading spinner overlay */
.nf-atc2__btn.loading {
    opacity: .75;
    pointer-events: none;
}

/* WooCommerce AJAX “added” state: core/theme inject a trailing check via ::after — remove it */
.nf-atc2__btn.added::before,
.nf-atc2__btn.added::after,
.nf-atc2 .add_to_cart_button.nf-atc2__btn.added::before,
.nf-atc2 .add_to_cart_button.nf-atc2__btn.added::after {
    content: none !important;
    display: none !important;
}

.nf-atc2__btn.added {
    padding: 10px 16px !important;
}

/* ─── Trust: row 1 = guarantee + free shipping; row 2 = delivery time ─────── */
.nf-atc2__trust {
    width: 100%;
    margin-bottom: 14px;
}

.nf-atc2__trust-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.nf-atc2__trust-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 14px;
    width: 100%;
}

.nf-atc2__feature {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    flex: 0 1 auto;
    max-width: 100%;
    text-align: left;
}

.nf-atc2__feature-icon {
    flex-shrink: 0;
    width: 12px;
    object-fit: contain;
    display: block;
    box-sizing: border-box;
}

.nf-atc2__trust-row--primary .nf-atc2__feature:nth-child(2) .nf-atc2__feature-icon {
    width: 16px;
}

.nf-atc2__feature-text {
    font-size: 12px;
    font-weight: 400;
    color: var(--text);
    line-height: 1.35;
}

.nf-atc2__feature-text .woocommerce-Price-amount {
    font-weight: 500;
}

/* ─── Payment logos ──────────────────────────────────────────────────────── */
.nf-atc2__payments {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.nf-atc2__payments img {
    max-height: 22px;
    width: auto;
    object-fit: contain;
}

/* ─── Phone ──────────────────────────────────────────────────────────────── */
.nf-atc2__phone {
    text-align: center;
    font-size: 13px;
    color: var(--text-muted);
    margin: 0;
}

/* ─── Out of stock state ─────────────────────────────────────────────────── */
.nf-atc2--out-of-stock .nf-atc2__btn {
    display: block;
    text-align: center;
}

@media (min-width: 375px) {
    .nf-atc2__pack-label > .nf-atc2__badge {
        font-size: 15px;
    }
}

/* ─── Tablet / desktop (mobile-first base above) ─────────────────────────── */
@media (min-width: 481px) {
    .nf-atc2 {
        padding: 22px 10px 18px;
        --badge-shift-x: 10px;
        --badge-shift-y: 8px;
        overflow-x: visible;
    }

    .nf-atc2__main {
        font-size: 28px;
    }

    .nf-atc2__qselect {
        gap: 8px;
    }

    .nf-atc2__pack {
        padding: 5px 6px;
    }

    .nf-atc2__pack-price {
        font-size: 18px;
    }

    .nf-atc2__pack-label > .nf-atc2__badge {
        font-size: 15px;
        padding: 3px 8px 3px 18px;
    }

    .nf-atc2__btn {
        font-size: 17px !important;
        padding: 11px 20px !important;
    }

    .nf-atc2__payments img {
        max-height: 20px;
    }

    .nf-atc2__period {
        min-width: 140px;
    }
}

@media (min-width: 768px) and (max-width: 1299px) {

    .nf-atc2__pack-price
    {
        font-size: 14px;
    }
    
}

/* Tighter horizontal padding in the “tablet-narrow” band (sidebar / split layout) */
@media (min-width: 768px) and (max-width: 920px) {
   
    .nf-atc2__pack-label > .nf-atc2__badge {
        font-size: 12px;
        padding: 5px 30px 3px 18px;
    }
    .nf-atc2__pack-label > .nf-atc2__badge {
        top: calc(4px - var(--badge-shift-y));
        right: calc(5px - var(--badge-shift-x));
    }
    .nf-atc2__pack-radio-ui {
        width: 14px;
        height: 14px;
    }

    .nf-atc2__pack-label:has(input:checked) .nf-atc2__pack-radio-ui::after {
        width: 8px;
        height: 8px;
    }

    .nf-atc2__opt-radio-ui {
        width: 14px;
        height: 14px;
    }

    .nf-atc2__opt:has(input:checked) .nf-atc2__opt-radio-ui::after {
        width: 8px;
        height: 8px;
    }
    .nf-atc2 {
        padding: 22px 5px 18px;
    }
    .nf-atc2__top {
        margin-left: 5px;
    }
    .nf-atc2__pack-label--popular .nf-atc2__popular {
        font-size: 10px;
    }
    .nf-atc2__opt-subscr-headrow .nf-atc2__subscr-save-line {
        display: none!important;
    }
}


@media (max-width: 360px) {
    .nf-atc2__qselect.grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
    }

    .nf-atc2__pack {
        padding: 5px 4px;

    }

    .nf-atc2__pack-price {
        font-size: 14px;
    }

    /* Main add to cart (modal popup typography is overridden at end of file so it wins over global 16px) */
    .nf-atc2__btn,
    .nf-atc2__btn:hover,
    .nf-atc2__btn:focus {
        font-size: 14px !important;
    }
}

/* ─── Subscription upsell modal (one-time add to cart) ───────────────────── */
body.nf-atc2__sub-modal-open {
    overflow: hidden;
}

.nf-atc2__sub-modal {
    position: fixed;
    inset: 0;
    z-index: 1000500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.nf-atc2__sub-modal[hidden] {
    display: none !important;
}

.nf-atc2__sub-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    cursor: pointer;
}

.nf-atc2__sub-modal-dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 420px;
    max-height: min(90vh, 640px);
    overflow: auto;
    box-sizing: border-box;
    padding: 20px 18px 18px;
    border-radius: 16px;
    border: 1px solid #dcdcdc;
    background: #fff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

/* Title + subtitle strip: side padding; extra right space for overlapping close (×) */
.nf-atc2__sub-modal-header {
    padding: 12px 44px 14px 16px;
    background: #e0e2e0;
    border-radius: 10px 10px 0 0;
    box-sizing: border-box;
    border-left: 1px solid #DCDCDC;
    border-right: 1px solid #DCDCDC;
    border-top: 1px solid #DCDCDC;
}

/* Long selectors + !important: Elementor / theme heading rules override plain .nf-atc2__* */
body .nf-atc2 .nf-atc2__sub-modal h2.nf-atc2__sub-modal-title,
body .nf-atc2 .nf-atc2__sub-modal .nf-atc2__sub-modal-title,
.elementor-widget-container .nf-atc2 .nf-atc2__sub-modal h2.nf-atc2__sub-modal-title {
    margin: 0px !important;
    padding: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #000 !important;
    line-height: 1.25 !important;
    letter-spacing: normal !important;
}

body .nf-atc2 .nf-atc2__sub-modal .nf-atc2__sub-modal-lead,
.elementor-widget-container .nf-atc2 .nf-atc2__sub-modal .nf-atc2__sub-modal-lead {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #333 !important;
    line-height: 1.35 !important;
}

/* No hover tint (theme link / accent colors) — same look in all states */
.nf-atc2__sub-modal-close,
.nf-atc2__sub-modal-close:hover,
.nf-atc2__sub-modal-close:focus,
.nf-atc2__sub-modal-close:focus-visible,
.nf-atc2__sub-modal-close:active {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 2;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: none !important;
    border-radius: 50%;
    background: transparent !important;
    color: #444 !important;
    -webkit-text-fill-color: #444 !important;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    font-weight: 300;
    box-shadow: none !important;
    text-decoration: none !important;
    opacity: 1 !important;
    outline: none;
}

.nf-atc2__sub-modal-list {
    margin: 0 0 16px;
    padding: 12px 16px 0px;
    background: #f9f9fa;
    box-sizing: border-box;
    border-radius: 0 0 10px 10px;
    border-left: 1px solid #DCDCDC;
    border-right: 1px solid #DCDCDC;
    border-bottom: 1px solid #DCDCDC;
}

.nf-atc2__sub-modal-list .nf-atc2__subscr-delivery-wrap {
    gap: 8px;
}

/*
 * Gift: separate white card, inset from list inner edges; gray (#f9f9fa) shows around it and below.
 */
.nf-atc2__sub-modal-list > li.nf-atc2__sub-modal-gift-li {
    display: block;
    margin: 10px 0 0;
    padding: 0 0 12px;
    background: transparent;
}

.nf-atc2__sub-modal-list > li.nf-atc2__sub-modal-gift-li::before {
    content: none;
    display: none;
}

.nf-atc2__sub-modal-list > li.nf-atc2__sub-modal-gift-li .nf-atc2__gift.nf-atc2__sub-modal-gift {
    margin: 0 8px;
    padding: 10px 12px;
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
}

.nf-atc2__sub-modal-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/*
 * Modal buttons: match .nf-atc2__btn padding (10px 16px); lock on all states.
 * Theme / Woo `.button` often changes font-size/padding on :hover/:active.
 */
.nf-atc2__sub-modal-dialog .nf-atc2__sub-modal-btn,
.nf-atc2__sub-modal-dialog .nf-atc2__sub-modal-btn:hover,
.nf-atc2__sub-modal-dialog .nf-atc2__sub-modal-btn:focus,
.nf-atc2__sub-modal-dialog .nf-atc2__sub-modal-btn:focus-visible,
.nf-atc2__sub-modal-dialog .nf-atc2__sub-modal-btn:active {
    font-size: 16px !important;
    line-height: 1.25 !important;
    padding: 10px 16px !important;
}

/* Match .nf-atc2__btn layout (see .nf-atc2__btn in this file) */
.nf-atc2__sub-modal-btn {
    width: 100%;
    justify-content: center;
    margin: 0 !important;
    border-radius: 999px !important;
    box-sizing: border-box;
}

.nf-atc2__sub-modal-btn--primary,
.nf-atc2__sub-modal-btn--primary:hover,
.nf-atc2__sub-modal-btn--primary:focus,
.nf-atc2__sub-modal-btn--primary:focus-visible,
.nf-atc2__sub-modal-btn--primary:active {
    background: var(--green) !important;
    color: #fff !important;
    border: none !important;
    font-weight: 500 !important;
}

.nf-atc2__sub-modal-btn--secondary,
.nf-atc2__sub-modal-btn--secondary:hover,
.nf-atc2__sub-modal-btn--secondary:focus,
.nf-atc2__sub-modal-btn--secondary:focus-visible,
.nf-atc2__sub-modal-btn--secondary:active,
.nf-atc2__sub-modal-btn.nf-atc2__sub-modal-btn--secondary.nf-atc2__sub-modal-onetime,
.nf-atc2__sub-modal-btn.nf-atc2__sub-modal-btn--secondary.nf-atc2__sub-modal-onetime:hover,
.nf-atc2__sub-modal-btn.nf-atc2__sub-modal-btn--secondary.nf-atc2__sub-modal-onetime:focus,
.nf-atc2__sub-modal-btn.nf-atc2__sub-modal-btn--secondary.nf-atc2__sub-modal-onetime:active {
    width: fit-content !important;
    max-width: 100%;
    align-self: center;
    background: #f9f9fa !important;
    color: #1a1a1a !important;
    font-weight: 300 !important;
    border: 1px solid #DCDCDC !important;
}

/* ≥481px: match .nf-atc2__btn in tablet/desktop block (17px, 11px 20px padding) */
@media (min-width: 481px) {
    .nf-atc2__sub-modal-dialog .nf-atc2__sub-modal-btn,
    .nf-atc2__sub-modal-dialog .nf-atc2__sub-modal-btn:hover,
    .nf-atc2__sub-modal-dialog .nf-atc2__sub-modal-btn:focus,
    .nf-atc2__sub-modal-dialog .nf-atc2__sub-modal-btn:focus-visible,
    .nf-atc2__sub-modal-dialog .nf-atc2__sub-modal-btn:active {
        font-size: 17px !important;
        line-height: 1.25 !important;
        padding: 11px 20px !important;
    }
}

/*
 * Narrow viewports: popup CTA text 14px (same as .nf-atc2__btn here).
 * Placed at EOF so it wins over `.nf-atc2__sub-modal-dialog` 16px and ≥481px 17px rules.
 */
@media (max-width: 360px) {
    .nf-atc2__sub-modal-dialog .nf-atc2__sub-modal-btn,
    .nf-atc2__sub-modal-dialog .nf-atc2__sub-modal-btn:hover,
    .nf-atc2__sub-modal-dialog .nf-atc2__sub-modal-btn:focus,
    .nf-atc2__sub-modal-dialog .nf-atc2__sub-modal-btn:focus-visible,
    .nf-atc2__sub-modal-dialog .nf-atc2__sub-modal-btn:active {
        font-size: 14px !important;
        line-height: 1.25 !important;
        padding: 10px 16px !important;
    }
}