/*
Theme Name: Jogasetrid
Template: astra
*/

/* ============================================================
   JOGASETRID CHILD THEME — CONSOLIDATED STYLESHEET

   Section list:
     1.  Typography overrides
     2.  Global — fonts & resets
     3.  Single post layout (Á döfinni)
     4.  Homepage background color
     5.  Footer layout
     6.  Header / main navigation menu
     7.  Mobile menu (popup)
     8.  Newsletter (Mailchimp)
     9.  Image gallery carousel arrows
     10. Hero section ("Jóga fyrir alla")
     11. Welcome block ("Velkomin í Jógasetrið")
     12. All archive cards (any post type)
     13. Archive: page title spacing
     14. Homepage schedule: day view + week view
     15. Single yoga class page schedule list
     16. Moved from Customizer Additional CSS
     17. Testimonial carousel (Post Carousel block)
     18. Yoga class card action buttons
     19. Site-wide tabs (.jogasetrid-tabs)
     20. Tab panels: entrance animation (all tab blocks)
     21. Jógatímar archive: title block
     22. Spectra image gallery: fixed aspect ratio
     23. Starfsfólk archive: hover gradient + centered button
     24. "Á döfinni" homepage unit (desktop)
     25. "Á döfinni" homepage unit — mobile layout
     26. "Image-quote" units (two versions)
     27. Global — boxed container mobile padding
     XX. Yoga class page: reset nested container spacing
     28. Global — focus outlines and button shadows
         (no Section 29)
     30. Yoga classes: stack 50%-width button pairs on mobile
     31. Search results: card background + image aspect ratio
     32. Mobile header: custom hamburger + close icons
     33. Tab panels: visually hide without display:none
     34. Bunny: video embed, list, grid and overlay
     35. Bunny: watch progress
     36. Bunny: free videos
     37. Bunny: buy box
     38. Bunny: buy popup
     39. Netjóga package page layout
     40. Netjóga package cards (Query Loop)
         (no Section 41)
     42. My Account (Mínar síður)
     43. My Account: Námskeiðin mín
     44. Checkout (Greiðsla)
     45. Shop page (Netjóga)
     46. Verðskrá (price list)
         (no Section 47)
     48. Kennaranám (teacher training pages)
     49. Header account (Mínar síður)
   ============================================================ */


/* ============================================================
   SECTION 1 — TYPOGRAPHY OVERRIDES
   Heading spacing in content, the yoga class container, and page
   titles. Paragraph spacing comes from Astra; components that
   need their own paragraph spacing set it in their own section
   with a stronger selector. Page entry titles (Astra's banner)
   and the WooCommerce shop/category title (Netjóga) share one
   look: 48px, centred, with 60px space above and below.
   ============================================================ */

/* Headings in content: no top margin, small bottom margin */
.entry-content :where(h1,h2,h3,h4,h5,h6) {
	margin-top: 0 !important;
	margin-bottom: 0.5em!important;
}

/* Archive title (Query Title block): no margin */
.wp-block-query-title h1{
	margin:0!important;
}

/* Yoga class container: padding, background and gaps */
.wp-block-uagb-container.yoga-classes {
	padding-top: 80px !important;
	padding-bottom: 60px !important;
	padding-left: 80px !important;
	padding-right: 80px !important;
	margin-bottom: 60px !important;
	background-color: var(--ast-global-color-5) !important;
	row-gap: 40px !important;
	column-gap: 40px !important;
}

/* Yoga class container: less padding on tablet */
@media (max-width: 768px) {
	.wp-block-uagb-container.yoga-classes {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
		padding-left: 40px !important;
		padding-right: 40px !important;
	}
}

/* Yoga class container: less padding on mobile */
@media (max-width: 544px) {
	.wp-block-uagb-container.yoga-classes {
		padding-top: 30px !important;
		padding-bottom: 30px !important;
		padding-left: 30px !important;
		padding-right: 30px !important;
	}
}

/* Lists in yoga class containers: no top space, small bottom space */
.yoga-classes ul {
	margin-block-start: 0em!important;
	margin-block-end: 1em!important;
}

/* Yoga class paragraphs (placeholder) */
.type-yoga-classes p {

}

/* Yoga class section intro (placeholder) */
.yoga-class-section-intro{

}

/* Section titles: space below */
.section-title {
	margin-bottom: 30px !important;
}

/* Page title banner: no background */
.ast-single-entry-banner {
	background: transparent !important;
}

/* Page title banner on pages: 60px above and below */
.ast-single-entry-banner[data-post-type="page"] {
	padding-top: 60px !important;
	padding-right: 0 !important;
	padding-bottom: 60px !important;
	padding-left: 0 !important;
}

/* Page title: 48px, centred */
.ast-single-entry-banner[data-post-type="page"] h1 {
	font-size: 48px !important;
	text-align: center !important;
}

/* Shop and category page header (Netjóga): same spacing as the page title banner */
.woocommerce-products-header {
	margin: 0 !important;
	padding: 60px 0 !important;
	text-align: center;
}

/* Shop and category page title (Netjóga): same look as page titles */
.woocommerce-products-header__title.page-title {
	margin: 0 !important;
	font-size: 48px !important;
	font-weight: 600 !important;
	text-align: center !important;
}


/* ============================================================
   SECTION 2 — GLOBAL: FONTS & RESETS
   Removes Astra's default box shadow from figures, tables and
   images inside page content, so no image or block gets a shadow
   unless a section adds one on purpose.
   ============================================================ */

/* Figures and tables: no shadow */
.entry-content figure,
.entry-content .wp-block-table {
  box-shadow: none !important;
}

/* Images (including the buy box divider): no shadow */
.entry-content img {
  box-shadow: none !important;
}


/* ============================================================
   SECTION 3 — SINGLE POST LAYOUT (Á DÖFINNI)
   Translated from the old Divi custom-post-build styles, using
   Astra's native single-post markup. Post content is written in
   the Classic editor (plain HTML).
   Astra prints the featured image (.ast-single-post-featured-
   section) above the <article>, both inside the same container,
   so:
     - the article is the white box: the full width of the
       container (no side margin), 100px side padding, 140px top
       padding so the text starts below the image
     - the image is a frame as wide as the text (container width
       minus the side padding, so it lines up with the text), with
       a fixed 11:5 shape, pulled down 80px so it overlaps the top
       edge of the box; the image fills the frame like a cover
       background (cropped, never stretched)
   Post title: 40px (36px on mobile), so it stays larger than the
   H2 headings in the content. All other headings take their
   styles from Astra (Customizer > Global > Typography).
   Paragraphs, lists and images get space below them (Section 1
   removes paragraph spacing site-wide). Buttons from the Classic
   editor are links with the class kaupa-hnappur.
   Padding and margins use !important because Section XX sets
   padding: 0 !important on every .ast-article-single (for the
   yoga class pages).
   ============================================================ */

:root {
	--single-post-padding: 100px;
}

/* Image frame: text width, centred, fixed 11:5 shape, overlapping the box's top edge */
body.single-post .ast-single-post-featured-section {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	z-index: 5 !important;
	width: calc(100% - 2 * var(--single-post-padding)) !important;
	max-width: none !important;
	height: auto !important;
	aspect-ratio: 11 / 5;
	margin: 60px auto -80px !important;
	padding: 0 !important;
	overflow: hidden !important;
	transform: none !important;
}

/* Featured image: fills the frame like a cover background */
body.single-post .ast-single-post-featured-section img {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	object-fit: cover !important;
	object-position: center center !important;
	box-shadow: none !important;
}

/* Article: the white box, full container width, room at the top for the image overlap */
body.single-post .ast-article-single {
	position: relative !important;
	z-index: 1 !important;
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 0 60px !important;
	padding: 140px var(--single-post-padding) 70px !important;
	background-color: #ffffff !important;
}

/* Empty entry header (when there is no title): no space */
body.single-post .entry-header:empty {
	display: none;
}

/* Post title: 40px, larger than the H2 headings in the content */
.single-post .entry-title {
	font-size: 40px !important;
}

/* Paragraphs, lists and images in the post: space below each */
.single-post .entry-content p,
.single-post .entry-content ul,
.single-post .entry-content ol {
	margin-bottom: 1em;
}

/* Images in the post: never wider than the text */
.single-post .entry-content img {
	max-width: 100%;
	height: auto;
}

/* Buttons in the post (block buttons): purple outline */
.single-post .entry-content .wp-block-button__link {
	border: 1.2px solid #822791 !important;
	background: transparent !important;
	color: #822791 !important;
	font-size: 17px !important;
	padding-top: 0.7em !important;
	padding-bottom: 0.7em !important;
	margin-top: 50px;
}

/* Button from the Classic editor (kaupa-hnappur): purple 1px outline, uppercase */
.single-post .entry-content a.kaupa-hnappur {
	display: inline-block;
	margin-top: 30px;
	padding: 0.7em 2em;
	background: transparent;
	border: 1px solid #822791;
	border-radius: 0;
	color: #822791 !important;
	font-size: 17px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-decoration: none !important;
	text-transform: uppercase;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Classic editor button on hover: filled purple, white text */
.single-post .entry-content a.kaupa-hnappur:hover {
	background: #822791;
	color: #ffffff !important;
}

/* Previous / next post links: hidden */
.navigation.post-navigation {
	display: none !important;
}

/* Tablet (Astra breakpoint): less side padding */
@media (max-width: 921px) {
	:root {
		--single-post-padding: 40px;
	}

	body.single-post .ast-article-single {
		padding-top: 120px !important;
		padding-bottom: 50px !important;
	}
}

/* Mobile (Astra breakpoint): smaller overlap and padding, smaller title */
@media (max-width: 544px) {
	:root {
		--single-post-padding: 20px;
	}

	body.single-post .ast-single-post-featured-section {
		margin: 30px auto -50px !important;
	}

	body.single-post .ast-article-single {
		padding-top: 80px !important;
		padding-bottom: 40px !important;
	}

	.single-post .entry-title {
		font-size: 36px !important;
	}
}

/* ============================================================
   SECTION 4 — HOMEPAGE BACKGROUND COLOR
   ============================================================ */

body.home {
  background-color: #f2f1ec !important;
}

body.home .ast-container,
body.home .site-content,
body.home #content,
body.home #primary,
body.home .entry-content {
  background-color: #f2f1ec !important;
}


/* ============================================================
   SECTION 5 — FOOTER LAYOUT
   ============================================================ */

.jogasetrid-footer .uagb-container-inner-blocks-wrap {
  display: grid !important;
  grid-template-columns: 130px auto auto auto auto !important;
  gap: 30px;
  align-items: start !important;
}

.jogasetrid-footer .uagb-container-inner-blocks-wrap > .wp-block-uagb-container:not(.footer-logo) {
  max-width: max-content !important;
  align-self: start !important;
}

.jogasetrid-footer .footer-logo {
  align-self: start !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

.jogasetrid-footer .footer-logo img {
  width: 100px;
  max-width: 100px;
}

.jogasetrid-footer .adress-info,
.jogasetrid-footer .contact-info,
.jogasetrid-footer .social-icons {
  white-space: nowrap;
}

.jogasetrid-footer .wp-block-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.jogasetrid-footer .wp-block-list li {
  list-style: none;
}

.jogasetrid-footer .social-icons .uagb-block-c61036b9 {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  justify-content: flex-start !important;
  width: fit-content !important;
  max-width: fit-content !important;
}

.jogasetrid-footer .social-icons .uagb-icon-wrapper {
  display: inline-flex !important;
  width: fit-content !important;
  max-width: fit-content !important;
}

.jogasetrid-footer .social-icons .uagb-icon-wrapper .uagb-svg-wrapper:hover {
  background: #debedd !important;
  transition: background 0.2s ease;
}

.jogasetrid-footer .contact-info a {
  text-decoration: none;
  transition: color 0.2s ease;
}

.jogasetrid-footer .contact-info a:hover {
  color: #debedd !important;
}

@media (max-width: 768px) {
  .jogasetrid-footer .uagb-container-inner-blocks-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    text-align: center;
  }

  .jogasetrid-footer .uagb-container-inner-blocks-wrap > .wp-block-uagb-container:not(.footer-logo) {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    align-items: center !important;
  }

  .jogasetrid-footer .adress-info,
  .jogasetrid-footer .contact-info,
  .jogasetrid-footer .social-icons {
    white-space: normal !important;
  }

  .jogasetrid-footer .footer-logo {
    justify-content: center !important;
  }

  .jogasetrid-footer .footer-logo img {
    width: 100px;
  }

  .jogasetrid-footer .footer-description {
    order: 5;
  }

  .jogasetrid-footer .social-icons .uagb-block-c61036b9 {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
  }
}

/* ============================================================
   SECTION 6 — HEADER / MAIN NAVIGATION MENU

   Layout: the whole right-hand header group (menu + "Bóka tíma"
   button + search + account icon) is pinned to the bottom of the
   header row, with the menu's own hover/current underline sitting
   30px below the menu text — matching the old Divi header's
   vertical spacing. The button and search icon get a slightly
   smaller 25px bottom offset so they sit visually level. The
   account unit ("Mínar síður", icon plus text) gets 32px, the
   same as the menu links (30px padding + 2px underline border),
   which lines its text up with the menu text together with
   line-height: 1 on the account text (header account section).
   Change one and the other may need adjusting too. This vertical
   alignment is desktop-only, since on mobile the header
   right-hand group only contains the hamburger icon, which should
   stay vertically centered rather than bottom-aligned.

   Top-level links: black by default, purple text with a purple
   underline on hover, current page, and open dropdown. Underline
   matches the width of the text exactly, not the spacing around
   it. Current-page detection also covers current-menu-ancestor
   and current-menu-parent, so a menu item linking to a post type
   archive (e.g. "Jógatímar") still gets the purple underline when
   viewing a single post that belongs to that archive (e.g. a
   single yoga class under /jogatimar/), not just on the archive
   page itself.

   Dropdown items: white background + purple text on hover and
   current, applied to the <li> itself (which already spans the
   full row width), not the <a> inside it. The background-color
   transition is on the base <li> rule (not just :hover) so both
   fading in and out are animated.

   Header button ("Bóka tíma"): Astra prints the button twice,
   the real button (.ast-custom-button-link) and a menu-link copy.
   The real one is hidden here and the menu-link copy is styled
   instead, so Astra's Customizer button settings (font size,
   colours) do NOT reach it: its font size and weight are set in
   this section. Solid purple, turns orange on hover.
   ============================================================ */

@media(min-width:981px){

/* --- Vertical position of the whole right-hand header group (desktop only) --- */
.ast-builder-grid-row {
	align-items: stretch !important;
}

.site-header-primary-section-right {
	align-self: flex-end !important;
	display: flex !important;
	align-items: flex-end !important;
}

/* --- Button and search icon sit level with the menu text --- */
.ast-header-button-1,
.ast-header-search {
	padding-bottom: 25px !important;
}

/* --- Account unit (icon + "Mínar síður"): same bottom offset as the menu links, 30px + 2px border;
   lines up together with line-height: 1 on the account text (header account section) --- */
.ast-header-account {
	padding-bottom: 32px !important;
}

}

/* --- Spacing between top-level items --- */
.main-header-menu .menu-item {
    margin-left: 12px;
    margin-right: 12px;
}

/* --- Top-level link --- */
.main-header-menu .menu-item > .menu-link {
    font-weight: 500!important;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 30px;
    border-bottom: 2px solid transparent;
    color: #222222;
}

@media(min-width:981px){

.main-header-menu .menu-item:not(.menu-item-has-children) > .menu-link:hover {
    color: #822791 !important;
    border-bottom-color: #822791;
}

.main-header-menu .menu-item-has-children:hover > .menu-link {
    color: #822791 !important;
    border-bottom-color: #822791;
}

.main-header-menu li.menu-item-has-children .sub-menu a {
    padding-bottom: 10px !important;
}

}

/* --- Current page (also covers ancestor/parent state, e.g. a
   single yoga class page under the "Jógatímar" archive) --- */
.current_page_item .menu-link,
.current-menu-item > .menu-link,
.current-menu-ancestor > .menu-link,
.current-menu-parent > .menu-link {
    color: #822791 !important;
    border-bottom-color: #822791 !important;
}

/* --- Dropdown submenus --- */
#ast-hf-menu-1 .sub-menu {
    margin-top: 0px;
    border-top: none !important;
    background-color: #f2f1ec !important;
    padding: 0 !important;
}

#ast-hf-menu-1 .sub-menu li a {
	display: block !important;
	padding: 10px 20px !important;
}

/* Submenu links: black by default */
#ast-hf-menu-1 .sub-menu li a,
#ast-hf-menu-1 .sub-menu li a.menu-link {
    color: #222222 !important;
    font-weight: 600 !important;
    border: none !important;
}

#ast-hf-menu-1 .sub-menu li {
	margin-left: 0 !important;
	margin-right: 0 !important;
	transition: background-color 0.7s ease !important;
}

/* Submenu rows: white background + purple text on hover and
   current, applied to the <li> itself (already full row width) */
#ast-hf-menu-1 .sub-menu li:hover,
#ast-hf-menu-1 .sub-menu li.current-menu-item {
	background-color: #fff !important;
}

#ast-hf-menu-1 .sub-menu li:hover > a,
#ast-hf-menu-1 .sub-menu li.current-menu-item > a {
	color: #822791 !important;
}

/* --- Header button ("Bóka tíma"): solid purple, font size set here (Customizer does not reach this copy) --- */
.ast-header-button-1 .menu-link {
    display: inline-block;
    background: #822791;
    color: #fff !important;
    padding: 5px 20px !important;
    border-radius: 0px;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

/* --- Header button on hover: orange --- */
.ast-header-button-1 .menu-link:hover {
    background: #C96C1E;
    color: #fff !important;
}

/* --- Astra's real header button: hidden, the menu-link copy above is shown instead --- */
.ast-header-button-1 .ast-custom-button-link {
    display: none !important;
}

/* ============================================================
   SECTION 7 — MOBILE MENU (popup)
   The mobile menu opens as a full-screen purple drawer that
   slides down from the top. Links are white: top-level 20px bold
   with line-height 3 (60px tall), submenu levels 18px regular
   with line-height 2 (36px tall). Astra's own arrows are hidden
   and replaced by a +/− toggle drawn with two lines (::before
   and ::after), placed 30px left of its link. The toggle is as
   tall as its own link and sits at the top of it, so the +/−
   is centred on the link text on every level (top level,
   second and third level), whether the submenu is open or not.
   Submenus open when their toggle has aria-expanded="true".
   The site logo is added to the drawer header by a script in
   functions.php.
   ============================================================ */

/* Drawer, content and inner wrapper: purple background */
#ast-mobile-popup.ast-mobile-popup-drawer,
#ast-mobile-popup .ast-mobile-popup-content,
#ast-mobile-popup .ast-mobile-popup-inner {
    background: #822791 !important;
}

/* Drawer: full screen, hidden above the screen until opened */
#ast-mobile-popup.ast-mobile-popup-drawer {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%);
    transition: transform 0.4s ease, opacity 0.4s ease, visibility 0s linear 0.4s;
}

/* Drawer open: slides down into view */
#ast-mobile-popup.ast-mobile-popup-drawer.active.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: transform 0.4s ease, opacity 0.4s ease, visibility 0s linear 0s;
}

/* Drawer content: plain block */
#ast-mobile-popup .ast-mobile-popup-content {
    display: block !important;
}

/* Menu: side padding, room on the left for the toggles */
#ast-mobile-popup #ast-hf-mobile-menu {
    padding-left: 30px;
    padding-right: 30px;
}

/* Links: white bold, no padding, line-height 3 */
#ast-mobile-popup a.menu-link {
    color: #fff !important;
    font-weight: 700!important;
    padding: 0 !important;
	    line-height: 3 !important;
}

/* Link text: white bold */
#ast-mobile-popup .menu-text {
    color: #fff !important;
    font-weight: 700!important;
}

/* Top-level links: 20px (60px tall with line-height 3) */
#ast-mobile-popup li > a.menu-link {
    font-size: 20px;
}

/* Submenu links, every level: 18px regular, line-height 2 (36px tall) */
#ast-mobile-popup .sub-menu li > a.menu-link {
    font-size: 18px;
    font-weight: 400 !important;
    line-height: 2 !important;
}

/* Submenu link text: regular weight */
#ast-mobile-popup .sub-menu li > a.menu-link .menu-text {
    font-weight: 400 !important;
}

/* Close button icon: white */
#ast-mobile-popup .menu-toggle-close svg {
    fill: #fff !important;
}

/* Items and links: no borders */
#ast-mobile-popup li,
#ast-mobile-popup a.menu-link {
    border: none !important;
}

/* Astra's own arrow icons: hidden */
#ast-mobile-popup .ast-icon.icon-arrow {
    display: none !important;
}

/* Astra's dropdown toggle inside the link: hidden */
#ast-mobile-popup .dropdown-menu-toggle {
    display: none !important;
}

/* Items with a submenu: positioning context for their toggle */
#ast-mobile-popup li.menu-item-has-children {
    position: relative;
}

/* Links with a submenu: full width block */
#ast-mobile-popup li.menu-item-has-children > a.menu-link {
    display: block;
    padding-left: 0 !important;
}

/* Submenus: hidden until opened */
#ast-mobile-popup .menu-item-has-children > .sub-menu {
    display: none;
}

/* Submenu shown when its toggle is open */
#ast-mobile-popup .menu-item-has-children > .ast-menu-toggle[aria-expanded="true"] ~ .sub-menu {
    display: block;
}

/* Toggle: 30px left of its link, top-level link height (60px), at the top of the link, no button look */
#ast-mobile-popup button.ast-menu-toggle {
    position: absolute;
    top: 0 !important;
    left: -30px;
    width: 16px;
    height: 60px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    appearance: none;
    -webkit-appearance: none;
    transform: none !important;
}

/* Toggle on submenu levels (second, third): submenu link height (36px) */
#ast-mobile-popup .sub-menu button.ast-menu-toggle {
    height: 36px !important;
}

/* Toggle: horizontal line of the + and − */
#ast-mobile-popup button.ast-menu-toggle::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 2px;
    background: #fff;
    transform: translate(-50%, -50%);
}

/* Toggle: vertical line of the + */
#ast-mobile-popup button.ast-menu-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 2px;
    background: #fff;
    transform: translate(-50%, -50%) rotate(90deg);
    transition: transform 0.2s ease;
}

/* Open toggle: vertical line shrinks away, leaving − */
#ast-mobile-popup button.ast-menu-toggle[aria-expanded="true"]::after {
    transform: translate(-50%, -50%) rotate(90deg) scaleY(0);
}

/* Drawer header: room for the logo and close button */
#ast-mobile-popup .ast-mobile-popup-header {
    display: block;
    position: relative;
    padding: 40px 30px 30px;
}

/* Close button: top right corner */
#ast-mobile-popup .menu-toggle-close {
    position: absolute;
    top: 30px;
    right: 30px;
}

/* Logo in the drawer header: centred */
#ast-mobile-popup .mobile-menu-logo {
    text-align: center;
}

/* Logo image: 40% of the width, at most 280px */
#ast-mobile-popup .mobile-menu-logo img {
    width: 40%;
    max-width: 280px;
    height: auto !important;
    display: inline-block !important;
}

/* ============================================================
   SECTION 8 — NEWSLETTER (Mailchimp), footer signup form
   Width and section spacing are handled entirely by Spectra's
   own Container block settings in the editor now. This section
   only covers what CSS still needs to control: the title/
   description text styling, and the Mailchimp form layout
   (side by side on desktop, stacked on mobile).
   ============================================================ */

.newsletter-section {
	position: relative;
	z-index: 2;
}


.newsletter-section .section-intro {
    width:100%!important;

}

.jogasetrid-newsletter form {
	padding: 0 !important;
}

.jogasetrid-newsletter #mc_embed_signup_scroll {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch;
	gap: 20px;
	width: 100%;
	margin: 0 !important;
}

.jogasetrid-newsletter .mc-field-group {
	flex: 1 1 auto !important;
	margin: 0 !important;
	width: auto !important;
	min-width: 0;
}

.jogasetrid-newsletter .mc-field-group input {
	font-size: 16px !important;
	color: #222222 !important;
	background: #fff !important;
	border: none !important;
	border-radius: 0 !important;
	height: 70px !important;
	width: 100% !important;
	padding: 0 16px !important;
	box-sizing: border-box !important;
}

.jogasetrid-newsletter .button,
.jogasetrid-newsletter input.button {
	flex: 0 0 auto !important;
	color: #F2F1EC !important;
	cursor: pointer;
	border: none !important;
	border-radius: 0 !important;
	letter-spacing: 0.05em;
	height: 70px !important;
	font-size: 18px !important;
	text-transform: uppercase;
	background-color: #8C288C !important;
	padding: 0 2.6em !important;
	margin: 0 !important;
	transition: background-color 0.2s ease;
}

.jogasetrid-newsletter .button:hover,
.jogasetrid-newsletter input.button:hover {
	background-color: #C96C1E !important;
}

.jogasetrid-newsletter #mce-responses {
	display: none !important;
}

.jogasetrid-newsletter [aria-hidden="true"] {
	position: absolute !important;
	left: -5000px !important;
}

/* --- Mobile: input and button stack, each full width --- */
@media (max-width: 767px) {
	.newsletter-section .section-intro {
		font-size: 18px !important;
	}

	.jogasetrid-newsletter #mc_embed_signup_scroll {
		flex-wrap: wrap !important;
		gap: 20px;
	}

	.jogasetrid-newsletter .mc-field-group {
		flex-basis: 100% !important;
	}

	.jogasetrid-newsletter .mc-field-group input {
		height: 60px !important;
	}

	.jogasetrid-newsletter .button,
	.jogasetrid-newsletter input.button {
		flex: 1 1 100% !important;
		width: 100% !important;
		height: 60px !important;
		margin: 0 !important;
	}
}

/* ============================================================
   SECTION 9 — IMAGE GALLERY CAROUSEL ARROWS
   ============================================================ */

.uagb-block-ca5673ec .spectra-image-gallery {
	position: relative;
}

.uagb-block-ca5673ec .spectra-image-gallery__control-arrows {
	position: absolute !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	width: 32px !important;
	height: 32px !important;
	opacity: 0;
	z-index: 5;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.uagb-block-ca5673ec .spectra-image-gallery__control-arrows svg {
	display: none !important;
}

.uagb-block-ca5673ec .spectra-image-gallery__control-arrows.slick-prev {
	left: 20px;
	transform: translateX(-30px);
}

.uagb-block-ca5673ec .spectra-image-gallery__control-arrows.slick-next {
	right: 20px;
	transform: translateX(30px);
}

.uagb-block-ca5673ec .spectra-image-gallery:hover .spectra-image-gallery__control-arrows.slick-prev,
.uagb-block-ca5673ec .spectra-image-gallery:hover .spectra-image-gallery__control-arrows.slick-next {
	opacity: 1;
	transform: translateX(0);
}

.uagb-block-ca5673ec .spectra-image-gallery__control-arrows::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: #fff;
	-webkit-mask-image: url(https://jogasetrid.is/wp-content/uploads/2026/09/arrow-right.svg);
	mask-image: url(https://jogasetrid.is/wp-content/uploads/2026/09/arrow-right.svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.uagb-block-ca5673ec .spectra-image-gallery__control-arrows.slick-prev::after {
	transform: scaleX(-1);
}



/* ============================================================
   SECTION 10 — HERO SECTION ("Jóga fyrir alla")

   .hero-content.hero-content (class repeated) deliberately raises
   this rule's specificity above Spectra's own auto-generated CSS
   for the same element (which also targets it with two class
   selectors and its own !important) — a plain single-class rule
   ties with Spectra's on specificity, leaving the outcome to
   depend on load order, which was why align-items kept losing.
   ============================================================ */

.hero-section.alignfull {
	width: 100% !important;
	max-width: 1280px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	overflow: hidden !important;
}

@media (min-width: 1400px) {
	.hero-section.alignfull {
		width: min(100vw, 1600px) !important;
		max-width: min(100vw, 1600px) !important;
		margin-left: calc(50% - min(50vw, 800px)) !important;
		margin-right: calc(50% - min(50vw, 800px)) !important;
	}
}

.hero-section .hero-image {
  width: 80% !important;
  margin: 0 !important;
  background-size: cover !important;
  background-position: top left !important;
  background-repeat: no-repeat !important;
}

.hero-section .hero-content {
  position: absolute !important;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 50% !important;
  max-width: 50%;
  margin: 0 !important;
  box-sizing: border-box;
  text-align: left !important;
  z-index: 1;
}

.hero-section .hero-content.hero-content {
	align-items: center !important;
	margin-top: 50px !important;
}

.hero-title {
  font-size: 144px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  line-height: 0.9em !important;
}

.hero-subtitle {
  font-size: 64px !important;
  margin-top: 20px !important;
  line-height: 0.9em;
}

@media (max-width: 1024px) {
  .hero-section .hero-content {
    width: 60% !important;
    max-width: 60%;
  }

  .hero-title { font-size: 90px !important; }
  .hero-subtitle { font-size: 40px !important; margin-top: 40px !important; }
}

@media (max-width: 767px) {
  .hero-section {
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
  }

  .hero-section .hero-image {
    width: 100% !important;
    background-position: -90px top !important;
  }

  .hero-section .hero-content {
    width: 50% !important;
    max-width: 50%;
    padding-right: 20px;
  }

  .hero-title {
    font-size: 47px !important;
  }

  .hero-subtitle {
    font-size: 30px !important;
    margin-top: 20px !important;
  }
}


/* ============================================================
   SECTION 11 — WELCOME BLOCK ("Velkomin í Jógasetrið")
   ============================================================ */

.section-intro {
    width: 60%!important;
    font-size:24px!important;
    line-height:1.4em;
    font-weight: 500;
}

.section-intro-wide {
    width: 80%!important;
    font-size:24px!important;
    line-height:1.4em;
    font-weight: 500;
	margin:0 auto!important;
}

.section-intro-focus {
	width: 70%!important;
	font-size:24px!important;
	line-height:1.4em;
	font-weight: 600;
	color: #822791;
}

.welcome-description h4 {
    font-size:20px;
    font-weight:500!important;
    color:#000!important;
    padding:0 20px;
}

.joga-icon {
    height:140px;
}

@media (max-width: 767px) {
	.welcome-content > .uagb-container-inner-blocks-wrap {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
	}

	.welcome-content .joga-container {
		width: auto !important;
		max-width: 100% !important;
		flex: none !important;
	}

	.section-intro, .section-intro-wide {
		width: 100%!important;
	}

.welcome-description h4 {
    padding:0!important;
}    
}

/* ============================================================
   SECTION 12 — ALL ARCHIVE CARDS (any post type)
   One universal card style for every Post Template archive on
   the site — "Á döfinni", Yoga Classes, or any future one —
   targeting the bare .wp-block-post <li> structure that core
   WordPress always generates, instead of theme- or post-type-
   specific classes that don't reliably appear everywhere.
   Card titles are uppercase with 20px space below, except titles
   with the class a-dofinni-title (Á döfinni cards), which keep
   their normal capitalisation and have 10px space below.
   ============================================================ */

.wp-block-post-template > li.wp-block-post {
	background-color: #fff !important;
	box-shadow: none !important;
	border: none !important;
	padding: 20px !important;
	margin-bottom: 0 !important;
	display: flex !important;
	flex-direction: column !important;
}

/* Soft, centered drop shadow on hover — no offset, just a light,
   blurred halo around the card */
.wp-block-post-template > li.wp-block-post {
	transition: box-shadow 0.3s ease;
}

.wp-block-post-template > li.wp-block-post:hover {
	box-shadow: 0 0 25px rgba(0, 0, 0, 0.12) !important;
}

.wp-block-post-template > li.wp-block-post figure.wp-block-post-featured-image {
	margin: -20px -20px 0 -20px !important;
}

/* Card title: space above and below, uppercase */
.wp-block-post-template > li.wp-block-post .wp-block-post-title {
	margin-top: 20px !important;
	margin-bottom: 20px !important;
	text-transform: uppercase !important;
}

/* Á döfinni card title (class a-dofinni-title): normal capitalisation, 10px space below */
.wp-block-post-template > li.wp-block-post .wp-block-post-title.a-dofinni-title {
	margin-bottom: 10px !important;
	text-transform: none !important;
}

.wp-block-post-template > li.wp-block-post .wp-block-post-excerpt,
.wp-block-post-template > li.wp-block-post .wp-block-post-excerpt p {
	margin-top: 0 !important;
	margin-bottom: 20px !important;
}

.wp-block-post-template .wp-block-read-more {
	display: inline-block !important;
	border: 1.2px solid #822791 !important;
	background: transparent !important;
	color: #822791 !important;
	text-transform: uppercase !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	letter-spacing: 0.05em !important;
	padding: 0.6em 2em !important;
	text-decoration: none !important;
	margin-top: auto !important;
	align-self: flex-start !important;
}

.wp-block-post-template .wp-block-read-more:hover {
	background: #822791 !important;
	color: #fff !important;
}

.wp-block-post-template > li.wp-block-post .wp-block-post-title a {
	text-decoration: none !important;
	color: inherit !important;
}

/* Make the whole card clickable via the title link, stretched
   to cover the entire <li>. The SKOÐA/SKRÁ buttons and the
   starfsfólk "Skoða" modal button stay clickable independently
   by sitting above the stretched link in stacking order
   (position: relative + higher z-index). */
.wp-block-post-template > li.wp-block-post {
	position: relative;
}

.wp-block-post-template > li.wp-block-post .wp-block-post-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.wp-block-post-template > li.wp-block-post .wp-block-read-more,
.wp-block-post-template > li.wp-block-post .skra-btn,
.wp-block-post-template > li.wp-block-post .starfsfolk-skoda-btn {
	position: relative;
	z-index: 2;
}

/* Tablet: 2 columns */
@media (max-width: 1024px) and (min-width: 768px) {
	.wp-block-post-template {
		grid-template-columns: 1fr 1fr !important;
	}
}

/* Mobile: single column */
@media (max-width: 767px) {
	.wp-block-post-template {
		grid-template-columns: 1fr !important;
	}
}

/* ============================================================
   SECTION 13 — ARCHIVE: PAGE TITLE SPACING
   ============================================================ */

.wp-block-query-title {
	padding-top: 60px !important;
	padding-bottom: 60px !important;
}


/* ============================================================
   SECTION 14 — HOMEPAGE SCHEDULE: DAY VIEW + WEEK VIEW
   Both views are built by inc/stundaskra-shortcode.php
   ([joga_stundaskra_forsida] on the homepage, [joga_stundaskra] on
   the Stundaskrá page) from the Google Sheet, through the site's
   cache (inc/sheet-cache.php).

   Day view (default): previous / next day arrows with short day
   names (Mán, Þri, ...), the current day as a large purple title,
   and a table of that day's classes built from divs (so the global
   table reset in Section 16 does not apply): Klukkan, Jógatími,
   Kennari (only if the sheet has teachers, .has-teacher) and
   Upplýsingar: a link ("Bóka í tíma" for open classes, "Skrá á
   námskeið" for courses that have not started), or grey text that is
   not a link ("Lokað námskeið", "Uppselt", "Fullbókað",
   .joga-dagur-closed), chosen by inc/stundaskra-shortcode.php from
   the Tímabil and Staða columns. Every row uses the same
   column widths (minmax(0, …), so long words cannot push columns
   around). All text in the arrows and table is 16px, except the
   class names: 20px, bold and purple. On mobile each row becomes a
   small centred card: time, class, teacher and booking link stacked.

   Week view ("Sjá alla vikuna"): seven columns, lilac day
   headings (darker for weekends, .is-weekend), white cells, empty
   cells where a day has no class at that time (.is-empty).
   Hovering a class highlights it and every class with the same
   name in light purple (.is-highlight, set by the script), as on
   the old site. Scrolls sideways on tablet and mobile.

   Buttons are reset with !important so Astra's button styles do
   not apply.
   ============================================================ */

/* Hidden parts stay hidden, even where a display rule is set below */
#joga-stundaskra-widget [hidden] {
	display: none !important;
}

/* Outer wrapper: side padding (Astra breakpoints 768px / 544px) */
#joga-stundaskra-widget {
	padding-left: 0px!important;
	padding-right: 0px!important;
}


/* ---------- Day view: navigation ---------- */

/* Navigation row: previous arrow | day title | next arrow */
.joga-dagur-nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
	margin-bottom: 30px;
}

/* Arrow buttons: plain purple text and line arrow, no button look */
.joga-dagur-arrow {
	display: inline-flex !important;
	align-items: center;
	gap: 14px;
	padding: 6px 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: #822791 !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	cursor: pointer;
}

/* Previous arrow sits left, next arrow sits right */
.joga-dagur-arrow--prev {
	justify-self: start;
}
.joga-dagur-arrow--next {
	justify-self: end;
}

/* Line arrow icon */
.joga-dagur-arrow svg {
	flex-shrink: 0;
	width: 36px;
	height: 18px;
}

/* Arrow on hover: Jógasetrið orange */
.joga-dagur-arrow:hover {
	color: #C96C1E !important;
}

/* Current day title: large purple bold capitals */
.joga-dagur-title {
	margin: 0 !important;
	color: #822791;
	font-weight: 700;
	line-height: 1.1;
	text-align: center;
	text-transform: uppercase;
}


/* ---------- Day view: table ---------- */

/* Column widths: time | class | teacher | booking (minmax(0, …) keeps every row identical) */
.joga-dagur-table {
	--joga-cols: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1.1fr) minmax(0, 1fr);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* Without teachers: time | class | booking */
.joga-dagur-table:not(.has-teacher) {
	--joga-cols: minmax(0, 1fr) minmax(0, 2.6fr) minmax(0, 1fr);
}

/* Row: one grid line, small gaps show the page background */
.joga-dagur-row {
	display: grid;
	grid-template-columns: var(--joga-cols);
	gap: 4px;
}

/* Cell: white, content centred, 16px text */
.joga-dagur-cell {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-width: 0;
	min-height: 88px;
	padding: 14px 16px;
	background: #ffffff;
	color: #222222;
	font-size: 16px;
	text-align: center;
	overflow-wrap: anywhere;
}

/* Header row: shorter cells, dark uppercase labels */
.joga-dagur-row--head .joga-dagur-cell {
	min-height: 64px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/* Time cell */
.joga-dagur-cell--time {
	font-variant-numeric: tabular-nums;
}

/* Class name: 20px, purple bold */
.joga-dagur-name {
	display: block;
	color: #822791;
	font-size: 20px;
	font-weight: 700;
}

/* Age line under the class name: small purple capitals */
.joga-dagur-sub {
	display: block;
	margin-top: 2px;
	color: #822791;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/* "Bóka í tíma": 16px dark uppercase link */
.joga-dagur-book {
	color: #222222 !important;
	font-size: 16px;
	letter-spacing: 0.04em;
	text-decoration: none !important;
	text-transform: uppercase;
}

/* "Bóka í tíma" on hover: purple, underlined */
.joga-dagur-book:hover {
	color: #822791 !important;
	text-decoration: underline !important;
}

/* Closed or sold-out course ("Lokað námskeið", "Uppselt"): grey uppercase text, not a link.
   #777675 is the lightest grey with contrast 4.5 on white (accessibility minimum) */
.joga-dagur-closed {
	color: #777675;
	font-size: 16px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Day without classes: short centred message in a white box */
.joga-dagur-empty {
	margin: 0;
	padding: 40px 20px;
	background: #ffffff;
	color: #7f7e7c;
	text-align: center;
}


/* ---------- Switch button ---------- */

/* Button row: centred below the view */
.joga-stundaskra-toggle-wrap {
	margin-top: 40px;
	text-align: center;
}

/* "Sjá alla vikuna" / "Sjá einn dag": purple 1px outline, uppercase */
.joga-stundaskra-toggle {
	display: inline-block !important;
	padding: 1em 2.6em !important;
	background: transparent !important;
	border: 1px solid #822791 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: #822791 !important;
	font-size: 18px !important;
	font-weight: 500 !important;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Button on hover: filled purple, white text */
.joga-stundaskra-toggle:hover {
	background: #822791 !important;
	color: #ffffff !important;
}


/* ---------- Week view ---------- */

/* Grid: seven equal columns, small gaps show the page background */
.joga-stundaskra-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 4px;
	max-width: 1600px;
	margin: 0 auto;
}

/* Day heading: lilac box, dark bold capitals, gap below */
.joga-stundaskra-dagur-heiti {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 64px;
	margin-bottom: 12px;
	padding: 10px 6px;
	background: #822791;
	color: #ffffff;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-align: center;
	text-transform: uppercase;
}

/* Saturday and Sunday headings: darker lilac */
.joga-stundaskra-dagur-heiti.is-weekend {
	background: #6c237c;
}

/* Cell: white box, content centred */
.joga-stundaskra-kort {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 6px;
	min-width: 0;
	min-height: 120px;
	padding: 10px 10px;
	background: #ffffff;
	color: #222222;
	line-height: 1.25;
	text-align: center;
	text-decoration: none !important;
	transition: background-color 0.2s ease;
}

/* Class time ("10:00 - 11:15") */
.joga-stundaskra-kort .joga-stundaskra-timi {
	display: block;
	color: #222222;
	font-size: 17px;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

/* Class name: purple bold capitals, long names wrap */
.joga-stundaskra-kort .joga-stundaskra-heiti {
	display: block;
	color: #822791;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

/* Age line under the name ("4 - 7 ára"): small purple capitals */
.joga-stundaskra-kort .joga-stundaskra-undirtexti {
	display: block;
	color: #822791;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/* Hovered class and all classes with the same name: light purple */
.joga-stundaskra-kort.is-highlight {
	background: #E0C9E3;
}

/* Cell with a booking link: pointer cursor */
.joga-stundaskra-kort.is-link {
	cursor: pointer;
}

.joga-dagur-arrow-short{display:none;}


/* ---------- Tablet and mobile ---------- */

/* Tablet: smaller day title, week view scrolls sideways */
@media (max-width: 768px) {
	.joga-dagur-title {
		font-size: 32px;
	}

	.joga-vika {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.joga-stundaskra-grid {
		grid-template-columns: repeat(7, minmax(140px, 1fr));
		width: max-content;
		min-width: 100%;
	}
}

/* Mobile: arrows only, each class row becomes a small centred card */
@media (max-width: 544px) {
	#joga-stundaskra-widget {
		padding-left: 20px;
		padding-right: 20px;
	}

	.joga-dagur-title {
		font-size: 26px;
	}

	.joga-dagur-arrow-name {
		display: none;
	}

	/* No header row on mobile, the card layout explains itself */
	.joga-dagur-row--head {
		display: none;
	}

	/* Card: white box, time, class, teacher and booking stacked in one centred column */
	.joga-dagur-row {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"time"
			"name"
			"teacher"
			"book";
		gap: 6px;
		padding: 18px 20px;
		background: #ffffff;
	}

	/* Cells inside the card: no own box, centred */
	.joga-dagur-cell {
		min-height: 0;
		padding: 0;
		background: none;
		align-items: center;
		text-align: center;
	}

	.joga-dagur-cell--time {
		grid-area: time;
		color: #7f7e7c;
	}

	.joga-dagur-cell--name {
		grid-area: name;
	}

	.joga-dagur-cell--teacher {
		grid-area: teacher;
	}

	/* Booking link: a little space above it */
	.joga-dagur-cell--book {
		grid-area: book;
		margin-top: 6px;
	}
}



/* ============================================================
   SECTION 15 — SINGLE YOGA CLASS PAGE SCHEDULE LIST
   On desktop, day and class name sit on one line separated by a
   dash ("Mánudagur - Jógaflæði og Nidra"). On mobile, the dash is
   hidden and the class name drops to its own line below the day
   instead — the combined line was wrapping awkwardly and
   colliding with the time on narrow screens.
   All text in these lists is 16px (schedule and price list).
   ============================================================ */

.jss-row {
	display: flex !important;
	justify-content: space-between !important;
	align-items: baseline !important;
	padding: 10px 0 !important;
	border-bottom: 1px solid #ddd !important;
	font-size: 16px !important;
}

.jss-lota-info {
	display: flex !important;
	justify-content: space-between !important;
	align-items: baseline !important;
	margin-top: 20px !important;
	padding-bottom: 10px !important;
	border-bottom: 1px solid #ddd !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	color: #8C288C !important;
}

.jss-lota-info--spaced {
	margin-top: 32px !important;
}

.jss-lota-timabil {
	font-style: normal !important;
}

.jss-time,
.jss-lota-verd {
	font-weight: 600 !important;
}

.jss-list-widget {
	margin-bottom: 30px !important;
}

.jss-lota-badge {
	color: #C96C1E;
	font-size: 0.75em;
	font-weight: 700;
	margin-left: 8px;
}

@media (max-width: 544px) {
	.jss-row {

	}

	.jss-lota-badge{
		margin-left:0!important;
	}

	.jss-label {
		display: flex !important;
		flex-direction: column !important;
	}

	.jss-dash {
		display: none !important;
	}

	.jss-time {
		margin-top: 2px !important;
	}
	
	.jss-day {
		font-weight: 600 !important;
	}
}


/* ---------- Compact price list [joga_verdskra_listi] ---------- */
/* Same .jss-row lines as the schedule, scoped to the price list only */

/* Price list line: space between the text and the price */
.joga-verdskra-listi .jss-row {
	gap: 32px;
}

/* Left side: name and note (Skýring) flow as one text that wraps */
.joga-verdskra-listi .verd-listi__label {
	flex: 1 1 auto;
	min-width: 0;
}

/* Note (Skýring): smaller grey text right after the name */
.joga-verdskra-listi .verd-listi__note {
	color: #7f7e7c;
	font-size: 14px;
}

/* Price: the room it needs, always on one line */
.joga-verdskra-listi .jss-lota-verd {
	flex-shrink: 0;
	white-space: nowrap;
}



/* ============================================================
   SECTION 16 — MOVED FROM CUSTOMIZER ADDITIONAL CSS
   .title-decoration works both on a core Heading block (class on
   the h1 itself) and on a Spectra Advanced Heading (class on the
   wrapper div, h1 inside).
   ============================================================ */

/* Title decoration: no padding on the heading */
h1.title-decoration,
.title-decoration > h1 {
	padding: 0 !important;
	margin-bottom: 30px!important;
}

/* Title decoration: lotus flower before the heading text */
h1.title-decoration:before,
.title-decoration > h1:before {
	content: url(https://jogasetrid.is/wp-content/uploads/2025/06/lotus-flower.svg);
	display: inline-block;
	width: 64px;
	height: 64px;
	margin-right: 20px;
}

/* Title decoration: lotus flower after the heading text */
h1.title-decoration:after,
.title-decoration > h1:after {
	content: url(https://jogasetrid.is/wp-content/uploads/2025/06/lotus-flower.svg);
	display: inline-block;
	width: 64px;
	height: 64px;
	margin-left: 20px;
}

@media (max-width: 544px) {
	/* Title decoration mobile: smaller heading */
	h1.title-decoration,
	.title-decoration > h1 {
		font-size: 36px !important;
	}

	/* Title decoration mobile: smaller flowers */
	h1.title-decoration:before,
	h1.title-decoration:after,
	.title-decoration > h1:before,
	.title-decoration > h1:after {
		width: 60px;
		height: 60px;
	}

	/* Title decoration mobile: hide the flower after the text */
	h1.title-decoration:after,
	.title-decoration > h1:after {
		display: none;
	}

	/* Title decoration mobile: one flower centred above the text */
	h1.title-decoration:before,
	.title-decoration > h1:before {
		display: block;
		margin: 10px auto 0;
	}
}

/* Class page schedule mobile: stack info and price */
@media (max-width: 544px) {
	.jss-lota-info {
		flex-direction: column !important;
		align-items: flex-start !important;
	}

	.jss-lota-verd {
		margin-top: 4px !important;
	}
}

/* Boxed container mobile: 30px side padding */
@media (max-width: 544px) {
	.ast-separate-container #content .ast-container {
		padding-left: 30px;
		padding-right: 30px;
	}
}

/* Tables: no borders or padding */
th, td, tr, table {
	border: none !important;
	padding: 0 !important;
}


/* ============================================================
   SECTION 17 — TESTIMONIAL CAROUSEL (Post Carousel block)
   Scoped to .testimonial-fade (same Additional CSS Class used
   for the JS fade rebuild), so this styling only applies to the
   testimonial carousel and never bleeds onto other Post Carousel
   instances on the site (e.g. the "Á döfinni" homepage carousel),
   which need their own separate layout/order rules instead.
   ============================================================ */

.wp-block-uagb-post-carousel.testimonial-fade {
	position: relative !important;
	background: #fff !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 80px 100px !important;
	min-height: 400px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.wp-block-uagb-post-carousel.testimonial-fade .uagb-post__inner-wrap,
.wp-block-uagb-post-carousel.testimonial-fade .uagb-post__inner-wrap * {
	margin: 0 !important;
	padding: 0 !important;
}

.wp-block-uagb-post-carousel.testimonial-fade .uagb-post__inner-wrap {
	background: transparent !important;
	text-align: center !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
}

.wp-block-uagb-post-carousel.testimonial-fade,
.wp-block-uagb-post-carousel.testimonial-fade .uagb-post-grid,
.wp-block-uagb-post-carousel.testimonial-fade .uagb-post__inner-wrap,
.wp-block-uagb-post-carousel.testimonial-fade article {
	height: auto !important;
}
.wp-block-uagb-post-carousel.testimonial-fade .slick-slide,
.wp-block-uagb-post-carousel.testimonial-fade .slick-list {
	height: auto !important;
}

.wp-block-uagb-post-carousel.testimonial-fade .uagb-post__title {
	order: 2 !important;
	margin-top: 20px !important;
	font-weight: 700 !important;
	font-size: 1em !important;
}

.wp-block-uagb-post-carousel.testimonial-fade .uagb-post__title a {
	color: #822791 !important;
	text-decoration: none !important;
}

.wp-block-uagb-post-carousel.testimonial-fade .uagb-post__excerpt {
	order: 1 !important;
}

.wp-block-uagb-post-carousel.testimonial-fade .uagb-post__excerpt p {
	font-style: normal !important;
	color: #822791 !important;
	font-size: 1.1em !important;
}

.wp-block-uagb-post-carousel.testimonial-fade .uagb-post__excerpt p:first-of-type:before {
	content: "„";
}

.wp-block-uagb-post-carousel.testimonial-fade .uagb-post__excerpt p:last-of-type:after {
	content: "“";
}

@keyframes uagbTestimonialEnter {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.wp-block-uagb-post-carousel.testimonial-fade .slick-slide.slick-active .uagb-post__inner-wrap {
	animation: uagbTestimonialEnter 1s ease;
	transition: opacity 0.4s ease;
}

.wp-block-uagb-post-carousel.testimonial-fade .slick-prev,
.wp-block-uagb-post-carousel.testimonial-fade .slick-next {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important;
	z-index: 5 !important;
	opacity: 0;
	transition: opacity 0.3s ease, transform 0.3s ease;
}
.wp-block-uagb-post-carousel.testimonial-fade .slick-prev {
	left: 30px !important;
	transform: translateX(-20px);
}
.wp-block-uagb-post-carousel.testimonial-fade .slick-next {
	right: 30px !important;
	transform: translateX(20px);
}
.wp-block-uagb-post-carousel.testimonial-fade:hover .slick-prev,
.wp-block-uagb-post-carousel.testimonial-fade:hover .slick-next {
	opacity: 1;
	transform: translateX(0);
}

.wp-block-uagb-post-carousel.testimonial-fade .slick-prev svg,
.wp-block-uagb-post-carousel.testimonial-fade .slick-next svg {
	display: none !important;
}

.wp-block-uagb-post-carousel.testimonial-fade .slick-prev,
.wp-block-uagb-post-carousel.testimonial-fade .slick-next {
	width: 32px !important;
	height: 32px !important;
}

.wp-block-uagb-post-carousel.testimonial-fade .slick-prev::after,
.wp-block-uagb-post-carousel.testimonial-fade .slick-next::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: #822791;
	-webkit-mask-image: url(https://jogasetrid.is/wp-content/uploads/2026/09/arrow-right.svg);
	mask-image: url(https://jogasetrid.is/wp-content/uploads/2026/09/arrow-right.svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.wp-block-uagb-post-carousel.testimonial-fade .slick-prev::after {
	transform: scaleX(-1);
}

.wp-block-uagb-post-carousel.testimonial-fade .slick-dots {
	position: static !important;
	margin-top: 24px !important;
}
.wp-block-uagb-post-carousel.testimonial-fade .slick-dots li button:before {
	color: #ddb892 !important;
	opacity: 1 !important;
}
.wp-block-uagb-post-carousel.testimonial-fade .slick-dots li.slick-active button:before {
	color: #C96C1E !important;
}

.wp-block-uagb-post-carousel.testimonial-fade .slick-track {
	display: flex !important;
	align-items: center !important;
}

.wp-block-uagb-post-carousel.testimonial-fade .slick-slide {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.wp-block-uagb-post-carousel.testimonial-fade .slick-slide > div {
	width: 100% !important;
}

.wp-block-uagb-post-carousel.testimonial-fade .slick-dots li button:before,
.wp-block-uagb-post-carousel.testimonial-fade .slick-dots li button {
	box-shadow: none !important;
	text-shadow: none !important;
	filter: none !important;
}

@media (max-width: 767px) {
	.wp-block-uagb-post-carousel.testimonial-fade {
		padding: 30px 40px !important;
	}

	.wp-block-uagb-post-carousel.testimonial-fade .slick-prev,
	.wp-block-uagb-post-carousel.testimonial-fade .slick-next {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.wp-block-uagb-post-carousel.testimonial-fade .slick-prev {
		left: -20px !important;
	}
	.wp-block-uagb-post-carousel.testimonial-fade .slick-next {
		right: -20px !important;
	}

	.wp-block-uagb-post-carousel.testimonial-fade .slick-dots {
		display: none !important;
	}
}

/* ============================================================
   SECTION 18 — YOGA CLASS CARD ACTION BUTTONS
   "SKOÐA" (wp-block-read-more) and "SKRÁ" (link inside .skra-btn
   paragraph) sit side by side, each 50% wide, inside the Group
   block WordPress created when they were grouped in the editor.
   Targeted via the group's position (direct child of the card
   <li>, containing wp-block-read-more) since the group itself
   has no custom class.
   ============================================================ */

.wp-block-post-template > li.wp-block-post > .wp-block-group {
	display: flex !important;
	gap: 10px !important;
	margin-top: auto !important;
	width: 100% !important;
}

.wp-block-post-template > li.wp-block-post > .wp-block-group .wp-block-read-more {
	flex: 1 1 50% !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	text-align: center !important;
}

.skra-btn {
	flex: 1 1 50% !important;
	margin: 0 !important;
}

.skra-btn a {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	text-align: center !important;
	border: 1.2px solid #C96C1E !important;
	background: transparent !important;
	color: #B3601B !important; /* darker orange: contrast 4.56 on white (minimum 4.5); border and hover stay #C96C1E */
	text-transform: uppercase !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	letter-spacing: 0.05em !important;
	padding: 0.6em 2em !important;
	text-decoration: none !important;
}

.skra-btn a:hover {
	background: #C96C1E !important;
	color: #fff !important;
}

.wp-block-post-template .short-description {
	margin-top: 0 !important;
	margin-bottom: 20px !important;
}

.wp-block-post-template .short-description {
	margin-top: 0 !important;
	margin-bottom: 20px !important;
}


/* ============================================================
   SECTION 19: SITE-WIDE TABS (.jogasetrid-tabs)

   Shared look for every core Tabs block on the site (Jógatímar
   archive, kennaranám pages and any new page with tabs). Add the
   class "jogasetrid-tabs" to the Tab List block under Advanced >
   Additional CSS class.
   Each tab is a <button role="tab">, so the default button look
   (border, background, shadow) is removed and the tab is styled
   as plain text. WordPress marks the active tab with
   aria-selected="true". Its underline is drawn with ::after
   (not border-bottom) so the line matches the text width exactly.
   ============================================================ */

/* Tab row: horizontal, with space between tabs */
.jogasetrid-tabs {
	display: flex !important;
	gap: 24px !important;
	border: none !important;
	margin-bottom: 40px !important;
}

/* Each tab: remove the default button look, plain text */
.jogasetrid-tabs button[role="tab"] {
	font-size: 16px !important;
	font-weight: 600 !important;
	color: #222222 !important;
	background: none !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	padding: 0 0 10px 0 !important;
	margin: 0 !important;
	cursor: pointer !important;
	position: relative !important;
}

/* Hover on inactive tabs */
.jogasetrid-tabs button[role="tab"]:not([aria-selected="true"]):hover {
	color: #822791 !important;
}

/* Active tab: purple text, bolder than the other tabs */
.jogasetrid-tabs button[aria-selected="true"] {
	color: #822791 !important;
	font-weight: 700 !important;
}

/* Underline on the active tab, drawn with ::after at 100% of the
   button width so the line matches the text width exactly */
.jogasetrid-tabs button[aria-selected="true"]::after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background-color: #822791;
}

/* ============================================================
   SECTION 20 — TAB PANELS: ENTRANCE ANIMATION (ALL TAB BLOCKS)

   When a tab is opened, the script in inc/tabs-animation.php
   adds .is-tab-entering to its panel (role="tabpanel"), and the
   panel fades in and moves up: it starts 40px lower and
   invisible, and ends in place over 0.7s. It works for every tab
   block on the site (Jógatímar and any other), however the block
   hides its panels. No exit animation: the previous panel
   disappears instantly.
   The class is removed when the animation ends, so the panel has
   no transform at rest: any transform would make it a containing
   block for position:fixed children (e.g. the Image Gallery
   lightbox) and break their full-screen positioning.
   ============================================================ */

/* Entrance: fade in and move up */
@keyframes tabPanelEnter {
	from {
		opacity: 0;
		transform: translateY(40px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Panel of a newly opened tab: run the entrance */
[role="tabpanel"].is-tab-entering {
	animation: tabPanelEnter 0.7s ease;
}


/* ============================================================
   SECTION 21 — JÓGATÍMAR ARCHIVE: TITLE BLOCK

   The .wp-block-query-jogatimar wrapper holds two Spectra
   Advanced Heading blocks: an H1 title and a paragraph
   underneath it, both sharing the inner class
   "uagb-heading-text" (only the tag differs). Wrapper padding
   matches Section 13's .wp-block-query-title spacing (60px
   top/bottom) so the block looks identical to the "Á döfinni"
   archive title. The H1 stays at its default styling; only the
   wrapper spacing and the paragraph below it are set here.
   ============================================================ */

.wp-block-query-jogatimar {
	padding-top: 60px !important;
	padding-bottom: 60px !important;
}

.wp-block-query-jogatimar p.uagb-heading-text {
	font-size: 26px !important;
	font-weight: 500 !important;
}

/* ============================================================
   SECTION 22 — SPECTRA IMAGE GALLERY: FIXED ASPECT RATIO
   Locks every slide in the Spectra Image Gallery CAROUSEL layout
   specifically to a 4:3 box, regardless of whether the source
   image is portrait or landscape, so mixed-orientation galleries
   don't force the whole carousel to jump to a different height
   per slide. object-fit: cover crops each image to fill the box
   instead of stretching it.

   Scoped to the carousel layout only (not grid/masonry/tiles),
   since masonry and tiles both rely on each image's own natural
   aspect ratio for Spectra's JS-driven layout positioning
   (top/left values calculated per actual image height) — forcing
   a fixed ratio there breaks that positioning.
   ============================================================ */

.spectra-image-gallery__layout--carousel .spectra-image-gallery__media-wrapper,
.spectra-image-gallery__layout--carousel .spectra-image-gallery__media {
	aspect-ratio: 4 / 3 !important;
	overflow: hidden !important;
}

.spectra-image-gallery__layout--carousel .spectra-image-gallery__media picture {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
}

.spectra-image-gallery__layout--carousel .spectra-image-gallery__media-thumbnail {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

/* ============================================================
   SECTION 23 — STARFSFÓLK ARCHIVE: HOVER GRADIENT + CENTERED BUTTON
   Overrides Section 12's generic white-card styling for this
   specific archive: no background/padding on the card, image
   fills the top with a purple gradient overlay + centered "Skoða"
   button that fade in on hover, name + excerpt sit plainly below
   with no background.
   Figure is forced to a true 1:1 square (aspect-ratio on the
   figure itself, not the img, with align-self:start so grid row
   stretching never distorts it) and img fills it with cover.
   align-content:start added on the li grid: WordPress's own
   .is-layout-grid sets align-items:stretch on the outer <ul>,
   which stretches every <li> to match the tallest card in its
   row. Without align-content:start, that leftover height gets
   distributed across all of the li's own auto rows (image,
   title, excerpt), which is what made title/excerpt land at a
   different vertical spot per card depending on how much extra
   space each row's content left. With align-content:start, all
   leftover height falls below the excerpt instead — no fixed
   heights anywhere, cards just end up equal height with any
   slack sitting at the bottom.

   This archive is always modal-driven: the whole card opens the
   "Skoða" modal (via JS in functions.php), never the single
   staff page. Section 12's generic stretched title-link is
   disabled here, and the name and image links on the cards do
   not react to clicks (pointer-events: none), so a click passes
   through to the card and opens the modal.

   "Skoða" modal: the white box (.uagb-modal-popup-wrap, which
   Spectra sets to 80% wide) takes its width from Astra's content
   width (--wp--custom--ast-content-width-size, from Customizer >
   Global > Container), so it lines up with the card grid behind
   it and follows any change made in Astra. 1280px is only a
   fallback. It is never more than 92% of the screen. The content
   fills the box with 50px padding all round; the image column
   and the text column share the width equally with a 50px gap.
   Below 768px the image sits above the text. The modal rules
   start with body .uagb-modal-popup, so they win over Astra and
   Spectra.

   The whole grid fades in and moves up on page load, same
   entrance timing as the Jógatímar tab panels (Section 20):
   starts noticeably lower and invisible, then animates up into
   its final position over a slow, deliberate transition.
   ============================================================ */

.starfsfolk-archive .wp-block-post-template > li.wp-block-post {
	display: grid !important;
	align-content: start;
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	cursor: pointer !important;
}

/* Disable Section 12's generic stretched-link (which would send
   the whole card to the single starfsfolk page) — this archive
   should only ever open the modal, never navigate away. */
.starfsfolk-archive .wp-block-post-template > li.wp-block-post .wp-block-post-title a::after {
	content: none !important;
}

/* Name and image links on the cards: no clicks, so the click reaches the card and opens the modal */
.starfsfolk-archive .wp-block-post-template > li.wp-block-post .wp-block-post-title a,
.starfsfolk-archive .wp-block-post-template > li.wp-block-post figure.wp-block-post-featured-image a {
	pointer-events: none !important;
	cursor: pointer !important;
}

.starfsfolk-archive .wp-block-post-template > li.wp-block-post figure.wp-block-post-featured-image,
.starfsfolk-archive .wp-block-post-template > li.wp-block-post .starfsfolk-skoda-btn {
	grid-area: 1 / 1;
}

.starfsfolk-archive .wp-block-post-template > li.wp-block-post figure.wp-block-post-featured-image {
	position: relative;
	margin: 0 !important;
	overflow: hidden;
	aspect-ratio: 1 / 1 !important;
	width: 100%;
	height: auto;
	align-self: start;
}

.starfsfolk-archive .wp-block-post-template > li.wp-block-post figure.wp-block-post-featured-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.starfsfolk-archive .wp-block-post-template > li.wp-block-post figure.wp-block-post-featured-image img {
	filter: grayscale(30%);
	transition: filter 0.3s ease;
}

.starfsfolk-archive .wp-block-post-template > li.wp-block-post figure.wp-block-post-featured-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(212, 157, 133, 0.8) 0%, rgba(140, 40, 140, 0.8) 100%);
	mix-blend-mode: multiply;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.starfsfolk-archive .wp-block-post-template > li.wp-block-post:hover figure.wp-block-post-featured-image::after {
	opacity: 1;
}

.starfsfolk-archive .wp-block-post-template > li.wp-block-post .wp-block-post-excerpt {
	background: transparent !important;
	margin-top: 8px !important;
}

.starfsfolk-archive .wp-block-post-template > li.wp-block-post .starfsfolk-skoda-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.starfsfolk-archive .wp-block-post-template > li.wp-block-post:hover .starfsfolk-skoda-btn {
	opacity: 1;
}

.starfsfolk-archive .uagb-modal-button-link {
	border: 1.2px solid #fff !important;
	color: #fff !important;
	background: transparent !important;
	padding: 0.6em 2em !important;
	text-transform: uppercase !important;
}

.starfsfolk-archive .wp-block-post-template > li.wp-block-post .starfsfolk-title {
	margin-bottom: px !important;
	margin-top: 10px!important;
	margin-bottom:10px!important;
	text-transform: capitalize !important;
}

.starfsfolk-archive .wp-block-post-template > li.wp-block-post .starfsfolk-excerpt,
.starfsfolk-archive .wp-block-post-template > li.wp-block-post .wp-block-post-excerpt p {
	margin: 0 !important;
	background: transparent !important;
	margin-bottom:0px!important;
}

/* --- Entrance animation on page load, same transition as the
   Jógatímar tab panels (Section 20) --- */
.starfsfolk-archive .wp-block-post-template {
	transition: opacity 0.7s ease, transform 0.7s ease !important;
	opacity: 1 !important;
	transform: translateY(0) !important;
}

@starting-style {
	.starfsfolk-archive .wp-block-post-template {
		opacity: 0 !important;
		transform: translateY(40px) !important;
	}
}

/* --- Modal white box (Spectra's wrapper): Astra's content width (1280px fallback), at most 92% of the screen --- */
body .uagb-modal-popup .uagb-modal-popup-wrap {
	box-sizing: border-box !important;
	width: min(var(--wp--custom--ast-content-width-size, 1280px), 92vw) !important;
	max-width: none !important;
	height: auto !important;
}

/* --- Modal content box: fills the white box, never taller than 85% of the screen --- */
body .uagb-modal-popup .uagb-modal-popup-wrap .uagb-modal-popup-content {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: none !important;
	max-height: 85vh !important;
	padding: 0 !important;
	overflow-y: auto !important;
}

/* --- Modal content: fills the box, 50px padding all round --- */
body .uagb-modal-popup .uagb-modal-popup-wrap .uagb-modal-popup-content > .wp-block-uagb-container.starfsfolk-modal-content {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 50px !important;
}

/* --- Modal row: image and text side by side across the full width, 50px gap --- */
body .uagb-modal-popup .uagb-modal-popup-wrap .starfsfolk-modal-content > .uagb-container-inner-blocks-wrap {
	display: flex !important;
	flex-direction: row !important;
	align-items: flex-start !important;
	gap: 50px !important;
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* --- Image column and text column: share the width equally --- */
body .uagb-modal-popup .uagb-modal-popup-wrap .starfsfolk-modal-content > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container {
	box-sizing: border-box !important;
	flex: 1 1 0 !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* --- Inner wrapper of each column: fills its column --- */
body .uagb-modal-popup .uagb-modal-popup-wrap .starfsfolk-modal-content > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container > .uagb-container-inner-blocks-wrap {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* --- Image: fills its column, keeps its proportions --- */
body .uagb-modal-popup .uagb-modal-popup-wrap .starfsfolk-modal-content figure,
body .uagb-modal-popup .uagb-modal-popup-wrap .starfsfolk-modal-content figure img {
	display: block !important;
	width: 100% !important;
	max-width: none !important;
	height: auto !important;
	margin: 0 !important;
}

/* --- Below 768px: image above text, full width, less padding --- */
@media (max-width: 767px) {
	body .uagb-modal-popup .uagb-modal-popup-wrap .uagb-modal-popup-content > .wp-block-uagb-container.starfsfolk-modal-content {
		padding: 30px !important;
	}

	body .uagb-modal-popup .uagb-modal-popup-wrap .starfsfolk-modal-content > .uagb-container-inner-blocks-wrap {
		flex-direction: column !important;
		gap: 20px !important;
	}

	body .uagb-modal-popup .uagb-modal-popup-wrap .starfsfolk-modal-content > .uagb-container-inner-blocks-wrap > .wp-block-uagb-container {
		flex: 0 0 auto !important;
		width: 100% !important;
	}
}

/* ============================================================
   SECTION 24 — "Á DÖFINNI" HOMEPAGE UNIT
   Static image + purple content box overlapping its right edge,
   matching Divi's #dm-slider layout.
   ============================================================ */

.a-dofinni-section {
	position: relative !important;
	height: 500px !important;
}

.a-dofinni-section .wp-block-uagb-image {
	width: 70% !important;
	margin: 0 !important;
}

.a-dofinni-section .wp-block-uagb-image img {
	display: block !important;
	width: 100% !important;
	height: 500px !important;
	max-height: 500px !important;
	object-fit: cover !important;
}

.a-dofinni-carousel.wp-block-uagb-post-carousel {
	position: absolute !important;
	top: 70px !important;
	right: 115px !important;
	width: 55.25% !important;
	min-height: 280px !important;
	background: #822791 !important;
	color: #fff !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
}

.a-dofinni-carousel .uagb-post__inner-wrap {
	background: transparent !important;
	text-align: left !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	flex-wrap: wrap !important;
	width: 100% !important;
}

.a-dofinni-carousel .uagb-post__title {
	order: 1 !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 15px 30px !important;
	font-weight: 700 !important;
	font-size: 1.4em !important;
	text-transform: uppercase !important;
}

/* Title link: full title shown, wraps onto as many lines as needed (no one-line cut-off) */
.a-dofinni-carousel .uagb-post__title a {
	color: #fff !important;
	text-decoration: none !important;
	display: block !important;
	line-height: 1.3em !important;
}

.a-dofinni-carousel .uagb-post__excerpt {
	order: 2 !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 30px !important;
	margin-bottom: 20px !important;
}

.a-dofinni-carousel .uagb-post__excerpt,
.a-dofinni-carousel .uagb-post__excerpt p {
	color: #fff !important;
	font-size: 18px !important;
	font-style: normal !important;
}

.a-dofinni-carousel .uagb-post__cta {
	order: 3 !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 30px !important;
}

.a-dofinni-carousel .wp-block-button__link {
	display: inline-block !important;
	border: 1.2px solid #fff !important;
	background: transparent !important;
	color: #fff !important;
	text-transform: uppercase !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	letter-spacing: 0.05em !important;
	padding: 0.6em 2em !important;
	text-decoration: none !important;
}

.a-dofinni-carousel .wp-block-button__link:hover {
	background: #fff !important;
	color: #822791 !important;
}

/* Hide Slick's own arrows — replaced by custom ones below */
.a-dofinni-carousel .slick-prev,
.a-dofinni-carousel .slick-next {
	display: none !important;
}

/* Custom arrows, positioned freely relative to the whole unit */
.a-dofinni-custom-prev,
.a-dofinni-custom-next {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	background: transparent !important;
	border: 1px solid #C96C1E !important;
	width: 50px !important;
	height: 50px !important;
	padding: 10px !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	z-index: 10 !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.a-dofinni-custom-prev {
	left: -20px !important;
}

.a-dofinni-custom-next {
	right: -20px !important;
}

/* Prev arrow only: no border, fades AND slides in from the left
   on hover of the whole unit, matching testimonial's arrows */
.a-dofinni-custom-prev {
	border: none !important;
	opacity: 0 !important;
	transform: translateY(-50%) translateX(-20px) !important;
	transition: opacity 0.3s ease, transform 0.3s ease !important;
}

.a-dofinni-section:hover .a-dofinni-custom-prev {
	opacity: 1 !important;
	transform: translateY(-50%) translateX(0) !important;
}

.a-dofinni-custom-prev::after,
.a-dofinni-custom-next::after {
	content: "";
	width: 100%;
	height: 100%;
	background-color: #C96C1E;
	-webkit-mask-image: url(https://jogasetrid.is/wp-content/uploads/2026/09/arrow-right.svg);
	mask-image: url(https://jogasetrid.is/wp-content/uploads/2026/09/arrow-right.svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.a-dofinni-custom-prev::after {
	transform: scaleX(-1);
}

/* Slide fade-in-and-up entrance, timing controlled from functions.php */
.a-dofinni-carousel .slick-track {
	transition: none !important;
}

@keyframes dofinniEnter {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.a-dofinni-carousel.wp-block-uagb-post-carousel.is-entering {
	animation-name: dofinniEnter;
	animation-timing-function: ease;
}


/* ============================================================
   SECTION 25 — "Á DÖFINNI" HOMEPAGE UNIT — MOBILE LAYOUT
   Image full-width on top, purple box stacked below it
   (overlapping the image's bottom edge slightly). Arrows always
   visible (no hover-fade, no border), positioned at the box's
   left/right edges.
   ============================================================ */

@media (max-width: 767px) {
	.a-dofinni-section {
		height: auto !important;
	}

	.a-dofinni-section .wp-block-uagb-image,
	.a-dofinni-section .wp-block-uagb-image__figure {
		width: 100% !important;
	}

	.a-dofinni-section .wp-block-uagb-image img {
		width: 90% !important;
		height: 300px !important;
		max-height: 300px !important;
		object-fit: cover !important;
		margin: 0 auto;
	}

	.a-dofinni-carousel.wp-block-uagb-post-carousel {
		position: relative !important;
		top: -180px !important;
		right: auto !important;
		width: 80% !important;
		margin: 0 auto -180px auto !important;
		display: block !important;
	}

	.a-dofinni-carousel .uagb-post__title {
		font-size: 1.1em !important;
		padding: 15px 20px 0 20px !important;
	}

	.a-dofinni-carousel .uagb-post__excerpt {
		padding: 0 20px !important;
		font-size: 16px !important;
	}

	.a-dofinni-carousel .uagb-post__cta {
		padding: 0 20px 20px 20px !important;
	}

	/* Arrows: always visible, no border, no transform/transition,
	   matching testimonial's mobile arrow behavior */
	.a-dofinni-custom-prev,
	.a-dofinni-custom-next {
		border: none !important;
		opacity: 1 !important;
		transform: translateY(-50%) !important;
		transition: none !important;
	}

	.a-dofinni-custom-prev {
		left: -10px !important;
	}

	.a-dofinni-custom-next {
		right: -10px !important;
	}
}

/* ============================================================
   SECTION 26 — "IMAGE-QUOTE" UNITS (two versions)
   Image 70% width, text position:absolute ON TOP of it
   (overlapping, not side by side). Two standalone versions: text
   on the right (image-quote-right) and text on the left
   (image-quote-left). The user picks the correct outer Group
   block — no extra configuration needed afterward.
   ============================================================ */

.image-quote-right,
.image-quote-left {
	position: relative !important;
}

.image-quote-right .image-quote-image,
.image-quote-left .image-quote-image {
	width: 80% !important;
	margin: 0 !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}

.image-quote-right .image-quote-content,
.image-quote-left .image-quote-content {
	position: absolute !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	width: 52% !important;
	max-width: 50% !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	z-index: 1 !important;
	font-size: 64px !important;
	text-align: left !important;
	text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.4) !important;
}

/* --- Unit 1: text on the right, overlapping the right side of the image --- */
.image-quote-right .image-quote-content {
	right: 0 !important;
}

/* --- Unit 2: text on the left, overlapping the left side of the image --- */
.image-quote-left .image-quote-image {
	margin-left: auto !important;
}

.image-quote-left .image-quote-content {
	left: 0 !important;
}

/* --- Tablet --- */
@media (max-width: 1024px) {
	.image-quote-right .image-quote-content,
	.image-quote-left .image-quote-content {
		width: 60% !important;
		max-width: 60% !important;
		font-size: 40px !important;
	}
}

/* --- Mobile --- */
@media (max-width: 767px) {
	.image-quote-right .image-quote-image,
	.image-quote-left .image-quote-image {
		width: 70% !important;
	}

	.image-quote-right .image-quote-content,
	.image-quote-left .image-quote-content {
		width: 70% !important;
		max-width: 70% !important;
		padding-right: 0px !important;
		font-size: 40px !important;
	}
}



/* ============================================================
   SECTION XX — YOGA CLASS PAGE: RESET NESTED CONTAINER SPACING
   Every Spectra Container block on a single Yoga Class page
   (.ast-article-single) gets its own auto-generated padding/
   margin from Spectra's own inline <style> block, stacking up
   unpredictably as containers nest inside containers. This zeroes
   padding/margin on every nested .wp-block-uagb-container within
   the article, so spacing has to be added back deliberately (e.g.
   on specific named classes) instead of being inherited by
   accident.
   ============================================================ */

.ast-article-single {
	padding: 0 !important;
	margin: 0 !important;
}


/* ============================================================
   SECTION 28 — GLOBAL: FOCUS OUTLINES AND BUTTON SHADOWS
   Site-wide: no focus outline or focus shadow after a mouse click
   (links, buttons, tabs, menu items), using :focus-visible so
   keyboard users (Tab key) still see where they are, with a
   purple outline. Text fields keep their own focus style, since
   browsers treat a focused text field as keyboard focus.
   Also removes the browser's default focus/active box-shadow,
   outline, text-shadow and tap-highlight from every Slick
   carousel arrow, dot, and custom arrow button on the site (image
   gallery, testimonial, "Á döfinni", and any future carousel),
   instead of repeating the same reset per unit in each section.
   ============================================================ */

/* Anything focused by a mouse click: no outline or focus shadow */
:focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: none !important;
}

/* Keyboard focus (Tab key): purple outline, so the site stays usable without a mouse */
:focus-visible {
	outline: 2px solid #822791;
	outline-offset: 2px;
}

/* Carousel arrows and custom arrows: no focus/active shadow, outline or tap highlight */
.slick-prev,
.slick-next,
.slick-prev:focus,
.slick-next:focus,
.slick-prev:active,
.slick-next:active,
.a-dofinni-custom-prev,
.a-dofinni-custom-next,
.a-dofinni-custom-prev:focus,
.a-dofinni-custom-next:focus,
.a-dofinni-custom-prev:active,
.a-dofinni-custom-next:active,
.spectra-image-gallery__control-arrows,
.spectra-image-gallery__control-arrows:focus,
.spectra-image-gallery__control-arrows:active {
	box-shadow: none !important;
	outline: none !important;
	-webkit-tap-highlight-color: transparent !important;
}

/* Carousel dots: no focus/active shadow, outline, text shadow or filter */
.slick-dots li button,
.slick-dots li button:before,
.slick-dots li button:focus,
.slick-dots li button:active {
	box-shadow: none !important;
	outline: none !important;
	text-shadow: none !important;
	filter: none !important;
}

/* ============================================================
   SECTION 30 — YOGA CLASSES: STACK 50%-WIDTH BUTTON PAIRS ON
   MOBILE
   Scoped to .yoga-classes so this doesn't affect any other
   50%-width button pair elsewhere on the site. WordPress core
   button groups with two buttons set to 50% width each (e.g.
   "KAUPA KORT" / "BÓKA TÍMA") sit side by side on desktop. On
   mobile there isn't room for two side-by-side buttons to stay
   readable, so they stack full-width, centered, with a small
   gap between them.
   ============================================================ */

@media (max-width: 544px) {
	.yoga-classes .wp-block-buttons:has(.wp-block-button__width-50) {
		flex-direction: column !important;
		align-items: center !important;
		gap: 12px !important;
	}

	.yoga-classes .wp-block-buttons .wp-block-button.wp-block-button__width-50 {
			width: 100% !important;
			flex: 0 0 auto !important;
	}

	.yoga-classes .wp-block-buttons {
		justify-content: center !important;
	}

	.yoga-classes .wp-block-buttons .wp-block-button {
		width: auto !important;
		flex: 0 0 auto !important;
	}

}

/* ============================================================
   SECTION 31 — SEARCH RESULTS: CARD BACKGROUND + IMAGE ASPECT
   RATIO
   Scoped to body.search so this only affects Astra's classic
   blog-layout-4 post loop on the search results page, not any
   other page that might reuse the same markup. Gives each card
   a white background and locks the featured image to a fixed-
   height box with object-fit: cover, so portrait and landscape
   source images no longer distort or stretch to fill an
   inconsistent box.
   ============================================================ */

body.search .ast-article-inner {
	background-color: #fff !important;
}

body.search .post-thumb-img-content {
	overflow: hidden !important;
}

body.search .post-thumb-img-content img.wp-post-image {
	width: 100% !important;
	height: 280px !important;
	object-fit: cover !important;
	display: block !important;
}

/* ============================================================
   SECTION 32 — MOBILE HEADER: CUSTOM HAMBURGER + CLOSE ICONS
   Two separate buttons get custom SVG icons via mask-image,
   replacing Astra's default inline <svg> icons:
     - .mobile-menu-toggle-icon: the header hamburger button,
       which toggles between a menu icon and a close icon
       depending on open/closed state (both handled here).
     - #menu-toggle-close: the separate X button inside the
       open mobile menu drawer itself.
   In both cases the original <svg> is hidden (opacity: 0, not
   display: none, so Astra's own show/hide toggle keeps working)
   and the icon shape + color come from a ::after mask on the
   wrapping <span class="ahfb-svg-iconset">. Icon size is fixed
   at 24px, centered, independent of the wrapping span's own
   size. Default browser/Astra focus outlines are also removed
   from both buttons.
   ============================================================ */

/* --- Header hamburger button (menu + close state) --- */
.mobile-menu-toggle-icon .ast-mobile-svg {
	opacity: 0 !important;
}

.mobile-menu-toggle-icon .ahfb-svg-iconset {
	position: relative !important;
}

.mobile-menu-toggle-icon .ahfb-svg-iconset::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 36px;
	height: 36px;
	transform: translate(-50%, -50%);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.mobile-menu-toggle-icon .ahfb-svg-iconset:has(.ast-menu-svg)::after {
	background-color: #822791;
	-webkit-mask-image: url(https://jogasetrid.is/wp-content/uploads/2026/09/hamburger-menu.svg);
	mask-image: url(https://jogasetrid.is/wp-content/uploads/2026/09/hamburger-menu.svg);
}

.mobile-menu-toggle-icon .ahfb-svg-iconset:has(.ast-close-svg)::after {
	background-color: #fff;
	-webkit-mask-image: url(https://jogasetrid.is/wp-content/uploads/2026/09/close-icon.svg);
	mask-image: url(https://jogasetrid.is/wp-content/uploads/2026/09/close-icon.svg);
}

.menu-toggle[aria-expanded="false"] .ahfb-svg-iconset:has(.ast-close-svg)::after,
.menu-toggle[aria-expanded="true"] .ahfb-svg-iconset:has(.ast-menu-svg)::after {
	display: none !important;
}

.menu-toggle.main-header-menu-toggle,
.menu-toggle.main-header-menu-toggle[aria-expanded="true"],
.menu-toggle.main-header-menu-toggle[aria-expanded="false"],
.menu-toggle.main-header-menu-toggle:focus,
.menu-toggle.main-header-menu-toggle:focus-visible,
.menu-toggle.main-header-menu-toggle:active {
	outline: none !important;
	box-shadow: none !important;
	border: none !important;
	-webkit-tap-highlight-color: transparent !important;
}

.menu-toggle.main-header-menu-toggle::-moz-focus-inner {
	border: 0 !important;
	outline: none !important;
}

/* --- Drawer close (X) button --- */
#menu-toggle-close .ast-mobile-svg {
	opacity: 0 !important;
}

#menu-toggle-close .ahfb-svg-iconset {
	position: relative !important;
}

#menu-toggle-close .ahfb-svg-iconset::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 24px;
	transform: translate(-50%, -50%);
	background-color: #fff;
	-webkit-mask-image: url(https://jogasetrid.is/wp-content/uploads/2026/09/close-icon.svg);
	mask-image: url(https://jogasetrid.is/wp-content/uploads/2026/09/close-icon.svg);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

#menu-toggle-close,
#menu-toggle-close:focus,
#menu-toggle-close:focus-visible,
#menu-toggle-close:active {
	outline: none !important;
	box-shadow: none !important;
	border: none !important;
	-webkit-tap-highlight-color: transparent !important;
}

#menu-toggle-close::-moz-focus-inner {
	border: 0 !important;
	outline: none !important;
}

/* ============================================================
   SECTION 33 — JÓGATÍMAR TABS: VISUALLY HIDE PANELS WITHOUT
   display:none

   Overrides the browser's default [hidden] { display: none }
   for tab panels. display:none makes Spectra measure any Image
   Gallery inside a hidden panel as 0px, which permanently breaks
   Tiled/Masonry layout calculation (grid-auto-rows stays frozen
   at 0px even after the tab opens). Hiding via visibility +
   collapsed max-height instead keeps the panel's contents
   measurable, so galleries render correctly the first time a
   tab is opened, with no extra JS needed.
   ============================================================ */

.wp-block-tab-panels .wp-block-tab-panel[hidden] {
	display: block !important;
	visibility: hidden !important;
	max-height: 0 !important;
	overflow: hidden !important;
	pointer-events: none !important;
}

/* =====================================================================
 * SECTION 34: BUNNY: VIDEO EMBED, LIST, GRID AND OVERLAY
 * ---------------------------------------------------------------------
 * Base styles for the Bunny Stream shortcodes: [bunny_video] video
 * frame and notices, the [bunny_collection_header] heading, the
 * numbered [bunny_collection] list, the bonus grid in Vimeo style,
 * the locked state for non-members, and the video overlay (dialog).
 *
 * Bunny sections in order:
 *   34  video embed, list, grid and overlay (this section)
 *   35  watch progress
 *   36  free videos
 *   37  buy box ([bunny_buy])
 *   38  buy popup
 *   39  Netjóga package page layout
 *
 * Every visible part has its own rule with plain hex colours.
 * Lines inside comments, e.g. / * color: ; * /, are placeholders for
 * properties that currently come from the theme: remove the comment
 * markers and fill in a value to take control of them.
 *
 * Icons (play, lock, check) are inline SVGs from functions.php drawn
 * on a 30x30 canvas; they take their colour from CSS (currentColor):
 * play #8C288C, lock #C96C1E, check #8C288C (Section 35).
 *
 * Not controlled here: anything inside the video player itself
 * (controls, progress bar, player font). That is set in Bunny:
 * Stream > Library > Player.
 *
 * Clickable items are <div role="button">, so no theme button styles
 * apply. The list reset uses !important so theme and Spectra list
 * rules never apply to Bunny lists.
 * ===================================================================== */


/* ---------- Video frame (single video and overlay) ---------- */

/* Responsive 16:9 wrapper for the video iframe */
.bunny-video {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000000;
	overflow: hidden;
}

/* Iframe fills the wrapper completely */
.bunny-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Notice text (login required, or admin-only error messages) */
.bunny-video__notice {
	padding: 1.5rem;
	text-align: center;
	/* color: ; */
	/* font-size: ; */
}


/* ---------- Heading ([bunny_collection_header]) ---------- */

/* Collection name (h2): uses theme h2 style until filled in */
.bunny-collection__heading {
	margin: 0 0 0.25rem;
	/* color: ; */
	/* font-family: ; */
	/* font-size: ; */
	/* font-weight: ; */
}

/* Total length line ("Lengd: 9 klst. 27 mín.") */
.bunny-collection__total {
	margin: 0;
	color: #7f7e7c;
	/* font-size: ; */
}


/* ---------- Shared list reset and item base ---------- */

/* Reset the ordered list; !important beats theme and Spectra list rules */
.bunny-collection .bunny-collection__items {
	list-style: none;
	max-width: none;
	margin: 0 !important;
	padding: 0 !important;
}

/* Reset any theme spacing on list items */
.bunny-collection .bunny-collection__item {
	margin: 0 !important;
	padding: 0 !important;
}

/* Row or card: base layout */
.bunny-collection__link {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	text-align: left;
}

/* Playable items show a pointer */
.bunny-collection:not(.is-locked) .bunny-collection__link {
	cursor: pointer;
}

/* Keyboard focus: no outline on mouse click */
.bunny-collection__link:focus {
	outline: none;
}

/* Keyboard focus: outline for keyboard users only */
.bunny-collection__link:focus-visible {
	outline: 2px solid #333333;
	outline-offset: 2px;
}

/* Title layout (shared): fills remaining space, long words may wrap */
.bunny-collection__title {
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Icon size (shared by play, lock and check icons) */
.bunny-collection__icon {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
}


/* ---------- List layout: rows ---------- */

/* Row divider below each row */
.bunny-collection--list .bunny-collection__item {
	border-bottom: 1px solid #dad8d5;
}

/* Matching top border on the first row */
.bunny-collection--list .bunny-collection__item:first-child {
	border-top: 1px solid #dad8d5;
}

/* Row background on hover (playable rows only) */
.bunny-collection--list:not(.is-locked) .bunny-collection__link:hover {
	background: #e8e6e3;
}

/* Episode number */
.bunny-collection--list .bunny-collection__number {
	min-width: 2ch;
	color: #7f7e7c;
	/* font-size: ; */
	/* font-weight: ; */
}

/* Episode title */
.bunny-collection--list .bunny-collection__title {
	font-weight: 600;
	/* color: ; */
	/* font-family: ; */
	/* font-size: ; */
}

/* Episode title on row hover (playable rows only) */
.bunny-collection--list:not(.is-locked) .bunny-collection__link:hover .bunny-collection__title {
	/* color: ; */
}

/* Episode duration, right aligned */
.bunny-collection--list .bunny-collection__duration {
	color: #7f7e7c;
	font-variant-numeric: tabular-nums;
	/* font-size: ; */
}

/* Play icon (rows the user can watch): purple */
.bunny-collection--list:not(.is-locked) .bunny-collection__icon {
	color: #8C288C;
}

/* Play icon on row hover */
.bunny-collection--list:not(.is-locked) .bunny-collection__link:hover .bunny-collection__icon {
	/* color: ; */
}

/* Lock icon (rows the user has not bought): orange */
.bunny-collection--list.is-locked .bunny-collection__icon {
	color: #C96C1E;
}


/* ---------- Grid layout: cards (Vimeo style) ---------- */

/* Grid: three columns on desktop */
.bunny-collection--grid .bunny-collection__items {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 3rem 2.5rem;
}

/* Card: plain stacked block, no padding */
.bunny-collection--grid .bunny-collection__link {
	display: block;
	padding: 0;
}

/* Thumbnail frame: 16:9, background shows while the image loads */
.bunny-collection__thumb {
	display: block;
	aspect-ratio: 16 / 9;
	margin-bottom: 0.75rem;
	background: #000000;
	overflow: hidden;
}

/* Thumbnail image fills its frame */
.bunny-collection__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.2s ease;
}

/* Thumbnail dims slightly on hover (playable cards only) */
.bunny-collection--grid:not(.is-locked) .bunny-collection__link:hover .bunny-collection__thumb img {
	opacity: 0.85;
}

/* Card title: one line, cut off with an ellipsis */
.bunny-collection--grid .bunny-collection__title {
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	overflow-wrap: normal;
	font-weight: 600;
	/* color: ; */
	/* font-family: ; */
	/* font-size: ; */
}

/* Card title on hover (playable cards only) */
.bunny-collection--grid:not(.is-locked) .bunny-collection__link:hover .bunny-collection__title {
	/* color: ; */
}

/* Card meta line: duration (bought) or "Fylgir með kaupum" (not bought) */
.bunny-collection__meta {
	display: block;
	margin-top: 0.25rem;
	color: #7f7e7c;
	font-variant-numeric: tabular-nums;
	/* font-size: ; */
}

/* Card meta line, locked state only ("Fylgir með kaupum") */
.bunny-collection--grid.is-locked .bunny-collection__meta {
	/* color: ; */
}

/* Grid: two columns on tablet (Astra breakpoint) */
@media (max-width: 921px) {
	.bunny-collection--grid .bunny-collection__items {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Grid: one column on mobile (Astra breakpoint) */
@media (max-width: 544px) {
	.bunny-collection--grid .bunny-collection__items {
		grid-template-columns: 1fr;
	}
}


/* ---------- Overlay (video popup) ---------- */

/* Overlay box: largest 16:9 size that fits both screen width and height */
.bunny-modal {
	width: min(92vw, calc(85vh * 16 / 9));
	max-width: none;
	padding: 0;
	border: 0;
	background: #000000;
	overflow: visible;
}

/* Backdrop behind the overlay: black at 85% (d9 = alpha) so the page shows through */
.bunny-modal::backdrop {
	background: #000000d9;
}

/* Close control (×) above the top right corner of the video */
.bunny-modal__close {
	position: absolute;
	top: -2.75rem;
	right: 0;
	padding: 0 0.5rem;
	font-size: 2rem;
	line-height: 1;
	color: #ffffff;
	cursor: pointer;
}

/* Close control on hover */
.bunny-modal__close:hover {
	/* color: ; */
}

/* Close control: no outline on mouse click */
.bunny-modal__close:focus {
	outline: none;
}

/* Close control: outline for keyboard users only */
.bunny-modal__close:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/* =====================================================================
 * SECTION 35: BUNNY: WATCH PROGRESS
 * ---------------------------------------------------------------------
 * Watch state on [bunny_collection] lists and grids for users with
 * access (functions.php, BUNNY WATCH PROGRESS). The state is a class
 * on each list item, updated live by the overlay script:
 *   (no class)   not started: nothing extra is shown
 *   .is-started  thin progress bar and "40% séð"
 *   .is-done     check icon and "Lokið"
 * List rows: progress bar along the bottom edge of the row, status
 * text left of the duration, check icon (#8C288C) in place of the
 * play icon. Grid cards: progress bar along the bottom of the
 * thumbnail, check icon on a white circle in its top right corner,
 * status after the duration.
 * Section 34 holds the base list and grid styles.
 * ===================================================================== */

/* List row and grid thumbnail: positioning context for bar and badge */
.bunny-collection--list .bunny-collection__link,
.bunny-collection__thumb {
	position: relative;
}

/* Progress track: hidden unless the video is started */
.bunny-collection__progress {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: #e8e6e3;
	pointer-events: none;
}

/* Started videos: show the track */
.is-started .bunny-collection__progress {
	display: block;
}

/* Progress fill: purple, width set by functions.php and the script */
.bunny-collection__progress-bar {
	display: block;
	height: 100%;
	background: #822791;
	transition: width 0.3s ease;
}

/* Grid thumbnail: slightly thicker bar over the image */
.bunny-collection--grid .bunny-collection__progress {
	z-index: 1;
	height: 4px;
	background: #dad8d5;
}

/* Status text ("40% séð" / "Lokið"): grey */
.bunny-collection__status {
	color: #7f7e7c;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	/* font-size: ; */
}

/* No status yet: take no space */
.bunny-collection__status:empty {
	display: none;
}

/* Finished videos: status in purple */
.is-done .bunny-collection__status {
	color: #822791;
	font-weight: 600;
}

/* Grid meta line: dot between duration and status */
.bunny-collection--grid .bunny-collection__status:not(:empty)::before {
	content: "·";
	margin: 0 0.4em;
	color: #7f7e7c;
	font-weight: 400;
}

/* Check icon: hidden unless the video is done */
.bunny-collection__icon--check {
	display: none;
}

/* Finished list rows: check icon replaces the play icon */
.is-done .bunny-collection__icon--play {
	display: none;
}

/* Finished list rows: show the check icon */
.is-done .bunny-collection__icon--check {
	display: block;
}

/* Check icon colour (overrides the play icon colour in Section 34) */
.bunny-collection--list .is-done .bunny-collection__icon--check {
	color: #8C288C;
}

/* Grid done badge: purple check icon on a white circle, hidden unless done */
.bunny-collection__badge {
	display: none;
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 1;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 50%;
	background: #ffffff;
	color: #8C288C;
}

/* Finished grid cards: show the badge */
.is-done .bunny-collection__badge {
	display: block;
}

/* Check icon fills the badge */
.bunny-collection__badge svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* =====================================================================
 * SECTION 36: BUNNY: FREE VIDEOS
 * ---------------------------------------------------------------------
 * Videos marked with free="" in [bunny_collection] (functions.php,
 * BUNNY STREAM) for visitors without access to the collection. They
 * stay in their place in a locked list or grid, carry a "Frítt"
 * label and play for everyone. Each free item has the class .is-free
 * on its list item. Section 34 holds the base list and grid styles.
 * ===================================================================== */

/* "Frítt" label: small orange bold capitals */
.bunny-collection__free {
	flex-shrink: 0;
	color: #C96C1E;
	font-size: 0.75em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Free items are clickable */
.bunny-collection .is-free .bunny-collection__link {
	cursor: pointer;
}

/* Free list row on hover: same background as playable rows */
.bunny-collection--list .is-free .bunny-collection__link:hover {
	background: #e8e6e3;
}

/* Free list row: purple play icon (overrides the orange lock colour) */
.bunny-collection--list.is-locked .is-free .bunny-collection__icon {
	color: #8C288C;
}

/* Free grid card on hover: thumbnail dims slightly */
.bunny-collection--grid .is-free .bunny-collection__link:hover .bunny-collection__thumb img {
	opacity: 0.85;
}

/* Free grid card: dot between "Frítt" and the duration */
.bunny-collection--grid .bunny-collection__free + .bunny-collection__meta-duration::before {
	content: "·";
	margin: 0 0.4em;
	color: #7f7e7c;
}

/* =====================================================================
 * SECTION 37: BUNNY: BUY BOX
 * ---------------------------------------------------------------------
 * The product box from the design, drawn by [bunny_buy] on Netjóga
 * package pages (functions.php, BUNNY BUY BOX): a white box with the
 * product's short description, the divider image (divider-shop.svg,
 * shown with its own colours), the price in large purple bold and an
 * outlined "Kaupa" button, all centred. Members see "Þú hefur aðgang
 * að þessum pakka" instead of price and button (.bunny-buy--owned).
 *
 * The box grows to fill its column (flex: 1 and height: 100%), so it
 * lines up with the trailer video (layout in Section 39). The same
 * content is used inside the buy popup (.bunny-buy--popup), adjusted
 * in Section 38.
 * Lines inside comments, e.g. / * color: ; * /, are placeholders for
 * properties that currently come from the theme.
 * ===================================================================== */

/* Box: white, content centred both ways, fills its column */
.bunny-buy {
	box-sizing: border-box;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 60px 50px;
	background: #ffffff;
	text-align: center;
}

/* Short description text */
.bunny-buy__text {
	color: #222222;
	/* font-size: ; */
	/* line-height: ; */
}

/* Description paragraphs: space between, none after the last */
.bunny-buy__text p {
	margin: 0 0 1em;
}
.bunny-buy__text p:last-child {
	margin-bottom: 0;
}

/* Divider wrapper: scales with the box width, space above and below */
.bunny-buy__divider {
	width: 100%;
	max-width: 420px;
	margin: 36px auto 30px;
}

/* Divider image: fills its wrapper, height follows from the SVG's own proportions */
.bunny-buy__divider-img {
	display: block;
	width: 100%;
	height: auto;
}

/* Price: large purple bold */
.bunny-buy__price {
	margin-bottom: 30px;
	color: #822791;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.1;
}

/* Price inner WooCommerce markup: same colour and weight */
.bunny-buy__price .woocommerce-Price-amount,
.bunny-buy__price bdi {
	color: inherit;
	font-weight: inherit;
}

/* "Kaupa" button: purple outline, purple uppercase text, no underline */
.bunny-buy__button {
	display: inline-block;
	padding: 0.9em 2.2em;
	background: transparent;
	border: 1px solid #822791;
	border-radius: 0;
	color: #822791 !important;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-decoration: none !important;
	text-transform: uppercase;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* "Kaupa" on hover and keyboard focus: filled purple, white text */
.bunny-buy__button:hover,
.bunny-buy__button:focus {
	background: #822791;
	color: #ffffff !important;
}

/* Access message for members (replaces price and button) */
.bunny-buy__owned {
	margin: 0;
	color: #822791;
	font-weight: 600;
	font-size: 24px;
	line-height:1.2em; 
}

/* Box: less padding on tablet (Astra breakpoint) */
@media (max-width: 921px) {
	.bunny-buy {
		padding: 40px 30px;
	}

	.bunny-buy__price {
		font-size: 36px;
	}
}

/* Box: less padding on mobile (Astra breakpoint) */
@media (max-width: 544px) {
	.bunny-buy {
		padding: 30px 20px;
	}

	.bunny-buy__price {
		font-size: 36px;
	}
}

/* =====================================================================
 * SECTION 38: BUNNY: BUY POPUP
 * ---------------------------------------------------------------------
 * Popup shown when a visitor without access clicks a locked video in
 * [bunny_collection product="…"]. It shows the product image at the
 * top in a fixed 4:3 frame (cropped to fill, so portrait images do
 * not make the popup tall) with the site gradient blended in (same
 * #D49D85 to #8C288C gradient and multiply blend as the Netjóga
 * package cards in Section 40) and the white Jógasetrið logo in the
 * centre, then the same content as the [bunny_buy] box (Section 37:
 * description, divider, price, "Kaupa") and a login link. The popup
 * is the same whichever locked video is clicked. Also makes buyable
 * locked rows and cards look clickable.
 * The login line ("Áttu þegar aðgang? Skráðu þig inn") is styled here
 * for both the buy box and the popup: the question on one line, the
 * link on its own line below.
 * Image layers, bottom to top: photo, gradient (::after), logo
 * (::before), close control.
 * Lines inside comments, e.g. / * color: ; * /, are placeholders for
 * properties that currently come from the theme.
 * ===================================================================== */

/* Buyable locked rows and cards: pointer cursor */
.bunny-collection.is-buyable .bunny-collection__link {
	cursor: pointer;
}

/* Buyable locked list rows: same hover background as playable rows */
.bunny-collection--list.is-buyable .bunny-collection__link:hover {
	background: #e8e6e3;
}

/* Buyable locked grid cards: thumbnail dims on hover */
.bunny-collection--grid.is-buyable .bunny-collection__link:hover .bunny-collection__thumb img {
	opacity: 0.85;
}

/* Popup box: no padding on the dialog itself so backdrop clicks close it */
.bunny-buy-modal {
	width: min(92vw, 560px);
	max-width: none;
	max-height: 90vh;
	padding: 0;
	border: 0;
	background: #ffffff;
	overflow: auto;
}

/* Backdrop behind the popup: black at 85% (d9 = alpha) */
.bunny-buy-modal::backdrop {
	background: #000000d9;
}

/* Inner wrapper: positioning context for the close control */
.bunny-buy-modal__inner {
	position: relative;
}

/* Close control (×): white circle in the top right corner, readable over the image */
.bunny-buy-modal__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: #ffffff;
	color: #333333;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

/* Close control on hover */
.bunny-buy-modal__close:hover {
	color: #822791;
}

/* Close control: keyboard focus outline only */
.bunny-buy-modal__close:focus {
	outline: none;
}
.bunny-buy-modal__close:focus-visible {
	outline: 2px solid #333333;
	outline-offset: 2px;
}

/* Product image frame: full width, fixed 4:3, own blend context for the gradient */
.bunny-buy-modal__image {
	position: relative;
	isolation: isolate;
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

/* Product image: fills the 4:3 frame, cropped from the centre */
.bunny-buy-modal__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Gradient over the image: site gradient multiplied into the photo */
.bunny-buy-modal__image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(135deg, #D49D85 0%, #8C288C 100%);
	mix-blend-mode: multiply;
	pointer-events: none;
}

/* Logo: white Jógasetrið logo in the centre, above the gradient */
.bunny-buy-modal__image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background-image: url(https://jogasetrid.is/wp-content/uploads/2025/06/sitelogo-footer.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 38% auto;
	pointer-events: none;
}

/* Box inside the popup: natural height, slightly less padding */
.bunny-buy.bunny-buy--popup {
	height: auto;
	padding: 40px 40px 36px;
}

/* Price inside the popup: same size as on the page */
.bunny-buy--popup .bunny-buy__price {
	font-size: 36px;
}

/* "Áttu þegar aðgang?" line under the button (buy box and popup) */
.bunny-buy__login {
	margin: 1.25rem 0 0;
	color: #7f7e7c;
	/* font-size: ; */
}

/* "Skráðu þig inn" link: purple, on its own line below the question */
.bunny-buy__login a {
	display: block;
	color: #822791;
}

/* Popup on mobile (Astra breakpoint): less padding, slightly larger logo */
@media (max-width: 544px) {
	.bunny-buy.bunny-buy--popup {
		padding: 30px 20px 28px;
	}

	.bunny-collection__link {
		padding: 1rem 0rem;
	}

	.bunny-buy-modal__image::before {
		background-size: 45% auto;
	}
}

/* =====================================================================
 * SECTION 39: NETJÓGA PACKAGE PAGE LAYOUT
 * ---------------------------------------------------------------------
 * Layout of a Netjóga package page. One outer Spectra container holds
 * up to five containers, each with an Additional CSS class:
 *   .video-title  [bunny_collection_header] (heading and length)
 *   .video-hero   [bunny_video] (trailer)
 *   .video-kaupa  [bunny_buy] (product box)
 *   .video-listi  [bunny_collection] (class list)
 *   .video-bonus  heading + [bunny_collection layout="grid"] (bonus)
 * The outer container's inner wrapper is found with :has(), so the
 * outer container needs no class of its own.
 *
 * Desktop grid (70% / 30%):
 *   heading  heading
 *   video    box
 *   list     list
 *   bonus    bonus
 * The box stretches to the video's height; the video's width sets its
 * height through its 16:9 ratio. Tablet and mobile: one column, in
 * the order heading, video, box, list, bonus. A package without bonus
 * material simply leaves the bonus row empty.
 *
 * The trailer carries a "Kynning" label in its top left corner
 * (white background, purple text), above the player; clicks pass
 * through it to the player.
 *
 * Padding, max width and the gaps between columns and rows are NOT
 * set here: they come from the outer container's settings in Spectra
 * (Column Gap / Row Gap apply to the grid).
 *
 * Fixes for Spectra/Astra behaviour:
 *   - The parts get zero side margins and no own width, so Astra's
 *     wide/full alignment margins cannot push them outside the row.
 *   - The video container is a plain block (not flex), so Spectra's
 *     flex settings cannot collapse the video to zero width.
 * ===================================================================== */

/* Outer container's inner wrapper: two columns with named areas */
.uagb-container-inner-blocks-wrap:has(> .video-hero) {
	display: grid !important;
	grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
	grid-template-areas:
		"title title"
		"hero  kaupa"
		"listi listi"
		"bonus bonus";
	align-items: stretch !important;
}

/* The parts: fill their grid area, no alignment margins or own width */
.wp-block-uagb-container.video-title,
.wp-block-uagb-container.video-hero,
.wp-block-uagb-container.video-kaupa,
.wp-block-uagb-container.video-listi,
.wp-block-uagb-container.video-bonus {
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Heading: top row */
.wp-block-uagb-container.video-title {
	grid-area: title;
}

/* Video: left column, plain block so it keeps its full width */
.wp-block-uagb-container.video-hero {
	grid-area: hero;
	display: block !important;
}

/* Video frame: full width of its area, height follows from 16:9 */
.video-hero .bunny-video {
	display: block !important;
	width: 100% !important;
}

/* "Kynning" label: top left corner of the trailer, white with purple text, clicks pass through */
.video-hero .bunny-video::before {
	content: "Kynning";
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 10px 15px;
	background: #ffffff;
	color: #822791;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	text-transform: uppercase;
	pointer-events: none;
}

/* Box container: right column, column layout that fills the row height */
.wp-block-uagb-container.video-kaupa {
	grid-area: kaupa;
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
}

/* Product box: grows to the full height of its area (= video height) */
.video-kaupa .bunny-buy {
	flex: 1 1 auto;
	height: auto;
}

/* List: full width below the video and box */
.wp-block-uagb-container.video-listi {
	grid-area: listi;
}

/* Bonus material: full width below the list */
.wp-block-uagb-container.video-bonus {
	grid-area: bonus;
}

/* Heading and length line: no space below, Row Gap sets the spacing */
.bunny-collection__total, .bunny-collection__header {
	margin-bottom:0!important;
}

/* Tablet and mobile (Astra breakpoint): one column, heading, video, box, list, bonus */
@media (max-width: 921px) {
	.uagb-container-inner-blocks-wrap:has(> .video-hero) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"title"
			"hero"
			"kaupa"
			"listi"
			"bonus";
	}
}

/* =====================================================================
 * SECTION 40: NETJÓGA PACKAGE CARDS (QUERY LOOP)
 * ---------------------------------------------------------------------
 * Overview cards for Netjóga packages on overview pages such as
 * Meðgöngujóga, built with a core Query Loop. Each card shows the
 * post's featured image full-bleed with the site gradient blended in
 * (same #D49D85 to #8C288C gradient and multiply blend as the
 * Starfsfólk cards), and on top:
 *   .netjoga-nafn        Advanced Heading, Dynamic Content: nafn
 *   .netjoga-undirtitill Advanced Heading, subtitle (e.g. "hjá Auði")
 *   .netjoga-timar       Advanced Heading, Dynamic Content: fjoldi_tima
 *   Read More            white "SKOÐA" button
 * Layout: name, middle group (subtitle + class count) and button are
 * spread with equal space between and around them (auto margins), so
 * the content is balanced around the card's centre. Without a
 * subtitle, the class count forms the middle group on its own.
 * The whole card is clickable: the featured image link fills the card,
 * and text blocks let clicks pass through to it.
 * Every block except the featured image sits above the overlay.
 * Spectra puts heading text in .uagb-heading-text, so text styles
 * target that element.
 *
 * Scoped to .wp-block-post.type-netjoga, which only exists on Query
 * Loop items of the Netjóga post type, so single package pages and
 * other card grids (e.g. Jógatímar) are not affected.
 * !important is used where Astra, Spectra or the Jógatímar card
 * styles would otherwise override these rules.
 * ===================================================================== */

/* Grid: spacing between cards */
.wp-block-post-template:has(> .type-netjoga) {
	gap: 2.5rem !important;
}

/* Card: portrait frame, equal top/bottom padding, own blend context */
.wp-block-post-template > .wp-block-post.type-netjoga {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	aspect-ratio: 5 / 7;
	margin: 0 !important;
	padding: 8% !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	overflow: hidden;
	text-align: center;
}

/* Featured image: fills the whole card behind everything */
.wp-block-post.type-netjoga .wp-block-post-featured-image {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0 !important;
}

/* Featured image link: fills the card, makes the whole card clickable */
.wp-block-post.type-netjoga .wp-block-post-featured-image a {
	display: block;
	height: 100%;
}

/* Featured image: override the editor's inline 4:3 ratio, crop to fill */
.wp-block-post.type-netjoga .wp-block-post-featured-image img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	aspect-ratio: auto !important;
	object-fit: cover;
}

/* Overlay: site gradient multiplied into the photo, clicks pass through */
.wp-block-post.type-netjoga::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(135deg, #D49D85 0%, #8C288C 100%);
	mix-blend-mode: multiply;
	opacity: 1;
	pointer-events: none;
}

/* All other blocks in the card: above the overlay, full width */
.wp-block-post.type-netjoga > *:not(.wp-block-post-featured-image) {
	position: relative;
	z-index: 2;
	width: 100%;
	margin: 0 !important;
}

/* Text and button wrapper: clicks pass through to the card link below */
.wp-block-post.type-netjoga > .netjoga-nafn,
.wp-block-post.type-netjoga > .netjoga-undirtitill,
.wp-block-post.type-netjoga > .netjoga-timar,
.wp-block-post.type-netjoga > .wp-block-group:has(> .wp-block-read-more) {
	pointer-events: none;
}

/* Even spacing: equal free space above the name */
.wp-block-post.type-netjoga > .netjoga-nafn {
	margin-top: auto !important;
}

/* Even spacing: equal free space above the middle group (subtitle) */
.wp-block-post.type-netjoga > .netjoga-undirtitill {
	margin-top: auto !important;
}

/* Even spacing: class count starts the middle group when there is no subtitle */
.wp-block-post.type-netjoga > .netjoga-timar {
	margin-top: auto !important;
}

/* Class count directly after a subtitle: sits just below it */
.wp-block-post.type-netjoga > .netjoga-undirtitill + .netjoga-timar {
	margin-top: 0.4em !important;
}

/* Button wrapper: equal free space above and below, plain centred block */
.wp-block-post.type-netjoga > .wp-block-group:has(> .wp-block-read-more) {
	display: block !important;
	margin-top: auto !important;
	margin-bottom: auto !important;
	text-align: center;
}

/* Package name text: large white bold uppercase, whole words only */
.wp-block-post.type-netjoga .netjoga-nafn .uagb-heading-text {
	margin: 0 !important;
	font-size: clamp(1.75rem, 2.6vw, 3rem) !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: center !important;
	color: #ffffff !important;
	overflow-wrap: normal;
	word-break: normal;
}

/* Subtitle text: large white regular-weight uppercase */
.wp-block-post.type-netjoga .netjoga-undirtitill .uagb-heading-text {
	margin: 0 !important;
	font-size: clamp(1.5rem, 2.2vw, 2.5rem) !important;
	font-weight: 400 !important;
	line-height: 1.1 !important;
	text-transform: uppercase;
	text-align: center !important;
	color: #ffffff !important;
}

/* Class count text: smaller white bold uppercase */
.wp-block-post.type-netjoga .netjoga-timar .uagb-heading-text {
	margin: 0 !important;
	font-size: clamp(1rem, 1.4vw, 1.5rem) !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center !important;
	color: #ffffff !important;
}

/* SKOÐA button: white box, purple bold uppercase, text width, square, clickable */
.wp-block-post.type-netjoga .wp-block-read-more {
	display: inline-block !important;
	flex: none !important;
	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	padding: 0.9em 2.2em !important;
	background: #ffffff !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: #822791 !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none !important;
	pointer-events: auto;
}

/* SKOÐA button on hover */
.wp-block-post.type-netjoga .wp-block-read-more:hover {
	background: #f2e9f4 !important;
	color: #822791 !important;
}

/* Grid: two columns on tablet (Astra breakpoint) */
@media (max-width: 921px) {
	.wp-block-post-template:has(> .type-netjoga) {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* Grid: one column on mobile (Astra breakpoint) */
@media (max-width: 544px) {
	.wp-block-post-template:has(> .type-netjoga) {
		grid-template-columns: 1fr !important;
	}
}



/* =====================================================================
 * SECTION 42: MY ACCOUNT (MÍNAR SÍÐUR)
 * ---------------------------------------------------------------------
 * Styles for the WooCommerce My Account page. The account area
 * (navigation + content) is the .woocommerce box inside the page
 * content. Scoped to body.woocommerce-account so no other page with
 * WooCommerce markup is affected.
 * ===================================================================== */

/* Account area: white box around navigation and content */
body.woocommerce-account .entry-content > .woocommerce {
	display: flow-root;
	padding: 60px;
	background-color: #ffffff;
}

/* Lists inside the account area: no left indent from the general .entry-content list rule */
body.woocommerce-account .entry-content > .woocommerce ul,
body.woocommerce-account .entry-content > .woocommerce ol {
	margin-left: 0;
	padding-left: 0;
}

/* Navigation, its list and its links: no borders from Astra */
body .woocommerce-MyAccount-navigation,
body .woocommerce-MyAccount-navigation ul,
body .woocommerce-MyAccount-navigation-link a {
	border: 0 !important;
}

/* Navigation list: no bullets */
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
}

/* Navigation items: only a line below each item */
body .woocommerce-MyAccount-navigation-link {
	border: 0 !important;
	border-bottom: 1px solid #F2F1EC !important;
}

/* First navigation item: line above as well, so every item has a line on both sides */
body .woocommerce-MyAccount-navigation-link:first-child {
	border-top: 1px solid #F2F1EC !important;
}

/* Navigation links: purple, weight 500 */
body .woocommerce-MyAccount-navigation-link a {
	color: #822791 !important;
	font-weight: 500 !important;
}

/* Current page link: Jógasetrið orange, weight 700 */
body .woocommerce-MyAccount-navigation-link.is-active a {
	color: #C96C1E !important;
	font-weight: 700 !important;
}

/* Input fields: square, white, thin line, taller */
body.woocommerce-account .woocommerce .input-text {
	min-height: 64px;
	background-color: #ffffff !important;
	border: 1px solid #dad8d5 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	/* color: ; */
	/* font-size: ; */
}

/* Fields with Astra's floating label: extra top padding so the label sits above the text */
body.woocommerce-account .woocommerce .ast-animate-input .input-text {
}

/* Field being typed in: purple line */
body.woocommerce-account .woocommerce .input-text:focus {
	outline: none;
	border-color: #822791 !important;
}

/* Account area: less padding on tablet (Astra breakpoint) */
@media (max-width: 921px) {
	body.woocommerce-account .entry-content > .woocommerce {
		padding: 40px;
	}
}

/* Account area: less padding on mobile (Astra breakpoint) */
@media (max-width: 544px) {
	body.woocommerce-account .entry-content > .woocommerce {
		padding: 30px;
	}
}

/* =====================================================================
 * SECTION 43: MY ACCOUNT: NÁMSKEIÐIN MÍN
 * ---------------------------------------------------------------------
 * List of the packages the user has access to, in the "Námskeiðin
 * mín" tab on My Account (functions.php, MY ACCOUNT: NÁMSKEIÐIN MÍN).
 * Each package is one full-width row: small portrait image on the
 * left, title and course progress ("3 af 10 lokið" with a thin bar)
 * in the middle, "Opna" button on the right, with a thin line between
 * rows. The whole row links to the package page.
 * Layout uses CSS Grid with named areas. On mobile the info and button
 * stack next to a smaller image.
 * Lines inside comments, e.g. / * color: ; * /, are placeholders for
 * theme-inherited properties.
 * ===================================================================== */

/* List wrapper: plain stacked block */
.namskeid-list {
	display: block;
}

/* Row: image | info | button, whole row is the link, no underline */
.namskeid-card {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr) auto;
	grid-template-areas: "image info button";
	align-items: center;
	column-gap: 1.5rem;
	padding: 1.25rem 0;
	border-bottom: 1px solid #F2F1EC;
	text-decoration: none !important;
}

/* First row: line above as well, so every row has a line on both sides */
.namskeid-card:first-child {
	border-top: 1px solid #F2F1EC;
}

/* Image frame: 3:4 portrait, background shows while the image loads */
.namskeid-card__image {
	grid-area: image;
	display: block;
	aspect-ratio: 3 / 4;
	margin: 0;
	background: #F2F1EC;
	overflow: hidden;
}

/* Image fills its frame */
.namskeid-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.2s ease;
}

/* Image dims slightly on hover */
.namskeid-card:hover .namskeid-card__img {
	opacity: 0.85;
}

/* Info: title with the course progress below it */
.namskeid-card__info {
	grid-area: info;
	display: block;
	min-width: 0;
}

/* Package title */
.namskeid-card__title {
	display: block;
	margin: 0;
	font-weight: 600;
	color: #222222;
	overflow-wrap: anywhere;
	/* font-size: ; */
}

/* Course progress: text and bar below the title */
.namskeid-card__progress {
	display: block;
	margin-top: 0.6rem;
}

/* "3 af 10 lokið": small grey text */
.namskeid-card__progress-text {
	display: block;
	margin-bottom: 0.4rem;
	color: #7f7e7c;
	font-size: 0.9em;
	font-variant-numeric: tabular-nums;
}

/* Every video done: text in purple */
.namskeid-card__progress.is-complete .namskeid-card__progress-text {
	color: #822791;
	font-weight: 600;
}

/* Progress track: thin grey line, limited width */
.namskeid-card__progress-track {
	display: block;
	width: 100%;
	max-width: 220px;
	height: 4px;
	background: #e8e6e3;
	overflow: hidden;
}

/* Progress fill: purple, width set by functions.php */
.namskeid-card__progress-bar {
	display: block;
	height: 100%;
	background: #822791;
}

/* "Opna" button */
.namskeid-card__button {
	grid-area: button;
	display: inline-block;
	padding: 0.6em 1.8em;
	background: #822791;
	color: #ffffff;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.2s ease;
}

/* "Opna" button on row hover */
.namskeid-card:hover .namskeid-card__button {
	background: #C96C1E;
}

/* Message when the user has no packages */
.namskeid-empty {
	margin: 0;
	/* color: ; */
}

/* Mobile (Astra breakpoint): smaller image, button below the info */
@media (max-width: 544px) {
	.namskeid-card {
		grid-template-columns: 72px minmax(0, 1fr);
		grid-template-areas:
			"image info"
			"image button";
		column-gap: 1rem;
		row-gap: 0.75rem;
	}

	/* Info sits at the bottom of its row, just above the button */
	.namskeid-card__info {
		align-self: end;
	}

	/* Button sits at the top of its row, text width, left aligned */
	.namskeid-card__button {
		align-self: start;
		justify-self: start;
	}
}

/* =====================================================================
 * SECTION 44: CHECKOUT (GREIÐSLA)
 * ---------------------------------------------------------------------
 * Styles for the WooCommerce checkout page ([woocommerce_checkout]
 * shortcode with Astra Pro's modern two-column checkout layout).
 * Scoped to body.woocommerce-checkout so no other page is affected.
 * Also applies to the order received (thank you) page, which uses the
 * same body class.
 *
 * Matches My Account (Section 42): white box, square white fields
 * with a thin line, purple line while typing. The order summary table
 * overrides the global th/td reset in Section 16 (which removes all
 * table padding and borders) for this table only, and has no outer
 * frame: only thin lines between rows.
 *
 * Astra Pro sets its own checkout styles, so !important is used where
 * those would otherwise win.
 * ===================================================================== */

/* Checkout area: white box around the form and order summary */
body.woocommerce-checkout .entry-content > .woocommerce {
	display: flow-root;
	box-sizing: border-box;
	padding: 60px;
	background-color: #ffffff;
}

/* "Welcome Back" line for logged-in customers: muted grey */
body.woocommerce-checkout .ast-logged-in-customer-info {
	color: #7f7e7c;
	/* font-size: ; */
}

/* Text fields and textarea: square, white, thin line, taller */
body.woocommerce-checkout .woocommerce form .input-text,
body.woocommerce-checkout #ast-coupon-code {
	min-height: 64px;
	background-color: #ffffff !important;
	border: 1px solid #dad8d5 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	/* color: ; */
	/* font-size: ; */
}

/* Order notes textarea: taller than one line */
body.woocommerce-checkout .woocommerce form textarea.input-text {
	min-height: 120px;
}

/* Field being typed in: purple line */
body.woocommerce-checkout .woocommerce form .input-text:focus,
body.woocommerce-checkout #ast-coupon-code:focus {
	outline: none;
	border-color: #822791 !important;
}

/* Country dropdown (select2): same look and height as the text fields */
body.woocommerce-checkout #content .woocommerce form .form-row .select2-container--default .select2-selection--single {
	display: flex;
	align-items: center;
	min-height: 64px;
	background-color: #ffffff !important;
	border: 1px solid #dad8d5 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Country dropdown while open or focused: purple line */
body.woocommerce-checkout #content .woocommerce form .form-row .select2-container--open .select2-selection--single,
body.woocommerce-checkout #content .woocommerce form .form-row .select2-container--default .select2-selection--single:focus {
	outline: none;
	border-color: #822791 !important;
}

/* Country dropdown arrow: vertically centred in the taller field */
body.woocommerce-checkout #content .woocommerce form .form-row .select2-container--default .select2-selection__arrow {
	top: 50% !important;
	transform: translateY(-50%);
}

/* Open country list: square with the same thin line */
body.woocommerce-checkout .select2-dropdown {
	border: 1px solid #dad8d5 !important;
	border-radius: 0 !important;
}

/* Search field inside the open country list */
body.woocommerce-checkout .select2-search--dropdown .select2-search__field {
	border: 1px solid #dad8d5 !important;
	border-radius: 0 !important;
}

/* Highlighted country in the open list: purple with white text */
body.woocommerce-checkout .select2-results__option--highlighted[aria-selected],
body.woocommerce-checkout .select2-results__option--highlighted[data-selected] {
	background-color: #822791 !important;
	color: #ffffff !important;
}

/* Order summary wrappers (desktop and mobile): no frame, rounding or shadow */
body.woocommerce-checkout #order_review,
body.woocommerce-checkout #ast-order-review-content {
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* Order summary table: no outer frame, rows collapse into single lines */
body.woocommerce-checkout .woocommerce table.shop_table.woocommerce-checkout-review-order-table {
	width: 100%;
	border: 0 !important;
	border-radius: 0 !important;
	border-collapse: collapse !important;
	box-shadow: none !important;
}

/* Order summary cells: spacing and a full-width line below each row (overrides Section 16) */
body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tr > th,
body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tr > td {
	padding: 14px 0 !important;
	border: 0 !important;
	border-bottom: 1px solid #F2F1EC !important;
	vertical-align: middle;
}

/* Order summary header row ("Vara" / "Samtals"): small grey uppercase */
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
	color: #7f7e7c;
	font-size: 0.85em;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Amount column: right aligned */
body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-total,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
	text-align: right;
}

/* Order total row: larger, purple, no line below */
body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tr.order-total > th,
body.woocommerce-checkout .woocommerce table.woocommerce-checkout-review-order-table tr.order-total > td {
	border-bottom: 0 !important;
	color: #822791;
	font-size: 1.2em;
	font-weight: 700;
}

/* "Have a coupon?" link: purple, clickable */
body.woocommerce-checkout #ast-coupon-trigger {
	color: #822791;
	font-weight: 500;
	cursor: pointer;
}

/* Coupon "Apply" button: purple outline, filled on hover */
body.woocommerce-checkout #ast-apply-coupon {
	border: 1.2px solid #822791 !important;
	border-radius: 0 !important;
	background: #ffffff !important;
	color: #822791 !important;
	text-transform: uppercase;
}

/* Coupon "Apply" button on hover */
body.woocommerce-checkout #ast-apply-coupon:hover {
	background: #822791 !important;
	color: #ffffff !important;
}

/* Payment area: no grey WooCommerce background or rounding */
body.woocommerce-checkout #payment {
	background: transparent !important;
	border-radius: 0 !important;
}

/* Payment methods list: no extra padding or line */
body.woocommerce-checkout #payment ul.payment_methods {
	padding: 0 !important;
	border: 0 !important;
}

/* Payment notice (e.g. no methods available): soft beige box */
body.woocommerce-checkout #payment .woocommerce-info {
	background-color: #F2F1EC !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: #222222 !important;
}

/* Payment method description box (e.g. Teya): soft beige, square */
body.woocommerce-checkout #payment div.payment_box {
	background-color: #F2F1EC !important;
	border-radius: 0 !important;
	color: #222222 !important;
}

/* Small arrow above the payment description box: same beige */
body.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: #F2F1EC !important;
}

/* Privacy text above the button: smaller, grey */
body.woocommerce-checkout .woocommerce-privacy-policy-text p {
	color: #7f7e7c;
	font-size: 14px;
}

/* Privacy policy link: purple */
body.woocommerce-checkout .woocommerce-privacy-policy-text a {
	color: #822791;
}

/* "Place order" button: solid purple, full width, bold uppercase */
body.woocommerce-checkout #place_order {
	width: 100%;
	padding: 1.1em 2em !important;
	background: #822791 !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: #ffffff !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: background-color 0.2s ease;
}

/* "Place order" button on hover and keyboard focus: Jógasetrið orange */
body.woocommerce-checkout #place_order:hover,
body.woocommerce-checkout #place_order:focus {
	background: #C96C1E !important;
	color: #ffffff !important;
}

/* Checkout box: less padding on tablet (Astra breakpoint) */
@media (max-width: 921px) {
	body.woocommerce-checkout .entry-content > .woocommerce {
		padding: 40px;
	}
}

/* Checkout box: less padding on mobile (Astra breakpoint) */
@media (max-width: 544px) {
	body.woocommerce-checkout .entry-content > .woocommerce {
		padding: 30px;
	}
}

/* =====================================================================
 * SECTION 45: SHOP PAGE (NETJÓGA)
 * ---------------------------------------------------------------------
 * The WooCommerce shop page (Netjóga) and product category/tag
 * archives, in the same style as the buy popup (Section 38): white
 * cards in a grid, the product image in a 4:3 frame with the site
 * gradient (#D49D85 to #8C288C, multiply), the product name in white
 * in the centre of the image, then the short description, the divider
 * (divider-shop.svg, same as the buy box), price and a "Skoða" button
 * to the package page (functions.php, STORE: SHOP CARDS).
 * The whole card is clickable: an invisible layer from the "Skoða"
 * link (::after) covers the card, so a click anywhere opens the
 * package page.
 * A name written as "Name - details" is split by functions.php (STORE:
 * SHOP CARD TITLES ON TWO LINES): the details appear in a smaller
 * second line (.netjoga-shop__subtitle) below the name.
 * The product name sits in Astra's summary below the image in the
 * markup, so it is lifted onto the image with absolute positioning:
 * the card is the positioning context, and the name takes a 4:3 box
 * at the top of the card, exactly over the image.
 * The divider is drawn with CSS above the price (::before), so no
 * extra markup is needed. The price is a full-width block, and the
 * divider takes 80% of its width, centred; aspect-ratio gives the
 * empty pseudo-element its height and must match the SVG's artboard
 * (335 x 33). If the divider file is replaced with one of other
 * proportions, update it.
 * Astra's on-card add to cart (bag) button is hidden: buying always
 * goes through the package page.
 * Category tabs above the cards (functions.php, STORE: SHOP CATEGORY
 * TABS) look like the Jógatímar tabs (Section 19): bold uppercase
 * text, purple with an underline on the active tab. On the shop page
 * a click hides the other cards (.is-filtered-out) and the visible
 * ones fade in and move up (.is-entering on the list).
 * Scoped to body.woocommerce.archive, so single product pages, cart
 * and checkout are not affected.
 * ===================================================================== */


/* ---------- Category tabs ---------- */

/* Tab row: horizontal, space between tabs and above the cards */
.netjoga-shop-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin: 0 0 40px;
}

/* Tab: plain bold uppercase text, room below for the underline */
.netjoga-shop-tabs__tab {
	position: relative;
	padding: 0 0 10px;
	color: #222222 !important;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none !important;
	text-transform: uppercase;
	cursor: pointer;
}

/* Tab on hover (inactive tabs only): purple */
.netjoga-shop-tabs__tab:not(.is-active):hover {
	color: #822791 !important;
}

/* Active tab: purple text, bolder than the other tabs */
.netjoga-shop-tabs__tab.is-active {
	color: #822791 !important;
	font-weight: 700 !important;
}

/* Active tab: underline as wide as the text */
.netjoga-shop-tabs__tab.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background-color: #822791;
}

/* Cards outside the chosen category: hidden */
body.woocommerce.archive ul.products li.product.is-filtered-out {
	display: none !important;
}

/* Entrance after a tab click: visible cards fade in and move up */
@keyframes netjogaShopEnter {
	from {
		opacity: 0;
		transform: translateY(40px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

body.woocommerce.archive ul.products.is-entering li.product:not(.is-filtered-out) {
	animation: netjogaShopEnter 0.7s ease;
}


/* ---------- Grid and cards ---------- */

/* Grid: 3 columns, space between cards (overrides Astra's 4 columns) */
body.woocommerce.archive ul.products {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 40px !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* No clearfix pseudo-elements from WooCommerce inside the grid */
body.woocommerce.archive ul.products::before,
body.woocommerce.archive ul.products::after {
	display: none !important;
}

/* Card: white, no padding, stacked, positioning context for the name and the click layer */
body.woocommerce.archive ul.products li.product {
	position: relative;
	display: flex !important;
	flex-direction: column;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	background: #ffffff;
	text-align: center !important;
}

/* Image frame: full width, fixed 4:3, own blend context for the gradient */
body.woocommerce.archive ul.products li.product .astra-shop-thumbnail-wrap {
	position: relative;
	isolation: isolate;
	width: 100%;
	aspect-ratio: 4 / 3;
	margin: 0 !important;
	overflow: hidden;
	background: #D49D85;
}

/* Image link and image: fill the 4:3 frame, cropped from the centre */
body.woocommerce.archive ul.products li.product .astra-shop-thumbnail-wrap > a,
body.woocommerce.archive ul.products li.product .astra-shop-thumbnail-wrap img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	object-fit: cover;
	object-position: center;
}

/* Gradient over the image: site gradient multiplied into the photo */
body.woocommerce.archive ul.products li.product .astra-shop-thumbnail-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(135deg, #D49D85 0%, #8C288C 100%);
	mix-blend-mode: multiply;
	pointer-events: none;
}

/* Astra's on-card add to cart (bag) button: hidden */
body.woocommerce.archive ul.products li.product .ast-on-card-button {
	display: none !important;
}

/* Summary below the image: centred column, grows so buttons line up */
body.woocommerce.archive ul.products li.product .astra-shop-summary-wrap {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	padding: 30px 30px 0 !important;
}

/* Product name link: a 4:3 box over the image at the top of the card */
body.woocommerce.archive ul.products li.product .ast-loop-product__link {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	padding: 20px;
	text-decoration: none !important;
}

/* Product name: white bold capitals in the centre of the image */
body.woocommerce.archive ul.products li.product .woocommerce-loop-product__title {
	margin: 0 !important;
	padding: 0 !important;
	color: #ffffff !important;
	font-size: 26px !important;
	font-weight: 600 !important;
	line-height: 1.15 !important;
	letter-spacing: 0.02em;
	text-align: center;
	text-transform: uppercase;
}

/* Second line of the name ("19 tímar + bónusefni"): smaller, regular weight, below the name */
body.woocommerce.archive ul.products li.product .netjoga-shop__subtitle {
	display: block;
	margin-top: 8px;
	font-size: 18px;
	font-weight: 400;
	letter-spacing: 0.04em;
}

/* Short description: dark text, above the price, takes the free height so dividers and prices line up */
body.woocommerce.archive ul.products li.product .ast-woo-shop-product-description {
	order: 1;
	flex: 1 1 auto;
	margin: 0 0 20px;
	color: #222222;
}

/* Description paragraphs: space between, none after the last */
body.woocommerce.archive ul.products li.product .ast-woo-shop-product-description p {
	margin: 0 0 1em;
}
body.woocommerce.archive ul.products li.product .ast-woo-shop-product-description p:last-child {
	margin-bottom: 0;
}

/* Price: purple bold, a full-width block (Astra's own price layout cannot shrink it), below the description */
body.woocommerce.archive ul.products li.product .price {
	order: 2;
	display: block !important;
	align-self: stretch !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 0 20px !important;
	color: #822791 !important;
	font-size: 28px !important;
	font-weight: 600 !important;
	text-align: center !important;
}

/* Divider above the price: divider-shop.svg, 80% of the price width, centred; aspect-ratio = SVG artboard (335 x 33) */
body.woocommerce.archive ul.products li.product .price::before {
	content: "";
	display: block;
	width: 80%;
	aspect-ratio: 335 / 33;
	margin: 6px auto 24px;
	background: url(https://jogasetrid.is/wp-content/uploads/2026/10/divider-shop.svg) no-repeat center / contain;
}

/* Price inner WooCommerce markup: same colour and weight */
body.woocommerce.archive ul.products li.product .price .woocommerce-Price-amount,
body.woocommerce.archive ul.products li.product .price bdi {
	color: inherit;
	font-weight: inherit;
}

/* "Skoða" button: centred at the bottom of the card; not a positioning context, so its click layer can cover the whole card */
body.woocommerce.archive ul.products li.product .netjoga-shop__button {
	position: static !important;
	align-self: center;
	margin: 0 0 30px;
}

/* Click layer: invisible, covers the whole card above the name link, opens the package page */
body.woocommerce.archive ul.products li.product .netjoga-shop__button::after {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	z-index: 3 !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	border: 0 !important;
	background: none !important;
	transform: none !important;
}


/* ---------- Tablet and mobile ---------- */

/* Grid: two columns on tablet (Astra breakpoint) */
@media (max-width: 921px) {
	body.woocommerce.archive ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 30px !important;
	}
}

/* Grid: one column on mobile, less padding in the cards (Astra breakpoint) */
@media (max-width: 544px) {
	body.woocommerce.archive ul.products {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	body.woocommerce.archive ul.products li.product .astra-shop-summary-wrap {
		padding: 24px 20px 0 !important;
	}
}


/* =====================================================================
 * SECTION 46: VERÐSKRÁ (PRICE LIST) [joga_verdskra]
 * ---------------------------------------------------------------------
 * The price list built by [joga_verdskra] (inc/verdskra.php, VERÐSKRÁ:
 * PRICE LIST SHORTCODE) from the price list Google Sheet (one sheet
 * tab per category), plus the "Jógatímar á netinu" tab built from the
 * WooCommerce products.
 *
 * Tabs: bold uppercase text, purple with an underline on the active
 * tab, like the Jógatímar and Netjóga tabs. A tab switch fades the
 * panel in and moves it up (.is-entering).
 * Intro: category title, optional text, and the included classes as
 * plain text in one row, with a purple dot (::before) in front of
 * every class except the first.
 * Price cards: white, centred: optional orange label (Merki), name in
 * small capitals, optional date (Dagsetning) in small purple text
 * right under the name, price large and purple, optional note, the
 * divider (divider-shop.svg) right after the content, and the Kaupa
 * button (.bunny-buy__button, Section 37) pushed to the bottom, so
 * buttons in a row line up. Three cards per row on desktop, two on
 * tablet, one on mobile; cards in a row share the same height.
 * Online cards: product image in a 4:3 frame with the site gradient,
 * name in white on the image (details on a second line), short
 * description, divider, price and a "Skoða" button.
 * Paragraph rules start with .joga-verdskra, so they are stronger
 * than Astra's paragraph spacing in page content.
 * ===================================================================== */


/* ---------- Wrapper, loading ---------- */

/* Hidden parts stay hidden, even where a display rule is set below */
.joga-verdskra [hidden] {
	display: none !important;
}

/* Loading / error message */
.joga-verdskra .verd-loading {
	margin: 0;
	color: #7f7e7c;
	text-align: center;
}


/* ---------- Tabs ---------- */

/* Tab row: horizontal, space between tabs and above the panel */
.verd-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	margin: 0 0 48px;
}

/* Tab: plain bold uppercase text, no button look, room below for the underline */
.verd-tab {
	position: relative;
	padding: 0 0 10px !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: #222222 !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-transform: uppercase;
	cursor: pointer;
}

/* Tab on hover (inactive tabs only): purple */
.verd-tab:not(.is-active):hover {
	color: #822791 !important;
}

/* Active tab: purple text */
.verd-tab.is-active {
	color: #822791 !important;
}

/* Active tab: underline as wide as the text */
.verd-tab.is-active::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background-color: #822791;
}

/* Panel entrance after a tab switch: fade in and move up */
@keyframes verdPanelEnter {
	from {
		opacity: 0;
		transform: translateY(40px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.verd-panel.is-entering {
	animation: verdPanelEnter 0.7s ease;
}


/* ---------- Intro ---------- */

/* Intro: centred title, text and class list above the cards */
.verd-intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin: 0 0 44px;
	text-align: center;
}

/* Category title */
.verd-intro__title {
	margin: 0 !important;
	color: #822791;
	font-size: 30px;
	text-transform: uppercase;
	font-weight: 700;
}

/* Intro text */
.joga-verdskra .verd-intro__text {
	max-width: 620px;
	margin: 0;
	font-size: 18px;
	line-height: 1.5;
}

/* Class list: one centred row of plain text that wraps */
.verd-intro__classes {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	color: #222222;
	font-size: 20px;
	line-height: 1.4;
}

/* Class name: plain text */
.verd-chip {
	display: inline-flex;
	align-items: center;
}

/* Purple dot between classes: in front of every class except the first */
.verd-chip:not(:first-child)::before {
	content: "•";
	margin: 0 14px;
	color: #822791;
}

/* Colour dot from the markup: not used */
.verd-chip__dot {
	display: none;
}


/* ---------- Card grid ---------- */

/* Grid: three cards per row, equal heights */
.verd-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}


/* ---------- Price cards ---------- */

/* Card: white, centred column, positioning context for the label */
.verd-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	padding: 44px 28px 32px;
	background: #ffffff;
	text-align: center;
}

/* Merki label (e.g. "Vinsælast"): orange, top left corner */
.verd-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 6px 12px;
	background: #C96C1E;
	color: #ffffff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1;
	text-transform: uppercase;
}

/* Name: small dark capitals */
.verd-card__name {
	margin: 0 !important;
	color: #222222;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
}

/* Date (Dagsetning) under the name: small purple text, close to the name */
.joga-verdskra .verd-card__date {
	margin: -6px 0 0;
	color: #822791;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.3;
}

/* Price: large purple bold */
.joga-verdskra .verd-card__price {
	margin: 0;
	color: #822791;
	font-size: 36px;
	font-weight: 700;
	line-height: 1.1;
}

/* Note under the price: small grey */
.joga-verdskra .verd-card__note {
	margin: 0;
	color: #5f5b56;
	font-size: 16px;
	line-height: 1.4;
}

/* Divider image: 70% of the card width, right after the content */
.verd-card__divider {
	display: block;
	width: 70%;
	height: auto;
	margin: 6px 0 4px;
}

/* Kaupa / Skoða button: centred, pushed to the bottom so buttons in a row line up (look from Section 37) */
.verd-card__button {
	align-self: center;
	margin-top: auto;
}


/* ---------- Online cards (Jógatímar á netinu) ---------- */

/* Card: white, image on top, body below */
.verd-online {
	display: flex;
	flex-direction: column;
	background: #ffffff;
	text-align: center;
}

/* Image frame: fixed 4:3, own blend context for the gradient */
.verd-online__image {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	padding: 20px;
	overflow: hidden;
	background: #D49D85;
}

/* Product image: fills the frame, cropped from the centre */
.verd-online__image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Gradient over the image: site gradient multiplied into the photo */
.verd-online__image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(135deg, #D49D85 0%, #8C288C 100%);
	mix-blend-mode: multiply;
	pointer-events: none;
}

/* Name on the image: white bold capitals, above the gradient */
.verd-online__title {
	position: relative;
	z-index: 2;
	margin: 0 !important;
	color: #ffffff !important;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.15;
	text-transform: uppercase;
}

/* Second line of the name ("10 tímar"): smaller, regular weight */
.verd-online__subtitle {
	display: block;
	margin-top: 8px;
	font-size: 17px;
	font-weight: 400;
	letter-spacing: 0.04em;
}

/* Body: centred column, grows so buttons line up */
.verd-online__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: 28px 28px 32px;
}

/* Short description: dark text, no space after the last paragraph */
.verd-online__text {
	color: #222222;
	font-size: 16px;
	line-height: 1.5;
}
.joga-verdskra .verd-online__text p {
	margin: 0 0 1em;
}
.joga-verdskra .verd-online__text p:last-child {
	margin-bottom: 0;
}

/* Online price: purple bold */
.joga-verdskra .verd-online__price {
	margin: 0;
	color: #822791;
	font-size: 28px;
	font-weight: 700;
}

/* Online price inner WooCommerce markup: same colour and weight */
.verd-online__price .woocommerce-Price-amount,
.verd-online__price bdi {
	color: inherit;
	font-weight: inherit;
}


/* ---------- Tablet and mobile ---------- */

/* Tablet (Astra breakpoint): two cards per row */
@media (max-width: 921px) {
	.verd-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
}

/* Mobile (Astra breakpoint): one card per row, tighter tabs, smaller class list */
@media (max-width: 544px) {
	.verd-tabs {
		gap: 20px;
		margin-bottom: 36px;
	}

	.verd-intro__classes {
		font-size: 17px;
	}

	.verd-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.verd-card {
		padding: 40px 24px 28px;
	}
}

/* ==========================================================================
   SECTION 48: KENNARANÁM (teacher training pages)
   Styles for teacher training pages built inside a Spectra container with
   the class "kennaranam". Covers the facts list next to the main image,
   the dates list in the tabs (date above its text below 922px), spacing
   for all other lists, the two-column topic list, and the
   accordion that inc/kennaranam-tabs.php builds from the core Tabs block
   below 922px. On desktop the tabs keep their normal look from Section 19
   (tab list class "jogasetrid-tabs").
   Only affects .kennaranam.
   ========================================================================== */

/* Facts list next to the image: no bullets, a little space between lines */
.kennaranam .kennaranam-stadreyndir {
	list-style: none !important;
	padding-left: 0 !important;
	margin-left: 0 !important;
}
.kennaranam .kennaranam-stadreyndir li {
	margin-bottom: 0.6em !important;
}

/* Bold labels in the facts list use the brand purple */
.kennaranam .kennaranam-stadreyndir strong {
	color: #822791 !important;
}

/* All lists on kennaranám pages: 8px space under each item, no class needed.
   The facts and dates lists (.kennaranam-stadreyndir) keep their own spacing,
   because their rules are more specific */
.kennaranam ul > li,
.kennaranam ol > li {
	margin-bottom: 8px !important;
	margin-block-end: 8px !important;
}

/* Below 922px: dates list inside a tab gets the date on its own line */
@media (max-width: 921px) {

	/* Date on its own line, text below it */
	.kennaranam .wp-block-tab-panel .kennaranam-stadreyndir strong {
		display: block !important;
	}

	/* A little more space between entries */
	.kennaranam .wp-block-tab-panel .kennaranam-stadreyndir li {
		margin-bottom: 1em !important;
	}
}

/* Topic list in two columns, one column on small phones */
.kennaranam .kennaranam-tvidalka {
	columns: 2 !important;
	column-gap: 32px !important;
}
@media (max-width: 544px) {
	.kennaranam .kennaranam-tvidalka {
		columns: 1 !important;
	}
}

/* Accordion toggles are hidden unless the accordion is switched on */
.kennaranam .kn-acc-toggle {
	display: none !important;
}

/* Below 922px: accordion instead of tabs */
@media (max-width: 921px) {

	/* Hide the tab list, the toggles replace it */
	.kennaranam .wp-block-tabs.kn-acc .wp-block-tab-list {
		display: none !important;
	}

	/* Toggle: full width, thin line above, purple text, no button look */
	.kennaranam .wp-block-tabs.kn-acc .kn-acc-toggle {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		width: 100% !important;
		padding: 18px 0 !important;
		margin: 0 !important;
		background: transparent !important;
		border: 0 !important;
		border-top: 1px solid #e4e1d8 !important;
		border-radius: 0 !important;
		box-shadow: none !important;
		font-family: inherit !important;
		font-size: 20px !important;
		font-weight: 600 !important;
		line-height: 1.3 !important;
		text-align: left !important;
		text-transform: none !important;
		color: #822791 !important;
		cursor: pointer !important;
	}

	/* No colour change on hover or focus */
	.kennaranam .wp-block-tabs.kn-acc .kn-acc-toggle:hover,
	.kennaranam .wp-block-tabs.kn-acc .kn-acc-toggle:focus {
		background: transparent !important;
		color: #822791 !important;
		outline: none !important;
	}

	/* Plus sign on the right when closed */
	.kennaranam .wp-block-tabs.kn-acc .kn-acc-toggle::after {
		content: "+" !important;
		font-size: 28px !important;
		font-weight: 400 !important;
		color: #c96c1e !important;
	}

	/* Minus sign when open */
	.kennaranam .wp-block-tabs.kn-acc .kn-acc-toggle[aria-expanded="true"]::after {
		content: "\2212" !important;
	}

	/* Thin line under the last panel */
	.kennaranam .wp-block-tabs.kn-acc .wp-block-tab-panels {
		border-bottom: 1px solid #e4e1d8 !important;
	}

	/* Closed panel: hidden the same way as Section 33, so galleries still measure */
	.kennaranam .wp-block-tabs.kn-acc .wp-block-tab-panels .wp-block-tab-panel:not(.kn-acc-open) {
		display: block !important;
		visibility: hidden !important;
		max-height: 0 !important;
		overflow: hidden !important;
		pointer-events: none !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	/* Open panel: always shown, even if the Tabs block has it marked hidden */
	.kennaranam .wp-block-tabs.kn-acc .wp-block-tab-panels .wp-block-tab-panel.kn-acc-open {
		display: block !important;
		visibility: visible !important;
		max-height: none !important;
		overflow: visible !important;
		pointer-events: auto !important;
		padding: 0 0 24px 0 !important;
		margin: 0 !important;
	}
}

/* =====================================================================
 * SECTION 49: HEADER ACCOUNT (MÍNAR SÍÐUR) AND LOGIN POPUP
 * ---------------------------------------------------------------------
 * The header account unit, shown as an icon with the text "Mínar
 * síður". Shown to everyone: logged-out visitors get Astra's login
 * popup (Header Builder > Account > Logged Out View > Login Popup),
 * logged-in users go to Mínar síður. Inside the link, the icon and
 * text are centred vertically. The text uses line-height: 1, which
 * together with the 32px bottom offset in Section 6 lines it up with
 * the main menu text. The outer wrappers are left to Astra, which uses
 * them for the header layout. Astra's filled person icon is swapped
 * for Arna's outline person (same as in the login field), purple and
 * orange on hover, drawn with a mask like the hamburger (Section 32).
 * On tablet and phone the text is hidden and only the icon shows.
 * Login popup: Astra Pro prints it inside .ast-hb-account-login-wrapper
 * with WordPress's standard login form (#loginform, fields #user_login
 * and #user_pass, checkbox #rememberme, button #wp-submit). Layout
 * follows Arna's design (2026-10-20): white 480px box (narrower on
 * phones), always in the middle of the screen, that grows with its
 * content (scrolls only on a screen shorter than the box), everything
 * centred. The intro (.login-popup-intro, heading + two lines) and the
 * placeholders in the fields come from functions.php, HEADER LOGIN
 * POPUP section; the labels stay for screen readers but are hidden on
 * screen once the placeholders are in (class has-placeholders).
 * Icons are orange (#C96C1E) inline SVGs: person and lock on the right
 * of the fields, and a round check for "Mundu mig" (empty circle when
 * not ticked). The lock and check are the same as on the Bunny video
 * lists (functions.php, BUNNY STREAM). Icons drawn by Arna.
 * The popup's close button (#ast-hb-login-close) sits 8px from the
 * top right corner and shows Arna's X icon as a background image;
 * Astra's own icon inside it (.ast-svg-iconset) is hidden.
 * The overlay behind the popup (.ast-hb-account-login-bg) is orange.
 * ===================================================================== */

/* Account link: icon and text side by side, centred vertically */
.ast-header-account .ast-header-account-link {
	display: inline-flex !important;
	align-items: center !important;
}

/* Icon: not dropped to the text baseline (Astra's svg-baseline) */
.ast-header-account .svg-baseline,
.ast-header-account .svg-baseline svg {
	position: static !important;
	top: auto !important;
	bottom: auto !important;
	vertical-align: middle !important;
}

/* Account text: semibold, line height 1 so it lines up with the menu (see Section 6) */
.ast-header-account .ast-header-account-text {
	font-weight: 600 !important;
	line-height: 1 !important;
	margin: 0 !important;
}

/* Account text on tablet and phone (Astra header breakpoint): hidden, only the icon shows next to the hamburger */
@media (max-width: 921px) {
	.ast-header-account .ast-header-account-text {
		display: none !important;
	}
}

/* Header account icon: Astra's filled person hidden (opacity 0), sized 20px on desktop so the new icon has room next to the text */
.ast-header-account .ahfb-svg-iconset svg {
	width: 20px !important;
	height: 20px !important;
	opacity: 0 !important;
}

/* Header account icon wrapper: positioning frame for the new icon */
.ast-header-account .ahfb-svg-iconset {
	position: relative !important;
}

/* Header account icon: Arna's outline person (same as the login field), purple, 20px on desktop, drawn with a mask like the hamburger (Section 32) */
.ast-header-account .ahfb-svg-iconset::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	transform: translate(-50%, -50%);
	background-color: #822791;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M255.359,193.641c-16.229-16.228-35.545-28.242-56.621-35.514,22.572-15.547,37.402-41.565,37.402-70.986C236.141,39.643,197.498,1,150,1S63.859,39.643,63.859,87.141c0,29.421,14.83,55.439,37.402,70.986-21.075,7.272-40.392,19.286-56.621,35.514C16.499,221.784,1,259.201,1,299h23.281c0-69.322,56.397-125.719,125.719-125.719s125.719,56.397,125.719,125.719h23.281c0-39.799-15.499-77.216-43.641-105.359ZM150,150c-34.661,0-62.859-28.198-62.859-62.859s28.199-62.859,62.859-62.859,62.859,28.198,62.859,62.859-28.199,62.859-62.859,62.859Z'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300'%3E%3Cpath d='M255.359,193.641c-16.229-16.228-35.545-28.242-56.621-35.514,22.572-15.547,37.402-41.565,37.402-70.986C236.141,39.643,197.498,1,150,1S63.859,39.643,63.859,87.141c0,29.421,14.83,55.439,37.402,70.986-21.075,7.272-40.392,19.286-56.621,35.514C16.499,221.784,1,259.201,1,299h23.281c0-69.322,56.397-125.719,125.719-125.719s125.719,56.397,125.719,125.719h23.281c0-39.799-15.499-77.216-43.641-105.359ZM150,150c-34.661,0-62.859-28.198-62.859-62.859s28.199-62.859,62.859-62.859,62.859,28.198,62.859,62.859-28.199,62.859-62.859,62.859Z'/%3E%3C/svg%3E") no-repeat center / contain;
	transition: background-color 0.2s ease;
}

/* Header account icon on hover: orange, like the menu links */
.ast-header-account .ast-header-account-link:hover .ahfb-svg-iconset::after {
	background-color: #C96C1E;
}

/* Header account icon on tablet and phone (Astra header breakpoint): 28px, matching the hamburger */
@media (max-width: 921px) {
	.ast-header-account .ahfb-svg-iconset svg,
	.ast-header-account .ahfb-svg-iconset::after {
		width: 28px !important;
		height: 28px !important;
	}
}

/* Header account link: no dotted frame after a click or tap (keyboard focus still shows an outline) */
.ast-header-account .ast-header-account-link:focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: none !important;
	-webkit-tap-highlight-color: transparent !important;
}

/* Login popup box: white, 480px wide, 20px from the screen edge on phones, everything centred */
.ast-hb-account-login-wrapper .ast-hb-account-login {
	width: 480px !important;
	max-width: calc(100% - 40px) !important;
	background-color: #ffffff !important;
	text-align: center;
}

/* Login popup box: always in the middle of the screen, also on phones (Astra's own offset is replaced) */
.ast-hb-account-login-wrapper .ast-hb-account-login {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	right: auto !important;
	bottom: auto !important;
	margin: 0 !important;
	transform: translate(-50%, -50%) !important;
}

/* Login popup box: grows with the content; scrolls only if the screen is shorter than the box */
.ast-hb-account-login-wrapper .ast-hb-account-login {
	height: auto !important;
	max-height: calc(100vh - 40px) !important;
	overflow-y: auto !important;
}

/* Inner wrappers of the box: grow with the content, no scrolling of their own */
.ast-hb-account-login-wrapper .ast-hb-account-login > div {
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
}

/* Intro: space below, before the first field */
.ast-hb-account-login-wrapper .login-popup-intro {
	margin: 0 0 30px !important;
}

/* Intro heading "Mínar síður": purple, bold */
.ast-hb-account-login-wrapper .login-popup-intro__title {
	margin: 0 0 16px !important;
	color: #822791;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
}

/* Intro lines: normal text colour, small gap between them */
.ast-hb-account-login-wrapper .login-popup-intro__text {
	margin: 0 0 12px !important;
	color: #222222;
}

/* Last intro line: no gap below (the intro wrapper has it) */
.ast-hb-account-login-wrapper .login-popup-intro__text:last-child {
	margin-bottom: 0 !important;
}

/* Links in the popup ("Skoða Netjóga", "Gleymt lykilorð?"): purple, underlined */
.ast-hb-account-login-wrapper .ast-hb-account-login a {
	color: #822791;
	text-decoration: underline;
}

/* Form rows (username, password, remember me, button): 20px apart */
.ast-hb-account-login-wrapper #loginform p {
	margin: 0 0 20px !important;
}

/* Field labels: hidden on screen once they are placeholders, still read by screen readers */
.ast-hb-account-login-wrapper #loginform.has-placeholders .login-username label,
.ast-hb-account-login-wrapper #loginform.has-placeholders .login-password label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Fields: full width, square, white, thin line, room for the icon on the right */
.ast-hb-account-login-wrapper #loginform input[type="text"],
.ast-hb-account-login-wrapper #loginform input[type="password"] {
	width: 100% !important;
	min-height: 64px;
	padding: 0 56px 0 20px !important;
	background-color: #ffffff !important;
	background-repeat: no-repeat !important;
	background-position: right 18px center !important;
	background-size: 24px 24px !important;
	border: 1px solid #dad8d5 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	text-align: left;
}

/* Field being typed in: purple line */
.ast-hb-account-login-wrapper #loginform input[type="text"]:focus,
.ast-hb-account-login-wrapper #loginform input[type="password"]:focus {
	outline: none;
	border-color: #822791 !important;
}

/* Placeholder text: grey */
.ast-hb-account-login-wrapper #loginform input::placeholder {
	color: #7f7e7c;
	opacity: 1;
}

/* Username field: orange person icon */
.ast-hb-account-login-wrapper #loginform #user_login {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 300' width='30' height='30'%3E%3Cpath fill='%23C96C1E' d='M255.359,193.641c-16.229-16.228-35.545-28.242-56.621-35.514,22.572-15.547,37.402-41.565,37.402-70.986C236.141,39.643,197.498,1,150,1S63.859,39.643,63.859,87.141c0,29.421,14.83,55.439,37.402,70.986-21.075,7.272-40.392,19.286-56.621,35.514C16.499,221.784,1,259.201,1,299h23.281c0-69.322,56.397-125.719,125.719-125.719s125.719,56.397,125.719,125.719h23.281c0-39.799-15.499-77.216-43.641-105.359ZM150,150c-34.661,0-62.859-28.198-62.859-62.859s28.199-62.859,62.859-62.859,62.859,28.198,62.859,62.859-28.199,62.859-62.859,62.859Z'/%3E%3C/svg%3E") !important;
}

/* Password field: orange lock icon */
.ast-hb-account-login-wrapper #loginform #user_pass {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' width='30' height='30'%3E%3Cpath fill='%23C96C1E' d='m23.12 9.4h-1.55v-2.84c0-1.75-.69-3.4-1.93-4.63-1.24-1.24-2.89-1.93-4.64-1.93s-3.39.69-4.63 1.93-1.92 2.88-1.93 4.64v2.83h-1.55c-1.74 0-3.16 1.42-3.16 3.16v14.28c0 1.74 1.42 3.16 3.16 3.16h16.23c1.74 0 3.16-1.42 3.16-3.16v-14.28c0-1.74-1.42-3.16-3.16-3.16zm-12.8-2.83c0-1.25.49-2.42 1.37-3.3s2.06-1.37 3.3-1.37c1.25 0 2.42.49 3.3 1.37s1.37 2.06 1.37 3.3v2.83h-9.35v-2.83zm14.07 20.27c0 .7-.57 1.27-1.27 1.27h-16.24c-.7 0-1.27-.57-1.27-1.27v-14.28c0-.7.57-1.27 1.27-1.27h16.23c.7 0 1.27.57 1.27 1.27v14.28z'/%3E%3C/svg%3E") !important;
}

/* "Mundu mig": icon and text side by side, purple text */
.ast-hb-account-login-wrapper #loginform .login-remember label {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: #822791;
	cursor: pointer;
}

/* "Mundu mig" checkbox: replaced by an orange circle (empty when not ticked) */
.ast-hb-account-login-wrapper #loginform #rememberme {
	appearance: none;
	-webkit-appearance: none;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	margin: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' width='30' height='30'%3E%3Ccircle cx='15' cy='15' r='14.055' fill='none' stroke='%23C96C1E' stroke-width='1.89'/%3E%3C/svg%3E") no-repeat center / 28px 28px;
	border: 0;
	cursor: pointer;
}

/* "Mundu mig" ticked: orange round check */
.ast-hb-account-login-wrapper #loginform #rememberme:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' width='30' height='30'%3E%3Cpath fill='%23C96C1E' d='M13.19,18.38L27.24,3.35l1.35,1.21-15.3,16.42-6.22-5.91,1.25-1.31,4.86,4.62ZM27.79,7.21l-1.34,1.42c1.06,1.89,1.66,4.06,1.66,6.37,0,7.23-5.88,13.11-13.11,13.11S1.89,22.23,1.89,15,7.77,1.89,15,1.89c3.36,0,6.42,1.28,8.75,3.37l1.3-1.37c-2.66-2.41-6.18-3.89-10.05-3.89C6.73,0,0,6.73,0,15s6.73,15,15,15,15-6.73,15-15c0-2.86-.82-5.52-2.21-7.79Z'/%3E%3C/svg%3E");
}

/* "Mundu mig" with keyboard focus: purple outline */
.ast-hb-account-login-wrapper #loginform #rememberme:focus-visible {
	outline: 1px solid #822791;
	outline-offset: 2px;
}

/* "Innskrá" button: filled purple, normal size */
.ast-hb-account-login-wrapper #wp-submit {
	width: auto !important;
	min-height: 0 !important;
	padding: 0.9em 3.5em !important;
	background: #822791 !important;
	border: 1px solid #822791 !important;
	border-radius: 0 !important;
	color: #ffffff !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* "Innskrá" on hover and keyboard focus: orange, same as "Bóka tíma" */
.ast-hb-account-login-wrapper #wp-submit:hover,
.ast-hb-account-login-wrapper #wp-submit:focus {
	background: #C96C1E !important;
	border-color: #C96C1E !important;
	color: #ffffff !important;
}

/* Close button (#ast-hb-login-close): 8px from the top right corner of the box (Astra positions the box, so it frames the button), Arna's X icon */
.ast-hb-account-login-wrapper #ast-hb-login-close {
	position: absolute !important;
	top: 8px !important;
	right: 8px !important;
	width: 22px !important;
	height: 22px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' width='22' height='22'%3E%3Cpath fill='%23222222' d='M19.5,18.1l-1.4,1.4-7.1-7.1-7.1,7.1-1.4-1.4,7.1-7.1L2.5,3.9l1.4-1.4,7.1,7.1,7.1-7.1,1.4,1.4-7.1,7.1,7.1,7.1Z'/%3E%3C/svg%3E") no-repeat center / 22px 22px !important;
	border: 0 !important;
	cursor: pointer;
}

/* Astra's own close icon inside the button: hidden, Arna's X shows instead */
.ast-hb-account-login-wrapper #ast-hb-login-close .ast-svg-iconset {
	opacity: 0 !important;
}

/* Overlay behind the popup (.ast-hb-account-login-bg): Jógasetrið orange; opacity 0.85 = 85% cover, lower shows more of the page */
.ast-hb-account-login-wrapper .ast-hb-account-login-bg {
	background: #C96C1E !important;
	opacity: 0.85 !important;
}



/* =====================================================================
 * SECTION 50: TESTIMONIALS: SHORT TEXT AND POPUP ON MOBILE
 * ---------------------------------------------------------------------
 * Phones only (Astra mobile breakpoint, max-width 544px), on the
 * testimonial carousel (.testimonial-fade, Section 17). Tablet and
 * desktop are unchanged.
 * Each testimonial shows at most 7 lines: the text box gets a fixed
 * max-height of 7 lines (font size 1.1em x line height 1.6 x 7), so
 * change the line height in both places if it is ever changed. To
 * show a different number of lines, change the 7 in the max-height.
 * The fade only covers the bottom of the last line, so every line
 * shown stays readable.
 * inc/testimonial-popup.php adds "Lesa meira" (.testimonial-more) and
 * the class is-clamped to testimonials whose text is cut; those fade
 * out at the bottom and open the popup when tapped. The script
 * measures the text itself, so it needs no change if the number of
 * lines changes.
 * The popup (.testimonial-modal) is a <dialog> with every testimonial
 * side by side in a track that snaps to one testimonial per swipe
 * (CSS scroll snap). It wraps the testimonial in view: the script
 * sets the track height to fit it after each swipe, and the height
 * animates. A testimonial taller than the screen scrolls up and down
 * inside its own slide. Dots below show the position.
 * Section 17 sets margin and padding to 0 !important on everything
 * inside a testimonial, so "Lesa meira" uses a longer selector to
 * get its own spacing.
 * ===================================================================== */

/* "Lesa meira": hidden unless the testimonial is cut on a phone */
.testimonial-more {
	display: none;
}

/* Page behind the popup does not scroll while it is open */
html.testimonial-modal-open {
	overflow: hidden;
}

@media (max-width: 544px) {

	/* Testimonial text: fixed line height, so the lines can be measured */
	.wp-block-uagb-post-carousel.testimonial-fade .uagb-post__excerpt p {
		line-height: 1.6 !important;
	}

	/* Testimonial text box: at most 7 lines (1.1em font size x 1.6 line height x 7) */
	.wp-block-uagb-post-carousel.testimonial-fade .uagb-post__excerpt {
		max-height: calc(1.1em * 1.6 * 7);
		overflow: hidden;
	}

	/* Cut testimonial: clickable */
	.wp-block-uagb-post-carousel.testimonial-fade .uagb-post__inner-wrap.is-clamped {
		cursor: pointer;
	}

	/* Cut testimonial: only the bottom of the 7th line fades out */
	.wp-block-uagb-post-carousel.testimonial-fade .uagb-post__inner-wrap.is-clamped .uagb-post__excerpt {
		-webkit-mask-image: linear-gradient(to bottom, #000000 90%, transparent 100%);
		mask-image: linear-gradient(to bottom, #000000 90%, transparent 100%);
	}

	/* "Lesa meira" under a cut testimonial: purple, underlined, above the name */
	.wp-block-uagb-post-carousel.testimonial-fade .uagb-post__inner-wrap.is-clamped .testimonial-more {
		display: inline-block;
		order: 1;
		margin: 12px 0 0 !important;
		color: #822791;
		font-size: 0.9em;
		font-weight: 600;
		text-decoration: underline;
		cursor: pointer;
	}
}


/* ---------- Popup ---------- */

/* Popup box: wraps the content, at most the screen height minus a margin, white, content stacked */
.testimonial-modal {
	width: calc(100vw - 32px);
	max-width: 480px;
	height: fit-content;
	max-height: calc(100dvh - 64px);
	margin: auto;
	padding: 0;
	border: 0;
	background: #ffffff;
	overflow: hidden;
}

/* Open popup: close control, swipe track and dots stacked */
.testimonial-modal[open] {
	display: flex;
	flex-direction: column;
}

/* Backdrop behind the popup: black at 60% (99 = alpha), the page shows through */
.testimonial-modal::backdrop {
	background: #00000099;
}

/* Close control (x): top right corner, purple */
.testimonial-modal__close {
	position: absolute;
	top: 8px;
	right: 12px;
	z-index: 2;
	color: #822791;
	font-size: 2.2rem;
	line-height: 1;
	cursor: pointer;
}

/* Close control: no outline on tap, outline for keyboard focus only */
.testimonial-modal__close:focus {
	outline: none;
}

.testimonial-modal__close:focus-visible {
	outline: 2px solid #822791;
	outline-offset: 2px;
}

/* Swipe track: testimonials side by side, snaps to one per swipe, no scrollbar;
   height set by the script to fit the testimonial in view, animated */
.testimonial-modal__track {
	display: flex;
	align-items: flex-start;
	flex: 0 0 auto;
	min-height: 0;
	outline: none;
	transition: height 0.25s ease;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

.testimonial-modal__track::-webkit-scrollbar {
	display: none;
}

/* First fit when the popup opens: no animation */
.testimonial-modal__track.is-instant {
	transition: none;
}

/* One testimonial: full width of the popup, its own height, scrolls up and down if taller than the track */
.testimonial-modal__slide {
	display: flex;
	flex: 0 0 100%;
	flex-direction: column;
	max-height: 100%;
	box-sizing: border-box;
	padding: 48px 24px 8px;
	overflow-y: auto;
	scroll-snap-align: start;
}

/* Inner wrapper: centred when short, starts at the top when long */
.testimonial-modal__inner {
	margin: auto 0;
}

/* Testimonial text: purple, centred, space between paragraphs */
.testimonial-modal__text p {
	margin: 0 0 1em;
	color: #822791;
	font-size: 1.1em;
	line-height: 1.6;
	text-align: center;
}

/* Opening and closing quotation marks */
.testimonial-modal__text p:first-child::before {
	content: "„";
}

.testimonial-modal__text p:last-child::after {
	content: "“";
}

/* Emoji images in the text: same size as the text */
.testimonial-modal__text img {
	display: inline;
	width: 1em;
	height: 1em;
	vertical-align: -0.1em;
}

/* Name under the testimonial: bold purple, centred */
.testimonial-modal__name {
	margin: 20px 0 0;
	color: #822791;
	font-weight: 700;
	text-align: center;
}

/* Dots: centred row under the track */
.testimonial-modal__dots {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	padding: 12px 16px 20px;
}

/* Dots hidden when there is only one testimonial */
.testimonial-modal__dots[hidden] {
	display: none;
}

/* Dot: small light orange circle */
.testimonial-modal__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ddb892;
	cursor: pointer;
}

/* Dot for the testimonial in view: orange */
.testimonial-modal__dot.is-active {
	background: #C96C1E;
}

/* =====================================================================
   51 CHECKOUT TOTALS
   ===================================================================== */

/* Hide the subtotal row in the checkout order review when no discount, fee, shipping or tax row makes it differ from the total */
.woocommerce-checkout-review-order-table:not(:has(tr.cart-discount, tr.fee, tr.shipping, tr.tax-rate, tr.tax-total)) tr.cart-subtotal {
	display: none;
}

/* =====================================================================
   52 CHECKOUT PAYMENT METHOD (TEYA)
   ===================================================================== */

/* Payment method row: even, compact padding (overrides Astra modern checkout 15px 15px 0 15px) */
form.checkout.woocommerce-checkout #payment ul.payment_methods li.payment_method_teya_payments {
	padding: 12px 15px!important;
	margin: 0;
	min-height: 0;
}

/* Label: text and logo on one line, vertically centred */
form.checkout.woocommerce-checkout #payment ul.payment_methods li.payment_method_teya_payments label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	line-height: 1.4;
}

/* Teya logo: small, like a card icon */
form.checkout.woocommerce-checkout #payment ul.payment_methods li.payment_method_teya_payments label img {
	height: 24px;
	width: auto;
	max-height: none;
	margin: 0;
	border-radius: 4px;
}

/* Grey description box under the Teya option: hidden, the label already says it is a card payment */
form.checkout.woocommerce-checkout #payment div.payment_box.payment_method_teya_payments {
	display: none;
}

/* =====================================================================
   53 LANDING PAGE BOX (landing-box)
   White content box on standalone landing pages (e.g. Audur / The
   Movement Gathering). Add the class landing-box to the Spectra
   Container. Tight spacing between heading, subtitle, text and
   button, text kept to a readable width, everything centred.
   Images and galleries keep their own space below them, so the big
   image, the row of photos and the title do not touch.
   ===================================================================== */

/* Box: centred text, no gap between child blocks (spacing comes from the rules below) */
.wp-block-uagb-container.landing-box,
.wp-block-uagb-container.landing-box > .uagb-container-inner-blocks-wrap {
	row-gap: 0 !important;
	text-align: center;
}

/* Box: white background and padding */
.wp-block-uagb-container.landing-box {
	background-color: #ffffff !important;
	padding: 70px 80px !important;
}

/* Single image in the box: same space below as the gap between gallery photos */
.landing-box .wp-block-uagb-image,
.landing-box .wp-block-image {
	margin: 0 0 20px !important;
}

/* Gallery (row of photos) in the box: larger space below, before the title */
.landing-box .wp-block-uagb-image-gallery,
.landing-box .wp-block-gallery {
	margin: 0 0 50px !important;
}

/* Main heading (H1 or H2) in the box: small space below */
.landing-box :where(h1, h2) {
	margin: 0 0 10px !important;
}

/* Subheading (H3) in the box: e.g. "The Dance of Authenticity" */
.landing-box h3 {
	margin: 0 0 20px !important;
}

/* Paragraphs: readable width, centred, normal space below */
.landing-box p {
	max-width: 680px;
	margin: 0 auto 16px !important;
}

/* Button row: space above, centred */
.landing-box .wp-block-uagb-buttons,
.landing-box .wp-block-buttons {
	margin-top: 24px !important;
	justify-content: center !important;
}

/* Tablet: less padding */
@media (max-width: 921px) {
	.wp-block-uagb-container.landing-box {
		padding: 50px 40px !important;
	}
}

/* Mobile: least padding, smaller space under the gallery */
@media (max-width: 544px) {
	.wp-block-uagb-container.landing-box {
		padding: 40px 20px !important;
	}

	.landing-box .wp-block-uagb-image-gallery,
	.landing-box .wp-block-gallery {
		margin-bottom: 30px !important;
	}
}

/* =====================================================================
 * SECTION 54: COOKIE BANNER
 * ---------------------------------------------------------------------
 * The consent window printed by inc/tracking.php (#cookie-banner).
 * A purple layer covers the whole site and a white box sits in the
 * middle of the screen. The box has two views:
 *   .cookie-banner__intro    heading and short text (shown first)
 *   .cookie-banner__details  the privacy policy page (Settings ›
 *                            Privacy), opened with "Nánar um
 *                            persónuvernd", closed with "Til baka"
 * The buttons "Hafna" and "Samþykkja" stay at the bottom in both
 * views. The privacy text scrolls inside the box, the buttons do not.
 * The script shows the window (removes the hidden attribute) until
 * the visitor chooses, and adds the class cookie-banner-open to <html>
 * so the page behind does not scroll. A link to #vafrakokur reopens it.
 * Phones (max-width 544px): smaller padding and heading, buttons
 * stretch to full width side by side.
 * Selectors start with .cookie-banner so Astra's own button and
 * heading styles do not win.
 * ===================================================================== */

/* Purple layer (#822791 at 70%) over the whole site, box centred in it, above everything else */
.cookie-banner {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: #822791b3;
}

/* Hidden elements stay hidden (the hidden attribute wins over display: flex) */
.cookie-banner[hidden],
.cookie-banner [hidden] {
	display: none !important;
}

/* Page behind does not scroll while the window is open */
html.cookie-banner-open,
html.cookie-banner-open body {
	overflow: hidden;
}

/* White box in the middle: content stacked, at most 85% of the screen height */
.cookie-banner .cookie-banner__box {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 560px;
	max-height: 85vh;
	padding: 40px;
	background: #ffffff;
	color: #222222;
	text-align: center;
}

/* Box: no outline when the script focuses it (overrides Section 28 keyboard outline) */
.cookie-banner .cookie-banner__box:focus,
.cookie-banner .cookie-banner__box:focus-visible {
	outline: none;
}

/* Short text view: scrolls if the screen is very low */
.cookie-banner .cookie-banner__intro {
	overflow-y: auto;
}

/* Heading: purple, centred */
.cookie-banner .cookie-banner__title {
	margin: 0 0 16px;
	font-size: 28px;
	line-height: 1.2;
	color: #822791;
}

/* Text paragraphs */
.cookie-banner .cookie-banner__text {
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 1.6;
	color: #222222;
}

/* Text links ("Nánar um persónuvernd", "Til baka"): purple, underlined */
.cookie-banner .cookie-banner__link {
	color: #822791;
	text-decoration: underline;
	cursor: pointer;
}

/* Text links on hover: orange */
.cookie-banner .cookie-banner__link:hover {
	color: #C96C1E;
}

/* Privacy policy view: fills the box, left aligned */
.cookie-banner .cookie-banner__details {
	display: flex;
	flex-direction: column;
	min-height: 0;
	text-align: left;
}

/* "Til baka": at the top left, space below */
.cookie-banner .cookie-banner__back {
	align-self: flex-start;
	margin-bottom: 16px;
	font-size: 15px;
}

/* Privacy policy text: scrolls inside the box */
.cookie-banner .cookie-banner__details-content {
	min-height: 0;
	overflow-y: auto;
	padding-right: 8px;
	font-size: 15px;
	line-height: 1.6;
}

/* Privacy policy headings: purple, smaller than on the page itself */
.cookie-banner .cookie-banner__details-content h1,
.cookie-banner .cookie-banner__details-content h2,
.cookie-banner .cookie-banner__details-content h3 {
	margin: 24px 0 8px;
	line-height: 1.2;
	color: #822791;
}

/* First heading: no space above */
.cookie-banner .cookie-banner__details-content > :first-child {
	margin-top: 0;
}

/* Main heading size */
.cookie-banner .cookie-banner__details-content h1 {
	font-size: 26px;
}

/* Section heading size */
.cookie-banner .cookie-banner__details-content h2 {
	font-size: 21px;
}

/* Sub-heading size */
.cookie-banner .cookie-banner__details-content h3 {
	font-size: 17px;
}

/* Paragraphs and lists in the privacy policy */
.cookie-banner .cookie-banner__details-content p,
.cookie-banner .cookie-banner__details-content ul {
	margin: 0 0 12px;
}

/* Links in the privacy policy: purple, underlined */
.cookie-banner .cookie-banner__details-content a {
	color: #822791;
	text-decoration: underline;
}

/* Button row: side by side, centred, space above, never shrinks */
.cookie-banner .cookie-banner__buttons {
	display: flex;
	flex-shrink: 0;
	justify-content: center;
	gap: 12px;
	margin-top: 28px;
}

/* Both buttons: 1px purple border, square corners, uppercase, same width */
.cookie-banner .cookie-banner__button {
	min-width: 150px;
	margin: 0;
	padding: 10px 24px;
	border: 1px solid #822791;
	border-radius: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
}

/* "Hafna": white with purple text */
.cookie-banner .cookie-banner__button--reject {
	background: #ffffff;
	color: #822791;
}

/* "Hafna" on hover: fills purple */
.cookie-banner .cookie-banner__button--reject:hover {
	background: #822791;
	color: #ffffff;
}

/* "Samþykkja": solid purple */
.cookie-banner .cookie-banner__button--accept {
	background: #822791;
	color: #ffffff;
}

/* "Samþykkja" on hover: orange */
.cookie-banner .cookie-banner__button--accept:hover {
	background: #C96C1E;
	border-color: #C96C1E;
	color: #ffffff;
}

/* Phones: less padding, smaller heading, buttons full width side by side */
@media (max-width: 544px) {
	.cookie-banner {
		padding: 12px;
	}

	.cookie-banner .cookie-banner__box {
		max-height: 92vh;
		padding: 28px 20px;
	}

	.cookie-banner .cookie-banner__title {
		font-size: 24px;
	}

	.cookie-banner .cookie-banner__buttons {
		margin-top: 20px;
	}

	.cookie-banner .cookie-banner__button {
		flex: 1;
		min-width: 0;
		padding: 10px 12px;
	}
}

/* ============================================================
   SECTION 55 — 404 PAGE
   The 404 page is an Astra Site Builder layout. It is printed
   full width without the boxed page wrapper, so the white
   container gets the same width and top/bottom space as the
   boxed pages here. The heading with the class breathe-text
   slowly grows and shrinks (8 s per breath).
   ============================================================ */

/* White container on the 404 page: content width, centred, space above and below */
body.error404 .wp-block-uagb-container.yoga-classes {
	width: calc(100% - 40px) !important;
	max-width: var(--wp--custom--ast-content-width-size, 1200px) !important;
	margin-top: 60px !important;
	margin-bottom: 60px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Breathing text: inline-block so it can scale around its centre */
.breathe-text {
	display: inline-block;
	animation: breathe-text 8s ease-in-out infinite;
}

/* Breathing text: 4 s growing (in), 4 s shrinking (out) */
@keyframes breathe-text {
	0%, 100% { transform: scale(0.9); }
	50% { transform: scale(1.1); }
}

/* Breathing text: no movement for visitors who turn off animations */
@media (prefers-reduced-motion: reduce) {
	.breathe-text {
		animation: none;
	}
}