@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* Override Astra flex container that breaks product layout */
.site-content .ast-container {
    display: block !important;
    padding: 0 !important;
    max-width: var(--np-site-shell-max-width, 1280px) !important;
    margin: 0 auto !important;
}

.np-product-page {
    --np-bg: #f8f9fa;
    --np-surface: #ffffff;
    --np-text: #111827;
    --np-text-muted: #6b7280;
    --np-border: #e5e7eb;
    --np-accent: #111111;
    --np-accent-hover: #374151;
    --np-success-bg: #dcfce7;
    --np-success-text: #166534;
    --np-shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.05);
    --np-shadow-md: 0 20px 35px -22px rgba(17, 24, 39, 0.28);
    --np-radius-md: 16px;
    --np-radius-lg: 28px;
    --np-transition: all 0.24s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    max-width: var(--np-site-shell-max-width, 1280px);
    margin: 0 auto;
    padding: 8px var(--np-site-shell-gutter, 40px) 72px;
    color: var(--np-text);
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.np-product-page,
.np-product-page * {
    box-sizing: border-box;
}

.np-product-page .np-product-gallery,
.np-product-page .np-product-gallery .woocommerce-product-gallery,
.np-product-page .np-product-summary,
.np-product-page .np-product-summary form.cart {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: none !important;
}

.np-product-page .price,
.np-product-page .woocommerce-Price-amount,
.np-product-page .woocommerce-Price-currencySymbol,
.np-product-page h1,
.np-product-page h2,
.np-product-page h3,
.np-product-page h4,
.np-product-page h5,
.np-product-page h6,
.np-product-page button,
.np-product-page input,
.np-product-page select,
.np-product-page textarea {
    font-family: inherit;
}

.np-product-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.95fr);
    gap: 64px;
    align-items: start;
}

/* Gallery */
.np-product-gallery {
    /* Brukerens onske: produktbildet skal IKKE vaere sticky.
       Tidligere var galleriet (wrapperen) sticky paa desktop og mobil. */
    position: relative;
}

.np-product-gallery-card {
    background: var(--np-surface);
    border: 1px solid var(--np-border);
    border-radius: 32px;
    box-shadow: var(--np-shadow-md);
    padding: 8px;
    overflow: hidden;
}

.np-product-gallery .woocommerce-product-gallery {
    width: 100% !important;
    margin: 0 !important;
    opacity: 1 !important;
    background: transparent !important;
    position: relative;
}

.np-product-gallery .vgs-layout {
    gap: 0 !important;
}

.np-product-gallery .vgs-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.np-product-gallery .vgs-main .woocommerce-product-gallery {
    aspect-ratio: auto !important;
    /* 25% mindre enn parent (480->360, 100vh-256->75vh-192, 648->486)
       — skoler-spesifikt for a fa mer plass til navnepreview/bestilling. */
    height: clamp(360px, calc(75vh - 192px), 486px) !important;
}

.np-product-gallery .vgs-main .woocommerce-product-gallery__wrapper,
.np-product-gallery .vgs-main .woocommerce-product-gallery__image,
.np-product-gallery .vgs-main .woocommerce-product-gallery__image > a {
    height: 100% !important;
}

.np-product-gallery .vgs-main .vgs-controls,
.np-product-gallery > .vgs-controls {
    position: relative !important;
    inset: auto !important;
    margin-top: 12px !important;
    padding: 0 2px !important;
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100%;
}

/* Desktop: .vgs-controls flyttet ut av .np-product-gallery-card via JS,
   placeres som direct child av .np-product-gallery — under det hvite
   kortet, paa side-bakgrunnen. Padding gir luft fra kort-edge. */
@media (min-width: 768px) {
    .np-product-gallery > .vgs-controls {
        margin-top: 16px !important;
        padding: 0 8px !important;
        background: transparent !important;
    }
}

.np-product-gallery .vgs-main .vgs-count {
    margin-top: 0 !important;
    margin-right: 0 !important;
}

.np-product-gallery .woocommerce-product-gallery__wrapper {
    margin: 0;
}

.np-product-gallery .woocommerce-product-gallery__image {
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    overflow: hidden;
    background: transparent;
    /* 25% mindre enn parent (skoler-spesifikt). */
    height: clamp(360px, calc(75vh - 192px), 486px);
}

.np-product-gallery .woocommerce-product-gallery__image a {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 0;
}

.np-product-gallery .woocommerce-product-gallery__image img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center top !important;
    padding: 0 !important;
    border-radius: 20px;
    transform: none !important;
    transition: none !important;
}

.np-product-gallery .woocommerce-product-gallery__trigger {
    top: 18px !important;
    right: 18px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 10px 20px -14px rgba(17, 24, 39, 0.35) !important;
}

.np-product-gallery img.zoomImg,
.np-product-gallery .zoomContainer,
.np-product-gallery .zoomWindow,
.np-product-gallery .zoomWindowContainer {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.np-product-gallery .flex-control-thumbs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(72px, 88px);
    gap: 12px;
    margin-top: 18px;
    padding: 0;
    list-style: none;
}

.np-product-gallery .flex-control-thumbs li {
    width: 100%;
}

.np-product-gallery .flex-control-thumbs li img {
    width: 100%;
    border: 1px solid var(--np-border);
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    opacity: 0.58;
    transition: var(--np-transition);
}

.np-product-gallery .flex-control-thumbs li img.flex-active,
.np-product-gallery .flex-control-thumbs li img:hover {
    opacity: 1;
    border-color: var(--np-text);
    transform: translateY(-2px);
}

/* Summary shell */
.np-product-summary {
    float: none !important;
    width: 100% !important;
    padding-top: 0;
}

.np-product-summary-shell {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.np-product-heading-card {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--np-border);
}

.np-product-breadcrumbs {
    margin-bottom: 24px;
}

.np-product-breadcrumbs .woocommerce-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    color: var(--np-text-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
}

.np-product-breadcrumbs .woocommerce-breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.np-product-breadcrumbs .woocommerce-breadcrumb a:hover {
    color: var(--np-text);
}

.np-breadcrumb-separator {
    color: #c0c6cf;
}

.np-product-brand {
    margin-bottom: 10px;
    color: var(--np-text);
    font-size: 14px;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Manufacturer-logo (NORDIC) — bilde-versjonen som vises over
   produkttittelen. Beholder samme top-spacing som tekst-versjonen,
   men skalerer logoen til en passende stoorrelse. */
.np-product-brand.np-product-brand--logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: none;
    font-style: normal;
    letter-spacing: 0;
}

.np-product-brand.np-product-brand--logo .np-manufacturer-logo {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 85px !important;
    max-height: 32px !important;
    object-fit: contain !important;
}

.np-product-brand.np-product-brand--logo .np-manufacturer-name {
    color: var(--np-text);
    font-size: 14px;
    font-weight: 700;
    font-style: italic;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* .np-product-brand er gjort synlig igjen — bruker onsker NORDIC-label
   over produktnavnet. Pris og pris-badge forblir skjult fordi de
   relocateses andre steder i UI'et av JS. */
.np-product-price-row > .np-product-price,
.np-product-price-row > .np-product-price-badge {
    display: none !important;
}

.np-product-summary .product_title {
    margin: 0;
    color: var(--np-text);
    font-size: clamp(34px, 4vw, 44px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.045em;
}

.np-product-price-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 11px;
}

.np-product-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: var(--np-text);
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
}

.np-product-price ins {
    text-decoration: none;
}

.np-product-price del {
    color: #9ca3af;
    font-size: 18px;
    font-weight: 500;
}

.np-product-price-badge {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--np-success-bg);
    color: var(--np-success-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.np-product-form-shell {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.np-product-page .product_meta,
.np-product-page .single-product-category,
.np-product-page .np-social-proof,
.np-product-page .qty,
.np-product-page .ast-stock-detail,
.np-product-page .woocommerce-variation-price,
.np-product-page .woocommerce-variation-availability,
.np-product-page .custom-desc-under-variations:empty {
    display: none !important;
}

/* Variations form */
.np-product-page form.cart,
.np-product-page form.variations_form {
    width: 100% !important;
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0 !important;
}

.np-product-page form.cart .variations {
    display: block !important;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: visible !important;
    table-layout: auto;
}

.np-product-page form.cart .variations tbody,
.np-product-page form.cart .variations tr,
.np-product-page form.cart .variations th,
.np-product-page form.cart .variations td {
    display: block;
    width: 100%;
    padding: 0 !important;
    margin: 0;
    border: 0 !important;
}

.np-product-page form.cart .variations tr + tr {
    margin-top: 24px;
}

.np-product-page form.cart .variations tr:has(select.np-server-color-select) td.value {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
}

.np-product-page form.cart .variations th {
    margin-bottom: 16px !important;
}

.np-product-page form.cart .variations td {
    overflow: visible;
}

.np-product-page .np-color-label,
.np-product-page .np-designer .np-designer-title {
    display: block !important;
    width: 100%;
    margin: 0 0 12px !important;
    color: var(--np-text-muted) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
}

.np-product-page .np-color-label-name,
.np-product-page .np-size-color-label-name {
    color: var(--np-text) !important;
    font-weight: 700 !important;
}

.np-product-page form.cart .variations tr:has(select.np-server-color-select) th,
.np-product-page form.cart .variations tr:has(select.np-server-size-select) {
    display: none !important;
}

.np-product-page form.cart .variations select.np-server-color-select,
.np-product-page form.cart .variations select.np-server-size-select {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.np-product-page .np-color-swatch-ui {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    order: -1;
    width: 100%;
    gap: 16px;
}

.np-product-page .np-color-swatch-wrapper {
    display: flex !important;
    flex-wrap: wrap;
    gap: 12px !important;
    align-items: center;
}

/* Mobile beholder eksisterende margin: 0 — desktop styres av blokken under */
@media (max-width: 767px) {
    .np-product-page .np-color-swatch-wrapper {
        margin: 0 !important;
    }
}

@media (min-width: 768px) {
    /* 2026-05: html-prefix booster specificity (0,4,3) for å vinne over en
       Customizer/inline-CSS-regel med samme grunnselektor (0,4,2) som setter
       margin-top:2px og margin-bottom:-22px!important. Alle verdier får
       !important slik at min regel uansett tar prioritet.
       :not(--server) ekskluderer server-rendret duplikat — den skal forbli
       skjult av eksisterende html.np-product-variation-enhanced ...--server-
       regel (display:none!important). */
    html .woocommerce-js div.product form.cart .variations .np-color-swatch-wrapper:not(.np-color-swatch-wrapper--server) {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 7px !important;
        align-items: center !important;
        margin-top: 13px !important;
        margin-bottom: 0px !important;
        overflow: visible !important;
    }
}

.np-product-page .np-color-swatch-wrapper a.np-color-swatch {
    display: block;
    text-decoration: none !important;
}

html.np-product-variation-enhanced .np-product-page .np-color-swatch-wrapper--server,
html.np-product-variation-enhanced .np-product-page .np-size-swatch-wrapper--server {
    display: none !important;
}

.np-product-page .np-color-swatch {
    width: 36px !important;
    height: 36px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(17, 24, 39, 0.12) !important;
    box-shadow: none !important;
    transition: var(--np-transition) !important;
}

.np-product-page .np-color-swatch:hover {
    transform: scale(1.08);
    border-color: rgba(17, 24, 39, 0.35) !important;
}

.np-product-page .np-color-swatch.is-active {
    border-color: transparent !important;
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px #111827 !important;
}

.np-product-page .np-color-swatch.is-active::after {
    display: none !important;
}

.np-product-page .single_variation_wrap {
    min-height: 0 !important;
}

.np-product-page .wapf-product-totals {
    margin: 0 !important;
    margin-top: 18px !important;
}

.np-product-page .wapf-product-totals .np-cart-summary {
    gap: 14px !important;
    margin: 0 !important;
    padding: 18px 0 0 !important;
    border-top: 1px solid var(--np-border) !important;
    border-bottom: 0 !important;
}

.np-product-page .wapf-product-totals .np-summary-title,
.np-product-page .wapf-product-totals .np-summary-total-label {
    color: var(--np-text);
    font-size: 15px !important;
    font-weight: 600;
}

.np-product-page .wapf-product-totals .np-summary-total-note,
.np-product-page .wapf-product-totals .np-qty-info {
    color: var(--np-text-muted);
    font-size: 13px !important;
}

.np-product-page .wapf-product-totals .np-summary-toggle {
    color: var(--np-text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Designer card */
.np-product-page .np-designer.np-designer-2col {
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.np-product-page .np-designer-col-left {
    display: none !important;
}

.np-product-page form.cart .wapf-field-container.wapf-field-file,
.np-product-page form.cart .wapf-field.wapf-field-file {
    display: none !important;
}

.np-product-page form.cart .np-designer-upload-slot .wapf-field-container.wapf-field-file,
.np-product-page form.cart .np-designer-upload-slot .wapf-field.wapf-field-file {
    display: block !important;
    margin: 0 !important;
}

.np-product-page .np-designer-col-right.design-studio-card {
    padding: 24px !important;
    border-radius: 24px !important;
    border: 1px solid var(--np-border) !important;
    background: var(--np-surface) !important;
    box-shadow: var(--np-shadow-sm) !important;
}

.np-product-page .np-designer .np-designer-title {
    margin: 0 0 20px !important;
}

.np-product-page .np-designer .np-designer-tabs {
    display: flex;
    gap: 20px !important;
    margin: 6px 0 20px !important;
    padding: 0 !important;
    border-bottom: 1px solid var(--np-border) !important;
}

.np-product-page .np-designer .np-designer-tab {
    min-height: 0 !important;
    margin-bottom: -1px !important;
    padding: 12px 0 !important;
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--np-text-muted) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.np-product-page .np-designer .np-designer-tab:hover {
    color: var(--np-text) !important;
}

.np-product-page .np-designer .np-designer-tab.is-active {
    color: var(--np-text) !important;
    background: transparent !important;
    border-bottom-color: var(--np-text) !important;
}

.np-product-page .np-designer-upload-slot {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
}

.np-product-page .np-designer-panel.is-active,
.np-product-page .np-designer-panel.is-active[data-location="front"],
.np-product-page .np-designer-panel.is-active[data-location="logo_front"],
.np-product-page .np-designer-panel.is-active[data-location="logo_bak"],
.np-product-page .np-designer-panel.is-active[data-location="logo_back"],
.np-product-page .np-designer-panel.is-active[data-location="logo_hette"],
.np-product-page .np-designer-panel.is-active[data-location="logo_hood"] {
    display: block !important;
    grid-template-columns: none !important;
    gap: 0 !important;
}

.np-product-page .np-designer-panel.is-active > .np-designer-upload-slot {
    width: 100%;
    margin-bottom: 12px;
}

.np-product-page form.cart .np-designer-upload-slot > .wapf-field-container.wapf-field-file,
.np-product-page form.cart .np-designer-upload-slot > .wapf-field.wapf-field-file,
.np-product-page .np-designer-upload-slot > .wapf-field-container.wapf-field-file {
    display: none !important;
}

.np-product-page .np-designer-upload-slot > .np-designer-upload-trigger,
.np-product-page .np-designer-upload-slot > .np-designer-add-elements-btn {
    min-width: 0;
}

.np-product-page .np-designer-upload-slot > .np-designer-text-tool {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0 !important;
}

.np-product-page .np-designer .np-designer-action-row,
.np-product-page .np-designer .np-designer-action-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
}

.np-product-page .np-designer .np-designer-action-row .np-designer-ai-tools {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

.np-product-page .np-designer .np-designer-action-row .np-designer-ai-btn {
    width: 100% !important;
    min-height: 56px !important;
    height: auto !important;
    padding: 16px !important;
}

.np-product-page .np-designer .js-designer-action-btn,
.np-product-page .np-designer .wapf-field-container.js-designer-action-btn .wapf-field-label,
.np-product-page .np-designer .np-designer-add-elements-btn {
    min-height: 56px !important;
    padding: 16px !important;
    border: 1px solid var(--np-border) !important;
    border-radius: var(--np-radius-md) !important;
    background: var(--np-surface) !important;
    box-shadow: none !important;
    color: var(--np-text) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    gap: 10px !important;
    width: 100% !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.np-product-page .np-designer .js-designer-action-btn:hover,
.np-product-page .np-designer .wapf-field-container.js-designer-action-btn .wapf-field-label:hover,
.np-product-page .np-designer .np-designer-add-elements-btn:hover {
    border-color: var(--np-text) !important;
    background: #f9fafb !important;
    box-shadow: 0 12px 24px -22px rgba(17, 24, 39, 0.45) !important;
}

.np-product-page .np-designer .ai-btn {
    background: linear-gradient(135deg, #f3e8ff 0%, #e0e7ff 100%) !important;
    border-color: #d8b4fe !important;
    color: #4c1d95 !important;
}

.np-product-page .np-designer .ai-btn:hover {
    border-color: #c084fc !important;
}

.np-product-page .np-designer .action-btn-icon {
    flex: 0 0 20px;
    width: 20px !important;
    height: 20px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 20px 20px !important;
}

.np-product-page .np-designer .np-designer-upload-trigger span:last-child {
    display: inline-block;
}

.np-product-page .np-designer .np-designer-add-elements-btn::after,
.np-product-page .np-designer .np-designer-ai-btn::after {
    margin-left: 0 !important;
}

/* Size section */
.np-product-page .np-before-cart-variants {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0 !important;
}

@media (min-width: 768px) {
    .np-product-page .np-before-cart-variants {
        gap: 0px;
    }
}

.np-product-page .np-size-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.np-product-page .sizeguide-heading,
.np-product-page .sizeguide-heading a {
    margin: 0 !important;
}

.np-product-page .sizeguide-heading a {
    display: inline-flex !important;
    align-items: center;
    gap: 6px !important;
    color: var(--np-text-muted) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

.np-product-page .np-size-color-label {
    margin: 0 0 12px !important;
    color: var(--np-text-muted) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.np-product-page .np-size-swatches-target {
    padding-right: 0 !important;
}

.np-product-page .np-size-swatch-wrapper {
    display: flex !important;
    flex-wrap: wrap;
    gap: 10px !important;
    width: 100% !important;
    margin-top: 10px !important;
}

.np-product-page .np-size-swatch {
    min-width: 52px;
    min-height: 52px;
    padding: 0 12px !important;
    border: 1px solid var(--np-border) !important;
    border-radius: var(--np-radius-md) !important;
    background: var(--np-surface) !important;
    color: var(--np-text) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    transition: var(--np-transition) !important;
}

.np-product-page .np-size-swatch:hover {
    border-color: var(--np-text) !important;
}

.np-product-page .np-size-swatch.is-active {
    /* Samme blafarge som "Legg til handlekurv"-knappen (#1d3557). */
    background: #1d3557 !important;
    border-color: #1d3557 !important;
    color: #ffffff !important;
}

.np-product-page .np-size-swatch.is-disabled {
    opacity: 1 !important;
    background: #f6f7f8 !important;
    border-color: #e6e7eb !important;
    color: #afb6bf !important;
}

.np-product-page .np-size-swatch.is-disabled::after {
    left: 10px;
    right: 10px;
    background: #98a2b3;
}

.np-product-page .np-size-bulk-toggle {
    display: none !important;
}

.np-product-page .np-size-swatches-target {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.np-product-page .np-size-bulk-grid {
    width: 100%;
    display: flex !important;
    flex-direction: column;
    align-items: stretch !important;
    gap: 10px;
}

.np-product-page .np-size-bulk-grid .np-size-bulk-note {
    width: 100%;
    margin-top: 2px;
    color: var(--np-text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.np-product-page .np-bulk-enabled .np-size-swatches-target > .np-size-swatch-wrapper,
.np-product-page .np-bulk-enabled .np-size-swatches-target > .np-size-bulk-grid > .np-size-bulk-wrapper,
.np-product-page .np-bulk-enabled .np-size-swatches-target > .np-size-bulk-grid > .np-size-bulk-wrapper.is-active {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
    gap: 10px !important;
    width: 100% !important;
    margin: 0 !important;
}

.np-product-page .np-bulk-enabled .np-size-swatches-target > .np-size-swatch-wrapper .np-size-swatch,
.np-product-page .np-bulk-enabled .np-size-swatches-target > .np-size-bulk-grid > .np-size-bulk-wrapper .np-size-bulk-input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

.np-product-page .np-bulk-enabled .np-size-swatches-target > .np-size-swatch-wrapper .np-size-cell > .np-size-swatch {
    min-height: 48px !important;
    height: 48px !important;
    border: 0 !important;
    border-radius: 0 !important;
    pointer-events: none;
    cursor: default;
}

.np-product-page .np-bulk-enabled .np-size-swatches-target > .np-size-swatch-wrapper .np-size-cell > .np-size-bulk-input {
    height: 46px !important;
    border: 0 !important;
    border-top: 1px solid #bdbdbd !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.np-product-page .np-designer-upload-library {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid var(--np-border);
    border-radius: 14px;
    background: var(--np-surface) !important;
}

.np-product-page .np-designer-upload-library-items {
    grid-template-columns: repeat(auto-fit, minmax(72px, 72px));
}

.np-product-page .np-designer-upload-library-item {
    padding: 8px;
    border-radius: 10px;
}

.np-product-page .np-designer-upload-library-item img,
.np-product-page .np-designer-upload-library-badge {
    height: 56px;
}

/* Add to cart + trust */
.np-product-page .single_add_to_cart_button {
    width: 100% !important;
    margin: 0 !important;
    padding: 20px 24px !important;
    border: 0 !important;
    border-radius: var(--np-radius-md) !important;
    background: var(--np-accent) !important;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
    box-shadow: 0 18px 30px -22px rgba(17, 24, 39, 0.68) !important;
    transition: var(--np-transition) !important;
}

.np-product-page .single_add_to_cart_button:hover {
    background: var(--np-accent-hover) !important;
    transform: translateY(-2px);
}

.np-product-page .single_add_to_cart_button:active {
    transform: translateY(0);
}

/* Disabled state — vises mens ingen størrelse er valgt ("Velg størrelse").
   JS legger til .np-no-size-selected + disabled-attributt på knappen. */
.np-product-page .single_add_to_cart_button.np-no-size-selected,
.np-product-page .single_add_to_cart_button[disabled],
.np-product-page .single_add_to_cart_button.np-no-size-selected:hover {
    background: #d1d5db !important;
    color: #6b7280 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    transform: none !important;
    pointer-events: auto;
}

/* Accordions */
.np-product-page .woocommerce-product-details__short-description {
    display: none;
}

.np-product-page .np-product-desc,
.np-product-page .np-product-accordion {
    margin: 0;
    border-top: 1px solid var(--np-border);
    border-bottom: 1px solid var(--np-border);
    background: transparent;
}

.np-product-page .np-product-accordion {
    margin-top: -1px;
}

/* Unified accordion-toggle: samme spacing/font for begge accordions
   (Produkt beskrivelse + Stoff & Materialer). !important brukes for
   å overstyre eldre regler i legacy-produkt-template-core-part-001. */
.np-product-page .np-product-desc-toggle,
.np-product-page .np-product-accordion > summary {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
    padding: 24px 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--np-text) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    cursor: pointer;
    list-style: none;
}

.np-product-page .np-product-desc-title,
.np-product-page .np-product-accordion-title {
    font-size: inherit;
    font-weight: inherit;
}

/* Felles arrow-ikon for begge accordion-toggles. Default ned (lukket),
   roterer 180° til opp når åpen. */
.np-product-page .np-product-desc-icon,
.np-product-page .np-product-accordion-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    fill: currentColor;
    transform: rotate(0deg);
    transition: var(--np-transition);
}

.np-product-page .np-product-desc.is-open .np-product-desc-icon,
.np-product-page .np-product-desc-toggle[aria-expanded="true"] .np-product-desc-icon,
.np-product-page .np-product-accordion[open] > summary .np-product-accordion-icon {
    transform: rotate(180deg);
}

@media (min-width: 768px) {
    /* 2026-05: Bruker .np-product-page-prefix for å matche specificity (0,2,0)
       med dominerende regel '.np-product-page .np-product-desc, .np-product-
       page .np-product-accordion { margin:0; border-top+bottom var(--np-
       border); ...}' som ellers vinner. Cascade-rekkefølge: min regel kommer
       senere i CSS-filen → vinner ved lik specificity. */
    .np-product-page .np-product-desc {
        margin-bottom: 24px !important;
        padding-bottom: 2px !important;
        border-bottom: 1px solid #e5e5e5 !important;
    }
}

.np-product-page .np-product-desc .woocommerce-product-details__short-description {
    display: none;
    padding: 0 0 24px;
    color: var(--np-text-muted);
    font-size: 14px;
    line-height: 1.75;
}

.np-product-page .np-product-desc.is-open .woocommerce-product-details__short-description {
    display: block;
}

.np-product-page .np-product-desc .woocommerce-product-details__short-description > *:first-child,
.np-product-page .np-product-accordion-body > *:first-child {
    margin-top: 0;
}

.np-product-page .np-product-desc .woocommerce-product-details__short-description > *:last-child,
.np-product-page .np-product-accordion-body > *:last-child {
    margin-bottom: 0;
}

.np-product-page .np-product-accordion > summary::-webkit-details-marker {
    display: none;
}

/* Ingen ::after-ikon på materials-summary lenger — bruker SVG i markup. */
.np-product-page .np-product-accordion > summary::after {
    content: none;
}

.np-product-page .np-product-accordion-body {
    padding: 0 0 24px;
}

.np-product-page .np-product-accordion-body p {
    margin: 0;
    color: var(--np-text-muted);
    font-size: 14px;
    line-height: 1.75;
}

/* Fallbacks */
.np-product-page .woocommerce-tabs,
.np-product-page .up-sells,
.np-product-page .upsells,
.np-product-page .related.products {
    display: none !important;
}

.np-product-page .np-related-slider {
    margin-top: 0;
    margin-bottom: 60px;
    padding-top: 10px;
    /* border-top: 1px solid var(--np-border); */
}

body.single-product .related.products > h2 {
    margin: 60px 102px 5px 0 !important;
    padding-left: 15px !important;
}

.np-product-page .np-related-slider .np-slider-img img {
    box-shadow: none !important;
}

/* Sticker product */
.np-product-page:has(.np-sticker-form) {
    max-width: none;
    padding: 32px 40px 60px;
}

.np-product-page:has(.np-sticker-form) .np-product-layout {
    grid-template-columns: 1fr;
}

.np-product-page:has(.np-sticker-form) .np-product-gallery {
    display: none;
}

/* Responsive */
@media (max-width: 1100px) {
    .np-product-page {
        padding: 28px 24px 56px;
    }

    .np-product-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .np-product-gallery {
        position: relative;
        z-index: 5;
    }
}

@media (max-width: 767px) {
    .np-product-page {
        padding: 0px 14px 40px;
    }

    .np-product-layout {
        gap: 0px;
    }

    /* Brukerens onske: produktbildet skal IKKE vaere sticky.
       Tidligere stivnet galleriet ved top:61 mens form.cart scrollet
       forbi. Naa er hele siden i normal flow.
       z-index:5 beholdes saa wrapperen fortsatt vinner over form.cart
       sin stacking-kontekst (den har will-change:opacity).
       margin: 16px 0 0 0 → finjustert beige body-bakgrunn-ramme. */
    .np-product-gallery {
        margin: 16px 0 0 0;
        position: relative;
        z-index: 5;
        background: #fff;
        border-radius: 16px;
    }

    /* Når actions-wrapper er satt som visuell forlengelse rett etter
       galleriet, fjern bunnradius på galleri så de smelter sammen.
       :has() støttes av iOS Safari 15.4+/Chrome 105+; fallback er bare
       at galleri har full radius — ingenting kritisk. */
    .np-product-gallery:has(+ .np-designer-mobile-actions--as-extension) {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    /* variation-images-refactor sender ut .vgs-main {width:100vw; margin:calc(50%-50vw)}
       på mobil for å gi WC product-gallery full viewport-bredde. Det
       gjør at innholdet i vårt galleri ekspanderer ut til venstre kant
       og asymmetrisk dekker den beige rammen. Override scoped kun til
       .np-product-gallery: hold .vgs-main innenfor galleri-wrapperen. */
    body.single-product .np-product-gallery .vgs-main,
    body.single-product .np-product-gallery .woocommerce-product-gallery {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .np-product-gallery-card {
        padding: 8px;
        /* Brukerens onske: card-bredde lik form-elementene under
           (color/size/navn). De er paa page-padding (14px fra kant),
           saa card med margin:0 alignet seg paa samme x-posisjon. */
        margin: 0;
        background: var(--np-surface);
        border: 1px solid var(--np-border);
        border-radius: 24px;
        box-shadow: var(--np-shadow-md);
    }

    /* Skjul .vgs-controls som er INNI .np-product-gallery-card (det hvite
       kortet) — JS-en (consolidate) flytter den ekte noden ut til a vaere
       direct child av .np-product-gallery (utenfor card). Hvis JS ikke har
       kjort ennaa, skjules den inne i kortet via denne regelen.
       Bumpet specificity med body.single-product-prefix for a beat
       sent-injiserte rules fra variation-images-refactor's wp_footer-CSS. */
    body.single-product .np-product-gallery .np-product-gallery-card .vgs-controls {
        display: none !important;
    }
    /* Den consolidate'ede .vgs-controls (direct child av .np-product-gallery)
       skal vises pa mobil — placeres under det hvite kortet.
       Brukerspesifiserte verdier. */
    body.single-product .np-product-gallery > .vgs-controls {
        display: flex !important;
        align-items: center !important;
        gap: 0px !important;
        width: calc(94% - 0px) !important;
        margin: 14px 4px 19px !important;
        padding: 0 !important;
        background: transparent !important;
        position: relative !important;
        inset: auto !important;
    }
    body.single-product .np-product-gallery > .vgs-controls .vgs-count {
        font-size: 12px !important;
        min-width: 35px !important;
        color: #111 !important;
        line-height: 1 !important;
        margin: 0px 0px 0px 9px !important;
    }
    body.single-product .np-product-gallery > .vgs-controls .vgs-swipebar {
        flex: 1 1 auto !important;
        height: 6px !important;
        position: relative !important;
        margin: 0 !important;
    }
    /* Cleanup gammel mirror-node hvis fortsatt i DOM (cache) */
    .np-product-gallery-controls-mirror {
        display: none !important;
    }

    /* Speil-container utenfor sticky-galleriet. Plasseres i normal flow
       som sosken til galleriet, sa den scroller med siden.
       margin-top:10px gir luft mellom bildet og speil-controls.
       Horisontalt: ingen margin → matcher layout-edge (samme
       venstre-justering som summary-elementene under). */
    .np-product-gallery-controls-mirror {
        margin: 10px 0 10px 0;
        padding: 0;
    }

    .np-product-gallery-controls-mirror .vgs-controls {
        display: flex !important;
        align-items: center;
        gap: 10px;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .np-product-gallery-controls-mirror .vgs-count {
        display: block !important;
        font-size: 12px;
        min-width: 34px;
        color: #111;
        flex: 0 0 auto;
        margin: 0;
        line-height: 1;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .np-product-gallery-controls-mirror .vgs-swipebar {
        display: block !important;
        flex: 1 1 auto;
        height: 6px;
        margin: 0;
        position: relative;
    }

    .np-product-gallery-controls-mirror .vgs-swipebar.is-hidden {
        display: none !important;
    }

    .np-product-gallery-controls-mirror .vgs-swipebar-track {
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 2px;
        background: #e5e5e5;
        transform: translateY(-50%);
        border-radius: 999px;
    }

    .np-product-gallery-controls-mirror .vgs-swipebar-indicator {
        position: absolute;
        top: 50%;
        left: 0;
        height: 2px;
        background: #111;
        transform: translateY(-50%);
        border-radius: 999px;
        transition: left .2s ease, width .2s ease;
    }

    .np-product-breadcrumbs {
        display: none;
    }

    /* Bildeområdet på mobil — fast høyde, 20% mindre enn rest-størrelse.
       Tidligere var det en JS-drevet kontinuerlig shrink (100% → 75%)
       basert på scroll-posisjon, men dette fungerte ikke optimalt og
       ble fjernet. Nå er det en fast 80% av (60vh - 80px) for å gi
       mer plass til produkt-info under bildet. Overstyr
       height:auto !important fra produkt-template-refactor. */
    body.single-product .np-product-gallery .woocommerce-product-gallery,
    body.single-product .np-product-gallery .woocommerce-product-gallery__wrapper,
    body.single-product .np-product-gallery .woocommerce-product-gallery__image,
    body.single-product .np-product-gallery .woocommerce-product-gallery__image a {
        /* 25% mindre enn parent: 480 -> 360px. Fast piksel-verdi for
           stabil storrelse paa mobil — vh/svh kunne flickere pga
           VGS-pluginens aspect-ratio. aspect-ratio:auto her tvinger
           min height til a vinne. */
        height: 360px !important;
        max-height: 360px !important;
        min-height: 360px !important;
        aspect-ratio: auto !important;
    }

    body.single-product .np-product-gallery .woocommerce-product-gallery__image img,
    body.single-product .np-product-gallery img.wp-post-image {
        width: 100% !important;
        height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
    }

    .np-product-summary-shell {
        gap: 0px;
    }

    .np-product-heading-card {
        padding-bottom: 20px;
    }

    .np-product-breadcrumbs {
        margin-bottom: 18px;
    }

    .np-product-summary .product_title {
        font-size: 23px;
    }

    /* Vis produktpris UNDER tittel paa mobil. Pa desktop er prisen
       relocated til en annen plass via JS, men paa mobil skal den
       ligge rett under <h1 class="product_title"> i template-flow. */
    .np-product-page .np-product-price-row {
        display: flex !important;
        align-items: flex-start;
        flex-direction: column;
        margin-top: 8px;
    }
    .np-product-page .np-product-price-row > .np-product-price {
        display: block !important;
        font-size: 22px;
        font-weight: 700;
        color: var(--np-text);
    }
    .np-product-page .np-product-price-row > .np-product-price-badge {
        display: inline-block !important;
    }

    /* WAPF totals — kompakt paa mobil.
       Bruker !important fordi seg-001.php (variation-pricing-fixes)
       definerer samme selektor uten media query med 30px/-15px,
       og den lastes etter denne CSS-fila i cascade. */
    .wapf-product-totals .wapf--inner {
        padding: 0 !important;
        margin-top: -15px !important;
        margin-bottom: 21px !important;
    }

    .np-pd2-trigger-wrap,
    .np-pd2-trigger.np-pd2-bar {
        width: 100% !important;
    }

    .np-pd2-trigger.np-pd2-bar {
        padding: 8px 15px !important;
    }

    .np-product-price {
        font-size: 26px;
    }

    .np-product-page form.cart,
    .np-product-page form.variations_form {
        gap: 20px;
    }

    .np-product-page .np-designer-col-right.design-studio-card {
        padding: 20px !important;
        border-radius: 20px !important;
    }

    /* WAPF-pluginen setter margin-left:-5px på .wapf-wrapper, som forskyver
       hele designer-treet 5px til venstre på mobil. Override så designer-
       cardet (og dets barn) sentreres innenfor produkt-page-padding. */
    .np-product-page .wapf-wrapper {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .np-product-page .np-designer .np-designer-tabs {
        gap: 16px !important;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .np-product-page .np-designer .np-designer-tabs::-webkit-scrollbar {
        display: none;
    }

    .np-product-page .np-size-heading-row {
        align-items: flex-start;
        flex-direction: column;
    }

    /* Storrelser pa mobil: alle 7 (XXS XS S M L XL XXL) pa en linje.
       Bredere/firkantet design — gap 3px i stedet for 6, ingen min-width
       sa grid 1fr fyller plass jevnt. Hoyde 46px og full bredde gir
       et firkantet uttrykk i stedet for hoy-smale-rektangler. */
    .np-product-page .np-size-swatch-wrapper {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 3px !important;
    }

    .np-product-page .np-size-swatch {
        min-width: 0 !important;
        min-height: 46px !important;
        padding: 0 2px !important;
        font-size: 14px !important;
        width: 100% !important;
    }

    .np-product-page .np-bulk-enabled .np-size-swatches-target > .np-size-swatch-wrapper,
    .np-product-page .np-bulk-enabled .np-size-swatches-target > .np-size-bulk-grid > .np-size-bulk-wrapper,
    .np-product-page .np-bulk-enabled .np-size-swatches-target > .np-size-bulk-grid > .np-size-bulk-wrapper.is-active {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 3px !important;
    }

}

@media (max-width: 560px) {
    .np-product-page .np-product-price-row {
        align-items: flex-start;
        flex-direction: column;
    }

    /* Pa veldig smale skjermer (<400px) holder vi 7 kolonner — gap=3px
       og min-width:0 gjor at de tilpasser seg den minste tilgjengelige
       bredden uten at noe overflyter. */
    .np-product-page .np-size-swatch-wrapper {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .np-product-page .np-bulk-enabled .np-size-swatches-target > .np-size-swatch-wrapper,
    .np-product-page .np-bulk-enabled .np-size-swatches-target > .np-size-bulk-grid > .np-size-bulk-wrapper,
    .np-product-page .np-bulk-enabled .np-size-swatches-target > .np-size-bulk-grid > .np-size-bulk-wrapper.is-active {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .np-product-page .single_add_to_cart_button {
        padding: 18px 20px !important;
    }

    .np-product-page .np-designer-upload-slot,
    .np-product-page .np-designer .np-designer-action-row,
    .np-product-page .np-designer .np-designer-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .np-product-page .flex-control-thumbs {
        overflow-x: auto;
        padding-bottom: 4px;
    }
}

/* 2026-05: nye regler — bulk-color wrap, woocommerce select-padding, input-height (cache-bust v2) */
.np-bulk-color-select-wrap {
    display: none;
    margin-top: 0px;
    position: relative;
}

.woocommerce .select2-container .select2-selection--single,
.woocommerce select,
.woocommerce-page .select2-container .select2-selection--single,
.woocommerce-page select {
    padding: 0px 38px 0px 15px;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="reset"],
input[type="tel"],
input[type="date"],
select {
    height: 48px;
}

/* 2026-05: produktside body-bakgrunn — match /skoleklaer/ (#fdfcf9) */
body.single-product {
    background-color: #fdfcf9;
}