/* ==========================================================================
   Leloni — brand stylesheet
   Served from pub/media/leloni/css/leloni-brand.css
   Injected site-wide via:  design/head/includes
   No static-content:deploy needed — replace the file and hard-refresh.

   v1 scope: brand tokens, typography, homepage (hero / editorial band /
   collection / story). Porto header, footer and product-page overrides are
   deliberately left for v2, once the rendered markup can be inspected.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,500;0,600;1,500&family=Outfit:wght@300;400;500;600&display=swap');

/* --- 1. Brand tokens ---------------------------------------------------- */
:root{
  /* Neutral gallery palette: white page, very light grey for alternating bands.
     The photography carries all the colour — the page stays out of its way.
     Ink keeps a trace of warmth (#1C1B1A, not #000) so it sits with the warm
     natural light in the images and with the logo's own rgb(31,31,31). */
  --ll-ground:      #FFFFFF;   /* page background */
  --ll-ground-deep: #EFEFEE;   /* image wells / placeholders */
  --ll-surface:     #F6F6F5;   /* alternating section band (story) */
  --ll-ink:         #1C1B1A;   /* headings, primary text */
  --ll-ink-soft:    #4A4A47;   /* body copy */
  --ll-ink-mute:    #70706C;   /* eyebrows, meta — 4.97:1 on white, 4.60:1 on the band (WCAG AA) */
  --ll-rule:        #E4E4E2;   /* hairlines — light, so they read as grey not brown */
  --ll-on-dark:     #FFFFFF;   /* text over the hero photo */
  --ll-overlay:     rgba(18,18,17,.32);

  /* Cormorant carries TITLES ONLY. It has a small x-height and fine strokes, so it
     is unreadable as running text — all body copy is Outfit. Titles set in 500
     rather than 400, since Cormorant looks anaemic at display sizes otherwise. */
  --ll-display: "Cormorant", "Cormorant Garamond", Garamond, "Times New Roman", serif;
  /* ONE sans for everything else. Must match porto_design/font/google_font_family
     or Porto's own face (Poppins by default) competes with it. */
  --ll-util:    "Outfit", "Helvetica Neue", Arial, sans-serif;
}

/* --- 1b. Base font ------------------------------------------------------
   Porto's compiled styles-m.css sets `body{font-family:'Open Sans',...}` and its
   generated configed_css sets NO font at all — so `porto_design/font/
   google_font_family = Outfit` only LOADS Outfit, it never applies it.
   Everything not explicitly styled was falling back to Open Sans.
   ---------------------------------------------------------------------- */
body,
.page-wrapper,
button, input, select, textarea, optgroup,
.navigation, .sw-megamenu.navigation,
.breadcrumbs, .footer, .modal-content{
  font-family:var(--ll-util) !important;
}
/* headings stay Porto-neutral; our own title rules set Cormorant where wanted */
.page-wrapper h1, .page-wrapper h2, .page-wrapper h3,
.page-wrapper h4, .page-wrapper h5, .page-wrapper h6{
  font-family:var(--ll-util);
}

/* --- 2. Shared brand primitives ----------------------------------------- */
.leloni-eyebrow{
  font-family:var(--ll-util);
  font-size:.68rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.22em;
  color:var(--ll-ink-mute); margin:0;
}
.leloni-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:1.5rem; border-bottom:1px solid var(--ll-rule);
  padding-bottom:1rem; margin-bottom:clamp(1.8rem,4vw,3rem);
}
.leloni-head h2{
  font-family:var(--ll-display); font-weight:500; margin:0;
  font-size:clamp(2.1rem,5vw,3.5rem); line-height:1.06;
  letter-spacing:.02em; text-wrap:balance; color:var(--ll-ink);
}

/* --- 3. Homepage -------------------------------------------------------- */
.leloni-home{
  font-family:var(--ll-util);
  color:var(--ll-ink);
  background:var(--ll-ground);
  font-size:16px; line-height:1.6;
}
/* Porto wraps CMS content in a centred container; these sections break out
   to full viewport width without needing a layout override. */
.leloni-home .leloni-bleed{
  width:100vw; margin-left:calc(50% - 50vw);
}
.leloni-home img{display:block; max-width:100%;}
.leloni-home section{padding-block:clamp(3.4rem,8vw,6.5rem);}
.leloni-home .leloni-wrap{
  max-width:1280px; margin-inline:auto;
  padding-inline:clamp(1.1rem,4vw,3.5rem);
}

/* 3a. Hero — portrait source, so full-height rather than full-bleed wide. */
.leloni-home .leloni-hero{
  position:relative; padding-block:0;
  height:min(92vh,880px); overflow:hidden;
  background:var(--ll-ground-deep);
}
.leloni-home .leloni-hero img{
  width:100%; height:100%; object-fit:cover; object-position:50% 28%;
}
.leloni-home .leloni-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,var(--ll-overlay),transparent 55%);
}
.leloni-home .leloni-hero__txt{
  position:absolute; left:0; right:0; bottom:clamp(1.6rem,5vw,3.4rem);
  z-index:2; text-align:center; color:var(--ll-on-dark);
  text-shadow:0 1px 24px rgba(0,0,0,.45);
}
.leloni-home .leloni-hero__txt .leloni-eyebrow{color:var(--ll-on-dark); opacity:.86;}
/* Hero wordmark. The brand has a hand-lettered brush-script logo, so the mark is
   an image; the <h1> and its alt text are kept for SEO and screen readers. */
.leloni-home .leloni-hero__name{
  margin:.5rem 0 0; line-height:1; font-size:0;   /* font-size:0 kills the inline-image gap */
}
.leloni-home .leloni-hero__name img{
  display:inline-block; width:clamp(150px,42vw,300px); height:auto;
  filter:drop-shadow(0 2px 18px rgba(0,0,0,.42));
}

/* 3b. Editorial band — the auto-cycling images Lorena specified. */
.leloni-home .leloni-band__inner{
  display:grid; gap:clamp(.7rem,2vw,1.4rem);
  grid-template-columns:minmax(0,1fr) minmax(0,.62fr); align-items:start;
}
.leloni-home .leloni-stage{
  position:relative; aspect-ratio:2/3; overflow:hidden;
  background:var(--ll-ground-deep);
}
.leloni-home .leloni-stage img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity 1.1s ease;
}
.leloni-home .leloni-stage img.is-on{opacity:1;}
.leloni-home .leloni-aside{
  display:flex; flex-direction:column; gap:clamp(.7rem,2vw,1.4rem);
}
.leloni-home .leloni-still{
  aspect-ratio:2/3; overflow:hidden; background:var(--ll-ground-deep);
}
.leloni-home .leloni-still img{width:100%; height:100%; object-fit:cover;}
.leloni-home .leloni-dots{display:flex; gap:.42rem; margin-top:.95rem;}
.leloni-home .leloni-dots button{
  appearance:none; border:0; padding:0; cursor:pointer;
  width:30px; height:2px; background:var(--ll-rule);
}
.leloni-home .leloni-dots button[aria-current="true"]{background:var(--ll-ink);}
.leloni-home .leloni-dots button:focus-visible{
  outline:2px solid var(--ll-ink); outline-offset:4px;
}
@media (max-width:820px){
  .leloni-home .leloni-band__inner{grid-template-columns:1fr;}
}

/* 3c. Collection — light touch in v1. The grid itself is a Magento widget,
       so Porto owns that markup; refined in v2 after inspection. */
.leloni-home .leloni-collection .product-item-name a,
.leloni-home .leloni-collection .product-item-link{
  font-family:var(--ll-util); font-weight:400;
  font-size:.95rem; line-height:1.35; letter-spacing:.01em;
  color:var(--ll-ink); text-transform:none;
}
.leloni-home .leloni-collection .price{
  font-family:var(--ll-util); font-size:.85rem; letter-spacing:.06em;
  color:var(--ll-ink-soft); font-variant-numeric:tabular-nums;
}
.leloni-home .leloni-collection .product-item-photo img{
  width:100%; height:auto;
}

/* 3d. Story */
.leloni-home .leloni-story{background:var(--ll-surface);}
.leloni-home .leloni-story__inner{
  display:grid; gap:clamp(1.8rem,5vw,4.5rem);
  grid-template-columns:minmax(0,.82fr) minmax(0,1fr); align-items:center;
}
.leloni-home .leloni-story figure{margin:0; aspect-ratio:3/4; overflow:hidden;}
.leloni-home .leloni-story figure img{width:100%; height:100%; object-fit:cover;}
.leloni-home .leloni-story h1,
.leloni-home .leloni-story h2,
.leloni-home .leloni-aside h2{
  font-family:var(--ll-display) !important;
  font-weight:500;
  line-height:1.08;
  letter-spacing:.02em;
  text-wrap:balance;
  color:var(--ll-ink);
  margin:0 0 1.1rem;
}
.leloni-home .leloni-story h1{ font-size:clamp(2.1rem,5vw,3.4rem); }
.leloni-home .leloni-story h2,
.leloni-home .leloni-aside h2{ font-size:clamp(1.8rem,4vw,2.7rem); }
.leloni-home .leloni-story p.leloni-body{
  font-family:var(--ll-util);
  font-size:1rem; line-height:1.75;
  color:var(--ll-ink-soft); max-width:62ch; margin:0 0 1.1rem;
}
.leloni-home .leloni-sig{
  font-family:var(--ll-display); font-style:italic;
  font-size:1.14rem; color:var(--ll-ink); margin-top:1.5rem;
}
.leloni-home .leloni-more{
  display:inline-block; margin-top:1.6rem;
  font-family:var(--ll-util); font-size:.7rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.2em; color:var(--ll-ink);
  border-bottom:1px solid var(--ll-ink); padding-bottom:.28rem;
  text-decoration:none;
}
.leloni-home .leloni-more:hover{color:var(--ll-ink-soft); border-bottom-color:var(--ll-ink-soft);}
@media (max-width:860px){
  .leloni-home .leloni-story__inner{grid-template-columns:1fr;}
}

/* --- 3e. Layout utility: even two-column ---------------------------------
   Reusable modifier, added to the markup rather than scoped to a page.
   Add `leloni-cols-2` alongside `leloni-story__inner` / `leloni-band__inner`
   (or on any grid) to get even 50/50 columns.

   Responsive WITHOUT a media query: `auto-fit` + `minmax(min(100%, 24rem), 1fr)`
   fits two tracks while the container can hold 2 x 24rem (~768px) and collapses
   to one below that, on its own. That is deliberate — the earlier page-scoped
   version had to restate the generic mobile collapse rule to win a specificity
   fight. With no media query involved there is nothing to restate, and the class
   works anywhere it is dropped.
   ---------------------------------------------------------------------- */
.leloni-home .leloni-cols-2{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  gap:clamp(1.8rem,5vw,4rem);
  align-items:start;      /* text tops line up with the top of the image */
}

/* --- 3f. Featured picks — the CMS block `leloni_featured` -----------------
   These rows ARE the editorial band's aside — the studs still and its caption
   were dropped in favour of them.

   Deliberately COMPACT (Zvjezdan's call): a small 2:3 thumb on the left,
   name and price on the right. Four of these run ~575px against a ~1075px
   stage photo, so the column ends high — that is the intended reading, the
   list is an index beside the photograph, not a second product grid.

   The column is ~440px, too narrow for four Porto tiles, so the tile is
   re-laid as a row, and everything transactional — the add-to-cart overlay,
   wishlist, compare, the empty rating stub — is hidden. At this size the row
   is a pointer to the product page, not a place to buy from.

   Porto renders the widget with `product-item-info type3`, whose action
   overlay is absolutely positioned inside the photo; hiding the overlay is
   what lets the photo shrink to a thumbnail cleanly.
   ---------------------------------------------------------------------- */
.leloni-home .leloni-picks{margin-top:0;}
.leloni-home .leloni-picks > .leloni-eyebrow{
  padding-bottom:.7rem; margin-bottom:.95rem;
  border-bottom:1px solid var(--ll-rule);
}

.leloni-home .leloni-featured .products-grid{margin:0;}
.leloni-home .leloni-featured .products.product-items{
  display:grid; grid-template-columns:1fr; gap:1rem;
  margin:0; padding:0; list-style:none;
}
.leloni-home .leloni-featured .product-item{
  width:100% !important;          /* Porto sets a per-`columnsN` percentage */
  margin:0 !important; padding:0 !important;
}
.leloni-home .leloni-featured .product-item-info{
  display:grid; grid-template-columns:80px minmax(0,1fr);
  gap:1rem; align-items:center; width:100%;
}
.leloni-home .leloni-featured .product-item-photo{
  display:block; width:80px; margin:0; padding:0;
  background:var(--ll-ground-deep);
}
.leloni-home .leloni-featured .product-item-photo > a{display:block; line-height:0;}
.leloni-home .leloni-featured .product-image-photo{
  position:static !important;     /* Porto stacks the hover copy absolutely */
  display:block; width:100%; height:auto; aspect-ratio:2/3;
  object-fit:cover; object-position:50% 30%;
}
.leloni-home .leloni-featured .product-image-photo.hover_image{display:none !important;}

.leloni-home .leloni-featured .product-item-details{margin:0; padding:0; text-align:left;}
/* Porto truncates grid names to a single ellipsised line — at this width the
   Croatian names all overflow, so let them wrap instead. */
.leloni-home .leloni-featured .product-item-name,
.leloni-home .leloni-featured .product-item-name a{
  display:block; white-space:normal; overflow:visible; text-overflow:clip;
}
.leloni-home .leloni-featured .product-item-name{margin:0 0 .35rem;}
.leloni-home .leloni-featured .product-item-name a,
.leloni-home .leloni-featured .product-item-link{
  font-family:var(--ll-util); font-weight:400;
  font-size:.875rem; line-height:1.35; letter-spacing:.01em;
  color:var(--ll-ink); text-transform:none; text-decoration:none;
}
.leloni-home .leloni-featured .product-item-name a:hover{color:var(--ll-ink-soft);}
.leloni-home .leloni-featured .price-box{margin:0;}
.leloni-home .leloni-featured .price{
  font-family:var(--ll-util); font-size:.8rem; letter-spacing:.06em;
  color:var(--ll-ink-mute); font-variant-numeric:tabular-nums;
}
/* One product carries a special price, so the row shows both. Keep the
   live price as the ink one and let the struck-through original recede. */
.leloni-home .leloni-featured .special-price .price{color:var(--ll-ink);}
.leloni-home .leloni-featured .old-price .price{
  font-size:.72rem; color:var(--ll-ink-mute); opacity:.8;
}
.leloni-home .leloni-featured .price-box > .special-price,
.leloni-home .leloni-featured .price-box > .old-price{display:inline-block; margin:0 .45rem 0 0;}

.leloni-home .leloni-featured .product-item-inner,
.leloni-home .leloni-featured .product-item-actions,
.leloni-home .leloni-featured .product-reviews-summary,
.leloni-home .leloni-featured .product-labels,
.leloni-home .leloni-featured .price-label{display:none !important;}

/* Once the band is one column the aside is full width, so the rows run
   two-up rather than stranding an 80px thumb against a full-width row. */
@media (max-width:820px){
  .leloni-home .leloni-featured .products.product-items{
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap:1.2rem clamp(1rem,4vw,2.4rem);
  }
  .leloni-home .leloni-featured .product-item-info{grid-template-columns:88px minmax(0,1fr);}
  .leloni-home .leloni-featured .product-item-photo{width:88px;}
}

/* --- 4. Motion preferences --------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .leloni-home .leloni-stage img{transition:none;}
}

/* --- 5. Portrait product tiles ------------------------------------------
   Porto configures every catalog image as a square, which letterboxes the 2:3
   SS26 photography (a 300x300 thumb holds only 200x300 of photo).
   Magento writes width/padding-bottom as INLINE styles, so !important is needed.
   `object-fit:cover` crops the baked-in padding away.

   This stays correct after the Leloni theme's view.xml lands: the images become
   natively 2:3, at which point cover is simply a no-op.
   ---------------------------------------------------------------------- */
.leloni-home .product-image-container,
.catalog-category-view .product-image-container,
.catalogsearch-result-index .product-image-container{
  width:100% !important;
}
.leloni-home .product-image-wrapper,
.catalog-category-view .product-image-wrapper,
.catalogsearch-result-index .product-image-wrapper{
  padding-bottom:150% !important;      /* 2:3 portrait */
  height:auto;
}
.leloni-home .product-image-photo,
.catalog-category-view .product-image-photo,
.catalogsearch-result-index .product-image-photo{
  width:100%; height:100%; object-fit:cover; object-position:50% 30%;
}

/* --- 6. Header ----------------------------------------------------------
   Porto's demo 11 paints the header grey (#9b9a94 + a demo bg image that 404s)
   and sets every control to white: header_search_text_color #fff,
   header_minicart_color/_icon_color #fff. On a white header those go invisible.

   Selectors below are taken from the live rendered header. Notes:
   - the icons are child <i> elements, NOT ::before pseudo-elements
   - real classes are porto-icon-user-2 / -wishlist-2 / -shopping-cart / -magnifier
   - scope is .page-header, not .header-main — the minicart sits outside .header-main
   - Porto's CSS loads after ours, hence !important
   ---------------------------------------------------------------------- */
.page-header,
.page-header .header-main,
.page-header .header-row{
  background-color:var(--ll-ground) !important;
  background-image:none !important;
}
.page-header{ border-bottom:1px solid var(--ll-rule); }

/* every link + icon in the header */
.page-header a,
.page-header .action.showcart,
.page-header .action.showcart .text,
.page-header .minicart-icon,
.page-header i[class*="porto-icon-"]{
  color:var(--ll-ink) !important;
}
.page-header a:hover,
.page-header a:hover i[class*="porto-icon-"]{
  color:var(--ll-ink-soft) !important;
}

/* search: input, the Mageplaza category select, and the submit button */
.page-header .block-search .input-text,
.page-header .block-search input#search{
  background-color:var(--ll-surface) !important;
  border:1px solid var(--ll-rule) !important;
  color:var(--ll-ink) !important;
  font-family:var(--ll-util);
  border-radius:0 !important;
}
.page-header .block-search .input-text::placeholder{
  color:var(--ll-ink-mute) !important; opacity:1;
}
.page-header .block-search select,
.page-header .block-search #mpsearch-category{
  background-color:transparent !important;
  color:var(--ll-ink) !important;
  border:0 !important;
  font-family:var(--ll-util); font-size:.86rem;
}
.page-header .block-search #mpsearch-category option{
  color:var(--ll-ink); background-color:var(--ll-ground);
}
.page-header .block-search .action.search,
.page-header .block-search .action.search i,
.page-header .block-search .action.search:before,
.page-header .block-search .porto-icon-magnifier{
  color:var(--ll-ink) !important;
  background-color:transparent !important;
  opacity:1 !important;
}
.page-header .block-search .action.search:hover,
.page-header .block-search .action.search:hover i{
  color:var(--ll-ink-soft) !important;
}
/* the "Advanced Search" link Porto hides behind the field */
.page-header .block-search .nested .action.advanced{ color:var(--ll-ink-mute) !important; }

/* The cart-design-2 icon is DRAWN WITH BORDERS, not a font glyph — Porto's
   styles-m.css gives .minicart-icon a 2px border for the bag body and an
   ::before with `content:''` + `border-color:inherit` for the handle, which
   overrides the porto-icon-shopping-cart glyph entirely. So `color` does
   nothing here; `border-color` is the property that matters.
   Porto's generated design_hr.css sets it to #FFFFFF -> invisible on white. */
.page-header .minicart-wrapper .action.showcart .minicart-icon,
.page-header .cart-design-2 .action.showcart .minicart-icon{
  border-color:var(--ll-ink) !important;
}
.page-header .minicart-wrapper .action.showcart .minicart-icon::before,
.page-header .cart-design-2 .action.showcart .minicart-icon::before{
  border-color:var(--ll-ink) !important;   /* the handle (inherits, set anyway) */
}
.page-header .minicart-wrapper .action.showcart:hover .minicart-icon,
.page-header .minicart-wrapper .action.showcart:hover .minicart-icon::before{
  border-color:var(--ll-ink-soft) !important;
}

/* minicart counter badge stays a dark pill with white digits — legible as-is */
.page-header .minicart-wrapper .counter.qty{
  background-color:var(--ll-ink) !important;
  color:#fff !important;
}
.page-header .minicart-wrapper .counter.qty .counter-number{ color:#fff !important; }

/* --- 6b. Top bar ---------------------------------------------------------
   Porto demo 11 paints this dark (header_top_links_bgcolor #222529) with white
   links. Our §6 rule forced every .page-header link to ink, which left the nav
   dark-on-dark. Rather than special-casing white links back in, the bar is made
   light so the whole header is one surface — consistent with the palette.
   To go back to a dark bar instead, set --ll-topbar-bg to var(--ll-ink) and
   --ll-topbar-ink to #fff.
   ---------------------------------------------------------------------- */
.page-header .main-panel-top{
  --ll-topbar-bg:  var(--ll-ground);
  --ll-topbar-ink: var(--ll-ink);
  background:var(--ll-topbar-bg) !important;
  background-color:var(--ll-topbar-bg) !important;
  background-image:none !important;
  border-bottom:1px solid var(--ll-rule);
}
.page-header .main-panel-top .panel.wrapper,
.page-header .main-panel-top .main-panel-inner{
  background:transparent !important;
}
.page-header .main-panel-top a,
.page-header .main-panel-top .switcher-trigger strong,
.page-header .main-panel-top .switcher-label{
  color:var(--ll-topbar-ink) !important;
}
/* top-level nav items */
.page-header .main-panel-top .sw-megamenu.navigation li.level0 > a.level-top,
.page-header .sw-megamenu.navigation li.level0 > a.level-top{
  font-family:var(--ll-util) !important;
  font-size:.72rem !important;
  font-weight:500 !important;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ll-topbar-ink) !important;
}
.page-header .sw-megamenu.navigation li.level0 > a.level-top:hover{
  color:var(--ll-ink-soft) !important;
}
/* language switcher */
.page-header .switcher-language .switcher-trigger,
.page-header .switcher-language .switcher-options a{
  font-family:var(--ll-util) !important;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
}
.page-header .switcher-language .switcher-dropdown{
  background:var(--ll-ground) !important;
  border:1px solid var(--ll-rule) !important;
}

/* --- 6c. Mobile: hamburger + nav drawer ---------------------------------
   Two defects, both from Porto's admin-generated media/porto/configed_css/design_hr.css
   (the settings still carry demo 11's grey header, #9b9a94):

   1. `.page-header .header-main{color:#FFFFFF}` — white was right on a grey header,
      invisible on ours. The hamburger is a <span>, not an <a>, so §6's
      `.page-header a` rule never reached it, and `.nav-toggle:before` is
      `color:inherit` — so the glyph took the white and vanished.
   2. `header.page-header .nav-sections-item-title{background-color:#1C1B1A}` — the
      drawer's tab strip is painted with our own ink, while §6b's
      `.main-panel-top a{color:var(--ll-ink)}` (the drawer lives inside that panel)
      made the labels ink too: ink on ink.

   leloni-brand.css loads BEFORE configed_css, so these need !important — Porto's
   own rules here carry none, so specificity order does not matter.
   The real fix is in Porto's settings; see deploy/README.md.
   ---------------------------------------------------------------------- */
.page-header .header-main{ color:var(--ll-ink) !important; }
.page-header .action.nav-toggle,
.page-header .action.nav-toggle:before,
.page-header .action.nav-toggle:hover:before{
  color:var(--ll-ink) !important;
}

/* Drawer. Scoped to .nav-open rather than a breakpoint — that class exists only
   while the drawer is open, so there is no Porto breakpoint to guess at. The tab
   rules need no scope of their own: .nav-sections-item-title is display:none on
   desktop. */
.nav-open .nav-sections{ background:var(--ll-ground) !important; }

header.page-header .nav-sections-item-title{
  background-color:var(--ll-surface) !important;
  border-color:var(--ll-rule) !important;
}
header.page-header .nav-sections-item-title > a,
header.page-header .nav-sections-item-title > a:hover,
header.page-header .nav-sections-item-title > a:focus{
  font-family:var(--ll-util) !important;
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ll-ink-mute) !important;
}
/* selected tab reads as the open one: white, full ink, no rule under it */
header.page-header .nav-sections-item-title.active{
  background-color:var(--ll-ground) !important;
  border-bottom-color:transparent !important;
}
header.page-header .nav-sections-item-title.active > a,
header.page-header .nav-sections-item-title.active > a:hover,
header.page-header .nav-sections-item-title.active > a:focus{
  color:var(--ll-ink) !important;
}

/* --- 6d. Mobile: collapse the empty top bar -----------------------------
   Below 992px the top bar holds nothing — the megamenu it normally carries has
   moved into the off-canvas drawer, and the language switcher with it (drawer →
   "Postavke"). Measured at 375/480/600/720/767/768/860/900/991: the bar is 61px
   tall and its only visible descendants are three empty wrappers. It reappears
   at exactly 992px, which is Porto's own mobile-menu breakpoint (verified, not
   assumed — hence 991 here rather than the 760/820/860 used elsewhere in this file).

   ⚠ Collapsed to zero, NOT display:none. The drawer markup (.nav-sections) is a
   descendant of this bar; hiding the bar takes the drawer with it and the
   hamburger then opens nothing. Zero height is safe because .nav-sections is
   position:fixed on mobile, so it never contributed to the bar's height anyway.
   ---------------------------------------------------------------------- */
@media (max-width:991px){
  .page-header .main-panel-top,
  .page-header .main-panel-top > .container,
  .page-header .main-panel-top .main-panel-inner,
  .page-header .main-panel-top .panel.wrapper{
    height:0 !important;
    min-height:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
    margin-top:0 !important;
    margin-bottom:0 !important;
    border-top:0 !important;
    border-bottom:0 !important;
  }
}

/* --- 6e. Account dropdown (the user icon) -------------------------------
   Two complaints, both real, both measured on the live header at 1440:

   1. Too small. Porto's custom.css sets the whole dropdown to `font-size:12px`
      with `line-height:19px` and `padding:0 10px !important` on each row, in a
      panel only 130px wide. 12px grey-on-white rows 19px apart.
   2. The sub-expand is invisible. When signed in, Magento nests the account
      links behind `li.customer-welcome`, whose only visible control is a bare
      chevron: Porto hides the greeting inside it (`.customer-welcome .greet
      {display:none}`) and floats what is left right at `min-width:20px`. So the
      affordance is a 20px glyph with no label, and the panel it opens is
      `position:absolute` — it lands *on top of* the Usporedite row.

   Fixed by flattening rather than by making the chevron louder: inside a menu
   that is already a dropdown, a second level buys nothing. The account links are
   shown inline as ordinary rows and the chevron is dropped. To go back to the
   expander instead, delete the `.customer-welcome` rules below — everything
   there is an override of Porto, nothing is new markup.

   The dropdown opens on CLICK of the icon, not hover — worth knowing when
   testing it.
   ---------------------------------------------------------------------- */
.page-header .panel.header.show-icon > .header.links,
.page-header .panel.header.show-icon-tablet > .header.links{
  min-width:230px !important;
  padding:6px 0 !important;
  text-align:left !important;
  border:1px solid var(--ll-rule) !important;
  border-radius:0 !important;
  box-shadow:0 8px 28px rgba(18,18,17,.10) !important;
}
/* row boxes — Porto's `padding:0 10px !important` has to be beaten with a
   longer selector, not just repeated */
.page-header .panel.header.show-icon > .header.links li,
.page-header .panel.header.show-icon-tablet > .header.links li{
  padding:0 !important;
  line-height:1.5 !important;
  color:var(--ll-ink-soft) !important;
}
.page-header .panel.header.show-icon .header.links li a,
.page-header .panel.header.show-icon-tablet .header.links li a{
  font-family:var(--ll-util) !important;
  font-size:.85rem !important;
  line-height:1.5 !important;
  padding:10px 18px !important;
  color:var(--ll-ink-soft) !important;
  text-transform:none !important;
}
.page-header .panel.header.show-icon .header.links li a:hover,
.page-header .panel.header.show-icon-tablet .header.links li a:hover{
  background:var(--ll-surface) !important;
  color:var(--ll-ink) !important;
}
/* the greeting reads as the panel's heading, not as another menu item */
.page-header .panel.header.show-icon > .header.links > li.greet.welcome,
.page-header .panel.header.show-icon-tablet > .header.links > li.greet.welcome{
  font-family:var(--ll-util) !important;
  font-size:.68rem !important;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--ll-ink-mute) !important;
  padding:6px 18px 10px !important;
  margin-bottom:5px !important;
  border-bottom:1px solid var(--ll-rule) !important;
}

/* --- flatten the signed-in sub-menu ------------------------------------- */
.page-header .panel.header .header.links > li.customer-welcome{
  display:block !important;
  float:none !important;
  position:static !important;
  margin:0 !important;
  text-align:left !important;
}
/* the chevron is the whole affordance, and it is unreadable — drop it */
.page-header .panel.header .customer-welcome .action.switch{ display:none !important; }
.page-header .panel.header .customer-welcome > .customer-name{
  display:block !important;
  float:none !important;
  min-width:0 !important;
  margin:0 !important;
  text-align:left !important;
}
/* ...and let what it hid render inline, as plain rows */
.page-header .panel.header .customer-welcome .customer-menu{
  display:block !important;
  position:static !important;
  padding:0 !important;
}
/* Porto's `.panel.header.show-icon .header.links` is a DESCENDANT selector, so
   it hits this nested list too and right-aligns it — hence text-align here. */
.page-header .panel.header .customer-welcome .customer-menu .header.links{
  display:block !important;
  position:static !important;
  text-align:left !important;
  min-width:0 !important;
  width:auto !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}
/* the little arrow that pointed at the old floating panel */
.page-header .panel.header .customer-welcome .customer-menu .header.links:before,
.page-header .panel.header .customer-welcome .customer-menu .header.links:after{
  display:none !important;
  content:none !important;
}
.page-header .panel.header .customer-welcome .customer-menu .header.links a{
  color:var(--ll-ink-soft) !important;
}

/* --- 7. Product detail page --------------------------------------------
   Selectors taken from the live rendered PDP, not assumed.
   ---------------------------------------------------------------------- */
.catalog-product-view .page-title,
.catalog-product-view .page-title .base{
  font-family:var(--ll-display) !important;
  font-weight:500 !important;
  font-size:clamp(1.9rem,3.8vw,2.9rem) !important;
  line-height:1.12;
  letter-spacing:.01em;
  text-transform:none !important;
  color:var(--ll-ink);
}
.catalog-product-view .product-info-main .price-box .price{
  font-family:var(--ll-util) !important;
  font-weight:500 !important;
  font-size:1.45rem !important;
  letter-spacing:.02em;
  color:var(--ll-ink) !important;
  font-variant-numeric:tabular-nums;
}
/* short description under the price */
.catalog-product-view .product-info-main .product.overview,
.catalog-product-view .product-info-main .product.attribute.overview{
  font-family:var(--ll-util);
  font-size:.98rem; line-height:1.72; color:var(--ll-ink-soft);
  max-width:60ch;
}
/* sidrena cijena (anchor price) — between the price box and the short description.
   Deliberately quieter than .price-box .price: it is a reference figure, not the
   price being charged, so it must never compete with it. */
.catalog-product-view .product-info-main .leloni-sidrena{
  font-family:var(--ll-util);
  margin:-2px 0 14px; display:flex; flex-wrap:wrap; align-items:baseline; gap:.5em;
}
.catalog-product-view .product-info-main .leloni-sidrena__label{
  font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ll-ink-mute);
}
.catalog-product-view .product-info-main .leloni-sidrena__value{
  font-size:.95rem; color:var(--ll-ink-soft); font-variant-numeric:tabular-nums;
}
.catalog-product-view .product-info-main .leloni-sidrena__date{
  font-size:.75rem; color:var(--ll-ink-mute); font-variant-numeric:tabular-nums;
}

/* stock + sku line */
.catalog-product-view .product-info-stock-sku,
.catalog-product-view .product-info-main .availability,
.catalog-product-view .product-info-main .product.attribute.sku{
  font-family:var(--ll-util); font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ll-ink-mute);
}
/* size selector label */
.catalog-product-view .product-options-wrapper .field .label span{
  font-family:var(--ll-util); font-size:.7rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ll-ink-mute);
}
.catalog-product-view .product-options-wrapper select{
  font-family:var(--ll-util); font-size:.92rem;
  border-color:var(--ll-rule) !important; color:var(--ll-ink);
  border-radius:0 !important; height:48px;
}
/* add-to-cart */
.catalog-product-view .box-tocart .action.primary.tocart,
.catalog-product-view .box-tocart button.tocart{
  background-color:var(--ll-ink) !important;
  border-color:var(--ll-ink) !important;
  color:#fff !important;
  font-family:var(--ll-util) !important;
  font-size:.74rem !important; font-weight:600 !important;
  letter-spacing:.12em; text-transform:uppercase;
  border-radius:0 !important; height:48px;
  padding-inline:1.5rem;
  /* the label must never wrap — a fixed height clips the second line to "Add" */
  white-space:nowrap !important;
  transition:background-color .25s ease;
}
.catalog-product-view .box-tocart .action.primary.tocart span,
.catalog-product-view .box-tocart button.tocart span{
  white-space:nowrap !important;
}
.catalog-product-view .box-tocart .action.primary.tocart:hover{
  background-color:var(--ll-ink-soft) !important;
  border-color:var(--ll-ink-soft) !important;
}
.catalog-product-view .box-tocart .input-text.qty{
  border-color:var(--ll-rule) !important; border-radius:0 !important;
  height:48px; font-family:var(--ll-util);
}
/* detail tabs */
.catalog-product-view .product.data.items > .item.title > .switch{
  font-family:var(--ll-util) !important; font-size:.72rem !important;
  font-weight:600 !important; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ll-ink-mute) !important; border:0 !important;
  background:transparent !important;
}
.catalog-product-view .product.data.items > .item.title.active > .switch{
  color:var(--ll-ink) !important;
  border-bottom:2px solid var(--ll-ink) !important;
}
/* --- 7b. Product description tab (Page Builder content) -----------------
   The description is Page Builder content: `[data-content-type="text"]` blocks
   and `h3[data-content-type="heading"]`, inside .product.attribute.description.

   Two Porto behaviours to undo:
   1. `.product.description ul li` is styled as an ICON list —
      `list-style:none; display:flex; padding:.5em 0` — built for porto-icon-*
      glyphs. `display:flex` alone means no marker can ever render, so bullets
      were invisible and spacing was very loose.
   2. Nothing constrains the measure, so the intro ran the full ~1900px width.
   ---------------------------------------------------------------------- */
.catalog-product-view .product.data.items .value,
.catalog-product-view .product.attribute.description{
  font-family:var(--ll-util); color:var(--ll-ink-soft); line-height:1.75;
}
/* readable measure — applied to prose, NOT to tables which need their width */
.catalog-product-view .product.attribute.description [data-content-type="text"] > p,
.catalog-product-view .product.attribute.description [data-content-type="text"] > ul{
  max-width:68ch;
}
.catalog-product-view .product.attribute.description [data-content-type="text"] > p{
  margin:0 0 1rem;
}

/* section headings: air above, tight below */
.catalog-product-view .product.attribute.description h3[data-content-type="heading"],
.catalog-product-view .product.data.items .value h3{
  font-family:var(--ll-display) !important;
  font-weight:600; font-size:1.32rem; line-height:1.2;
  color:var(--ll-ink) !important;
  margin:2.6rem 0 .9rem !important;
  padding-bottom:.5rem;
  border-bottom:1px solid var(--ll-rule);
  max-width:68ch;
}
.catalog-product-view .product.attribute.description
  [data-content-type="text"]:first-child > p:first-child{ margin-top:0; }

/* detail list — undo Porto's icon-list, add a restrained dash marker,
   and use two columns on wide screens so it is not a tall thin strip */
.catalog-product-view .product.attribute.description ul{
  list-style:none !important;
  padding-left:0 !important;
  margin:0 0 .5rem !important;
  columns:2; column-gap:3rem;
}
.catalog-product-view .product.attribute.description ul li{
  display:block !important;          /* Porto sets flex, which kills markers */
  list-style:none !important;
  position:relative;
  padding:.3rem 0 .3rem 1.15rem !important;
  margin:0 !important;
  line-height:1.6;
  break-inside:avoid;
  color:var(--ll-ink-soft);
}
.catalog-product-view .product.attribute.description ul li::before{
  content:"";
  position:absolute; left:0; top:1.05em;
  width:.55rem; height:1px;
  background:var(--ll-ink-mute);
}
@media (max-width:760px){
  .catalog-product-view .product.attribute.description ul{ columns:1; }
}

/* size table — hairline rows, no heavy outer box */
.catalog-product-view .product.attribute.description table,
.catalog-product-view .product.data.items .value table{
  border-collapse:collapse !important;
  width:auto !important; min-width:min(100%,420px);
  margin:.4rem 0 1rem;
  border:0 !important;
  font-variant-numeric:tabular-nums;
}
.catalog-product-view .product.attribute.description table th,
.catalog-product-view .product.attribute.description table td,
.catalog-product-view .product.data.items .value table th,
.catalog-product-view .product.data.items .value table td{
  border:0 !important;
  border-bottom:1px solid var(--ll-rule) !important;
  padding:.62rem 1.4rem .62rem 0 !important;
  text-align:left;
  font-size:.9rem;
}
.catalog-product-view .product.attribute.description table thead th,
.catalog-product-view .product.data.items .value table thead th{
  background:transparent !important;
  font-family:var(--ll-util);
  font-size:.66rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ll-ink-mute) !important;
  border-bottom:1px solid var(--ll-ink) !important;
  white-space:nowrap;
}
.catalog-product-view .product.attribute.description table tbody th,
.catalog-product-view .product.data.items .value table tbody th{
  font-weight:600; color:var(--ll-ink) !important;
}
.catalog-product-view .product.attribute.description table tbody tr:last-child th,
.catalog-product-view .product.attribute.description table tbody tr:last-child td{
  border-bottom:0 !important;
}

/* the measurement tolerance note */
.catalog-product-view .product.attribute.description small{
  display:block; max-width:60ch;
  font-size:.8rem; line-height:1.6;
  color:var(--ll-ink-mute);
}

/* gallery: drop Porto's grey wells so images sit on the page */
.catalog-product-view .fotorama__stage,
.catalog-product-view .fotorama__nav-wrap,
.catalog-product-view .fotorama__thumb{
  background-color:var(--ll-ground) !important;
}
.catalog-product-view .fotorama__thumb-border{
  border-color:var(--ll-ink) !important;
}
/* social share row: quieten it */
.catalog-product-view .product-social-links a{
  color:var(--ll-ink-mute) !important;
}
.catalog-product-view .product-social-links a:hover{
  color:var(--ll-ink) !important;
}

/* --- 8. PDP: cart row alignment + remove prev/next product circles -------
   Markup (verified live):
     .box-tocart > .fieldset > .field.qty > .control > input.input-text.qty
                                                     + .qty-changer (a.qty-inc / a.qty-dec)
                            > .actions  > button.action.primary.tocart
     ...then Porto's JS injects .moved-add-to-links after .actions (wishlist / compare)
   Setting height alone did not align them — Porto leaves box-sizing as content-box, so
   48px + padding + border made the button taller than the qty control. Forcing
   border-box and laying the row out with flex fixes it properly.
   ---------------------------------------------------------------------- */
.catalog-product-view .box-tocart .fieldset{
  display:flex !important;
  align-items:center;
  gap:.55rem;
  flex-wrap:wrap;
  margin:0;
}
.catalog-product-view .box-tocart .field.qty,
.catalog-product-view .box-tocart .actions,
.catalog-product-view .box-tocart .moved-add-to-links{
  margin:0 !important;
  padding:0 !important;
  display:flex;
  align-items:center;
  flex:0 0 auto;          /* never shrink — shrinking is what forced the label to wrap */
}
.catalog-product-view .box-tocart .action.primary.tocart{
  flex:0 0 auto; width:auto !important; min-width:0;
}
/* "Qty:" label — kept for screen readers, removed visually, so it cannot
   push the control out of line */
.catalog-product-view .box-tocart .field.qty > .label{
  position:absolute !important;
  width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; border:0; padding:0; margin:-1px;
}
.catalog-product-view .box-tocart .field.qty .control{
  display:flex; align-items:center; height:48px;
}
.catalog-product-view .box-tocart .input-text.qty,
.catalog-product-view .box-tocart .action.primary.tocart,
.catalog-product-view .box-tocart .moved-add-to-links > .product-addto-links > a,
.catalog-product-view .box-tocart .moved-add-to-links a.action{
  box-sizing:border-box !important;
  height:48px !important;
  min-height:48px;
  margin:0 !important;
  border-radius:0 !important;
}
/* wishlist / compare squares beside the button */
.catalog-product-view .box-tocart .moved-add-to-links a.action{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px;
  border:1px solid var(--ll-rule) !important;
  color:var(--ll-ink) !important;
  background:var(--ll-ground) !important;
}
.catalog-product-view .box-tocart .moved-add-to-links a.action:hover{
  border-color:var(--ll-ink) !important;
}

/* prev / next product circles top-right of the title — removed on request */
.catalog-product-view .prev-next-products,
.catalog-product-view .product-nav.product-prev,
.catalog-product-view .product-nav.product-next{
  display:none !important;
}

/* --- 9. Footer -----------------------------------------------------------
   Porto demo 11 gives a dark footer (footer_middle_bgcolor #222529, text
   #a8a8a8) plus a blue "ribbon" tab (footer_ribbon, #08c) in a handwriting
   face. Our §9 stopgap previously forced ink onto that dark ground, which made
   the links unreadable — same mistake as the top bar.

   Footer is now a light surface matching the rest of the site, with a real
   4-column grid. Porto drops our block inside a single .col-lg-12, so the
   columns are ours to lay out.

   Config that should also be set (cosmetic belt-and-braces, not required
   because of the overrides below):
     porto_settings/footer/footer_ribbon                0
     porto_design/footer/footer_middle_bgcolor          #F6F6F5
     porto_design/footer/footer_middle_color            #4A4A47
     porto_design/footer/footer_middle_link_color       #1C1B1A
     porto_design/footer/footer_middle_title_color      #1C1B1A
     porto_design/footer/footer_bottom_bgcolor          #F6F6F5
     porto_design/footer/footer_bottom_color            #70706C
   ---------------------------------------------------------------------- */
.page-footer,
.page-footer .footer,
.page-footer .footer-middle,
.page-footer .footer-bottom{
  background:var(--ll-surface) !important;
  background-color:var(--ll-surface) !important;
  background-image:none !important;
  color:var(--ll-ink-soft) !important;
}
.page-footer .footer-middle{
  border-top:1px solid var(--ll-rule);
  padding-block:clamp(2.6rem,6vw,4.5rem) !important;
}
.page-footer .footer-bottom{
  border-top:1px solid var(--ll-rule);
  padding-block:1.1rem !important;
}

/* Porto's blue ribbon tab — removed */
.page-footer .footer-ribbon{ display:none !important; }

/* Porto draws a dark divider as a pseudo-element sized for its dark footer:
     .footer-middle > .container::after { border-bottom:1px solid #313438 }
   On a light footer it reads as a heavy black rule, and it sits exactly where
   .footer-bottom's own border-top already is — so it is redundant, not just
   mis-coloured. Removed. */
.page-footer .footer-middle > .container::after,
.page-footer .footer-middle > .container::before{
  display:none !important;
  border:0 !important;
}

/* the four columns */
.leloni-footer__grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:clamp(1.6rem,4vw,3.5rem);
  align-items:start;
}
@media (max-width:900px){
  .leloni-footer__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:520px){
  .leloni-footer__grid{ grid-template-columns:1fr; gap:2rem; }
}
.leloni-footer__logo{ width:150px; height:auto; display:block; margin-bottom:1.1rem; }
.leloni-footer__tagline{
  font-family:var(--ll-util); font-size:.88rem; line-height:1.7;
  color:var(--ll-ink-mute) !important; margin:0; max-width:34ch;
}
.leloni-footer h4{
  font-family:var(--ll-util) !important;
  font-size:.68rem !important; font-weight:600 !important;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ll-ink) !important;
  margin:0 0 1.1rem !important;
}
.leloni-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.leloni-footer li,
.leloni-footer p{
  font-family:var(--ll-util); font-size:.88rem; line-height:1.65;
  color:var(--ll-ink-soft) !important; margin:0 0 .9rem;
}
.leloni-footer li{ margin:0; }
.leloni-footer a{
  color:var(--ll-ink-soft) !important;
  text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, color .2s ease;
}
.leloni-footer a:hover{
  color:var(--ll-ink) !important;
  border-bottom-color:var(--ll-ink);
}
.leloni-footer__addr strong{ color:var(--ll-ink) !important; font-weight:600; }
.leloni-footer__legal{
  font-size:.78rem !important;
  color:var(--ll-ink-mute) !important;
  font-variant-numeric:tabular-nums;
}
/* bottom bar copyright */
.page-footer .footer-bottom address,
.page-footer .footer-bottom a{
  font-family:var(--ll-util); font-size:.78rem; font-style:normal;
  color:var(--ll-ink-mute) !important; letter-spacing:.02em;
}
/* back-to-top button */
.page-footer #totop{
  background:var(--ll-ink) !important; color:#fff !important;
  border-radius:0 !important;
}

/* --- 9b. Kill the pale-cream link colour without needing Porto's generator ---
   Porto's generated design_hr.css contains `a,a:hover{color:#e1ddc3}` (27
   occurrences of that hex) — 1.37:1 on white. The config fix requires Porto to
   regenerate that file, and its generator is broken on PHP 8 (see notes), so it
   is handled here instead and no longer depends on the generator running.

   Deliberately NOT a bare `a` selector: buttons and badges carry their own
   colours on dark grounds, so those are excluded rather than blanket-forced.
   ---------------------------------------------------------------------- */
.page-main a:not(.action):not([class*="btn"]):not(.tocart):not(.showcart),
.columns a:not(.action):not([class*="btn"]):not(.tocart){
  color:var(--ll-ink) !important;
}
.page-main a:not(.action):not([class*="btn"]):not(.tocart):not(.showcart):hover,
.columns a:not(.action):not([class*="btn"]):not(.tocart):hover{
  color:var(--ll-ink-soft) !important;
}

/* breadcrumbs (kept from the old §9) */
.breadcrumbs a{ color:var(--ll-ink) !important; }
.breadcrumbs a:hover{ color:var(--ll-ink-soft) !important; }
.breadcrumbs .items > li,
.breadcrumbs .items > li strong{
  color:var(--ll-ink-mute); font-family:var(--ll-util);
}