/* =====================================================================
   Rijksmuseum & Khasto — projectstijlen  v50 (slider scoped + minicart cross-sell frame reset)
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,300;0,400;0,600;1,300;1,400;1,500;1,600&display=swap');

/* ---------- Menu-item: maroon + Cormorant cursief (zelfde font als "a collection by…") ---------- */
li.rijks-menu > a, li.rijks-menu > a > span, li.rijks-menu a, li.rijks-menu span,
li.rijks-menu span[data-hover]{ color:#8b2c1f !important; }
li.rijks-menu > a:hover, li.rijks-menu > a:hover span{ color:#6f2318 !important; }
li.rijks-menu > a, li.rijks-menu > a > span, li.rijks-menu span[data-hover]{
  font-family:'Cormorant',Georgia,serif !important; font-style:italic !important; font-weight:600 !important;
  letter-spacing:.04em !important; font-size:17px !important; text-transform:none !important;
  vertical-align:middle !important; position:relative; top:-1px;
}
@media (min-width:992px) and (max-width:1440px){
  #mainMenu > li.level-top > a.level-top{ padding-left:11px !important; padding-right:11px !important; letter-spacing:.03em; }
}

/* ---------- Home-slider: "Reviving Chintz" + sub (zelfde stijl als de Rijks-hero), knop weg ---------- */
.slide-text .rijks-slide-eyebrow{
  font-family:'Cormorant',Georgia,serif; font-weight:300; text-transform:uppercase; letter-spacing:.3em;
  font-size:52px; line-height:1.05; color:#fff; margin-bottom:12px; text-shadow:0 1px 12px rgba(20,10,6,.5);
}
/* sub-regel "a collection by Rijksmuseum and Khasto" onder de eyebrow (zonder content-edit) */
.slide-text .rijks-slide-eyebrow::after{
  content:'a collection by Rijksmuseum and Khasto'; display:block;
  font-family:'Cormorant',Georgia,serif; font-style:italic; font-weight:300; text-transform:none;
  letter-spacing:.03em; font-size:32px; line-height:1.25; margin-top:14px; text-shadow:0 1px 12px rgba(20,10,6,.5);
}
/* knop weg */
a.rijks-slide-btn, .slide-text a.rijks-slide-btn{ display:none !important; }
/* tekst hoger/centraler (zoals in de video) i.p.v. onderaan */
.slide-text:has(.rijks-slide-eyebrow){ bottom:auto !important; top:34% !important; }
@media (max-width:767px){
  .slide-text .rijks-slide-eyebrow{ font-size:30px; letter-spacing:.2em; margin-bottom:8px; }
  .slide-text .rijks-slide-eyebrow::after{ font-size:20px; margin-top:10px; }
  .slide-text:has(.rijks-slide-eyebrow){ top:30% !important; }
}
/* hele slide klikbaar: klikken op de tekst valt door naar de bestaande item-image-link (-> Rijks-pagina) */
.slide-text:has(.rijks-slide-eyebrow){ pointer-events:none; }

/* ---------- Home-slider op MOBIEL: portret-afbeeldingen tonen ---------- */
@media (max-width:767px){
  a.item-image[style*="slider-1-s25"], a.item-image[style*="slider-2-s8"], a.item-image[style*="slider-3-s10"]{
    display:block !important; min-height:78vh; background-size:cover !important; background-position:center !important; background-repeat:no-repeat !important;
  }
  a.item-image[style*="slider-1-s25"] img.img-responsive, a.item-image[style*="slider-2-s8"] img.img-responsive, a.item-image[style*="slider-3-s10"] img.img-responsive{ display:none !important; }
  a.item-image[style*="slider-1-s25"]{ background-image:url('/media/rijks/mobile-1.jpg') !important; }
  a.item-image[style*="slider-2-s8"]{  background-image:url('/media/rijks/mobile-2.jpg') !important; }
  a.item-image[style*="slider-3-s10"]{ background-image:url('/media/rijks/mobile-3.jpg') !important; }
}

/* ---------- Optima voor ALLE producttitels (hele site) ---------- */
.product-item-name, .product-item-name a, .product-item-link,
.product.name.product-item-name, .products-grid .product-item-name a,
.product-info-main .page-title-wrapper .page-title span,
.catalog-product-view .page-title-wrapper .page-title{
  font-family:'Optima DemiBold', Georgia, 'Times New Roman', serif !important;
  letter-spacing:.01em;
}

/* ---------- Footer newsletter: rechthoekig, volledig gevuld in site-grijsgroen (#e0e3d4), veld+knop uitgelijnd ---------- */
.block.newsletter .field.newsletter, .block.newsletter .field.newsletter .control{ margin:0 !important; background:transparent !important; }
#newsletter-footer, .block.newsletter input#newsletter-footer, .block.newsletter .field.newsletter .control input{
  background:#e0e3d4 !important; background-clip:border-box !important; color:#2b241d !important;
  border:1px solid #cfd3c2 !important; border-radius:0 !important; box-sizing:border-box !important;
  height:46px !important; line-height:normal !important; vertical-align:top !important;
}
#newsletter-footer::placeholder, .block.newsletter input#newsletter-footer::placeholder{ color:#5c5f52 !important; opacity:1 !important; }
/* knop uitlijnen met het veld: margin-top:10px eruit + gelijke hoogte + rechthoekig */
.block.newsletter .actions{ margin-top:0 !important; vertical-align:top !important; }
.block.newsletter .action.subscribe, .block.newsletter button.action.subscribe{
  margin-top:0 !important; height:46px !important; border-radius:0 !important; box-sizing:border-box !important; vertical-align:top !important;
}

/* =====================================================================
   Rijks-pagina's — TRANSPARANTE outline-print (uit tot .rijks-scrolled)
   ===================================================================== */
body.category-rijksmuseum-khasto, body.categorypath-rijksmuseum-khasto{ position:relative; }
body.category-rijksmuseum-khasto::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:url('/media/rijks/rijks-bg.png') center center / cover no-repeat;
  opacity:0; transition:opacity .5s ease;
}
body.category-rijksmuseum-khasto.rijks-scrolled::before{ opacity:.85; }
body.category-rijksmuseum-khasto .page-wrapper{ position:relative; z-index:1; background:transparent !important; }
body.category-rijksmuseum-khasto .page-main,
body.category-rijksmuseum-khasto .columns,
body.category-rijksmuseum-khasto .column.main,
body.category-rijksmuseum-khasto #maincontent,
body.category-rijksmuseum-khasto .page-footer,
body.category-rijksmuseum-khasto .footer-container,
body.category-rijksmuseum-khasto .footer.footer1,
body.category-rijksmuseum-khasto .middle-footer,
body.category-rijksmuseum-khasto .bottom-footer,
body.category-rijksmuseum-khasto .block.newsletter{ background:transparent !important; }
body.category-rijksmuseum-khasto #maincontent,
body.category-rijksmuseum-khasto .page-main,
body.category-rijksmuseum-khasto .column.main{ padding-top:0 !important; margin-top:0 !important; }
body.category-rijksmuseum-khasto .page-main{ max-width:none; }
body.category-rijksmuseum-khasto .page-title-wrapper,
body.category-rijksmuseum-khasto .category-view .category-description,
body.category-rijksmuseum-khasto .breadcrumbs,
body.category-rijksmuseum-khasto .toolbar-products{ display:none !important; }

/* Scroll-gedrag: header standaard weg, bij scrollen sticky + outline */
body.category-rijksmuseum-khasto #placeholder-header{ display:none !important; }
body.category-rijksmuseum-khasto.rijks-scrolled #placeholder-header{
  display:block !important; position:fixed !important; top:0; left:0; right:0; width:100%; z-index:8000;
  opacity:1 !important; visibility:visible !important; pointer-events:auto !important;
  background:#fbf7ef url('/media/rijks/rijks-bg.png') center top / cover no-repeat !important;
  box-shadow:0 2px 16px rgba(43,33,26,.16);
}
body.category-rijksmuseum-khasto.rijks-scrolled #placeholder-header .header,
body.category-rijksmuseum-khasto.rijks-scrolled #placeholder-header .header.header4,
body.category-rijksmuseum-khasto.rijks-scrolled #placeholder-header .top-header-content,
body.category-rijksmuseum-khasto.rijks-scrolled #placeholder-header .middle-header-content,
body.category-rijksmuseum-khasto.rijks-scrolled #placeholder-header .bottom-header-content,
body.category-rijksmuseum-khasto.rijks-scrolled #placeholder-header .panel.wrapper{ background:transparent !important; }

/* =====================================================================
   Rijks categoriepagina — content (hero / collage / tekstbanner / rijen / banner)
   ===================================================================== */
.rijks-landing{ position:relative; margin-top:0; }

/* Video-hero */
.rijks-hero{ position:relative; width:100vw; margin-left:calc(50% - 50vw); height:100vh; min-height:560px; overflow:hidden; background:#1a120c; }
.rijks-hero__frame{ position:absolute; inset:0; }
.rijks-hero__frame iframe{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100vw; height:56.25vw; min-height:100vh; min-width:177.78vh; border:0; pointer-events:none; }
.rijks-hero__overlay{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:#f6f1e9; pointer-events:none; background:rgba(20,12,8,.14); }
.rijks-hero__eyebrow{ font-family:'Cormorant',serif; font-weight:300; text-transform:uppercase; letter-spacing:.34em; font-size:min(9vw,74px); line-height:1; }
.rijks-hero__sub{ margin-top:16px; font-family:'Cormorant',serif; font-style:italic; font-weight:300; font-size:min(4.6vw,26px); letter-spacing:.04em; }

/* Collage: bloemenprint-foto (links) + houtblok-PNG half schuin, iets kleiner, eroverheen (rechts) + caption eronder */
.rijks-collage{ padding:120px 20px 28px; }   /* meer ruimte tussen video en foto's */
.rijks-collage__inner{ position:relative; max-width:820px; margin:0 auto; }
.rijks-collage__flowerswrap{ position:relative; z-index:1; width:56%; margin:0; }
.rijks-collage__flowers{ display:block; width:100%; box-shadow:0 20px 50px rgba(43,33,26,.20); }
.rijks-collage__caption{ font-family:'Cormorant',Georgia,serif; font-style:italic; font-weight:600; font-size:16.5px;
  color:#4a3a2c; margin:14px 2px 0; line-height:1.4; max-width:64%; position:relative; z-index:5; }
.rijks-collage__block{ position:absolute; right:0; top:14%; z-index:3; width:52%; transform:rotate(-13deg);
  filter:drop-shadow(0 16px 26px rgba(20,12,6,.45)); pointer-events:none; }
@media(max-width:640px){
  .rijks-collage{ padding:70px 20px 20px; }
  .rijks-collage__flowerswrap{ width:70%; }
  .rijks-collage__caption{ max-width:100%; }
  .rijks-collage__block{ width:62%; right:-4%; top:16%; }
}

/* Tekstbanner: volledige-breedte balk die de outline ~50% dimt, met ruime marge boven/onder */
.rijks-textbanner{ position:relative; width:100vw; margin-left:calc(50% - 50vw); margin-top:10px; margin-bottom:40px;
  padding:80px 24px; text-align:center; background:rgba(251,247,233,.5); }
.rijks-textbanner p{ font-family:'Cormorant',Georgia,serif; font-style:italic; font-weight:600; font-size:23px;
  line-height:1.75; color:#3a2f27; max-width:900px; margin:0 auto 1.1em; }
@media(max-width:640px){ .rijks-textbanner{ padding:50px 20px; } .rijks-textbanner p{ font-size:19px; } }

/* Productrijen */
.rijks-row{ max-width:1280px; margin:6px auto; padding:0 15px; }

/* Kader (crème lijn) om ALLE PRODUCTFOTO'S — site-breed. Op de VASTE fotobox (.product-item-photo),
   niet op de variabele <img>, zodat het kader op elke tegel identiek valt ongeacht fotoverhouding.
   Via ::before (thema gebruikt ::after al voor de hover-donkering). Niet op banners/sliders. */
.products-grid .product-item .product-item-photo,
.products-list .product-item .product-item-photo{ position:relative !important; }
.products-grid .product-item .product-item-photo::before,
.products-list .product-item .product-item-photo::before{
  content:"" !important; position:absolute !important; inset:9px !important;
  border:3px solid #fbf7e9 !important; pointer-events:none !important; z-index:10 !important;
}
/* mobiel: kader een fractie naar buiten */
@media(max-width:767px){
  .products-grid .product-item .product-item-photo::before,
  .products-list .product-item .product-item-photo::before{ inset:6px !important; }
}
/* GEEN kader op productdetailpagina's (related/upsell/crosssell): daar valt de fotobox anders
   en het kader liep ver door tot over de productnaam. Kaders horen alleen op categoriepagina's. */
/* Related/upsell op PDP: fotobox in de carousel is onbetrouwbaar (kader liep over de naam).
   Kader daarom op de AFBEELDING zelf, met nette inzet. */
.catalog-product-view .product-item .product-item-photo::before{ display:none !important; }
.catalog-product-view .product-item img.product-image-photo{ outline:2px solid #fbf7e9 !important; outline-offset:-8px !important; }

/* ===== Producttegel: titel → PRIJSREGEL (prijs links + winkelmandje rechts) → maat/kleur =====
   De knop staat ABSOLUUT rechts (uit de flow) → de swatches lopen links eronder door NAAST de knop
   (het icoon loopt rechts langs prijs én maat/kleur naar beneden). Bovenkant kader:
   MOBIEL = bovenkant PRIJS · DESKTOP = bovenkant NAAM. Titel breekt pas na 2 regels af.
   Geen dubbele padding / min-height boven de titel → titel begint altijd op gelijke hoogte. */
/* Thema zet .product-item op flex-column + justify-content:space-between → in een rij met
   ongelijke tegelhoogtes wordt het details-blok naar ONDEREN geduwd (titel begint dan te laag,
   'slaat een regel over'). Boven uitlijnen zodat de titel altijd direct onder de foto begint. */
.catalog-category-view .products-grid .product-item{ justify-content:flex-start !important; }
.name-price-wrapper{ padding-top:0 !important; min-height:0 !important; }
.name-price-wrapper .product-item-name{ margin:0 0 6px !important; padding-top:0 !important; line-height:1.2 !important; overflow:hidden !important; }
.name-price-wrapper .product-item-name a{
  display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important;
  overflow:hidden !important; text-overflow:ellipsis !important; white-space:normal !important;
}
.name-price-wrapper .rk-priceline{ position:relative !important; padding-right:54px !important; }
.name-price-wrapper .rk-priceline .price-wrapper{ margin:0 !important; }
.rk-cart{ position:absolute !important; top:0 !important; right:0 !important; margin:0 !important; z-index:6 !important; line-height:0 !important; }
.rk-cart form{ position:static !important; display:block !important; float:none !important; margin:0 !important; padding:0 !important; line-height:0 !important; opacity:1 !important; visibility:visible !important; width:auto !important; }
.rk-cart .tocart.btn-cart{
  position:static !important; transform:none !important; opacity:1 !important; visibility:visible !important;
  display:flex !important; align-items:center !important; justify-content:center !important; cursor:pointer;
  width:auto !important; height:auto !important; min-width:0 !important; margin:0 !important; padding:8px 9px !important;
  background:transparent !important; border:1px solid #483d3c !important; border-radius:0 !important; box-shadow:none !important; line-height:0 !important;
}
.rk-cart .tocart.btn-cart .add-to-cart-icon{ width:26px !important; height:auto !important; display:block !important; margin:0 !important; }
.rk-cart .tocart.btn-cart:hover{ background:#f3efe4 !important; }
.rijks-widget-grid .option-details-container{ min-height:0 !important; }
/* Rijks-tegels hebben geen swatches → kort; het absolute winkelmandje steekt onder de tegel uit in de
   rij-marge, waardoor de volgende rij te dicht lijkt. Extra onderruimte alleen op de Rijks-widget. */
.rijks-widget-grid .product-item{ margin-bottom:58px !important; }
/* MOBIEL: swatches links van de knop houden (knop loopt er rechts langs naar beneden), maar de
   swatch-container de volle breedte geven zodat er 3+ kolommen passen i.p.v. 2. */
@media(max-width:767px){
  .catalog-category-view .products-grid .product-item .option-details-container{ padding-right:46px !important; }
  .catalog-category-view .products-grid .product-item .swatch-attribute,
  .catalog-category-view .products-grid .product-item .swatch-attribute-options{ width:100% !important; max-width:100% !important; }
  .catalog-category-view .products-grid .product-item .swatch-attribute-options{ display:flex !important; flex-wrap:wrap !important; }
}
/* DESKTOP (≥768px): winkelmandje op de PRIJSREGEL (net als mobiel) — de basisregel ankert de knop al
   aan de .rk-priceline (bovenkant kader = bovenkant prijs), dus we overschrijven die ankering NIET meer.
   Evenwijdige ruimte tussen naam / prijs / maat-kleur, en swatches links van de knop houden. */
@media(min-width:768px){
  .catalog-category-view .products-grid .product-item .name-price-wrapper .product-item-name{ margin-bottom:9px !important; }
  .catalog-category-view .products-grid .product-item .name-price-wrapper .rk-priceline{ margin-bottom:9px !important; }
  .catalog-category-view .products-grid .product-item .option-details-container{ padding-right:48px !important; }
  .catalog-category-view .products-grid .product-item .swatch-attribute,
  .catalog-category-view .products-grid .product-item .swatch-attribute-options{ width:100% !important; max-width:100% !important; }
  .catalog-category-view .products-grid .product-item .swatch-attribute-options{ display:flex !important; flex-wrap:wrap !important; }
}

/* S6-banner (productfoto) + drie-lijns kader (dun/dun-dik/dun) NET binnen de rand, pristine #fbf7e9 */
.rijks-banner{ position:relative; width:100vw; margin-left:calc(50% - 50vw); min-height:60vh; background-size:cover; background-position:center;
  background-repeat:no-repeat; margin-top:54px; margin-bottom:92px; }
/* dubbel kader: DIKKE buitenlijn (3px) + DUNNE binnenlijn (1px), 1px echte gap ertussen — twee losse elementen */
.rijks-banner::before{ content:""; position:absolute; inset:9px; border:3px solid #fbf7e9; pointer-events:none; }
.rijks-banner::after{ content:""; position:absolute; inset:15px; border:1px solid #fbf7e9; pointer-events:none; }
@media(max-width:640px){ .rijks-banner::before{inset:6px} .rijks-banner::after{inset:12px} }
/* MOBIEL: portret-banner i.p.v. de brede desktop-banner (staande foto vult het scherm beter) */
@media(max-width:767px){ .rijks-banner{ background-image:url('/media/rijks/banner-mobile.jpg') !important; min-height:82vh; } }

/* ---------- Minicart cross-sell (add-to-order carousel): GEEN Rijks-tegelstyling ----------
   De site-brede fotokader-regel (.product-item-photo::before) en de tegel-layout lekten naar de
   'Gerelateerde Producten'-carrousel in de minicart; hier neutraliseren we dat binnen de minicart. */
.minicart-related-products .product-item-photo::before,
.block-minicart .product-item-photo::before{ display:none !important; }
.minicart-related-products img.product-image-photo,
.block-minicart img.product-image-photo{ outline:none !important; }
.minicart-related-products .product-item,
.block-minicart .product-item{ justify-content:flex-start !important; }
.minicart-related-products .rk-cart, .minicart-related-products .rk-priceline,
.block-minicart .rk-cart, .block-minicart .rk-priceline{ position:static !important; padding-right:0 !important; }