.elementor-10329 .elementor-element.elementor-element-fe3198c{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:stretch;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--margin-top:3%;--margin-bottom:3%;--margin-left:0%;--margin-right:0%;}.elementor-10329 .elementor-element.elementor-element-583ae9d{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10329 .elementor-element.elementor-element-68afdfa{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:stretch;--gap:10px 0px;--row-gap:10px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10329 .elementor-element.elementor-element-63ba1e4{--display:flex;}.elementor-widget-theme-post-featured-image .widget-image-caption{color:var( --e-global-color-text );font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-10329 .elementor-element.elementor-element-80bbeb6{text-align:start;}.elementor-10329 .elementor-element.elementor-element-80bbeb6 img{width:100%;max-width:100%;}.elementor-10329 .elementor-element.elementor-element-80bbeb6 .widget-image-caption{text-align:start;color:#55D9FF;font-size:14px;font-weight:400;font-style:italic;margin-block-start:5px;}.elementor-10329 .elementor-element.elementor-element-f1c4912{--display:flex;}.elementor-widget-theme-post-title .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-10329 .elementor-element.elementor-element-d8a6d41 .elementor-heading-title{font-size:36px;font-weight:600;color:#02A9C5;}.elementor-widget-theme-post-content{color:var( --e-global-color-text );font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );}.elementor-10329 .elementor-element.elementor-element-155ef9d{font-size:18px;font-weight:400;}.elementor-10329 .elementor-element.elementor-element-dd14b77{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:10px 10px;--row-gap:10px;--column-gap:10px;--margin-top:60px;--margin-bottom:60px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-10329 .elementor-element.elementor-element-dd14b77.e-con{--align-self:center;}.elementor-10329 .elementor-element.elementor-element-e1a998c{--display:flex;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-divider{--divider-color:var( --e-global-color-secondary );}.elementor-widget-divider .elementor-divider__text{color:var( --e-global-color-secondary );font-size:var( --e-global-typography-secondary-font-size );font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:var( --e-global-color-secondary );border-color:var( --e-global-color-secondary );}.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:var( --e-global-color-secondary );}.elementor-10329 .elementor-element.elementor-element-5740c85{--divider-border-style:solid;--divider-color:var( --e-global-color-5dd7e33 );--divider-border-width:1px;}.elementor-10329 .elementor-element.elementor-element-5740c85 .elementor-divider-separator{width:65%;margin:0 auto;margin-center:0;}.elementor-10329 .elementor-element.elementor-element-5740c85 .elementor-divider{text-align:center;padding-block-start:15px;padding-block-end:15px;}.elementor-10329 .elementor-element.elementor-element-c897980 > .elementor-widget-container{padding:0px 0px 0px 0px;}.elementor-10329 .elementor-element.elementor-element-c897980.elementor-element{--align-self:center;}@media(max-width:1060px){.elementor-widget-theme-post-featured-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-theme-post-title .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-widget-theme-post-content{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-divider .elementor-divider__text{font-size:var( --e-global-typography-secondary-font-size );}}@media(min-width:768px){.elementor-10329 .elementor-element.elementor-element-fe3198c{--content-width:1000px;}.elementor-10329 .elementor-element.elementor-element-63ba1e4{--width:450px;}.elementor-10329 .elementor-element.elementor-element-f1c4912{--width:450px;}.elementor-10329 .elementor-element.elementor-element-dd14b77{--width:100%;}.elementor-10329 .elementor-element.elementor-element-e1a998c{--width:1000px;}}@media(max-width:767px){.elementor-10329 .elementor-element.elementor-element-68afdfa{--justify-content:center;}.elementor-10329 .elementor-element.elementor-element-63ba1e4{--width:400px;}.elementor-10329 .elementor-element.elementor-element-63ba1e4.e-con{--align-self:center;}.elementor-widget-theme-post-featured-image .widget-image-caption{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-theme-post-title .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );}.elementor-widget-theme-post-content{font-size:var( --e-global-typography-text-font-size );}.elementor-widget-divider .elementor-divider__text{font-size:var( --e-global-typography-secondary-font-size );}}/* Start custom CSS for container, class: .elementor-element-63ba1e4 */.widget-image-caption.wp-caption-text {
    color: #333 !important; /* eller vilken färg du vill */
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-84f2719 *//* 1. Reset the list */
.opal-extras ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0;
}

.opal-extras li {
    margin-bottom: 15px;
}

/* 2. THE MAIN BOX (Smaller & Fitted) */
.opal-extra {
    /* KEY CHANGE: inline-flex makes the box shrink to fit the content */
    display: inline-flex;    
    align-items: center;
    
    background-color: #F4F9FA; 
    border-radius: 6px;     
    
    /* Reduced Padding (Top/Bottom: 10px, Right: 20px, Left: 10px) */
    padding: 10px 20px 10px 10px;      
    
    color: #02A9C5 !important; 
    font-weight: 700;        
    font-size: 15px;         /* Smaller text (was 18px) */
    text-decoration: none !important;
    
    transition: transform 0.2s ease, background-color 0.2s ease;
}

/* Hover Effect */
.opal-extra:hover {
    background-color: #ebf5f7;
    transform: translateY(-2px); 
}

/* 3. THE CIRCLE ICON (Smaller) */
.opal-extra-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    
    background-color: #02A9C5; 
    
    /* Reduced Circle Size (was 60px) */
    width: 40px;             
    height: 40px;            
    border-radius: 50%;      
    
    margin-right: 12px;      /* Reduced gap between icon and text */
    flex-shrink: 0;          
}

/* 4. THE WHITE ARROW (Smaller) */
.opal-extra-icon svg {
    /* Reduced Icon Size (was 30px) */
    width: 20px;
    height: 20px;
    stroke: #ffffff;         
    stroke-width: 2px;
}/* End custom CSS */
/* Start custom CSS *//********************************************
 * BERGHS – TITLAR AV [NAMN]
 * RESPONSIVE AUTO-GRID FIX
 ********************************************/

/* 1. Wrapper & Rubrik */
.books-by-outer {
    width: 100%;
    margin-top: 40px;
    margin-bottom: 40px;
}

.books-by-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Rubrik Centrerad och Stylad */
.books-by-inner h3 {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: #02A9C5;
    margin-bottom: 30px;
    font-family: inherit;
    letter-spacing: 0.3px;
    width: 100%;
}

/********************************************
 * 2. THE RESPONSIVE GRID
 ********************************************/

.single-books-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    
    /* DESKTOP DEFAULT: 
       "Fit as many 150px books as possible."
       On a 1100px screen, this naturally results in ~6 books.
       As space shrinks, it drops to 5, then 4. */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    
    gap: 20px; /* Standard gap */
    justify-content: center;
}

/* 3. Book Card & Image */
.single-books a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.single-books img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 3/4; /* Maintains book shape */
    object-fit: cover;
    margin-bottom: 10px;
}

/* Text Styles */
.single-book-text h4 {
    font-size: 15px; /* Slightly smaller to fit 6 in a row */
    color: #02A9C5;
    font-weight: 600;
    margin: 0 0 5px;
    line-height: 1.2;
}

.single-book-span span {
    font-size: 13px;
    color: #02A9C5;
    opacity: 0.8;
}

/********************************************
 * 4. MOBILE SPECIFIC (Force 3 Columns)
 ********************************************/

@media (max-width: 600px) {
    .single-books-grid {
        /* FORCE exactly 3 columns on mobile, regardless of size */
        grid-template-columns: repeat(3, 1fr);
        
        /* Reduce gap so they fit on small screens */
        gap: 10px; 
    }

    /* Make text smaller so it doesn't break layout on tiny columns */
    .single-book-text h4 {
        font-size: 12px;
        word-wrap: break-word; /* Prevent long words from breaking layout */
    }

    .single-book-span span {
        font-size: 10px;
    }
}/* End custom CSS */