.elementor-kit-28441{--e-global-color-primary:#1F2521;--e-global-color-secondary:#B8935A;--e-global-color-text:#4A4F4A;--e-global-color-accent:#6E9A7E;--e-global-color-995f5a7:#E86340;--e-global-color-659e9bc:#DFB87B;--e-global-color-2217291:#222222;--e-global-color-1f59dae:#757373;--e-global-color-g_sage_50:#F2F6F2;--e-global-color-g_sage_100:#E4EEE6;--e-global-color-g_sage_200:#D5E5DC;--e-global-color-g_sage_300:#BAD3C3;--e-global-color-g_sage_400:#95B8A1;--e-global-color-g_sage_500:#6E9A7E;--e-global-color-g_sage_700:#4A6E58;--e-global-color-g_cream:#F9F5EE;--e-global-color-g_cream_2:#F4EFE5;--e-global-color-g_paper:#FBFAF6;--e-global-color-g_gold:#B8935A;--e-global-color-g_gold_soft:#C8A668;--e-global-color-g_gold_deep:#8F7142;--e-global-color-g_ink:#1F2521;--e-global-color-g_ink_soft:#4A4F4A;--e-global-color-g_ink_mute:#8A8E89;--e-global-color-g_line:#E6E2D8;--e-global-color-g_white:#FFFFFF;--e-global-color-g_sale:#1F2521;--e-global-color-g_stock_low:#8F7142;--e-global-typography-primary-font-family:"Cormorant Garamond";--e-global-typography-primary-font-size:52px;--e-global-typography-primary-font-weight:400;--e-global-typography-primary-line-height:1.05em;--e-global-typography-primary-letter-spacing:-0.5px;--e-global-typography-secondary-font-family:"Cormorant Garamond";--e-global-typography-secondary-font-size:32px;--e-global-typography-secondary-font-weight:300;--e-global-typography-secondary-font-style:italic;--e-global-typography-secondary-line-height:1.2em;--e-global-typography-text-font-family:"Jost";--e-global-typography-text-font-size:15px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.7em;--e-global-typography-accent-font-family:"Jost";--e-global-typography-accent-font-size:11px;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-line-height:1.4em;--e-global-typography-accent-letter-spacing:4.6px;--e-global-typography-g_display-font-family:"Cormorant Garamond";--e-global-typography-g_display-font-size:96px;--e-global-typography-g_display-font-weight:400;--e-global-typography-g_display-line-height:0.95em;--e-global-typography-g_display-letter-spacing:-1px;--e-global-typography-g_h1-font-family:"Cormorant Garamond";--e-global-typography-g_h1-font-size:72px;--e-global-typography-g_h1-font-weight:400;--e-global-typography-g_h1-line-height:1.05em;--e-global-typography-g_h2-font-family:"Cormorant Garamond";--e-global-typography-g_h2-font-size:52px;--e-global-typography-g_h2-font-weight:400;--e-global-typography-g_h2-line-height:1.1em;--e-global-typography-g_h3-font-family:"Cormorant Garamond";--e-global-typography-g_h3-font-size:32px;--e-global-typography-g_h3-font-weight:500;--e-global-typography-g_h3-line-height:1.2em;--e-global-typography-g_h4-font-family:"Cormorant Garamond";--e-global-typography-g_h4-font-size:22px;--e-global-typography-g_h4-font-weight:500;--e-global-typography-g_h4-text-transform:uppercase;--e-global-typography-g_h4-line-height:1.3em;--e-global-typography-g_h4-letter-spacing:2.8px;--e-global-typography-g_h5-font-family:"Cormorant Garamond";--e-global-typography-g_h5-font-size:18px;--e-global-typography-g_h5-font-weight:500;--e-global-typography-g_h5-line-height:1.4em;--e-global-typography-g_h6-font-family:"Jost";--e-global-typography-g_h6-font-size:13px;--e-global-typography-g_h6-font-weight:500;--e-global-typography-g_h6-text-transform:uppercase;--e-global-typography-g_h6-line-height:1.4em;--e-global-typography-g_h6-letter-spacing:2.2px;--e-global-typography-g_body_lg-font-family:"Jost";--e-global-typography-g_body_lg-font-size:17px;--e-global-typography-g_body_lg-font-weight:400;--e-global-typography-g_body_lg-line-height:1.7em;--e-global-typography-g_body-font-family:"Jost";--e-global-typography-g_body-font-size:15px;--e-global-typography-g_body-font-weight:400;--e-global-typography-g_body-line-height:1.7em;--e-global-typography-g_body_sm-font-family:"Jost";--e-global-typography-g_body_sm-font-size:13px;--e-global-typography-g_body_sm-font-weight:400;--e-global-typography-g_body_sm-line-height:1.6em;--e-global-typography-g_caption-font-family:"Jost";--e-global-typography-g_caption-font-size:11px;--e-global-typography-g_caption-font-weight:400;--e-global-typography-g_caption-text-transform:uppercase;--e-global-typography-g_caption-line-height:1.5em;--e-global-typography-g_caption-letter-spacing:1.4px;--e-global-typography-g_eyebrow-font-family:"Jost";--e-global-typography-g_eyebrow-font-size:11px;--e-global-typography-g_eyebrow-font-weight:500;--e-global-typography-g_eyebrow-text-transform:uppercase;--e-global-typography-g_eyebrow-line-height:1.4em;--e-global-typography-g_eyebrow-letter-spacing:4.6px;--e-global-typography-g_serif_italic-font-family:"Cormorant Garamond";--e-global-typography-g_serif_italic-font-size:1em;--e-global-typography-g_serif_italic-font-weight:300;--e-global-typography-g_serif_italic-font-style:italic;--e-global-typography-g_serif_italic-line-height:1.1em;--e-global-typography-g_button-font-family:"Jost";--e-global-typography-g_button-font-size:12px;--e-global-typography-g_button-font-weight:500;--e-global-typography-g_button-text-transform:uppercase;--e-global-typography-g_button-line-height:1em;--e-global-typography-g_button-letter-spacing:2.6px;--e-global-typography-g_price-font-family:"Jost";--e-global-typography-g_price-font-size:16px;--e-global-typography-g_price-font-weight:500;--e-global-typography-g_price-line-height:1.3em;--e-global-typography-g_product_name-font-family:"Jost";--e-global-typography-g_product_name-font-size:14px;--e-global-typography-g_product_name-font-weight:400;--e-global-typography-g_product_name-line-height:1.4em;background-color:#F1E3C521;color:#4A4F4A;font-family:"Jost", Georgia, serif;font-size:15px;font-weight:400;line-height:1.7em;}.elementor-kit-28441 button,.elementor-kit-28441 input[type="button"],.elementor-kit-28441 input[type="submit"],.elementor-kit-28441 .elementor-button{background-color:#BAD3C3;font-family:"Jost", Georgia, serif;font-size:12px;font-weight:500;text-transform:uppercase;line-height:1em;letter-spacing:2.6px;color:#1F2521;box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0);border-style:none;border-radius:2px 2px 2px 2px;padding:18px 32px 18px 32px;}.elementor-kit-28441 button:hover,.elementor-kit-28441 button:focus,.elementor-kit-28441 input[type="button"]:hover,.elementor-kit-28441 input[type="button"]:focus,.elementor-kit-28441 input[type="submit"]:hover,.elementor-kit-28441 input[type="submit"]:focus,.elementor-kit-28441 .elementor-button:hover,.elementor-kit-28441 .elementor-button:focus{background-color:#1F2521;color:#F9F5EE;box-shadow:0px 8px 24px 0px rgba(31, 37, 33, 0.12);}.elementor-kit-28441 e-page-transition{background-color:#FFBC7D;}.elementor-kit-28441 a{color:#1F2521;text-decoration:none;}.elementor-kit-28441 a:hover{color:#8F7142;text-decoration:none;}.elementor-kit-28441 h1{color:#1F2521;font-family:"Cormorant Garamond", Georgia, serif;font-size:72px;font-weight:400;line-height:1.05em;letter-spacing:-0.7px;}.elementor-kit-28441 h2{color:var( --e-global-color-primary );font-family:"Cormorant Garamond", Georgia, serif;font-size:52px;font-weight:400;line-height:1.1em;}.elementor-kit-28441 h3{color:#1F2521;font-family:"Cormorant Garamond", Georgia, serif;font-size:32px;font-weight:500;line-height:1.2em;}.elementor-kit-28441 h4{color:#1F2521;font-family:"Cormorant Garamond", Georgia, serif;font-size:22px;font-weight:500;line-height:1.3em;}.elementor-kit-28441 h5{color:#1F2521;font-family:"Cormorant Garamond", Georgia, serif;font-size:18px;font-weight:500;line-height:1.4em;}.elementor-kit-28441 h6{color:#1F2521;font-family:"Jost", Georgia, serif;font-size:13px;font-weight:500;text-transform:uppercase;line-height:1.4em;letter-spacing:2.2px;}.elementor-kit-28441 img{border-radius:2px 2px 2px 2px;}.elementor-kit-28441 label{color:#1F2521;font-family:"Jost", Georgia, serif;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:1.5px;}.elementor-kit-28441 input:not([type="button"]):not([type="submit"]),.elementor-kit-28441 textarea,.elementor-kit-28441 .elementor-field-textual{font-family:"Jost", Georgia, serif;font-size:14px;font-weight:400;color:#1F2521;background-color:#FFFFFF;border-radius:2px 2px 2px 2px;}.elementor-kit-28441 input:focus:not([type="button"]):not([type="submit"]),.elementor-kit-28441 textarea:focus,.elementor-kit-28441 .elementor-field-textual:focus{background-color:#FFFFFF;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1320px;}.e-con{--container-max-width:1320px;}.elementor-widget:not(:last-child){margin-block-end:24px;}.elementor-element{--widgets-spacing:24px 24px;--widgets-spacing-row:24px;--widgets-spacing-column:24px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-lightbox{background-color:rgba(31, 37, 33, 0.92);--lightbox-ui-color:#F9F5EE;--lightbox-ui-color-hover:#B8935A;--lightbox-text-color:#F9F5EE;--lightbox-header-icons-size:16px;}@media(max-width:1024px){.elementor-kit-28441{--e-global-typography-primary-font-size:42px;--e-global-typography-secondary-font-size:26px;--e-global-typography-text-font-size:15px;--e-global-typography-g_display-font-size:72px;--e-global-typography-g_h1-font-size:56px;--e-global-typography-g_h2-font-size:42px;--e-global-typography-g_h3-font-size:28px;}.elementor-kit-28441 h1{font-size:56px;}.elementor-kit-28441 h2{font-size:42px;}.elementor-kit-28441 button,.elementor-kit-28441 input[type="button"],.elementor-kit-28441 input[type="submit"],.elementor-kit-28441 .elementor-button{padding:16px 28px 16px 28px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:992px;}.e-con{--container-max-width:992px;}}@media(max-width:767px){.elementor-kit-28441{--e-global-typography-primary-font-size:36px;--e-global-typography-secondary-font-size:22px;--e-global-typography-text-font-size:14px;--e-global-typography-g_display-font-size:56px;--e-global-typography-g_h1-font-size:42px;--e-global-typography-g_h2-font-size:36px;--e-global-typography-g_h3-font-size:24px;--e-global-typography-g_body_lg-font-size:16px;}.elementor-kit-28441 h1{font-size:42px;}.elementor-kit-28441 h2{font-size:36px;}.elementor-kit-28441 h3{font-size:24px;}.elementor-kit-28441 button,.elementor-kit-28441 input[type="button"],.elementor-kit-28441 input[type="submit"],.elementor-kit-28441 .elementor-button{padding:14px 24px 14px 24px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:480px;}.e-con{--container-max-width:480px;}} /* Start custom CSS *//* ===================================================================== GULLBORGEN — ALL ARCHIVE STYLES (combined) ===================================================================== This is a SINGLE-FILE bundle of all 5 archive stylesheets, ready to paste into Elementor → Site Settings → Custom CSS if you prefer a single file over five separate ones. BUNDLE ORDER: 01 — Archive hero (sage green hero with title left, image right) 02 — BeRocket filter sidebar 03 — Products toolbar (result count + sort) 04 — Product card (loop grid item) 05 — Education section (4 C's) Each section is delineated below with a clear heading. Comments and .elementor-kit-28441s mirror the individual files exactly. ===================================================================== */ /* ===================================================================== GULLBORGEN — 01-archive-hero.css --------------------------------------------------------------------- STYLES FOR: The hero section at the top of every product category page APPLIES TO: WooCommerce product category archive pages (e.g. /produktkategori/ringer/enstensringer/) This file styles the section with: - Eyebrow ("Forlovelsesringer · Jubileumsgaver") - Big H1 archive title (pulls from category name in WP admin) - Gold horizontal line below title - Description (pulls from category description in WP admin) - "Utforsk kolleksjonen" button - Lifestyle image on the right ELEMENTOR HOOK: Class `.gb-archive-hero` is set on the outer section in the archive template JSON. Class `.gb-hero-grid` is on the inner two-column grid. ===================================================================== */ /* --------------------------------------------------------------------- 1.1 — OUTER SECTION The wrapping container that holds the rounded sage-green hero. Padding ensures the hero respects the global container width. --------------------------------------------------------------------- */ .gb-archive-hero { /* Container max-width and side padding inherited from Elementor site settings (1320px / 32px). No additional rules needed here. */ } /* --------------------------------------------------------------------- 1.2 — HERO INNER GRID The two-column grid: 1fr (text) | 1.1fr (image) Sage 100 background with rounded corners. On tablet/mobile, collapses to a single column (image stacks below). --------------------------------------------------------------------- */ .gb-hero-grid { position: relative; overflow: hidden; align-items: center; } /* Decorative radial gradients in the corners — adds a subtle "lit from within" feel to the sage background. Pointer-events: none ensures they don't block clicks. */ .gb-hero-grid::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 60% at 100% 0%, rgba(255,255,255,.6), transparent 60%), radial-gradient(50% 70% at 0% 100%, rgba(184,147,90,.08), transparent 60%); pointer-events: none; } /* --------------------------------------------------------------------- 1.3 — HERO LEFT COLUMN (Copy) Stacked vertically: eyebrow → title → divider → description → button --------------------------------------------------------------------- */ .gb-hero-copy { position: relative; z-index: 1; } /* Archive H1 title — pulled from the WooCommerce category name. Inherits font-family / size / color from Elementor Global H1 typography. We just tweak letter-spacing slightly tighter for the display effect. */ .gb-hero-copy .gb-archive-title h1, .gb-hero-copy .elementor-widget-woocommerce-archive-title h1 { letter-spacing: -0.015em; margin-bottom: 0; } /* Archive description — pulled from the WooCommerce category description. WooCommerce wraps it in
. */ .gb-hero-copy .gb-archive-description, .gb-hero-copy .term-description { max-width: 480px; font-size: 16px; line-height: 1.7; color: var(--e-global-color-g_ink_soft, #4A4F4A); } .gb-hero-copy .gb-archive-description p { margin-bottom: 0; } /* --------------------------------------------------------------------- 1.4 — HERO RIGHT COLUMN (Image) Background-image container, fills full column height. Slight shadow lifts it from the sage backdrop. --------------------------------------------------------------------- */ .gb-hero-image { align-self: stretch; box-shadow: 0 24px 60px rgba(31,37,33,.10), 0 6px 12px rgba(31,37,33,.05); /* Aspect ratio kept by min-height in template. On mobile the image stacks below the text and uses 4/5 aspect. */ } @media (max-width: 1024px) { .gb-hero-image { aspect-ratio: 4/5; min-height: auto !important; } } /* --------------------------------------------------------------------- 1.5 — RESPONSIVE OVERRIDES Tighten the hero padding on mobile so it doesn't feel cramped. --------------------------------------------------------------------- */ @media (max-width: 1024px) { .gb-hero-grid { padding: 48px !important; } .gb-hero-copy { text-align: left; } .gb-archive-description { max-width: 100% !important; } } @media (max-width: 640px) { .gb-hero-grid { padding: 32px 24px !important; } } /* ===================================================================== GULLBORGEN — 02-berocket-filters.css --------------------------------------------------------------------- STYLES FOR: The filter sidebar on category pages APPLIES TO: BeRocket WooCommerce AJAX Filters output This file overrides BeRocket's default styling to match the Gullborgen design system. Targets BeRocket's class names: - .berocket_aapf_widget (filter widget container) - .br_filters_aside_selected_area (selected filter chips at top) - .berocket_single_filter_widget (each filter group) - .berocket_filter_label_color (color/material swatches) - .berocket_filter_show (price slider) ELEMENTOR HOOK: Wrapped by `.gb-filter-sidebar` (set in template JSON) READ THIS WITH: docs/berocket-setup.md — that file walks through how to configure each BeRocket widget so this CSS targets work correctly. ===================================================================== */ /* --------------------------------------------------------------------- 2.1 — STICKY SIDEBAR WRAPPER Filter sidebar stays in view while scrolling through products. Top offset accounts for the sticky header (100px). --------------------------------------------------------------------- */ .gb-filter-sidebar { position: sticky; top: 100px; align-self: start; font-size: 13px; font-family: var(--e-global-typography-text-font-family, "Jost", sans-serif); } /* On tablet/mobile the sidebar stops being sticky and stacks above the products. BeRocket has a built-in mobile drawer toggle that we'll use instead. */ @media (max-width: 1024px) { .gb-filter-sidebar { position: static; } } /* --------------------------------------------------------------------- 2.2 — FILTER WIDGET — GENERAL CONTAINER Each BeRocket filter (Price, Carat, Material, etc.) is wrapped in a `.berocket_aapf_widget` div by BeRocket. We give them consistent padding and bottom borders to look like a coherent stacked list. --------------------------------------------------------------------- */ .berocket_aapf_widget { padding: 18px 0; border-bottom: 1px solid var(--e-global-color-g_line, #E6E2D8); font-family: inherit; } /* The very last filter widget shouldn't have a bottom border, visually closing the sidebar cleanly. */ .gb-filter-sidebar .berocket_aapf_widget:last-child { border-bottom: none; } /* --------------------------------------------------------------------- 2.3 — FILTER GROUP TITLES The label above each filter group ("Pris", "Carat", "Materiale" etc.) BeRocket renders this in a heading element with class .widget-title --------------------------------------------------------------------- */ .berocket_aapf_widget > .widget-title, .berocket_aapf_widget > .berocket_single_filter_widget_title, .berocket_aapf_widget > h3, .berocket_aapf_widget > h2 { font-size: 12px !important; letter-spacing: .18em !important; text-transform: uppercase !important; font-weight: 500 !important; color: var(--e-global-color-g_ink, #1F2521) !important; margin: 0 0 14px 0 !important; padding: 0 !important; font-family: "Jost", sans-serif !important; line-height: 1.4 !important; display: flex; justify-content: space-between; align-items: center; cursor: pointer; } /* Optional collapse caret (BeRocket adds this if you enable "Collapsible widgets" in BeRocket → Settings → Widgets) */ .berocket_aapf_widget > .widget-title::after { content: ""; width: 10px; height: 10px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); margin-left: 12px; transition: transform .2s ease; } .berocket_aapf_widget.berocket_widget_closed > .widget-title::after { transform: rotate(-45deg); } /* --------------------------------------------------------------------- 2.4 — FILTER ITEM LIST (CHECKBOXES) Default checkbox-list style for "Form på sten", "Kvalitet", etc. --------------------------------------------------------------------- */ .berocket_aapf_widget ul.bapf_body { list-style: none !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column; gap: 8px; } .berocket_aapf_widget ul.bapf_body li { margin: 0 !important; padding: 0 !important; list-style: none !important; } .berocket_aapf_widget ul.bapf_body li label, .berocket_aapf_widget ul.bapf_body li > a { display: flex !important; align-items: center !important; gap: 10px; font-size: 13px; font-weight: 400; color: var(--e-global-color-g_ink_soft, #4A4F4A); cursor: pointer; transition: color .2s ease; padding: 0 !important; margin: 0 !important; } .berocket_aapf_widget ul.bapf_body li label:hover, .berocket_aapf_widget ul.bapf_body li > a:hover { color: var(--e-global-color-g_ink, #1F2521); } /* --------------------------------------------------------------------- 2.5 — CUSTOM CHECKBOX STYLING Replace the default browser checkbox with a clean square that fills with ink color when checked, and shows a small white checkmark. --------------------------------------------------------------------- */ .berocket_aapf_widget input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; border: 1px solid var(--e-global-color-g_ink_mute, #8A8E89); border-radius: 1px; flex-shrink: 0; position: relative; margin: 0 !important; cursor: pointer; transition: all .2s ease; background: white; } .berocket_aapf_widget input[type="checkbox"]:checked { background: var(--e-global-color-g_ink, #1F2521); border-color: var(--e-global-color-g_ink, #1F2521); } /* The white checkmark inside a checked box */ .berocket_aapf_widget input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 3px; top: 0; width: 4px; height: 8px; border: solid white; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); } /* --------------------------------------------------------------------- 2.6 — RESULT COUNT NEXT TO EACH ITEM The "(94)" number that appears next to each filter option to show how many products match. BeRocket renders this in `.berocket_aapf_count`. --------------------------------------------------------------------- */ .berocket_aapf_widget .berocket_aapf_count, .berocket_aapf_widget .count { margin-left: auto !important; color: var(--e-global-color-g_ink_mute, #8A8E89) !important; font-size: 11px !important; font-weight: 400 !important; } /* --------------------------------------------------------------------- 2.7 — COLOR / MATERIAL SWATCHES For the "Materiale" filter (Gult / Hvitt / Rosé gull), BeRocket can render circular color swatches when you set the filter type to "Color" in BeRocket admin. We re-style them as larger, round circles with metallic gradients (defined in 04-product-card.css). --------------------------------------------------------------------- */ .berocket_aapf_widget--color ul.bapf_body, .berocket_aapf_widget[data-filter="color"] ul.bapf_body { flex-direction: row !important; flex-wrap: wrap; gap: 10px; } .berocket_aapf_widget--color ul.bapf_body li, .berocket_aapf_widget[data-filter="color"] ul.bapf_body li { width: auto; } .berocket_aapf_widget--color label > div, .berocket_aapf_widget--color .berocket_filter_label_color { width: 28px !important; height: 28px !important; border-radius: 50% !important; border: 2px solid transparent !important; cursor: pointer; box-shadow: inset 1px 1px 2px rgba(255,255,255,.5), inset -1px -1px 2px rgba(0,0,0,.15); transition: border-color .2s ease; } .berocket_aapf_widget--color input:checked + label > div, .berocket_aapf_widget--color .berocket_filter_label_color.selected { border-color: var(--e-global-color-g_ink, #1F2521) !important; } /* --------------------------------------------------------------------- 2.8 — CARAT PILL FILTER For the "Carat" filter, we want segmented pill buttons instead of checkboxes. Add the CSS class `gb-pills` to the BeRocket widget in its admin settings (BeRocket → Edit Filter → CSS Class field). --------------------------------------------------------------------- */ .berocket_aapf_widget.gb-pills ul.bapf_body { flex-direction: row !important; gap: 6px; } .berocket_aapf_widget.gb-pills ul.bapf_body li { flex: 1; } /* Hide native checkbox; the label becomes the entire pill */ .berocket_aapf_widget.gb-pills input[type="checkbox"] { display: none; } .berocket_aapf_widget.gb-pills ul.bapf_body li label { display: block !important; text-align: center; padding: 8px 6px !important; border: 1px solid var(--e-global-color-g_line, #E6E2D8); border-radius: 2px; font-size: 11px; font-weight: 400; cursor: pointer; background: white; transition: all .2s ease; } .berocket_aapf_widget.gb-pills ul.bapf_body li label:hover { border-color: var(--e-global-color-g_ink, #1F2521); } /* The "checked" state — when a user clicks the pill, BeRocket adds .bapf_checked to the parent
  • */ .berocket_aapf_widget.gb-pills ul.bapf_body li.bapf_checked label { background: var(--e-global-color-g_ink, #1F2521); color: var(--e-global-color-g_cream, #F9F5EE); border-color: var(--e-global-color-g_ink, #1F2521); } /* --------------------------------------------------------------------- 2.9 — PRICE SLIDER BeRocket's price slider uses jQuery UI under the hood. Targets: .ui-slider, .ui-slider-range, .ui-slider-handle --------------------------------------------------------------------- */ .berocket_aapf_widget .ui-slider, .berocket_aapf_widget .berocket_aapf_slider { background: var(--e-global-color-g_line, #E6E2D8) !important; height: 2px !important; margin: 14px 0 16px !important; border: none !important; border-radius: 0 !important; } .berocket_aapf_widget .ui-slider-range { background: var(--e-global-color-g_ink, #1F2521) !important; height: 2px !important; } .berocket_aapf_widget .ui-slider-handle { width: 14px !important; height: 14px !important; background: white !important; border: 1px solid var(--e-global-color-g_ink, #1F2521) !important; border-radius: 50% !important; top: -7px !important; margin-left: -7px !important; cursor: grab; box-shadow: 0 1px 2px rgba(31,37,33,.04), 0 2px 6px rgba(31,37,33,.04); } .berocket_aapf_widget .ui-slider-handle:hover { cursor: grab; } .berocket_aapf_widget .ui-slider-handle:active { cursor: grabbing; } /* Price values shown below the slider ("kr 5.999 — kr 89.999") */ .berocket_aapf_widget .berocket_aapf_slider_values, .berocket_aapf_widget .price_label { display: flex; justify-content: space-between; font-size: 11px; color: var(--e-global-color-g_ink_mute, #8A8E89); font-family: "Jost", sans-serif; margin-top: 6px !important; } .berocket_aapf_widget .price_label .from, .berocket_aapf_widget .price_label .to { color: var(--e-global-color-g_ink_mute, #8A8E89) !important; } /* --------------------------------------------------------------------- 2.10 — ACTIVE FILTER CHIPS (top of sidebar) Shows currently-applied filters as removable chips at the top. Place the [berocket_aapf_widget_selected_area] shortcode at the top of your filter sidebar widget area. --------------------------------------------------------------------- */ .br_filters_aside_selected_area, .berocket_aapf_widget_selected_filters_area { display: flex !important; flex-wrap: wrap; gap: 8px !important; margin-bottom: 22px !important; padding: 0 !important; border: none !important; } .br_filters_aside_selected_area .berocket_aapf_widget_selected_filters, .berocket_aapf_widget_selected_filters .berocket_aapf_widget_selected_filter { display: inline-flex !important; align-items: center !important; gap: 6px !important; background: var(--e-global-color-g_sage_100, #E4EEE6) !important; color: var(--e-global-color-g_ink, #1F2521) !important; padding: 6px 12px !important; border-radius: 20px !important; font-size: 11px !important; border: 1px solid var(--e-global-color-g_sage_200, #D5E5DC) !important; text-transform: none !important; letter-spacing: 0 !important; font-family: "Jost", sans-serif !important; } .berocket_aapf_widget_selected_filter .berocket_aapf_widget_selected_filter_remove, .berocket_aapf_widget_selected_filter .remove { display: inline-flex !important; align-items: center; justify-content: center; width: 14px !important; height: 14px !important; margin-left: 4px; cursor: pointer; opacity: .6; background: none !important; color: inherit !important; font-size: 14px !important; line-height: 1 !important; transition: opacity .2s ease; } .berocket_aapf_widget_selected_filter .berocket_aapf_widget_selected_filter_remove:hover { opacity: 1; } /* Reset all link */ .berocket_aapf_widget_reset_filters, .berocket_aapf_widget_selected_filters_reset { font-size: 11px !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--e-global-color-g_ink_mute, #8A8E89) !important; font-weight: 500 !important; background: none !important; border: none !important; padding: 6px 0 !important; cursor: pointer; } .berocket_aapf_widget_reset_filters:hover { color: var(--e-global-color-g_gold_deep, #8F7142) !important; } /* --------------------------------------------------------------------- 2.11 — FILTER LOADING STATE When BeRocket is fetching new results via AJAX, it dims the product grid. Make sure that overlay matches the brand cream tone. --------------------------------------------------------------------- */ .berocket_aapf_loading, .berocket_ajax_loading { background: rgba(251,250,246,.6) !important; } /* --------------------------------------------------------------------- 2.12 — MOBILE: FILTER DRAWER On mobile, BeRocket can render filters as a slide-in drawer. Toggle button styling — looks like a primary button. Settings → BeRocket → Mobile → Enable mobile drawer. --------------------------------------------------------------------- */ @media (max-width: 1024px) { .berocket_aapf_mobile_button, .br_aapf_mobile_filter_button { background: var(--e-global-color-g_sage_300, #BAD3C3) !important; color: var(--e-global-color-g_ink, #1F2521) !important; font-family: "Jost", sans-serif !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 2.6px !important; text-transform: uppercase !important; padding: 14px 24px !important; border-radius: 2px !important; border: none !important; cursor: pointer; width: 100%; margin-bottom: 24px; } } /* ===================================================================== GULLBORGEN — 03-products-toolbar.css --------------------------------------------------------------------- STYLES FOR: The toolbar that sits ABOVE the product grid containing: - "Viser 1–12 av 109 resultater" count (left) - Sort dropdown "Pris lav til høy" (right) - Optional: grid/list view toggle APPLIES TO: WooCommerce result count + ordering shortcodes inside the archive template ELEMENTOR HOOK: Class `.gb-products-head` is set on the container in the archive template JSON. WOOCOMMERCE OUTPUT: - [woocommerce_result_count] → div.woocommerce-result-count - [woocommerce_catalog_ordering] → form.woocommerce-ordering ===================================================================== */ /* --------------------------------------------------------------------- 3.1 — TOOLBAR CONTAINER Flex row with space-between: count on left, sort on right. Hairline divider below to separate from product grid. --------------------------------------------------------------------- */ .gb-products-head { font-family: "Jost", sans-serif; } /* On mobile, stack the two pieces vertically with a small gap */ @media (max-width: 640px) { .gb-products-head { flex-direction: column !important; align-items: flex-start !important; gap: 12px; } } /* --------------------------------------------------------------------- 3.2 — RESULT COUNT "Viser 1–12 av 109 resultater" --------------------------------------------------------------------- */ .gb-products-head .woocommerce-result-count, .gb-products-head .gb-result-count p { font-size: 13px !important; color: var(--e-global-color-g_ink_soft, #4A4F4A) !important; margin: 0 !important; font-family: "Jost", sans-serif !important; } /* Make the numbers themselves slightly bolder for legibility */ .gb-products-head .woocommerce-result-count strong { color: var(--e-global-color-g_ink, #1F2521); font-weight: 500; } /* --------------------------------------------------------------------- 3.3 — SORT DROPDOWN "Sorter: Pris lav til høy â–¼" WooCommerce wraps the to look like a custom button. --------------------------------------------------------------------- */ .gb-products-head .woocommerce-ordering { margin: 0 !important; } .gb-products-head .woocommerce-ordering select, .gb-products-head .orderby { font-family: "Jost", sans-serif !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: .12em !important; text-transform: uppercase !important; color: var(--e-global-color-g_ink_soft, #4A4F4A) !important; background: white !important; border: 1px solid var(--e-global-color-g_line, #E6E2D8) !important; border-radius: 2px !important; padding: 12px 38px 12px 16px !important; cursor: pointer; /* Remove native select chevron, add our own via background-image */ appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%231F2521' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 10px 10px !important; transition: all .2s ease; } .gb-products-head .woocommerce-ordering select:hover, .gb-products-head .orderby:hover { border-color: var(--e-global-color-g_ink, #1F2521) !important; color: var(--e-global-color-g_ink, #1F2521) !important; } .gb-products-head .woocommerce-ordering select:focus, .gb-products-head .orderby:focus { outline: none !important; border-color: var(--e-global-color-g_ink, #1F2521) !important; } /* The dropdown options inside the native dropdown menu — these inherit the OS styling, but we can hint with text-transform: none so the options look human, not all-uppercase. */ .gb-products-head .woocommerce-ordering select option { text-transform: none !important; letter-spacing: 0 !important; font-size: 14px !important; padding: 8px; } /* --------------------------------------------------------------------- 3.4 — OPTIONAL: GRID / LIST VIEW TOGGLE If you add a custom HTML widget with view-toggle buttons after the sort dropdown, these classes style them. Mark up like:
    --------------------------------------------------------------------- */ .gb-view-toggle { display: inline-flex; gap: 4px; margin-left: 12px; } .gb-view-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: white; border: 1px solid var(--e-global-color-g_line, #E6E2D8); border-radius: 2px; color: var(--e-global-color-g_ink_soft, #4A4F4A); cursor: pointer; transition: all .2s ease; } .gb-view-btn:hover { border-color: var(--e-global-color-g_ink, #1F2521); color: var(--e-global-color-g_ink, #1F2521); } .gb-view-btn--active { background: var(--e-global-color-g_ink, #1F2521); color: var(--e-global-color-g_cream, #F9F5EE); border-color: var(--e-global-color-g_ink, #1F2521); } .gb-view-btn svg { width: 14px; height: 14px; } /* ===================================================================== GULLBORGEN — 04-product-card.css --------------------------------------------------------------------- STYLES FOR: The individual product card inside the Elementor Loop Grid APPLIES TO: Each product tile in the WooCommerce category archive This file styles the result of the LOOP ITEM template, which contains: - Product image (with hover variant swap) - Sale / New / Lab-grown badges (top-left) - Wishlist heart (top-right) - Quick-action buttons (hover overlay at bottom) - Product name - Description / attribute line - Metal-variant dots - Price + old price - Stock status indicator ELEMENTOR HOOK: Class `.gb-product-card` is set on the loop item root container in templates/loop-item-product.json IMPORTANT: This CSS targets BOTH the Elementor Loop Grid output AND the standard WooCommerce loop output (e.g. on shop pages where the Loop Grid widget isn't used). That's why .elementor-kit-28441s are duplicated. ===================================================================== */ /* --------------------------------------------------------------------- 4.1 — LOOP GRID CONTAINER The wrapper Elementor outputs around all product cards. --------------------------------------------------------------------- */ .gb-loop-grid .elementor-loop-container, .gb-loop-grid .elementor-grid { /* gap and columns set via Loop Grid widget settings — no override needed */ } /* --------------------------------------------------------------------- 4.2 — INDIVIDUAL PRODUCT CARD The root container of each loop item. --------------------------------------------------------------------- */ .gb-product-card { position: relative; cursor: pointer; transition: transform .3s ease; } /* Make the entire card clickable — Loop Grid wraps the loop item in an tag automatically. Remove its default underline. */ .elementor-loop-item .e-loop-item-link, .gb-product-card a { text-decoration: none !important; color: inherit !important; } /* --------------------------------------------------------------------- 4.3 — PRODUCT IMAGE WRAPPER Square aspect ratio, cream background, overflow hidden so the image can scale without leaving the box. --------------------------------------------------------------------- */ .gb-product-image { position: relative !important; background: var(--e-global-color-g_cream_2, #F4EFE5) !important; aspect-ratio: 1/1; overflow: hidden !important; border-radius: 2px !important; margin-bottom: 0 !important; } /* The actual tag inside the WooCommerce-product-images widget */ .gb-product-image img, .gb-product-image .elementor-widget-woocommerce-product-images img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform .8s ease, opacity .4s ease !important; } /* Hover effect — slight zoom on the image */ .gb-product-card:hover .gb-product-image img { transform: scale(1.04); } /* --------------------------------------------------------------------- 4.4 — IMAGE HOVER VARIANT SWAP When a product has a gallery image, show the SECOND image on hover. This requires the gallery image to be output as a sibling with class .alt — handled by a child theme template override OR by the "WooCommerce Hover Image" plugin (free). Recommended plugin: "Variation Swatches and Photos for WooCommerce" OR "WC Product Slider" OR add this to your child theme functions.php to output a 2nd img: add_action('woocommerce_before_shop_loop_item_title', function(){ global $product; $gallery = $product->get_gallery_image_ids(); if (!empty($gallery)) { echo wp_get_attachment_image($gallery[0], 'woocommerce_thumbnail', false, ['class' => 'gb-alt-img']); } }, 12); --------------------------------------------------------------------- */ .gb-product-image .gb-alt-img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; opacity: 0; transition: opacity .4s ease, transform .8s ease !important; } .gb-product-card:hover .gb-product-image > img:first-child { opacity: 0; } .gb-product-card:hover .gb-product-image .gb-alt-img { opacity: 1; transform: scale(1.04); } /* --------------------------------------------------------------------- 4.5 — BADGES (Sale, New, Lab-Grown, Bestseller) Stacked vertically in top-left corner. WooCommerce outputs the sale badge as . Custom badges can be added via product meta box or product tag (see PHP snippet in setup guide). --------------------------------------------------------------------- */ .gb-product-card .gb-badges, .gb-product-image .gb-badges { position: absolute !important; top: 12px !important; left: 12px !important; display: flex !important; flex-direction: column !important; gap: 6px !important; z-index: 3 !important; } /* Default WooCommerce sale badge — re-style to match design */ .gb-product-image span.onsale, .woocommerce ul.products li.product .onsale { position: absolute !important; top: 12px !important; left: 12px !important; right: auto !important; background: var(--e-global-color-g_ink, #1F2521) !important; color: var(--e-global-color-g_cream, #F9F5EE) !important; font-family: "Jost", sans-serif !important; font-size: 10px !important; font-weight: 500 !important; letter-spacing: .14em !important; text-transform: uppercase !important; padding: 5px 10px !important; border-radius: 2px !important; min-height: 0 !important; min-width: 0 !important; line-height: 1.4 !important; z-index: 3 !important; margin: 0 !important; } /* Custom badge variants — Apply via shortcode or template: Ny Lab-grown Bestselger */ .gb-badge { display: inline-block; font-family: "Jost", sans-serif; font-size: 10px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; padding: 5px 10px; border-radius: 2px; line-height: 1.4; } .gb-badge--sale { background: var(--e-global-color-g_ink, #1F2521); color: var(--e-global-color-g_cream, #F9F5EE); } .gb-badge--new { background: var(--e-global-color-g_gold, #B8935A); color: var(--e-global-color-g_cream, #F9F5EE); } .gb-badge--eco { background: var(--e-global-color-g_sage_300, #BAD3C3); color: var(--e-global-color-g_ink, #1F2521); } .gb-badge--best { background: var(--e-global-color-g_gold_deep, #8F7142); color: var(--e-global-color-g_cream, #F9F5EE); } /* --------------------------------------------------------------------- 4.6 — WISHLIST HEART (TI Wishlist plugin) TI Wishlist outputs `[ti_wishlists_addtowishlist]` as:
    …
    We restyle it as a circular floating button in the top-right corner. --------------------------------------------------------------------- */ .gb-wishlist-btn, .gb-product-card .ti-woocommerce-wishlist-add-to-wishlist { position: absolute !important; top: 12px !important; right: 12px !important; z-index: 4 !important; background: rgba(251,250,246,.85) !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all .2s ease !important; padding: 0 !important; } .gb-wishlist-btn:hover, .gb-product-card .ti-woocommerce-wishlist-add-to-wishlist:hover { background: white !important; transform: scale(1.05); } /* The link/button inside the wishlist wrapper */ .gb-wishlist-btn a, .gb-product-card .add_to_wishlist { width: 100%; height: 100%; display: flex !important; align-items: center !important; justify-content: center !important; color: var(--e-global-color-g_ink, #1F2521) !important; font-size: 14px; text-decoration: none !important; } /* Hide TI's default text label, keep only the heart icon */ .gb-wishlist-btn .ti-woocommerce-wishlist-text, .gb-product-card .ti-woocommerce-wishlist-text, .gb-wishlist-btn .add_to_wishlist span:not(.ti-woocommerce-wishlist-icon), .gb-product-card .add_to_wishlist span:not(.ti-woocommerce-wishlist-icon) { display: none !important; } /* The heart icon — TI uses a font icon. When item is wishlisted, TI adds class .added or .ti-woocommerce-wishlist-added */ .gb-product-card .add_to_wishlist .ti-woocommerce-wishlist-icon { font-size: 16px !important; color: var(--e-global-color-g_ink, #1F2521) !important; transition: color .2s ease; } .gb-product-card .ti-woocommerce-wishlist-added .ti-woocommerce-wishlist-icon, .gb-product-card .add_to_wishlist.added .ti-woocommerce-wishlist-icon { color: var(--e-global-color-g_gold, #B8935A) !important; } /* --------------------------------------------------------------------- 4.7 — QUICK ACTIONS OVERLAY (hover only) Bottom of the image. Two buttons that slide up on hover: "Hurtig view" and "I kurv". To enable: add a Container widget at the bottom of the loop item with CSS class `gb-quick-actions`, containing two button widgets. --------------------------------------------------------------------- */ .gb-product-card .gb-quick-actions { position: absolute !important; left: 12px !important; right: 12px !important; bottom: 12px !important; display: flex !important; flex-direction: row !important; gap: 6px !important; opacity: 0; transform: translateY(8px); transition: all .35s ease !important; z-index: 3; pointer-events: none; } .gb-product-card:hover .gb-quick-actions { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Each quick-action button */ .gb-product-card .gb-quick-actions .elementor-button, .gb-product-card .gb-qa-btn { flex: 1 !important; background: rgba(251,250,246,.95) !important; backdrop-filter: blur(4px) !important; color: var(--e-global-color-g_ink, #1F2521) !important; font-family: "Jost", sans-serif !important; font-size: 10px !important; letter-spacing: .14em !important; text-transform: uppercase !important; padding: 10px 8px !important; border-radius: 2px !important; border: none !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; transition: background .2s ease !important; font-weight: 500 !important; } .gb-product-card .gb-quick-actions .elementor-button:hover, .gb-product-card .gb-qa-btn:hover { background: var(--e-global-color-g_ink, #1F2521) !important; color: var(--e-global-color-g_cream, #F9F5EE) !important; transform: none !important; box-shadow: none !important; } /* --------------------------------------------------------------------- 4.8 — PRODUCT NAME Pulled from WooCommerce-product-title widget. --------------------------------------------------------------------- */ .gb-product-card .elementor-widget-woocommerce-product-title h1, .gb-product-card .elementor-widget-woocommerce-product-title h2, .gb-product-card .elementor-widget-woocommerce-product-title div, .gb-product-card .gb-product-name { font-family: "Jost", sans-serif !important; font-size: 14px !important; font-weight: 400 !important; color: var(--e-global-color-g_ink, #1F2521) !important; margin: 14px 0 6px 0 !important; letter-spacing: .01em !important; text-align: center !important; line-height: 1.4 !important; } /* --------------------------------------------------------------------- 4.9 — PRODUCT DESCRIPTION / ATTRIBUTE LINE Optional: a short line of text under the name like "TW-VS · Gult gull". You can populate this by adding a custom shortcode in the loop item that pulls a specific product attribute, e.g.: [woocommerce_product_attribute attribute="materiale"] Or use ACF + Elementor Dynamic Tags. --------------------------------------------------------------------- */ .gb-product-card .gb-product-descr { font-family: "Jost", sans-serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--e-global-color-g_ink_mute, #8A8E89); margin: 0 0 12px 0; text-align: center; } /* --------------------------------------------------------------------- 4.10 — METAL VARIANT DOTS Small circular swatches showing which metals a product is available in. For variable products, you can output these via the "Variation Swatches for WooCommerce" plugin OR by adding a custom field to each product listing the available metals. Markup expected:
    --------------------------------------------------------------------- */ .gb-product-card .gb-metals { display: flex; gap: 6px; justify-content: center; margin-bottom: 12px; } .gb-metal { display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,.1); cursor: pointer; transition: transform .2s ease; } .gb-metal:hover { transform: scale(1.2); } .gb-metal--gult { background: linear-gradient(135deg, #f4d99c, #b8935a); } .gb-metal--hvitt { background: linear-gradient(135deg, #f5f5f5, #b0b0b6); } .gb-metal--rose { background: linear-gradient(135deg, #f7d4c4, #c08070); } /* --------------------------------------------------------------------- 4.11 — PRODUCT PRICE WooCommerce-product-price widget output. kr 8 999 kr 11 999 --------------------------------------------------------------------- */ .gb-product-card .elementor-widget-woocommerce-product-price, .gb-product-card .gb-product-price { text-align: center !important; } .gb-product-card .price, .gb-product-card .gb-product-price .price { display: flex !important; align-items: baseline !important; justify-content: center !important; gap: 10px !important; flex-wrap: wrap; font-family: "Jost", sans-serif !important; margin: 0 !important; } /* Current price */ .gb-product-card .price ins, .gb-product-card .price > .amount, .gb-product-card .price > span:not(del) .amount { font-size: 16px !important; font-weight: 500 !important; color: var(--e-global-color-g_ink, #1F2521) !important; text-decoration: none !important; background: none !important; } /* Old price (strikethrough) */ .gb-product-card .price del, .gb-product-card .price del .amount { font-size: 12px !important; color: var(--e-global-color-g_ink_mute, #8A8E89) !important; text-decoration: line-through !important; font-weight: 400 !important; opacity: 1 !important; } /* "Tidligere kr" prefix label — optional, requires PHP filter override. Without override, WooCommerce just shows the strikethrough number. */ .gb-product-card .gb-price-old-label::before { content: "Tidligere "; color: var(--e-global-color-g_ink_mute, #8A8E89); font-size: 12px; } /* --------------------------------------------------------------------- 4.12 — STOCK STATUS INDICATOR "På lager" (green) or "2 igjen" (amber) shown as a small dot+text. To output this, add a custom HTML widget or template snippet that conditionally renders based on $product->get_stock_quantity(). Markup: På lager 2 igjen Utsolgt --------------------------------------------------------------------- */ .gb-stock { display: inline-flex; align-items: center; gap: 6px; font-family: "Jost", sans-serif; font-size: 11px; color: var(--e-global-color-g_sage_500, #6E9A7E); margin-left: auto; } .gb-stock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--e-global-color-g_sage_500, #6E9A7E); } .gb-stock--low { color: var(--e-global-color-g_gold_deep, #8F7142); } .gb-stock--low::before { background: var(--e-global-color-g_gold, #B8935A); } .gb-stock--out { color: var(--e-global-color-g_ink_mute, #8A8E89); } .gb-stock--out::before { background: var(--e-global-color-g_ink_mute, #8A8E89); } /* --------------------------------------------------------------------- 4.13 — LOAD MORE BUTTON & PAGINATION Loop Grid widget includes a "Load More" button — restyle to match our outline button variant. --------------------------------------------------------------------- */ .gb-loop-grid .e-load-more-anchor + .elementor-button-wrapper, .gb-loop-grid .elementor-load-more-anchor + a, .gb-loop-grid .elementor-button-link[class*="load-more"] { margin: 36px auto 0 !important; display: block !important; } .gb-loop-grid .elementor-button.load-more-button, .gb-loop-grid a.elementor-button[class*="load-more"] { background: white !important; color: var(--e-global-color-g_ink, #1F2521) !important; border: 1px solid var(--e-global-color-g_ink, #1F2521) !important; padding: 16px 36px !important; } .gb-loop-grid .elementor-button.load-more-button:hover, .gb-loop-grid a.elementor-button[class*="load-more"]:hover { background: var(--e-global-color-g_ink, #1F2521) !important; color: var(--e-global-color-g_cream, #F9F5EE) !important; } /* Numbered pagination — used if you choose "numbered" pagination type in the Loop Grid widget */ .gb-loop-grid .elementor-pagination { display: flex !important; justify-content: center !important; align-items: center !important; gap: 8px !important; margin-top: 56px !important; } .gb-loop-grid .elementor-pagination .page-numbers { width: 40px !important; height: 40px !important; border: 1px solid var(--e-global-color-g_line, #E6E2D8) !important; border-radius: 2px !important; font-size: 14px !important; color: var(--e-global-color-g_ink_soft, #4A4F4A) !important; background: white !important; display: flex !important; align-items: center !important; justify-content: center !important; text-decoration: none !important; transition: all .2s ease; font-family: "Jost", sans-serif !important; } .gb-loop-grid .elementor-pagination .page-numbers:hover { border-color: var(--e-global-color-g_ink, #1F2521) !important; color: var(--e-global-color-g_ink, #1F2521) !important; } .gb-loop-grid .elementor-pagination .page-numbers.current { background: var(--e-global-color-g_ink, #1F2521) !important; color: var(--e-global-color-g_cream, #F9F5EE) !important; border-color: var(--e-global-color-g_ink, #1F2521) !important; } /* Prev / Next arrows — wider with text */ .gb-loop-grid .elementor-pagination .page-numbers.prev, .gb-loop-grid .elementor-pagination .page-numbers.next { width: auto !important; padding: 0 16px !important; } /* ===================================================================== GULLBORGEN — 05-education-section.css --------------------------------------------------------------------- STYLES FOR: The "Diamantskolen — De fire C-ene" educational section that appears below the product grid on category pages APPLIES TO: Four-card grid explaining Carat, Clarity, Colour, Cut This is mainly for diamond-related categories (Forlovelsesringer, Enstensringer, Diamantringer). For other categories you can hide the section in Elementor's Visibility settings, or substitute it with a different educational module (e.g. metals, gemstones). ELEMENTOR HOOK: Class `.gb-education` is set on the section in JSON. Each card has class `.gb-edu-card`. ===================================================================== */ /* --------------------------------------------------------------------- 5.1 — SECTION CONTAINER --------------------------------------------------------------------- */ .gb-education { /* Spacing handled by Elementor padding settings. Top padding 110px desktop / 64px mobile already in JSON. */ } /* --------------------------------------------------------------------- 5.2 — INDIVIDUAL CARD Cream background, hairline border, lifts on hover. --------------------------------------------------------------------- */ .gb-edu-card { transition: all .3s ease !important; border-radius: 2px !important; } .gb-edu-card:hover { background: white !important; border-color: var(--e-global-color-g_sage_300, #BAD3C3) !important; transform: translateY(-3px); box-shadow: 0 8px 24px rgba(31,37,33,.06), 0 2px 6px rgba(31,37,33,.04); } /* --------------------------------------------------------------------- 5.3 — BIG ITALIC GOLD "C" The decorative letter C at the top of each card. 80px italic Cormorant Garamond in gold. --------------------------------------------------------------------- */ .gb-edu-letter, .gb-edu-card .gb-edu-letter, .gb-edu-card .elementor-widget:first-child h1, .gb-edu-card .elementor-widget:first-child h2, .gb-edu-card .elementor-widget:first-child div { font-family: "Cormorant Garamond", serif !important; font-size: 80px !important; line-height: 1 !important; color: var(--e-global-color-g_gold, #B8935A) !important; font-weight: 300 !important; font-style: italic !important; margin-bottom: 8px !important; } /* --------------------------------------------------------------------- 5.4 — WORD (Carat / Clarity / Colour / Cut) The H4 inside each card. The H4 global typography from the kit already gives us Cormorant 22px uppercase letter-spaced — but for THIS section we want the word to NOT be uppercase, just elegant serif title-case. Override below. --------------------------------------------------------------------- */ .gb-edu-card h4 { text-transform: none !important; letter-spacing: 0 !important; font-size: 22px !important; font-weight: 500 !important; margin-bottom: 6px !important; font-family: "Cormorant Garamond", serif !important; color: var(--e-global-color-g_ink, #1F2521) !important; } /* --------------------------------------------------------------------- 5.5 — NUMBER + LABEL ROW "01 — Vekt", "02 — Klarhet", etc. Small uppercase muted label between the H4 and the body text. --------------------------------------------------------------------- */ .gb-edu-no, .gb-edu-card .gb-edu-no { font-family: "Jost", sans-serif !important; font-size: 11px !important; letter-spacing: .2em !important; text-transform: uppercase !important; color: var(--e-global-color-g_ink_mute, #8A8E89) !important; margin-bottom: 16px !important; font-weight: 400 !important; } /* --------------------------------------------------------------------- 5.6 — BODY COPY The descriptive paragraph in each card. --------------------------------------------------------------------- */ .gb-edu-card p, .gb-edu-card .elementor-widget-text-editor p { font-size: 13px !important; color: var(--e-global-color-g_ink_soft, #4A4F4A) !important; line-height: 1.6 !important; margin-bottom: 0 !important; } /* --------------------------------------------------------------------- 5.7 — OPTIONAL "READ MORE" LINK If you add a "Les mer →" link to each card via a button widget with CSS class `gb-edu-more`, this styles it. --------------------------------------------------------------------- */ .gb-edu-more, .gb-edu-card a.gb-edu-more, .gb-edu-card .gb-edu-more .elementor-button { display: inline-flex !important; align-items: center !important; gap: 6px !important; margin-top: 18px !important; font-family: "Jost", sans-serif !important; font-size: 11px !important; letter-spacing: .18em !important; text-transform: uppercase !important; color: var(--e-global-color-g_gold_deep, #8F7142) !important; font-weight: 500 !important; background: transparent !important; border: none !important; padding: 0 !important; } .gb-edu-card a.gb-edu-more:hover { color: var(--e-global-color-g_ink, #1F2521) !important; }/* End custom CSS */