/* OlivaOlei cart UI — scoped with .oo- prefix to avoid clashing with the site CSS */
:root { --oo-gold: #967E05; --oo-gold-d: #7a6704; --oo-ink: #2b2b22; --oo-bg: #fffdf6; }

/* base cart button (bag + badge) */
.oo-cart-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: none; cursor: pointer; color: inherit; padding: 6px;
  transition: color .15s, background .15s, transform .15s;
}
.oo-badge {
  position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 10px; background: #c0392b; color: #fff; font: 700 11px/18px system-ui, sans-serif;
  text-align: center; pointer-events: none;
}

/* in-header bag — sits next to the language switcher (desktop) */
.oo-header-cart { color: var(--nav-link-text-color, var(--oo-ink)); margin-right: 14px; }
.oo-header-cart:hover { color: var(--oo-gold); }

/* floating bag — mobile only */
.oo-fab {
  position: fixed; top: 14px; right: 14px; z-index: 9996;
  width: 46px; height: 46px; border-radius: 50%; color: #fff; background: var(--oo-gold);
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.oo-fab:hover { background: var(--oo-gold-d); transform: translateY(-1px); }
@media (min-width: 921px) { .oo-fab { display: none !important; } }
@media (max-width: 920px) { .oo-header-cart { display: none !important; } }

.oo-overlay {
  position: fixed; inset: 0; z-index: 9998; background: rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
}
.oo-overlay.oo-open { opacity: 1; visibility: visible; }

.oo-drawer {
  position: fixed; top: 0; right: 0; z-index: 9999; height: 100%; width: 380px; max-width: 92vw;
  background: var(--oo-bg); color: var(--oo-ink); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .25s ease;
  box-shadow: -6px 0 24px rgba(0,0,0,.18); font-family: system-ui, -apple-system, sans-serif;
}
.oo-drawer.oo-open { transform: translateX(0); }
.oo-drawer-h { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid #eee3c4; }
.oo-drawer-h strong { font-size: 18px; letter-spacing: .02em; }
.oo-close { background: none; border: none; font-size: 28px; line-height: 1; cursor: pointer; color: #888; }
.oo-close:hover { color: #333; }

.oo-items { flex: 1; overflow-y: auto; padding: 8px 20px; }
.oo-empty { color: #999; text-align: center; margin: 48px 0; }
.oo-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid #f0e9d2; }
.oo-item img { width: 56px; height: 56px; object-fit: cover; border-radius: 6px; }
.oo-item-mid a { color: var(--oo-ink); text-decoration: none; font-size: 14px; font-weight: 600; display: block; margin-bottom: 6px; }
.oo-item-mid a:hover { color: var(--oo-gold); }
.oo-item-r { text-align: right; font-size: 14px; font-weight: 600; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.oo-rm { background: none; border: none; color: #bbb; font-size: 20px; line-height: 1; cursor: pointer; }
.oo-rm:hover { color: #c0392b; }

.oo-qty { display: inline-flex; align-items: center; border: 1px solid #e2d9b8; border-radius: 6px; overflow: hidden; }
.oo-qty button { width: 26px; height: 26px; border: none; background: #f7f1dd; color: var(--oo-ink); font-size: 15px; cursor: pointer; }
.oo-qty button:hover { background: #efe6c4; }
.oo-q-val { min-width: 28px; text-align: center; font-size: 14px; font-weight: 600; }

.oo-foot { padding: 18px 20px; border-top: 1px solid #eee3c4; background: #fffefb; }
.oo-sub { display: flex; justify-content: space-between; font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.oo-shipnote { font-size: 12px; color: #8a8160; margin: 0 0 14px; }
.oo-checkout { width: 100%; padding: 14px; border: none; border-radius: 8px; background: var(--oo-gold); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; transition: background .15s; }
.oo-checkout:hover:not(:disabled) { background: var(--oo-gold-d); }
.oo-checkout:disabled { opacity: .5; cursor: default; }

/* product page sticky add-to-cart bar */
.oo-pbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9997;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center;
  padding: 12px 18px; background: rgba(255,253,246,.97); border-top: 1px solid #e6dcb8;
  box-shadow: 0 -4px 18px rgba(0,0,0,.08); font-family: system-ui, sans-serif;
  backdrop-filter: blur(6px);
}
.oo-pbar-name { font-weight: 600; color: var(--oo-ink); }
.oo-pbar-price { font-weight: 700; color: var(--oo-gold-d); font-size: 18px; }
.oo-pbar-add { padding: 11px 26px; border: none; border-radius: 8px; background: var(--oo-gold); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; }
.oo-pbar-add:hover { background: var(--oo-gold-d); }
body.oo-has-pbar { padding-bottom: 76px; }

.oo-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 30px); z-index: 10000;
  max-width: 90vw; padding: 14px 22px; background: #2e7d32; color: #fff; border-radius: 10px;
  font-family: system-ui, sans-serif; font-size: 15px; box-shadow: 0 6px 20px rgba(0,0,0,.25);
  opacity: 0; transition: opacity .3s, transform .3s;
}
.oo-toast.oo-show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 480px) {
  .oo-pbar-name { width: 100%; text-align: center; }
}

/* Hide Hostinger's dead store cart UI — replaced by our own cart. */
.block-header__cart, .cart-drawer { display: none !important; }

/* ============================================================
   Static-site overrides (Hostinger's JS is removed).
   ============================================================ */

/* Reveal content that Hostinger's JS used to fade/slide/scale in.
   Without that JS these elements sit at opacity:0 forever. */
.transition.transition--fade:not(.oo-animate),
.transition.transition--slide:not(.oo-animate),
.transition.transition--scale:not(.oo-animate),
.transition--root-hidden [data-animation-role="block-element"]:not(.oo-animate),
.transition--root-hidden [data-animation-role="image"]:not(.oo-animate),
[data-animation-role]:not(.oo-animate) {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Elements JS tags for an entrance animation (hero text + button) are excluded
   from the force-visible rule above and animate in instead. */
.oo-animate { animation: oo-rise .7s cubic-bezier(.22, .61, .36, 1) both; }

/* Language switcher: open the dropdown on hover / focus / tap.
   (An inline CSS-var override keeps it forcibly hidden once the JS is gone.) */
.language-switcher:hover .language-switcher__dropdown-area,
.language-switcher:focus-within .language-switcher__dropdown-area,
.language-switcher.oo-lang-open .language-switcher__dropdown-area {
  height: auto !important;
  overflow: visible !important;
  visibility: visible !important;
}

/* Flags only — hide the text labels in the language dropdown, keep the flag images. */
.language-switcher__dropdown-link { font-size: 0 !important; gap: 0 !important; }
.language-switcher__dropdown-link .flag { font-size: 0 !important; }

/* Product grid (shop + homepage "Onze Producten"), re-rendered from our catalog.
   Centered, with larger cards. */
.oo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; max-width: 1200px; margin: 0 auto; padding: 8px 16px; font-family: system-ui, -apple-system, sans-serif; }
.oo-card { display: flex; flex-direction: column; text-align: center; }
@media (max-width: 900px) { .oo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } }
@media (max-width: 520px) { .oo-grid { grid-template-columns: minmax(0, 1fr); } }
.oo-card-img { display: block; }
.oo-card-img img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 12px; background: #f3eede; transition: transform .2s; }
.oo-card-img:hover img { transform: translateY(-4px); }
.oo-card-name { margin: 18px 0 6px; color: var(--oo-ink); text-decoration: none; font-weight: 600; font-size: 18px; }
.oo-card-name:hover { color: var(--oo-gold); }
.oo-card-price { color: var(--oo-gold-d); font-weight: 700; font-size: 18px; margin-bottom: 16px; }
.oo-card-add { padding: 13px 22px; border: none; border-radius: 8px; background: var(--oo-gold); color: #fff; font-weight: 700; font-size: 15px; cursor: pointer; transition: background .15s; }
.oo-card-add:hover { background: var(--oo-gold-d); }

/* Hero entrance animation (text + button) — its original animation was removed with Hostinger's JS. */
@keyframes oo-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }

/* Blog list card (re-rendered from our catalog). */
/* Hostinger's empty-block placeholder disables clicks and centers content — undo both. */
.block-blog-list__empty-block { pointer-events: auto !important; place-content: start !important; place-items: start !important; height: auto !important; }
.oo-blog { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 30px; padding: 8px 0; width: 100%; pointer-events: auto; font-family: system-ui, -apple-system, sans-serif; }
.oo-blog-card { flex: 0 1 340px; max-width: 380px; border: 1px solid #ece3c8; border-radius: 14px; overflow: hidden; background: #fff; text-decoration: none; color: var(--oo-ink); pointer-events: auto; transition: box-shadow .2s, transform .2s; }
.oo-blog-card:hover { box-shadow: 0 10px 26px rgba(0,0,0,.10); transform: translateY(-3px); }
.oo-blog-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: #f3eede; }
.oo-blog-body { padding: 18px 20px 22px; }
.oo-blog-meta { color: #9a9069; font-size: 13px; margin-bottom: 6px; }
.oo-blog-title { font-size: 19px; font-weight: 700; line-height: 1.3; }

/* Product detail block, re-rendered from our catalog. */
.oo-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; max-width: 1000px; margin: 0 auto; padding: 16px; font-family: system-ui, -apple-system, sans-serif; }
.oo-detail-img img { width: 100%; border-radius: 14px; background: #f3eede; }
.oo-detail-name { font-size: 30px; line-height: 1.2; margin: 0 0 10px; color: var(--oo-ink); }
.oo-detail-price { font-size: 24px; font-weight: 700; color: var(--oo-gold-d); margin-bottom: 20px; }
.oo-detail-buy { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.oo-detail-add { padding: 13px 30px; border: none; border-radius: 8px; background: var(--oo-gold); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; transition: background .15s; }
.oo-detail-add:hover { background: var(--oo-gold-d); }
.oo-detail-desc { color: #4a463a; line-height: 1.6; }
@media (max-width: 720px) { .oo-detail { grid-template-columns: 1fr; gap: 22px; } }