/* ============================================================ DIGIPOS THEME — FASHION-STIL, FOUNDATION-LAG ============================================================ Alt i denne filen er scopet under body.dp-style-fashion. Ingenting her skal noensinne kunne påvirke Standard — det finnes ingen regel i denne filen uten den prefiksen. Strategi: temaets eksisterende komponent-CSS (theme.css) leser nesten utelukkende farge/radius/skygge/font via CSS custom properties (var(--radius), var(--color-text) osv.), ikke hardkodede verdier. Ved å redefinere DE SAMME token-navnene — kun innenfor body.dp-style-fashion-selektoren — arver eksisterende komponenter automatisk Fashion sitt formspråk uten at markup må endres. Custom properties er scopet til DOM-treet: en side med matcher aldri denne selektoren og er derfor upåvirket, uansett hvor mange regler som legges til her. Kundens merkevarefarge (--color-primary/--color-secondary) røres IKKE — den er fortsatt source of truth og brukes videre som aksent, se "Aksent"-seksjonen under. ============================================================ */ body.dp-style-fashion { /* ── Nøytrale — varm papir-palett fra designhandoff ── */ --color-bg: #F6F3EC; --color-bg-2: #EEE8DD; --color-bg-3: #E4DBCA; --color-surface: #FDFCF9; --color-border: #DDD6C7; /* ── Tekst ── */ --color-text: #1C1A15; --color-muted: #6B6558; --color-text-muted: #6B6558; --color-text-subtle: #A39D8D; --color-dark: #1C1A15; /* ── Typografi — serif display for overskrifter, samme sans-stack for brødtekst ── */ --font-heading: 'Libre Caslon Text', Georgia, 'Times New Roman', serif; /* ── Radius — harde kanter er bevisst del av uttrykket. --radius-full (999px) røres ikke: den brukes til genuint runde elementer (fargesirkler, antall-badge), som skal forbli runde. ── */ --radius-sm: 0px; --radius: 0px; --radius-lg: 0px; --radius-xl: 0px; --radius-2xl: 0px; /* ── Skygger — flate kort/bilder uten skygge; kun myk skygge på drawers/overlays (--shadow-lg) for å skille dem fra bakgrunnen ── */ --shadow-sm: none; --shadow: none; --shadow-lg: 0 24px 48px rgba(28,26,21,.15); /* ── Nye Fashion-only tokens (ingen kollisjon — brukes ikke av Standard) ── */ --color-accent: var(--color-primary); --tracking-eyebrow: .1em; --text-display: clamp(3rem, 6vw, 5.25rem); /* ── Container philosophy v2 — Gymshark-referanse (2026-08-24): bredden skal fylles ut, ikke stå med luft i kantene. Bredere maks-bredde enn Standard sin 1280px (merkbart på store skjermer) + smalere sidemarg enn v1 (var stedet ~48px, kjentes for "innrykket" sammenlignet med referansen). ── */ --container-max: 1680px; } body.dp-style-fashion .dp-container { padding: 0 24px; } @media (max-width: 768px) { body.dp-style-fashion .dp-container { padding: 0 16px; } } /* ── Knapper — primærknapp bruker nøytral ink, ikke aksentfargen (matcher handoff: aksent er forbeholdt salgspris/badges/aktive filtre, ikke store flater — «ikke overbrukes») ── */ body.dp-style-fashion .dp-btn { text-transform: uppercase; letter-spacing: .04em; font-weight: 600; } body.dp-style-fashion .dp-btn-primary { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); } body.dp-style-fashion .dp-btn-primary:hover { background: var(--color-dark); border-color: var(--color-dark); } body.dp-style-fashion .dp-btn-secondary, body.dp-style-fashion .dp-btn-outline { color: var(--color-text); border-color: var(--color-text); } body.dp-style-fashion .dp-btn-secondary:hover, body.dp-style-fashion .dp-btn-outline:hover { background: var(--color-text); color: var(--color-bg); } /* ============================================================ HEADER / NAVIGASJON (FASE 3) ============================================================ Header-markup gjenbruker $dp_render_toggle/_nav/_logo/_actions — samme closures, data og JS-hooks som Standard (se header.php, dp_is_style('fashion')-grenen). Alt under er ren restyling. ── */ /* --dp-header-height styrer KUN selve nav-raden (.dp-header__inner under), ikke announcement-baren over den — .dp-header sin egen høyde er "auto" og summerer de to. Feil sett tidligere: .dp-header hadde en FAST høyde på 88px mens announce-bar (39px) + nav-rad (100% av 88px) til sammen ble 126px — nav-raden fløt 38px utenfor headerens bakgrunn og lå rått over hero-bildet uten bakgrunn bak seg ("headeren avsluttes for tidlig"). */ body.dp-style-fashion .dp-header { --dp-header-height: 88px; --dp-header-height-scrolled: 64px; --dp-header-shadow: none; height: auto; border-bottom: 1px solid var(--color-border); } body.dp-style-fashion .dp-header.scrolled { box-shadow: 0 1px 0 var(--color-border); } /* Announcement bar — mørk stripe, sentrert, over selve headeren */ body.dp-style-fashion .dp-fashion-announce { background: var(--color-text); color: var(--color-bg); text-align: center; font-size: 12px; letter-spacing: .02em; padding: 10px var(--space-4); } /* 3-delt rad: nav venstre · logo midtstilt · actions høyre — samme grid-oppskrift som header_variant=centered allerede bruker internt, kun anvendt på Fashion sin egen .dp-header__inner. Egen eksplisitt høyde (ikke arvet 100% av .dp-header, som nå er auto). */ body.dp-style-fashion .dp-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--dp-header-height); } body.dp-style-fashion .dp-nav--left { justify-self: start; } body.dp-style-fashion .dp-header__inner > .dp-logo { justify-self: center; } body.dp-style-fashion .dp-header__actions { justify-self: end; } @media (max-width: 768px) { /* Handoff: 58px mobilheader, ikke samme 88px som desktop */ body.dp-style-fashion .dp-header__inner { height: 58px; } } /* Logo — serif, luftig sporing, ingen merkevarefarge (nøytral ink) */ body.dp-style-fashion .dp-logo { font-size: 26px; font-weight: 400; letter-spacing: .04em; color: var(--color-text); } body.dp-style-fashion .dp-logo img { height: 30px; } /* Nav-lenker — mer luft, uppercase, aksent kun ved hover/aktiv */ body.dp-style-fashion .dp-nav > ul { gap: var(--space-6); } body.dp-style-fashion .dp-nav a { padding: var(--space-2) 0; font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text); border-radius: 0; } body.dp-style-fashion .dp-nav > ul > li > a:hover, body.dp-style-fashion .dp-nav .current-menu-item > a { color: var(--color-accent); background: none; } /* Dropdown/mega-meny — flatt, skarpt, serif kategorinavn. Kun tekstkolonnen fra designhandoffens mega-panel er bygget her — det store redaksjonelle bildet ved siden av er bevisst utelatt i denne fasen (krever en ny innholdskilde/theme_mod), se sluttrapport. */ body.dp-style-fashion .dp-dropdown, body.dp-style-fashion .dp-mega { border-radius: 0; box-shadow: var(--shadow-lg); border-color: var(--color-border); } body.dp-style-fashion .dp-mega__grid { grid-template-columns: 1fr; max-width: 280px; gap: 0; } body.dp-style-fashion .dp-mega__grid li a, body.dp-style-fashion .dp-dropdown li a { font-family: var(--font-heading); font-size: 14px; font-weight: 400; text-transform: none; letter-spacing: normal; padding: 10px 4px; border-radius: 0; } body.dp-style-fashion .dp-mega__header a { font-family: var(--font-heading); font-size: 18px; } /* Actions — ikon-only søk/konto/kurv, ingen fylte pill-knapper */ body.dp-style-fashion .dp-header__actions .dp-search-wrap .dp-search-trigger { display: none; } /* 44px tap-target på alle bredder (MOBILE.md §1) — width/height satt eksplisitt her i stedet for kun på desktop, siden mobile.css sin egen 44px-regel for .dp-search-toggle ellers ville blitt overstyrt av en mer spesifikk, desktop-ment regel på alle skjermstørrelser. */ body.dp-style-fashion .dp-header__actions .dp-search-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--color-text); } body.dp-style-fashion .dp-cart-wrap { position: relative; } body.dp-style-fashion .dp-cart-btn { background: none; color: var(--color-text); width: 44px; height: 44px; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 0; } body.dp-style-fashion .dp-cart-btn:hover { background: var(--color-bg-2); } body.dp-style-fashion .dp-cart-count { position: absolute; top: -2px; right: -2px; min-width: 16px; height: 16px; font-size: 9px; background: var(--color-accent); color: #fff; pointer-events: none; } /* ============================================================ FORSIDE (FASE 4) ============================================================ front-page-fashion.php gjenbruker SAMME data/moduler som front-page.php (dp_sections, dp_carousels, dp_featured_categories, samt hero-, hero_banner- og about-theme_mods). Merker/promo/hero-banner/ karuseller/om oss er uendret markup fra Standard — de arver allerede det meste via token-cascaden fra FASE 2 og trenger kun små, målrettede fikser her (radius/farge som ikke er tokenisert i theme.css). Hero/kategorier/USP har egen ny markup (klasseprefiks dp-fh-). ── */ /* Hero */ body.dp-style-fashion .dp-fh-hero { position: relative; height: 90vh; min-height: 520px; display: flex; align-items: flex-end; overflow: hidden; background: var(--color-bg-2); } body.dp-style-fashion .dp-fh-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; } body.dp-style-fashion .dp-fh-hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(28,26,21,.55) 0%, rgba(28,26,21,.05) 45%, transparent 70%); } body.dp-style-fashion .dp-fh-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } body.dp-style-fashion .dp-fh-hero__content { position: relative; z-index: 1; padding-bottom: 64px; max-width: 620px; } body.dp-style-fashion .dp-fh-hero__eyebrow { font-size: 11px; font-family: var(--font-body); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: rgba(255,255,255,.8); margin-bottom: var(--space-4); } body.dp-style-fashion .dp-fh-hero__title { font-family: var(--font-heading); font-weight: 400; font-size: var(--text-display); line-height: 1.05; color: #fff; margin-bottom: var(--space-5); } body.dp-style-fashion .dp-fh-hero__subtitle { font-size: 16px; color: rgba(255,255,255,.9); max-width: 440px; margin-bottom: var(--space-8); line-height: 1.5; } @media (max-width: 768px) { body.dp-style-fashion .dp-fh-hero { height: 78vh; } } /* Hero-slides (#28) — samme mønster som Standard (.dp-hero__slide), skalert til Fashion sin fulle bakgrunn+bunn-venstre-tekst-layout. */ body.dp-style-fashion .dp-fh-hero__slide { display: contents; } body.dp-style-fashion .dp-fh-hero--slider .dp-fh-hero__slide { display: flex; align-items: flex-end; position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .7s ease; pointer-events: none; } body.dp-style-fashion .dp-fh-hero--slider .dp-fh-hero__slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; } body.dp-style-fashion .dp-fh-hero__dots { position: absolute; z-index: 2; bottom: var(--space-5); right: var(--space-6); display: flex; gap: var(--space-2); } body.dp-style-fashion .dp-fh-hero__dot { width: 8px; height: 8px; border-radius: 50%; border: none; background: rgba(255,255,255,.45); cursor: pointer; padding: 0; transition: background .2s; } body.dp-style-fashion .dp-fh-hero__dot.is-active { background: #fff; } /* Kategori-grid */ body.dp-style-fashion .dp-fh-category-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } body.dp-style-fashion .dp-fh-category-tile { position: relative; display: block; aspect-ratio: 3/4; overflow: hidden; background: var(--color-bg-2); } body.dp-style-fashion .dp-fh-category-tile__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .5s ease; } body.dp-style-fashion .dp-fh-category-tile:hover .dp-fh-category-tile__bg { transform: scale(1.04); } body.dp-style-fashion .dp-fh-category-tile__chip { position: absolute; left: var(--space-3); bottom: var(--space-3); background: var(--color-surface); color: var(--color-text); font-size: 13px; font-weight: 600; padding: 6px 12px; } @media (max-width: 768px) { body.dp-style-fashion .dp-fh-category-grid { grid-template-columns: repeat(2, 1fr); } } /* USP-rad */ body.dp-style-fashion .dp-fh-usp { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } body.dp-style-fashion .dp-fh-usp__inner { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-10); padding: var(--space-6) 0; } body.dp-style-fashion .dp-fh-usp__item { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; color: var(--color-text); } body.dp-style-fashion .dp-fh-usp__item svg { width: 16px; height: 16px; flex-shrink: 0; } /* Hero-banner / kampanjebanner — knappene er hardkodet radius/farge i theme.css (ikke tokenisert), rettes eksplisitt her */ body.dp-style-fashion .dp-hero-banner__btn, body.dp-style-fashion .dp-campaign-banner__btn { border-radius: 0; text-transform: uppercase; letter-spacing: .04em; } body.dp-style-fashion .dp-hero-banner__btn--primary, body.dp-style-fashion .dp-campaign-banner__btn { background: var(--color-bg); color: var(--color-text); border-color: var(--color-bg); } /* Seksjonstitler — serif, mer luft, ingen aksent-eyebrow som standard */ body.dp-style-fashion .dp-section__header h2, body.dp-style-fashion .dp-about-teaser__text h2 { font-family: var(--font-heading); font-weight: 400; font-size: 26px; } body.dp-style-fashion .dp-link-more { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text); } /* ============================================================ PRODUKTKORT + GRID (FASE 5) ============================================================ dp_product_card() (inc/woocommerce.php) er uendret — samme markup, samme WooCommerce-data, ingen "legg i kurv"-knapp på kortet (skjult av Standard sin egen CSS, kjøp skjer på produktsiden — videreført uendret). Kortet arver allerede mye fra FASE 2-tokens (radius 0, serif produktnavn via --font-heading, aksentfarge på salgspris via --color-primary) — denne seksjonen er kun finpuss utover det. Handoffens "hurtig-legg-i-bag med størrelsesvelger" og sekundærbilde på hover finnes ikke i dagens kort/markup og er IKKE bygget her — det er nye interaksjoner/kapabiliteter, ikke restyling, se sluttrapport. */ /* Aspect-ratio styres nå av dp_product_image_ratio (Customizer → Produktbilder), med stilbasert default (5/7 Fashion, 1/1 Standard) i inc/theme-setup.php — IKKE hardkod den på nytt her, det overstyrer per-site-innstillingen pga. høyere CSS-spesifisitet (body.dp-style-fashion .dp-product-card__image vinner ellers). */ body.dp-style-fashion .dp-product-grid, body.dp-style-fashion .dp-product-rail { gap: 16px; } @media (max-width: 768px) { body.dp-style-fashion .dp-product-grid, body.dp-style-fashion .dp-product-rail { gap: 12px; } } /* Badge — monokrom ink for "Nyhet", aksent forbeholdt salg (matcher prinsippet «aksent kun på salgspris/badges som faktisk haster») */ body.dp-style-fashion .dp-product-card__badge { font-family: var(--font-body); font-weight: 600; background: var(--color-text); } body.dp-style-fashion .dp-product-card__badge--sale { background: var(--color-accent); } body.dp-style-fashion .dp-product-card__category { letter-spacing: var(--tracking-eyebrow); } body.dp-style-fashion .dp-carousel__btn { border-radius: 50%; border-color: var(--color-text); color: var(--color-text); } body.dp-style-fashion .dp-carousel__btn:hover { background: var(--color-text); color: var(--color-bg); } /* ============================================================ PLP / KATEGORISIDE (FASE 6) ============================================================ archive-product.php er uendret — samme filtreringsmekanikk (server- side URL-parametre via onchange, ingen AJAX), samme PHP-funksjoner for kategori/merke/attributt-lister. Kun presentasjon er ny. Filterpanel: handoffen ber om dropdown-under-verktøylinje på desktop og bunnark på mobil. Panelet ligger i DOM-et som en søsken til verktøylinjen (ikke nøstet inni den), så en ekte "dropdown forankret til verktøylinjen" krever enten å flytte panelets PHP-plassering eller JS-basert posisjonering — utenfor hva en ren CSS-restyling kan løse trygt. Fashion bruker derfor ETT konsistent bunnark-mønster på alle skjermstørrelser i stedet — egen, bevisst forenkling, se sluttrapport. */ body.dp-style-fashion .dp-shop-hero__title { font-weight: 400; font-size: 34px; } body.dp-style-fashion .dp-shop-hero { padding: var(--space-8) 0; } body.dp-style-fashion .dp-cat-chip { text-transform: uppercase; font-size: 12px; letter-spacing: .02em; min-height: 44px; } body.dp-style-fashion .dp-filter-toggle, body.dp-style-fashion .dp-shop-sort { text-transform: uppercase; font-size: 12px; letter-spacing: .04em; border-color: var(--color-text); color: var(--color-text); background: transparent; min-height: 44px; } body.dp-style-fashion .dp-filter-toggle:hover { background: var(--color-bg-2); } body.dp-style-fashion .dp-filter-toggle.is-active { background: var(--color-text); border-color: var(--color-text); } /* Filterpanel — bunnark på alle bredder (se begrunnelse over) */ body.dp-style-fashion .dp-filter-panel { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-width: none; height: auto; max-height: 85vh; transform: translateY(100%); box-shadow: 0 -8px 32px rgba(28,26,21,.18); } body.dp-style-fashion .dp-filter-panel.is-open { transform: translateY(0); } body.dp-style-fashion .dp-filter-panel__title { font-family: var(--font-heading); font-weight: 400; font-size: 20px; } body.dp-style-fashion .dp-filter-panel__close { border-radius: 0; } /* Filtergrupper — behandles som chip-rad (kategori/merke/attributter er generiske i markup, så "størrelse-chips"/"fargesirkler" kan ikke skilles ut spesifikt uten å anta attributt-navn — se sluttrapport) */ body.dp-style-fashion .dp-filter-group__label { font-family: var(--font-body); letter-spacing: var(--tracking-eyebrow); } body.dp-style-fashion .dp-filter-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; } body.dp-style-fashion .dp-filter-group__label { flex-basis: 100%; } body.dp-style-fashion .dp-filter-check { border: 1px solid var(--color-border); padding: 8px 14px; gap: 6px; min-height: 44px; } body.dp-style-fashion .dp-filter-check.is-active { border-color: var(--color-text); background: var(--color-text); color: var(--color-bg); } body.dp-style-fashion .dp-filter-check.is-active span { color: inherit; opacity: .7; } /* ============================================================ PDP / PRODUKTSIDE (FASE 7) ============================================================ woocommerce/single-product.php er i all hovedsak uendret — samme variasjonssystem (.dp-var-select, samme skjulte WC-skjema/AJAX), samme faner, samme related/upsell-logikk, samme sticky mobilbar. ÉN liten tilleggsblokk er lagt til (vurdering-sammendrag ved prisen) — eksplisitt gatet bak dp_is_style('fashion'), Standard rammer den grenen aldri og er upåvirket. Bevisste forenklinger (se sluttrapport): - Variasjonsvelgeren er fortsatt én generisk nedtrekksmeny per attributt (som i dag) — IKKE fargesirkler/størrelsesgrid, fordi det krever å anta attributt-navn/type som ikke er pålitelig på tvers av alle butikker. - Fanene (Beskrivelse/Spesifikasjoner/Anmeldelser) er beholdt som faner (samme JS/markup), ikke bygget om til ekte accordion — de to er strukturelt ulike (accordion krever innhold rett under hver header, mens fanene har egen delt panel-container), og fanene løser samme brukerbehov. - "Størrelsesguide"-lenke er ikke bygget — ingen innholdskilde (guide-side/modal-innhold) finnes i dag. */ @media (min-width: 769px) { /* Galleri: fra thumbs+hovedbilde til stablet, scrollbar kolonne — mobil er UENDRET (der er .dp-gallery-slide allerede en swipe-karusell med prikker, som allerede matcher handoffen). */ body.dp-style-fashion .dp-product-gallery { grid-template-columns: 1fr; } body.dp-style-fashion .dp-product-gallery__thumbs { display: none; } /* aspect-ratio/object-fit/bakgrunn styres av dp_product_image_ratio/_fit/_bg (Customizer → Produktbilder, inc/theme-setup.php) — ikke hardkod dem her igjen, det overstyrer per-site-innstillingen pga. høyere CSS-spesifisitet. Hvert bilde i stabelen får sin egen aspect-ratio-boks der (ikke containeren — se kommentar i theme-setup.php), så ingen justify-content:center trengs her lenger for å sentrere et "løst" naturlig-størrelse-bilde. */ body.dp-style-fashion .dp-product-gallery__main { border: none; display: flex; flex-direction: column; gap: 8px; } body.dp-style-fashion .dp-product-gallery__main img, body.dp-style-fashion .dp-product-gallery__main .dp-gallery-slide { display: block; width: 100%; height: auto; } /* Info-kolonnen sticky, følger galleriet ved scroll */ body.dp-style-fashion .dp-product-info { position: sticky; top: calc(var(--dp-header-height, 88px) + 24px); } } body.dp-style-fashion .dp-product-layout { gap: 48px; } body.dp-style-fashion .dp-product-info__cat a { text-transform: uppercase; font-size: 11px; letter-spacing: var(--tracking-eyebrow); color: var(--color-text-subtle); font-weight: 400; } body.dp-style-fashion .dp-product-info__title { font-family: var(--font-heading); font-weight: 400; font-size: 28px; } body.dp-style-fashion .dp-product-info__price { font-size: 18px; } body.dp-style-fashion .dp-product-info__rating { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-text-muted); margin-bottom: var(--space-4); } /* Ingen antallsvelger i kjøpsraden — full-bredde "LEGG I BAG"-knapp. Skjuler kun visuelt: input-verdien (default 1) leses fortsatt av samme AJAX-kode ved bestilling, ingen funksjonalitet fjernet. */ body.dp-style-fashion .dp-quantity { display: none; } body.dp-style-fashion .dp-product-info__cart .dp-btn, body.dp-style-fashion #dp-var-add-btn { width: 100%; text-transform: uppercase; letter-spacing: .04em; } /* Standard sin .dp-product-info__cart .add_to_cart_button-regel bruker !important for å overstyre WooCommerce sin egen .button.alt — må overstyres med samme !important + høyere spesifisitet her. */ body.dp-style-fashion .dp-product-info__cart .add_to_cart_button { background: var(--color-text) !important; border-color: var(--color-text) !important; color: var(--color-bg) !important; border-radius: 0 !important; } body.dp-style-fashion .dp-product-info__cart .add_to_cart_button:hover { background: var(--color-dark) !important; border-color: var(--color-dark) !important; } body.dp-style-fashion .dp-var-select__trigger, body.dp-style-fashion .dp-var-select__dropdown { border-radius: 0; border-color: var(--color-border); } body.dp-style-fashion .dp-variation-group__label { text-transform: uppercase; font-size: 12px; letter-spacing: var(--tracking-eyebrow); font-weight: 400; color: var(--color-text-muted); } /* Faner — beholdt som faner (se begrunnelse over), kun restylet */ body.dp-style-fashion .dp-product-tabs__nav { border-bottom-color: var(--color-border); } body.dp-style-fashion .dp-product-tabs__btn { text-transform: uppercase; font-size: 12px; letter-spacing: .04em; color: var(--color-text-muted); } body.dp-style-fashion .dp-product-tabs__btn.is-active { color: var(--color-text); border-bottom-color: var(--color-text); } body.dp-style-fashion .dp-product-sticky-cart .dp-btn { border-radius: 0; text-transform: uppercase; letter-spacing: .04em; } /* ============================================================ SØK / HANDLEKURV / FOOTER (FASE 8) ============================================================ Alt gjenbruker eksisterende funksjonalitet uendret: Typesense-søket (dp_get_minicart_html()/_footer_html() i inc/woocommerce.php), samme AJAX, samme JS-hooks. Kun presentasjon. Det meste arver allerede riktig fra FASE 2-tokens (radius, farger) — denne seksjonen dekker det som er hardkodet utenfor token-systemet eller krever egen layout-vurdering. */ /* Søkeoverlay */ body.dp-style-fashion .dp-search-overlay__input { font-family: var(--font-heading); font-weight: 400; } body.dp-style-fashion .dp-search-overlay__heading { letter-spacing: var(--tracking-eyebrow); } /* Mini-handlekurv (drawer fra høyre) — kun desktop-bredde justert. Mobil beholder Standard sin responsive 90vw/max-400px UENDRET; en tidligere versjon av denne regelen (uten media-query) satte fast 420px på alle bredder, som presset draperet 25px utenfor viewport på f.eks. 375px-skjermer. Funnet og fikset i FASE 9-mobilgjennomgang. */ @media (min-width: 769px) { body.dp-style-fashion .dp-minicart { width: 420px; } } body.dp-style-fashion .dp-minicart__header h2 { font-weight: 400; } body.dp-style-fashion .dp-minicart__name { font-family: var(--font-heading); font-weight: 400; font-size: 15px; } body.dp-style-fashion .dp-minicart__checkout { text-transform: uppercase; letter-spacing: .04em; } /* Nyhetsbrev — sentrert, input+knapp deler kant uten mellomrom (matcher handoff). Bakgrunnsfarge er fortsatt kundens sekundærfarge — urørt. */ body.dp-style-fashion .dp-newsletter__text h2 { font-family: var(--font-heading); font-weight: 400; } body.dp-style-fashion .dp-newsletter__inner { flex-direction: column; text-align: center; justify-content: center; } body.dp-style-fashion .dp-newsletter__form { gap: 0; } /* Footer — ink-bakgrunn eksplisitt fra tokens (var. hardkodet #1a1a1a i Standard, nesten identisk med Fashion sin ink, men gjort presist) */ body.dp-style-fashion .dp-footer { background: var(--color-text); } body.dp-style-fashion .dp-footer__col h4 { letter-spacing: var(--tracking-eyebrow); font-weight: 400; } /* ============================================================ MIN KONTO — account.css er 100% token-drevet (radius/skygge/farge), så kort/nav/skjema arver Fashion-uttrykket automatisk fra :root over. Det som IKKE arver automatisk er typografi-behandlingen (uppercase/ tracking) — samme prinsipp som Seksjonstitler/knapper lenger opp. ============================================================ */ body.dp-style-fashion .dp-account-header__title, body.dp-style-fashion .dp-account-card__title, body.dp-style-fashion .dp-account-content__title { font-weight: 400; } body.dp-style-fashion .dp-account-nav__link, body.dp-style-fashion .dp-order-badge, body.dp-style-fashion .dp-account-card__edit { text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); font-weight: 500; } body.dp-style-fashion .dp-account-nav__link.is-active { background: var(--color-text); color: var(--color-bg); } body.dp-style-fashion .dp-account-nav__link.is-active .dp-account-nav__icon { color: var(--color-bg); } body.dp-style-fashion .dp-order-badge--default { background: var(--color-bg-2); color: var(--color-text); } body.dp-style-fashion .dp-payment-method-card--default { border-color: var(--color-text); }