/* ══ Oenie storefront — bol.com-achtige look & feel ══ */

:root {
  --oe-blauw: #B8763A;        /* cognac (was blauw) */
  --oe-blauw-d: #96571F;      /* cognac donker */
  --oe-espresso: #55402C;     /* header/footer */
  --oe-inkt: #241A12;
  --oe-grijs: #F6F1EA;        /* creme achtergrond */
  --oe-tegel: #F3ECE2;        /* fototegel */
  --oe-lijn: #E7DFD3;
  --oe-groen: #1E7A34;
  --oe-geel: #D9A441;         /* goud */
  --oe-muted: #7A6E5F;
}
body { background: var(--oe-grijs); }

/* USP-topbar (art&craft-stijl) */
.oenie-topbar {
  background: var(--oe-espresso); color: #F2E9DC;
  display: flex; justify-content: center; gap: 34px;
  font-size: .8rem; font-weight: 600; padding: 7px 16px;
}
.oenie-topbar-mob { display: none; }
@media (max-width: 768px) {
  .oenie-topbar span { display: none; }
  .oenie-topbar span.oenie-topbar-mob { display: inline; }
}

/* ── Header ─────────────────────────────────────────────────── */
.oenie-header, .oenie-catbar-wrap { background: #6B4E36; }
.oenie-header { border-bottom: none; }
.oenie-header-row { align-items: center; gap: 24px; }
.oenie-logo a { color: #fff !important; font-size: 2.1rem; font-weight: 600; text-decoration: none !important; letter-spacing: -0.5px; }
.oenie-search { flex: 1 1 auto; max-width: 640px; }
.oenie-search .wp-block-search__inside-wrapper {
  border: none; border-radius: 999px; overflow: hidden; background: #fff; padding: 2px 2px 2px 6px;
}
.oenie-search .wp-block-search__input {
  border: none !important; outline: none; padding: 9px 16px; font-size: .95rem; background: transparent;
}
.oenie-search .wp-block-search__button {
  background: var(--oe-blauw) !important; color: #fff !important; border: none !important;
  border-radius: 999px !important; padding: 9px 22px !important; font-weight: 600; cursor: pointer; margin: 0;
}
.oenie-search .wp-block-search__button:hover { background: var(--oe-blauw-d) !important; }
.oenie-header-icons { align-items: center; }
.oenie-header-icons a { color: #fff !important; }
.oenie-header-icons svg { fill: #fff; }

/* Categorie-balk */
.oenie-catbar-wrap { border-bottom: none; }
.oenie-catbar { display: flex; gap: 4px; overflow-x: auto; padding: 0 0 0; scrollbar-width: none; }
.oenie-catbar::-webkit-scrollbar { display: none; }
.oenie-catbar a {
  white-space: nowrap; padding: 11px 14px; font-size: .92rem; font-weight: 600;
  color: #F2E9DC; text-decoration: none; border-bottom: 3px solid transparent;
}
.oenie-catbar a:hover { color: #fff; border-bottom-color: var(--oe-geel); }
.oenie-catbar a.oenie-cat-tk { color: var(--oe-geel); }

/* ── Hero-banner ────────────────────────────────────────────── */
.oenie-hero-banner {
  background: linear-gradient(120deg, #55402C 0%, #7A5A3E 55%, #96714E 100%);
  border-radius: 20px; color: #fff; padding: 40px 48px;
  display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap;
}
.oenie-hero-tekst h1 { color: #fff; font-size: 2rem; line-height: 1.2; margin: 0 0 10px; }
.oenie-hero-tekst p { margin: 0 0 20px; font-size: 1.05rem; opacity: .92; }
.oenie-hero-btn {
  display: inline-block; background: var(--oe-geel); color: #2B1B10; font-weight: 700;
  padding: 12px 28px; border-radius: 999px; text-decoration: none; font-size: .98rem;
}
.oenie-hero-btn:hover { background: #EFC66E; }
.oenie-hero-usps { list-style: none; margin: 0; padding: 0; font-size: .98rem; font-weight: 600; display: grid; gap: 10px; }
.oenie-hero-usps li { white-space: nowrap; }

/* Sectie-koppen: titel links, "alles bekijken" rechts */
.oenie-sectie-kop { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 4px; }
.oenie-sectie-kop h2 { font-size: 1.45rem; margin: 0; }
.oenie-sectie-kop a { font-size: .92rem; font-weight: 600; text-decoration: none; }
.oenie-sectie-kop a:hover { text-decoration: underline; }

/* ── Productgrid: klassiek (shortcodes) ─────────────────────── */
.woocommerce ul.products {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px; margin: 14px 0 0 !important; padding: 0 !important;
}
@media (max-width: 1024px) { .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 768px)  { .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; } }
.woocommerce ul.products::before, .woocommerce ul.products::after,
ul.products::before, ul.products::after,
ul.wc-block-product-template::before, ul.wc-block-product-template::after { display: none !important; content: none !important; }

.woocommerce ul.products li.product {
  width: auto !important; float: none !important; margin: 0 !important;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--oe-lijn); border-radius: 12px;
  padding: 16px; position: relative; transition: box-shadow .15s ease;
}
.woocommerce ul.products li.product:hover { box-shadow: 0 4px 18px rgba(17,24,39,.12); }

.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link {
  display: flex !important; flex-direction: column; flex: 1 1 auto; text-decoration: none;
}
.woocommerce ul.products li.product a img {
  aspect-ratio: 1 / 1; width: 100% !important; height: auto; object-fit: contain;
  margin: 0 0 12px !important;
  background: #fff; border-radius: 10px; padding: 10px;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: Inter, -apple-system, sans-serif !important;
  font-size: .92rem !important; font-weight: 400 !important; line-height: 1.45 !important;
  color: var(--oe-inkt); padding: 0 !important; margin: 0 0 4px !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(2 * 1.45 * .92rem);
}
.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title { color: var(--oe-blauw); text-decoration: underline; }

/* Sterren + levertijd */
.oenie-sterren { display: flex; align-items: center; gap: 6px; margin: 0 0 2px; }
.oenie-sterren-achter { position: relative; display: inline-block; color: #D3D7DE; font-size: .95rem; letter-spacing: 1px; line-height: 1; }
.oenie-sterren-voor { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: var(--oe-geel); }
.oenie-sterren-aantal { font-size: .8rem; color: var(--oe-muted); }
.oenie-lever { font-size: .84rem; font-weight: 600; color: var(--oe-groen); margin: 2px 0 0; }
.oenie-lever.oenie-uitverkocht { color: #B91C1C; }

/* Prijs onderaan, bol-stijl: groot en zwart */
.woocommerce ul.products li.product .price {
  margin: 0 !important; order: 5;
  font-size: 1.25rem !important; font-weight: 700; color: var(--oe-inkt) !important;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.woocommerce ul.products li.product > a.woocommerce-LoopProduct-link .price { margin-top: auto !important; padding-top: 8px; }
.woocommerce ul.products li.product .price del { font-weight: 400; font-size: .85rem; color: var(--oe-muted); opacity: 1; }
.woocommerce ul.products li.product .price ins { text-decoration: none; color: var(--oe-inkt); }

/* Knop: bol-blauw pill */
.woocommerce ul.products li.product .button,
.woocommerce a.button, .woocommerce button.button,
.wc-block-components-product-button__button {
  background: var(--oe-blauw) !important; color: #fff !important;
  border-radius: 999px !important; font-weight: 600 !important; font-size: .88rem !important;
  padding: 10px 18px !important; border: none !important; text-align: center; transition: background .15s ease;
}
.woocommerce ul.products li.product .button { width: 100%; margin: 10px 0 0 !important; }
.woocommerce ul.products li.product .button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.wc-block-components-product-button__button:hover { background: var(--oe-blauw-d) !important; }
.woocommerce ul.products li.product .added_to_cart { margin-top: 8px; text-align: center; font-size: .85rem; color: var(--oe-groen); font-weight: 600; }

/* Sale-badge */
.woocommerce ul.products li.product .onsale, .woocommerce span.onsale,
li.wc-block-product .wc-block-components-product-sale-badge {
  background: var(--oe-geel) !important; color: var(--oe-inkt) !important;
  font-weight: 700 !important; border-radius: 999px !important; padding: 5px 12px !important;
  min-height: 0 !important; min-width: 0 !important; line-height: 1.2 !important;
  top: 10px !important; left: 10px !important; right: auto !important;
  position: absolute; z-index: 2; margin: 0 !important; font-size: .78rem !important;
}

.woocommerce .woocommerce-result-count { color: var(--oe-muted); font-size: .9rem; }
.woocommerce .woocommerce-ordering select {
  border: 1px solid var(--oe-lijn); border-radius: 999px; padding: 8px 14px; background: #fff; font-size: .9rem;
}

/* ── Blockified grid (winkel/categorie-archief) ─────────────── */
ul.wc-block-product-template {
  display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important; padding: 0 !important; margin: 14px 0 0 !important;
}
@media (max-width: 1024px) { ul.wc-block-product-template { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } }
@media (max-width: 768px)  { ul.wc-block-product-template { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 10px !important; } }

li.wc-block-product {
  display: flex !important; flex-direction: column;
  background: #fff; border: 1px solid var(--oe-lijn); border-radius: 12px;
  padding: 16px; margin: 0 !important; width: auto !important; position: relative;
  transition: box-shadow .15s ease;
}
li.wc-block-product:hover { box-shadow: 0 4px 18px rgba(17,24,39,.12); }
li.wc-block-product .wc-block-components-product-image { margin: 0 0 12px !important; }
li.wc-block-product .wc-block-components-product-image img {
  aspect-ratio: 1 / 1 !important; width: 100% !important; height: auto !important; object-fit: contain !important;
  background: #fff; border-radius: 10px; padding: 10px;
}
li.wc-block-product .wp-block-post-title,
li.wc-block-product h2.wp-block-post-title {
  font-family: Inter, -apple-system, sans-serif !important;
  font-size: .92rem !important; font-weight: 400 !important; line-height: 1.45 !important;
  margin: 0 0 4px !important; text-align: left !important;
  display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
  overflow: hidden !important; min-height: calc(2 * 1.45 * .92rem); max-height: calc(2 * 1.45 * .92rem + 2px);
}
li.wc-block-product .wp-block-post-title a { color: var(--oe-inkt); text-decoration: none; }
li.wc-block-product .wp-block-post-title a:hover { color: var(--oe-blauw); text-decoration: underline; }
li.wc-block-product .wc-block-components-product-price {
  margin: auto 0 0 !important; padding-top: 8px;
  font-size: 1.25rem !important; font-weight: 700 !important; color: var(--oe-inkt) !important; text-align: left !important;
}
li.wc-block-product .wc-block-components-product-price del { font-weight: 400; font-size: .85rem; color: var(--oe-muted); }
li.wc-block-product .wc-block-components-product-price ins { text-decoration: none; color: var(--oe-inkt); }
li.wc-block-product .wc-block-components-product-button { margin: 10px 0 0 !important; }
li.wc-block-product .wc-block-components-product-button__button { width: 100%; }
li.wc-block-product .added_to_cart { display: block; text-align: center; margin-top: 8px; font-size: .85rem; color: var(--oe-groen); font-weight: 600; }
li.wc-block-product .has-small-font-size { text-align: left !important; }

/* ── Single product ─────────────────────────────────────────── */
.woocommerce div.product { background: #fff; border: 1px solid var(--oe-lijn); border-radius: 16px; padding: 28px; }
.woocommerce div.product div.images img {
  aspect-ratio: 1 / 1; object-fit: contain;
  background: #fff; border: 1px solid var(--oe-lijn); border-radius: 16px; padding: 28px;
}
.woocommerce div.product div.images { max-width: 46%; }
.woocommerce div.product .product_title { font-size: 1.5rem; line-height: 1.25; margin-bottom: 4px; font-weight: 600; }
.woocommerce div.product p.price { font-size: 1.7rem; font-weight: 700; color: var(--oe-inkt); margin: 8px 0 4px; }
.woocommerce div.product p.price del { color: var(--oe-muted); font-size: 1.05rem; font-weight: 400; opacity: 1; }
.woocommerce div.product p.price ins { text-decoration: none; color: var(--oe-inkt); }
.woocommerce div.product .oenie-lever { font-size: .95rem; margin: 6px 0 10px; }
.woocommerce div.product .woocommerce-product-details__short-description {
  color: #374151; font-size: .95rem; line-height: 1.6;
  background: var(--oe-grijs); border-radius: 10px; padding: 12px 16px; margin: 12px 0;
}
.woocommerce div.product form.cart .quantity .qty {
  border: 1px solid var(--oe-lijn); border-radius: 999px; padding: 10px 6px; width: 72px;
}
.woocommerce div.product form.cart div.quantity { margin-right: 10px !important; }
.woocommerce div.product form.cart .single_add_to_cart_button { font-size: 1rem !important; padding: 13px 32px !important; }
.woocommerce div.product .product_meta { color: var(--oe-muted); font-size: .85rem; margin-top: 16px; }
.woocommerce .woocommerce-breadcrumb { color: var(--oe-muted); font-size: .85rem; margin-bottom: 14px; }
.woocommerce .woocommerce-breadcrumb a { color: var(--oe-blauw); }
.woocommerce div.product .stock.in-stock { color: var(--oe-groen); font-weight: 600; }
.woocommerce div.product .stock.out-of-stock { color: #B91C1C; font-weight: 600; }
.woocommerce #reviews #comments h2, #reviews .comment-reply-title { font-size: 1.15rem; }

/* Meldingen */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top-color: var(--oe-blauw) !important; background: #fff; border-radius: 0 0 10px 10px;
}

/* ── Mobiel ─────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .oenie-header-row { flex-wrap: wrap; }
  .oenie-search { order: 3; flex-basis: 100%; max-width: none; margin-top: 10px; }
  .oenie-logo a { font-size: 1.7rem; }
  .oenie-hero-banner { padding: 24px; }
  .oenie-hero-tekst h1 { font-size: 1.45rem; }
  .oenie-hero-usps { display: none; }
  .woocommerce div.product { padding: 16px; }
}

/* Footer: witte links op donkerblauw */
footer .wp-block-group a, footer a { color: #DCE7FA !important; }
footer .wp-block-group a:hover, footer a:hover { color: #fff !important; }
footer ul.wp-block-list { list-style: none; padding-left: 0; }
footer ul.wp-block-list li { margin-bottom: 6px; }

/* Gerelateerde producten onder de floats, met nette kop */
.woocommerce div.product .related.products, .woocommerce div.product .upsells.products { clear: both; padding-top: 28px; }
.woocommerce div.product .related.products > h2, .woocommerce div.product .upsells.products > h2 {
  font-size: 1.3rem; text-align: left; margin-bottom: 4px;
}

/* Productfoto: padding binnen de box houden, nooit afsnijden */
.woocommerce div.product div.images img { box-sizing: border-box !important; max-width: 100% !important; height: auto !important; }
.woocommerce ul.products li.product a img,
li.wc-block-product .wc-block-components-product-image img { box-sizing: border-box !important; max-width: 100% !important; }
.woocommerce div.product div.images { max-width: 46%; width: 46%; }
.woocommerce div.product div.summary { max-width: 50%; }