/* ==========================================
   PRODUKTSIDA
   ========================================== */

/* Ta bort "Inkl. moms" */
.tax-shipping-delivery-label {
    display: none !important;
}

/* Ta bort sociala delningsknappar */
div.social-sharing {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}


/* ==========================================
   HEADER - KONTOIKON
   ========================================== */

/* Ersätt "Logga in" med ikon */
.signin.leo-quicklogin {
    font-size: 0 !important;
    display: inline-block !important;
}

/* Kontoikon */
.signin.leo-quicklogin:before {
    content: "\f007";
    font-family: "Font Awesome 6 Pro";
    font-weight: 300;
    font-size: 23px;
    color: #000;
    line-height: 1;
}

/* Dölj texten "Logga in" */
.signin.leo-quicklogin span {
    display: none !important;
}

/* Dölj "Registrera" */
.popup-over .register {
    display: none !important;
}

/* Ta bort separatorer och streck */
.userinfo-selector .user-info li::before,
.userinfo-selector .user-info li::after,
.popup-over .user-info li::before,
.popup-over .user-info li::after {
    display: none !important;
    content: none !important;
}
/* Dölj hela registrera-elementet */
.user-info .register,
.user-info li:has(.register) {
    display: none !important;
}

/* Dölj andra li-raden */
.user-info.popup-title li:nth-child(2) {
    display: none !important;
}
#lightSlider,
.lightSlider {
    background-color: #F7F3EE !important;
}
/* ändrat pris layout */
.product-list-default .thumbnail-container .product-price-and-shipping {
    position: static !important;
    left: auto !important;
    bottom: auto !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 12px 0 8px 0 !important;
    display: block !important;
    width: 100%;
}

.product-list-default .thumbnail-container .product-price-and-shipping .price {
    background: transparent !important;
    color: #434242 !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    padding: 0 !important;
    line-height: 1.2;
}
/* ===========================
  O bag Mobile Product Grid
  Ren premium-layout
=========================== */

@media (max-width: 767px) {

   .thumbnail-container .functional-buttons,
   .thumbnail-container .wishlist,
   .thumbnail-container .quickview {
       display:none !important;
   }

   .thumbnail-container .product-image{
       margin-bottom:14px;
   }

   .thumbnail-container .product-title{
       font-size:18px;
       font-weight:500;
       line-height:1.35;
       margin-bottom:8px;
   }

   .thumbnail-container .price{
       font-size:18px;
       font-weight:700;
   }
}
/* ==========================================
   O bag Category Description - Premium Fade
   ========================================== */

#category-description{
    max-width:820px;
    margin:0 auto;
    text-align:center;
}

#category-description .less{
    position:relative;
    max-height:220px;
    overflow:hidden;
    transition:max-height .4s ease;
}

/* Mjuk fade */
#category-description .less::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:110px;
    background:linear-gradient(
        to bottom,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.45) 35%,
        rgba(255,255,255,.85) 70%,
        #fff 100%
    );
    pointer-events:none;
    transition:opacity .35s ease;
}

/* När texten är öppen */
#category-description .more .less{
    max-height:none;
}

#category-description .more .less::after{
    opacity:0;
}

/* Läs mer-knappen */
#category-description .readmore{
    display:inline-block;
    margin-top:18px;
    margin-bottom:5px;
    font-size:13px;
    font-weight:600;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:#c8a36a;
    text-decoration:none;
    transition:all .3s ease;
}

#category-description .readmore:hover{
    color:#222;
}
/* Mobil - mindre kategorirubrik */
@media (max-width: 767px) {

    .block-category h1,
    .block-category .h1 {
        font-size: 18px !important;
        line-height: 1.1;
        font-weight: 500;
        letter-spacing: 0.02em;
        margin-bottom: 15px;
    }

}
.btn-viewall .fa-instagram {
  font-family: "Font Awesome 5 Brands" !important;
}
/* ==========================================================
   EDIT ONLY the --obag-rel-*-size values below on the two
   section blocks. Do not edit theme.css price rules.

   O BAG – related product modules (visual only, MINIMAL)
   STANDALONE stylesheet — not part of obagbuilder.
   FTP this file (or paste its contents) into the theme asset /
   Leo custom.css. Do NOT mix into obagbuilder / module PHP.

   Targets (product page ONLY — body#product):
     1) section.category-products
        (same category / footer product hook)
     2) section.product-accessories
        (you might also like)

   FONT SIZES: change ONLY --obag-rel-title-size /
   --obag-rel-desc-size / --obag-rel-price-size in the
   “EDIT THESE VARS” block below. Never edit:
     - themes/.../assets/css/theme.css
       (.thumbnail-container .product-price-and-shipping)
     - any global .price / .product-price-and-shipping rule
   Those ARE site-wide (category listings etc.).

   Vars live ONLY on the two sections — never :root / body.
========================================================== */

/* ==========================================================
   EDIT THESE VARS (FTP) — product-page modules only
   Change px/rem values here. Nothing else controls module
   title / desc / price size in this file.
========================================================== */
body#product section.category-products[data-type="categoryproducts"],
body#product section.category-products,
body#product section.product-accessories {
    --obag-rel-bg: #f7f4ef;
    --obag-rel-card-bg: #f9f9f9;
    --obag-rel-ink: #1f1f1f;
    --obag-rel-hairline: #e5e0d6;
    --obag-rel-radius-lg: 14px;

    /* >>> FTP: edit ONLY these three lines for font sizes <<< */
    --obag-rel-title-size: 12px;
    --obag-rel-desc-size: 1rem;
    --obag-rel-price-size: 12px;
    /* >>> end FTP font-size vars <<< */
}

/* Module-only font-sizes (!important beats theme.css without editing it) */
body#product section.category-products .product-miniature .product-title,
body#product section.category-products .product-miniature .thumbnail-container .product-title,
body#product section.category-products .product-miniature .product-title a,
body#product section.product-accessories .product-miniature .product-title,
body#product section.product-accessories .product-miniature .thumbnail-container .product-title,
body#product section.product-accessories .product-miniature .product-title a {
    font-size: var(--obag-rel-title-size) !important;
}

body#product section.category-products .product-miniature .product-description-short,
body#product section.category-products .product-miniature .thumbnail-container .product-description-short,
body#product section.product-accessories .product-miniature .product-description-short,
body#product section.product-accessories .product-miniature .thumbnail-container .product-description-short {
    font-size: var(--obag-rel-desc-size) !important;
}

body#product section.category-products .product-miniature .product-price-and-shipping,
body#product section.category-products .product-miniature .thumbnail-container .product-price-and-shipping,
body#product section.category-products .product-miniature .product-price-and-shipping .price,
body#product section.category-products .product-miniature .thumbnail-container .product-price-and-shipping .price,
body#product section.product-accessories .product-miniature .product-price-and-shipping,
body#product section.product-accessories .product-miniature .thumbnail-container .product-price-and-shipping,
body#product section.product-accessories .product-miniature .product-price-and-shipping .price,
body#product section.product-accessories .product-miniature .thumbnail-container .product-price-and-shipping .price {
    font-size: var(--obag-rel-price-size) !important;
}

/* -------- 1) Module wrappers (Builder panel) -------- */
body#product section.category-products[data-type="categoryproducts"],
body#product section.category-products,
body#product section.product-accessories {
    box-sizing: border-box;
    margin: 16px 0;
    padding: 20px 16px 14px;
    background: var(--obag-rel-bg);
    border-radius: var(--obag-rel-radius-lg);
}

@media (min-width: 640px) {
    body#product section.category-products[data-type="categoryproducts"],
    body#product section.category-products,
    body#product section.product-accessories {
        padding: 22px 22px 14px;
    }
}

@media (min-width: 900px) {
    body#product section.category-products[data-type="categoryproducts"],
    body#product section.category-products,
    body#product section.product-accessories {
        padding: 24px 20px 14px;
    }
}

/* -------- Optional: section heading only (not product titles) -------- */
body#product section.category-products > h2.products-section-title,
body#product section.category-products > h2,
body#product section.product-accessories > p.products-section-title,
body#product section.product-accessories > p.h5,
body#product section.product-accessories > .products-section-title,
body#product section.product-accessories > h2 {
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--obag-rel-ink);
    background: transparent;
}

/* -------- 2) Card frame only (theme size / typography untouched) -------- */
body#product section.category-products .product-miniature,
body#product section.category-products article.product-miniature,
body#product section.category-products .js-product-miniature,
body#product section.product-accessories .product-miniature,
body#product section.product-accessories article.product-miniature,
body#product section.product-accessories .js-product-miniature {
    border: 1px solid var(--obag-rel-hairline);
    border-radius: 6px;
    background: var(--obag-rel-card-bg);
    box-shadow: none;
    /* padding only for the frame inset — does not set width/max-width/aspect */
    padding: 6px;
    box-sizing: border-box;
    /* neutralize theme outer gutter margin if present */
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* -------- 2b) Card horizontal gutters (theme ~15px → 5px) --------
   Theme source: .slick-list .item { padding-left/right: 15px }
   + Bootstrap .col-* { padding-left/right: 15px }
   Scoped to these two product-page modules ONLY. */
body#product section.category-products .slick-list .item,
body#product section.category-products .slick-slide,
body#product section.category-products .slick-slide.item,
body#product section.product-accessories .slick-list .item,
body#product section.product-accessories .slick-slide,
body#product section.product-accessories .slick-slide.item {
    padding-left: 4px !important;
    padding-right: 4px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

body#product section.category-products .products > [class*="col-"],
body#product section.product-accessories .products > [class*="col-"] {
    padding-left: 5px !important;
    padding-right: 5px !important;
}

/* -------- 3) Slick arrows (builder-style circular) -------- */
body#product section.category-products .slick-prev,
body#product section.category-products .slick-next,
body#product section.category-products .slick-arrow,
body#product section.product-accessories .slick-prev,
body#product section.product-accessories .slick-next,
body#product section.product-accessories .slick-arrow {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    border: 1px solid var(--obag-rel-hairline) !important;
    background: #fff !important;
    color: var(--obag-rel-ink) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07) !important;
    opacity: 1 !important;
    z-index: 2;
}