/* ==========================================================================
   xxl.css  -  look of the main site xxlgifts.com (2026-09)
   --------------------------------------------------------------------------
   Loaded after modern.css (twice, like modern.css, see app.blade.php) so it is the last stylesheet.
   Remove the two <link> tags to get the previous (modern.css) look back.

   - default theme is dark (app.blade.php <head>), light stays available via the header toggle
   - copper (#d89a63) for buttons, prices and headings, green only for check marks
   - dark header, uppercase menu, trust bar with check marks under the header
   - product cards: name, round photo in a "teardrop" tile with the heart badge, "Bulkprijs vanaf"
   - listing pages: left panel + grid; home: banner, intro + panel, categories, top products, tabs
   Palette: only through variables below (both schemes), the rest of the file uses var(--x-*) / var(--c-*).
   ========================================================================== */

:root {
  --x-copper: #b06a2f;             /* light scheme: darker copper, readable on white */
  --x-copper-hover: #95581f;
  --x-on-copper: #ffffff;
  --x-header: #ffffff;
  --x-header-text: #222222;
  --x-header-line: #e6e6e6;
  --x-panel: #f4f4f4;              /* side panels, info boxes */
  --x-tile: #ececec;               /* teardrop behind the round product photo */
  --x-tile-hover: #e2e2e2;
  --x-circle: #ffffff;
  --x-btn-dark: #2b2b2b;
  --x-btn-dark-text: #ffffff;
  --x-features: #f4f4f4;
  --x-features-text: #333333;

  /* site tokens (modern.css) that follow the main site: copper instead of green */
  --c-accent: var(--x-copper);
  --c-accent-hover: var(--x-copper-hover);
  --c-accent-contrast: var(--x-on-copper);
  --c-accent-soft: #f6ece3;
  --c-highlight: var(--x-copper);
  --c-highlight-hover: var(--x-copper-hover);
}
:root[data-theme="dark"] {
  --x-copper: #d89a63;
  --x-copper-hover: #e3a56b;
  --x-on-copper: #2b2b2b;
  --x-header: #2b2b2b;
  --x-header-text: #ffffff;
  --x-header-line: #3d3d3d;
  --x-panel: #444444;
  --x-tile: #444444;
  --x-tile-hover: #4b4b4b;
  --x-circle: #ffffff;
  --x-btn-dark: #2b2b2b;
  --x-btn-dark-text: #ffffff;
  --x-features: #3a3a3a;
  --x-features-text: #ffffff;

  --c-bg: #333333;
  --c-surface: #3a3a3a;
  --c-accent: #d89a63;
  --c-accent-hover: #e3a56b;
  --c-accent-contrast: #2b2b2b;
  --c-accent-soft: #4a3d31;
  --c-highlight: #d89a63;
  --c-highlight-hover: #e3a56b;
}

/* --------------------------------------------------------------------------
   1. Header (dark bar, uppercase menu, copper search button)
   -------------------------------------------------------------------------- */
.header-area,
.header-area .header-middle,
.header-area .header-bottom,
.header-area .header-bottom.header-bottom-bg-color,
.header-area .sticky-bar.stick {
  background: var(--x-header) !important;
}
.header-area .header-bottom { border-bottom: 0 !important; border-top: 1px solid var(--x-header-line) !important; }
.header-area .main-menu > nav > ul > li > a,
.header-area .main-categori-wrap > a,
.header-area .main-menu > nav > ul > li > a > i {
  color: var(--x-header-text) !important;
  text-transform: uppercase !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
}
.header-area .main-menu > nav > ul > li > a:hover,
.header-area .main-menu > nav > ul > li > a.active { color: var(--x-copper) !important; }
.header-area .hotline p,
.header-area .hotline a { color: var(--x-header-text) !important; }
.header-area .hotline svg.svg-icon path { fill: var(--x-header-text) !important; }
.header-area .search-style-2 input[type="text"] { border-radius: 999px !important; }
/* search button INSIDE the field, same margin all round, copper (xxlgifts.com) */
.header-area .search-style-2 form .m-search-btn {
  top: 50% !important; right: 5px !important; transform: translateY(-50%) !important;
  width: 34px !important; height: 34px !important;
  background: var(--x-copper) !important; color: var(--x-on-copper) !important;
}
.header-area .search-style-2 form .m-search-btn:hover { background: var(--x-copper-hover) !important; }
.header-area .search-style-2 form input[type="text"] { padding-right: 48px !important; }
.od-badge { background: #8cb74e; color: #ffffff; }

/* the floating sister-site icons (left edge) - not on the main site */
.connection { display: none !important; }

/* --------------------------------------------------------------------------
   2. Trust bar (partials/features-bar.blade.php)
   -------------------------------------------------------------------------- */
.x-features { background: var(--x-features); border-bottom: 1px solid var(--x-header-line); }
.x-features-list {
  display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 8px 24px;
  width: 80%; max-width: 1650px; margin: 0 auto !important; padding: 12px 0 !important; list-style: none;
}
.x-features-list li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--x-features-text); white-space: nowrap; }
.x-features-list svg { flex: 0 0 18px; }
@media (max-width: 1530px) { .x-features-list { width: 90%; } }
@media (max-width: 1100px) { .x-features-list { grid-template-columns: repeat(2, auto); justify-content: space-around; } }
@media (max-width: 640px) {
  .x-features-list { width: 100%; padding: 10px 16px !important; grid-template-columns: 1fr; justify-items: center; }
  .x-features-list li:nth-child(n+2) { display: none; }   /* phone: one line, like xxlgifts.com */
}

/* --------------------------------------------------------------------------
   3. Shared pieces: section titles, buttons
   -------------------------------------------------------------------------- */
.x-section-title {
  margin: 0 0 28px !important; text-align: center;
  font-size: 24px !important; font-weight: 600 !important; line-height: 1.3 !important;
  text-transform: uppercase; letter-spacing: .02em;
  color: var(--c-heading) !important;
}
.x-btn,
a.x-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px; border: 0;
  background: var(--x-copper); color: var(--x-on-copper) !important;
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  text-decoration: none !important; cursor: pointer; transition: background .15s, transform .15s;
}
.x-btn:hover { background: var(--x-copper-hover); transform: translateY(-1px); }
.x-btn--dark, a.x-btn--dark { background: var(--x-btn-dark); color: var(--x-btn-dark-text) !important; }
.x-btn--dark:hover { background: #1f1f1f; }
.x-btn--block { display: flex; width: 100%; }

/* --------------------------------------------------------------------------
   4. Product card (partials/product-card.blade.php)
   -------------------------------------------------------------------------- */
:is(.x-page, #m-home) ul.x-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px 28px;
  margin: 0 !important; padding: 0 !important; list-style: none;
}
:is(.x-page, #m-home) ul.x-grid > :not(li) { display: none !important; }
@media (max-width: 1100px) { :is(.x-page, #m-home) ul.x-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { :is(.x-page, #m-home) ul.x-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; } }

.x-card { list-style: none; margin: 0; padding: 0; min-width: 0; float: none !important; width: auto !important; }
.x-card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none !important; }
.x-card-title {
  margin: 0 0 10px !important; min-height: 2.7em;
  font-size: 14px !important; font-weight: 600 !important; line-height: 1.35 !important;
  color: var(--c-heading) !important; text-align: left;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
  transition: color .2s;
}
.x-card-link:hover .x-card-title { color: var(--x-copper) !important; }

/* the "teardrop": square tile, rounded except the top-left corner, round white photo inside */
.x-card-tile {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: 220px; aspect-ratio: 1 / 1; margin: 0 auto 14px;
  background: var(--x-tile); border-radius: 30px 50% 50% 50%;
  transition: transform .3s ease, background-color .3s ease;
}
.x-card-link:hover .x-card-tile { transform: translateY(-4px); background: var(--x-tile-hover); }
.x-card-circle {
  display: flex; align-items: center; justify-content: center;
  width: 88%; height: 88%; border-radius: 50%; overflow: hidden; background: var(--x-circle);
}
.x-card-circle picture { display: contents; }
.x-card-circle img { width: 78%; height: 78%; object-fit: contain; transition: transform .5s ease; }
.x-card-link:hover .x-card-circle img { transform: scale(1.12); }
.x-card-heart {
  position: absolute; top: 8%; left: 8%; width: 24px; height: 24px; border-radius: 50%;
  opacity: 0; transform: scale(.6); transition: opacity .25s, transform .25s;
}
.x-card-link:hover .x-card-heart { opacity: 1; transform: scale(1); }
.x-card-nophoto { font-size: 12px; font-weight: 600; text-transform: uppercase; color: #9ca3af; }
.x-card-price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 2px 10px; margin-top: auto; text-align: center; }
.x-card-prefix { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--c-muted); }
.x-card-amount { font-size: 17px; font-weight: 600; color: var(--x-copper); }

/* --------------------------------------------------------------------------
   5. Listing pages (partials/listing.blade.php)
   -------------------------------------------------------------------------- */
.x-page { width: 80%; max-width: 1650px; margin: 0 auto; padding: 18px 0 40px; }
@media (max-width: 1530px) { .x-page { width: 90%; } }
@media (max-width: 800px)  { .x-page { width: 100%; padding: 14px 16px 32px; } }
.x-crumbs { display: flex; gap: 10px; margin-bottom: 18px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); }
.x-crumbs a { color: var(--c-muted) !important; }
.x-crumbs a:hover { color: var(--x-copper) !important; }
.x-crumbs span:last-child { color: var(--c-heading); }

.x-listing { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 36px; align-items: start; }
@media (max-width: 900px) { .x-listing { grid-template-columns: 1fr; gap: 20px; } }

.x-panel {
  background: var(--x-panel); border-radius: 12px; padding: 18px; position: sticky; top: 16px;
  /* never taller than the screen: with several filter groups open the panel scrolls on its own */
  max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--c-line-strong) transparent;
}
.x-panel::-webkit-scrollbar { width: 6px; }
.x-panel::-webkit-scrollbar-thumb { background: var(--c-line-strong); border-radius: 3px; }
@media (max-width: 900px) { .x-panel { position: static; max-height: none; overflow: visible; } .x-panel-block:not(:first-of-type) { display: none; } }
.x-panel-title { display: block; margin: 0 0 10px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--c-heading); }
.x-panel-block { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--c-line); }
.x-panel-search input {
  width: 100%; height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--c-line);
  background: var(--c-bg); color: var(--c-text); font-size: 14px;
}
.x-panel-search input:focus { outline: none; border-color: var(--x-copper); }
.x-panel-cats { list-style: none; margin: 0 !important; padding: 0 !important; }
.x-panel-cats a {
  display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; margin: 0 -10px; border-radius: 8px;
  font-size: 14px; color: var(--c-text) !important; text-decoration: none !important;
}
.x-panel-cats a:hover { background: rgba(127, 127, 127, .12); color: var(--c-heading) !important; }
.x-panel-cats a.is-active { color: var(--x-copper) !important; font-weight: 600; }
.x-panel-count { font-size: 12px; font-weight: 600; color: var(--c-muted); }
.x-panel-usps { list-style: none; margin: 0 !important; padding: 0 !important; }
.x-panel-usps li { position: relative; padding: 4px 0 4px 24px; font-size: 13px; color: var(--c-text); }
.x-panel-usps li::before { content: ""; position: absolute; left: 3px; top: 9px; width: 10px; height: 5px; border: solid #22c55e; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.x-panel-contact a { display: block; font-size: 14px; padding: 2px 0; color: var(--c-text) !important; }
.x-panel-contact a:hover { color: var(--x-copper) !important; }

.x-head { margin-bottom: 18px; }
.x-title { margin: 0 0 10px !important; font-size: 26px !important; font-weight: 600 !important; line-height: 1.25 !important; text-transform: uppercase; color: var(--x-copper) !important; }
.x-intro { margin: 0; max-width: 900px; font-size: 14px; line-height: 1.7; color: var(--c-copy); }
.x-count { margin: 0 0 22px; padding-bottom: 12px; border-bottom: 1px solid var(--c-line); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--c-muted); }
.x-empty { padding: 48px 0; text-align: center; color: var(--c-muted); }
.x-pagination { margin-top: 28px; display: flex; justify-content: center; }
.infinite-scroll-status { clear: both; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 28px 0; font-size: 14px; color: var(--c-muted); }
.infinite-spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--c-line); border-top-color: var(--x-copper); animation: x-spin .8s linear infinite; }
@keyframes x-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   6. Home (partials/home-sections.blade.php)
   -------------------------------------------------------------------------- */
.x-home .m-sec { margin-top: 64px; }
.x-hero { margin-top: 24px; }
.x-hero-media { display: block; border-radius: 14px; overflow: hidden; }
.x-hero-media img { display: block; width: 100%; height: auto; }

.x-intro-row { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start; margin-top: 44px; }
@media (max-width: 960px) { .x-intro-row { grid-template-columns: 1fr; } }
.x-intro-text { font-size: 15px; line-height: 1.75; color: var(--c-copy); }
.x-intro-text #assortiment_xxlgifts,
.x-intro-text h1,
.x-intro-text h3 {
  margin: 0 0 14px !important; font-size: 28px !important; font-weight: 600 !important; line-height: 1.25 !important;
  text-transform: uppercase; color: var(--x-copper) !important; text-align: left !important;
}
.x-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.x-side-panel { background: var(--x-panel); border-radius: 14px; padding: 22px; box-shadow: var(--c-shadow); }
.x-side-kicker { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: #8cb74e; }
.x-side-title { margin: 4px 0 16px; font-size: 18px; font-weight: 600; text-transform: uppercase; color: var(--x-copper); }
.x-steps { list-style: none; margin: 0 0 20px !important; padding: 0 !important; display: grid; gap: 12px; }
.x-steps li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--c-text); }
.x-steps span {
  flex: 0 0 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px dashed var(--x-copper); color: var(--x-copper); font-weight: 600; font-size: 13px;
}
.x-side-note { margin: 12px 0 0; font-size: 12px; text-align: center; color: var(--c-muted); }

.x-cats-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 180px)); justify-content: center; gap: 28px; list-style: none; margin: 0 !important; padding: 0 !important; }
.x-cats-list a { display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none !important; }
.x-cats-list .x-card-tile { max-width: 170px; margin-bottom: 12px; }
.x-cats-list a:hover .x-card-tile { transform: translateY(-4px); background: var(--x-tile-hover); }
.x-cats-list a:hover .x-card-circle img { transform: scale(1.12); }
.x-cats-name { font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--c-heading); }
.x-cats-list a:hover .x-cats-name { color: var(--x-copper); }
.x-cats-count { font-size: 12px; color: var(--c-muted); }

/* assortment tabs: pills, copper when active */
.x-tabs .m-tabs-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 28px; border: 0 !important; }
.x-tabs .m-tab {
  padding: 9px 18px !important; border-radius: 999px !important; border: 1px solid var(--c-line) !important;
  background: transparent !important; color: var(--c-text) !important;
  font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase; letter-spacing: .06em;
}
.x-tabs .m-tab[aria-selected="true"] { background: var(--x-copper) !important; border-color: var(--x-copper) !important; color: var(--x-on-copper) !important; }
.x-tabs .m-tabs-more { margin-top: 30px; text-align: center; }

/* --------------------------------------------------------------------------
   7. Quote form (configurator, .cfg-*) and offerte pages follow the copper accent
   -------------------------------------------------------------------------- */
html[data-theme] .cfg {
  --cfg-accent: var(--x-copper);
  --cfg-accent-dark: var(--x-copper-hover);
  --cfg-accent-soft: rgba(216, 154, 99, .18);
  --cfg-accent-text: var(--x-copper);
  --cfg-on-accent: var(--x-on-copper);
}
html .cfg .cfg-head { background: var(--x-copper); color: var(--x-on-copper); }
html .cfg .cfg-btn-primary { border-radius: 999px; text-transform: uppercase; letter-spacing: .05em; }
html .cfg .cfg-step { border: 1.5px dashed var(--x-copper); background: transparent; }

/* --------------------------------------------------------------------------
   8. Product page (show_product.blade.php): breadcrumb, step bar, heading
   -------------------------------------------------------------------------- */
.x-crumbs--product { margin: 4px 0 14px; flex-wrap: wrap; }
.x-crumbs--product span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60ch; }
.x-stepbar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 26px; }
.x-stepbar-step {
  display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 18px; border-radius: 8px;
  background: var(--x-panel); color: var(--c-text) !important; text-decoration: none !important;
}
.x-stepbar-nr { font-size: 12px; font-weight: 600; text-transform: uppercase; opacity: .8; }
.x-stepbar-label { font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.x-stepbar-step.is-active { background: var(--x-copper); color: var(--x-on-copper) !important; }
a.x-stepbar-step:hover { background: var(--x-tile-hover); }
@media (max-width: 640px) { .x-stepbar { grid-template-columns: 1fr; } .x-stepbar-step:not(.is-active) { display: none; } }

.x-product-head { clear: both; margin: 0 0 14px; }
.x-product-title {
  margin: 0 0 6px !important; font-size: 24px !important; font-weight: 600 !important; line-height: 1.25 !important;
  text-transform: uppercase; color: var(--c-heading) !important;
}
.x-product-price { font-size: 15px; color: var(--c-text); }
.x-product-price strong { font-size: 20px; font-weight: 600; color: var(--x-copper); }
.x-product-price s { margin-right: 6px; color: var(--c-muted); }
.x-product-price small { display: inline; margin-left: 8px; font-size: 12px; color: var(--c-muted); }

/* phone header: logo + theme, cart and phone icons fit; the mail icon goes (address is in the panel/footer) */
@media (max-width: 440px) { .header-action-left .header-action-2 > .header-action-icon-2:last-child { display: none !important; } }

/* --------------------------------------------------------------------------
   9. Home blocks: every section in its own bordered panel (.x-block)
   -------------------------------------------------------------------------- */
:root { --x-block-bg: #fafafa; --x-block-line: #e3e3e3; }
:root[data-theme="dark"] { --x-block-bg: #383838; --x-block-line: #4a4a4a; }

.x-home .x-block {
  margin: 24px 0 0; padding: 40px 36px;
  background: var(--x-block-bg); border: 1px solid var(--x-block-line); border-radius: 16px;
}
.x-home .x-block:last-child { margin-bottom: 24px; }
.x-home .x-block--flush { padding: 0; overflow: hidden; }
.x-home .x-block .x-section-title { margin-bottom: 26px !important; }
.x-home .x-hero .x-hero-media { border-radius: 0; }
.x-home .x-intro-row { margin-top: 24px; }
.x-home .x-side-panel { background: var(--x-panel); box-shadow: none; border: 1px solid var(--x-block-line); }
@media (max-width: 760px) { .x-home .x-block { padding: 28px 18px; border-radius: 12px; margin-top: 16px; } }

/* USP cards */
.x-usp-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: 0 !important; }
.x-usp { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 30px 22px; text-align: center; }
.x-usp + .x-usp { border-left: 1px solid var(--x-block-line); }
.x-usp svg { width: 36px; height: 36px; margin-bottom: 6px; fill: none; stroke: var(--x-copper); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.x-usp strong { font-size: 15px; font-weight: 600; color: var(--c-heading); }
.x-usp span { font-size: 13px; line-height: 1.55; color: var(--c-muted); }
@media (max-width: 900px) {
  .x-usp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .x-usp:nth-child(3) { border-left: 0; }
  .x-usp:nth-child(n+3) { border-top: 1px solid var(--x-block-line); }
}
@media (max-width: 480px) {
  .x-usp { padding: 20px 12px; }
  .x-usp span { font-size: 12px; }
}
@media (max-width: 560px) {
  .x-cats-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
}

/* badges on the product cards */
/* corner ribbon: a triangle filling the tile's rounded top-left corner (same 30px radius), text on the diagonal */
.x-ribbon {
  position: absolute; top: 0; left: 0; z-index: 1; width: 32%; aspect-ratio: 1 / 1;
  border-top-left-radius: 30px; overflow: hidden; pointer-events: none;
  background: linear-gradient(135deg, var(--x-ribbon-bg) 50%, transparent 50%);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3));
}
.x-ribbon > span {
  position: absolute; left: 36%; top: 36%; transform: translate(-50%, -50%) rotate(-45deg);
  white-space: nowrap; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; line-height: 1;
  color: var(--x-ribbon-text);
}
.x-ribbon--bestseller { --x-ribbon-bg: var(--x-copper); --x-ribbon-text: var(--x-on-copper); }
.x-ribbon--eco { --x-ribbon-bg: #8cb74e; --x-ribbon-text: #ffffff; }
@media (max-width: 760px) { .x-ribbon { width: 29%; border-top-left-radius: 24px; } .x-ribbon > span { font-size: 7.5px; letter-spacing: .02em; } }

/* FAQ + contact */
.x-faq-row { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; align-items: start; }
@media (max-width: 960px) { .x-faq-row { grid-template-columns: 1fr; } }
.x-section-title--left { text-align: left !important; }
.x-faq-item { border-bottom: 1px solid var(--x-block-line); }
.x-faq-item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0;
  cursor: pointer; list-style: none; font-size: 15px; font-weight: 600; color: var(--c-heading);
}
.x-faq-item summary::-webkit-details-marker { display: none; }
.x-faq-item summary::after { content: "+"; flex: 0 0 auto; font-size: 22px; font-weight: 400; line-height: 1; color: var(--x-copper); transition: transform .2s; }
.x-faq-item[open] summary::after { transform: rotate(45deg); }
.x-faq-item summary:hover { color: var(--x-copper); }
.x-faq-item p { margin: 0 0 16px; font-size: 14px; line-height: 1.7; color: var(--c-copy); }
.x-faq-more { margin: 18px 0 0; font-size: 14px; }
.x-faq-more a { color: var(--x-copper) !important; font-weight: 600; }

.x-contact { display: grid; gap: 12px; padding: 22px; background: var(--x-panel); border: 1px solid var(--x-block-line); border-radius: 14px; }
.x-contact-person { display: flex; align-items: center; gap: 14px; }
.x-contact-person img { flex: 0 0 64px; width: 64px; height: 64px; border-radius: 50%; background: #555; object-fit: cover; }
.x-contact-person p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--c-text); }
.x-review { margin-top: 6px; }
.x-review-label { margin-bottom: 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--c-muted); }
.x-review iframe { display: block; width: 100%; max-width: 320px; height: 76px; border: 0; border-radius: 17px; background: #111a1f; color-scheme: dark; }

.x-logos .x-section-title { margin-bottom: 8px !important; }

/* --------------------------------------------------------------------------
   10. Listing filters (left panel) + toolbar (count, sort, active chips)
   -------------------------------------------------------------------------- */
.x-filters.is-busy { opacity: .6; pointer-events: none; }
.x-filters-head { display: flex; justify-content: space-between; align-items: center; }
.x-filters-head .x-panel-title { margin: 0; }
.x-filters-reset { font-size: 12px; font-weight: 600; color: var(--x-copper) !important; }

.x-filter { border-top: 1px solid var(--c-line); }
.x-filter summary {
  display: flex; align-items: center; gap: 8px; padding: 13px 0; cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--c-heading);
}
.x-filter summary::-webkit-details-marker { display: none; }
.x-filter summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border: solid var(--c-muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s; }
.x-filter[open] summary::after { transform: rotate(-135deg); }
.x-filter-n { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--x-copper); color: var(--x-on-copper); font-size: 11px; letter-spacing: 0; display: inline-flex; align-items: center; justify-content: center; }
.x-filter > :not(summary) { margin-bottom: 14px; }

/* checkbox rows */
.x-checks { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 2px; }
.x-check { display: flex; align-items: center; gap: 10px; margin: 0; padding: 5px 0; cursor: pointer; font-size: 14px; font-weight: 400; color: var(--c-text); }
.x-check input, .x-swatch input, .x-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.x-check-box { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--c-line-strong); position: relative; transition: all .15s; }
.x-check input:checked + .x-check-box { background: var(--x-copper); border-color: var(--x-copper); }
.x-check input:checked + .x-check-box::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--x-on-copper); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.x-check input:focus-visible + .x-check-box { outline: 2px solid var(--x-copper); outline-offset: 2px; }
.x-check:hover .x-check-label { color: var(--c-heading); }
.x-check-label { flex: 1; min-width: 0; }
.x-check.is-empty, .x-swatch.is-empty { opacity: .45; }

/* colour swatches */
.x-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 10px 6px; }
.x-swatch { display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 0; cursor: pointer; font-weight: 400; }
.x-swatch-dot { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(127, 127, 127, .45); box-shadow: 0 0 0 3px transparent; transition: box-shadow .15s; }
.x-swatch:hover .x-swatch-dot { box-shadow: 0 0 0 3px var(--c-line); }
.x-swatch input:checked + .x-swatch-dot { box-shadow: 0 0 0 3px var(--x-copper); }
.x-swatch input:focus-visible + .x-swatch-dot { outline: 2px solid var(--x-copper); outline-offset: 4px; }
.x-swatch-name { font-size: 11px; line-height: 1.2; text-align: center; color: var(--c-muted); }
.x-swatch input:checked ~ .x-swatch-name { color: var(--c-heading); font-weight: 600; }

/* on/off switch */
.x-switch { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 4px 0; cursor: pointer; font-weight: 400; }
.x-switch-track { flex: 0 0 36px; width: 36px; height: 20px; border-radius: 10px; background: var(--c-line-strong); position: relative; transition: background .2s; }
.x-switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #ffffff; transition: transform .2s; }
.x-switch input:checked + .x-switch-track { background: #8cb74e; }
.x-switch input:checked + .x-switch-track::after { transform: translateX(16px); }
.x-switch input:focus-visible + .x-switch-track { outline: 2px solid var(--x-copper); outline-offset: 2px; }
.x-switch-label { flex: 1; font-size: 14px; color: var(--c-text); }

/* toolbar above the grid */
.x-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--c-line); }
.x-toolbar .x-count { margin: 0; padding: 0; border: 0; }
.x-count-of { color: var(--c-muted); font-weight: 400; text-transform: none; letter-spacing: 0; }
.x-sort { display: flex; align-items: center; gap: 8px; margin: 0; }
.x-sort label { margin: 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); }
.x-sort select { height: 36px; padding: 0 30px 0 12px; border-radius: 8px; border: 1px solid var(--c-line); background-color: var(--c-bg); color: var(--c-text); font-size: 13px; cursor: pointer; }
.x-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.x-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--x-panel); border: 1px solid var(--c-line); font-size: 12px; font-weight: 600; color: var(--c-text) !important; text-decoration: none !important; }
.x-chip span { font-size: 15px; line-height: 1; color: var(--x-copper); }
.x-chip:hover { border-color: var(--x-copper); }
.x-toolbar + .x-grid, .x-toolbar + #product-grid { margin-top: 22px !important; }

/* phone: filters stay in the panel (shown), the promises/contact blocks are hidden */
@media (max-width: 900px) {
  .x-panel-block:not(:first-of-type) { display: block; }
  .x-panel-contact { display: none !important; }
  .x-filter:not([open]) + .x-filter { border-top: 1px solid var(--c-line); }
}
@media (max-width: 560px) { .x-toolbar { flex-wrap: wrap; } }

/* phone: the panel is closed by default and opened with the "Filters & categorieën" button */
.x-panel-toggle { display: none; }
@media (max-width: 900px) {
  .x-panel-toggle {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 18px; border: 1px solid var(--c-line); border-radius: 12px;
    background: var(--x-panel); color: var(--c-heading); cursor: pointer;
    font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  }
  .x-panel-toggle::after { content: ""; margin-left: auto; width: 7px; height: 7px; border: solid var(--c-muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .2s; }
  .x-panel-toggle[aria-expanded="true"]::after { transform: rotate(-135deg); }
  .x-panel-toggle:focus-visible { outline: 2px solid var(--x-copper); outline-offset: 2px; }
  .x-panel:not(.is-open) { display: none; }
  .x-listing { gap: 12px; }
  .x-listing > .x-main { margin-top: 8px; }
}

/* --------------------------------------------------------------------------
   11. Header on scroll (like xxlgifts.com; script in partials/nav.blade.php)
       at the top: full header | scrolling down: hidden | scrolling up: compact
   -------------------------------------------------------------------------- */
.header-area.x-fixed-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  transition: transform .3s ease, box-shadow .3s ease;
}
.header-area.x-fixed-header:not(.is-top) { box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.header-area.x-fixed-header.is-hidden { transform: translateY(-100%); box-shadow: none; }
/* compact = no announcement bar; desktop also drops the menu row (logo, search, cart stay) */
.header-area.x-fixed-header:not(.is-top) .m-topbar { display: none !important; }
@media (min-width: 992px) {
  .header-area.x-fixed-header:not(.is-top) .header-bottom { display: none !important; }
}
/* the template's own "sticky menu row" is replaced by this */
.header-area.x-fixed-header .sticky-bar.stick {
  position: static !important; animation: none !important; box-shadow: none !important; border-bottom: 0 !important;
}
/* sticky filter panel sits below the compact header while that is shown */
.x-panel { top: calc(var(--x-head-h, 0px) + 16px); transition: top .3s ease; }

/* compact header (scrolling up) - one slim row like xxlgifts.com: small logo, short search, icons only */
@media (min-width: 992px) {
  .header-area.x-fixed-header:not(.is-top) .header-middle.header-middle-ptb-1 { padding: 8px 0 !important; }
  .header-area.x-fixed-header:not(.is-top) .header-middle .logo.logo-width-1 { flex: 0 0 150px; }
  .header-area.x-fixed-header:not(.is-top) .header-middle .logo.logo-width-1 a img { max-width: 150px; }
  .header-area.x-fixed-header:not(.is-top) .header-middle .search-style-2 input[type="text"] { height: 36px !important; min-height: 36px !important; font-size: 13px !important; }
  .header-area.x-fixed-header:not(.is-top) .header-middle .search-style-2 form .m-search-btn { width: 28px !important; height: 28px !important; right: 4px !important; }
  .header-area.x-fixed-header:not(.is-top) .header-middle .search-style-2 form .m-search-btn svg { width: 14px; height: 14px; }
  .header-area.x-fixed-header:not(.is-top) .header-middle .hotline p { font-size: 0 !important; gap: 0 !important; }   /* e-mail address -> icon only */
  .header-area.x-fixed-header:not(.is-top) .header-middle .hotline p svg { width: 20px !important; height: 20px !important; }
  .header-area.x-fixed-header:not(.is-top) .header-middle .header-right { gap: 16px; }
  .header-area.x-fixed-header:not(.is-top) .header-middle .m-theme-toggle { width: 32px !important; height: 32px !important; }
}
/* phone compact row: less padding, smaller logo */
@media (max-width: 991px) {
  .header-area.x-fixed-header:not(.is-top) .header-bottom .header-wrap.main-nav { padding: 6px 15px !important; min-height: 0 !important; }
  .header-area.x-fixed-header:not(.is-top) .header-bottom .logo img { max-height: 30px !important; width: auto !important; }
}

/* SEO: the main heading of the info pages is now an <h1> (was an <h3>) - same look */
.m-page-h1 { margin: 0 0 16px !important; font-size: 26px !important; font-weight: 600 !important; line-height: 1.3 !important; text-transform: uppercase; color: var(--x-copper) !important; }

/* ---- fix-catalog 2026-09-30 ---------------------------------------------------------------- */
/* infinite scroll: end line once every product is loaded */
.infinite-scroll-end { font-weight: 500; color: var(--c-muted); border-top: 1px solid var(--c-line); margin-top: 18px; }

/* /bedankt: reference, "Wat gebeurt er nu?" (same steps as the confirmation mail), logo note.
   Long selectors: modern.css styles every p in #Index-Main-Container with an id-level :not() + !important. */
.x-thanks { max-width: 760px; margin: 8px 0 32px; text-align: left; }
html body #Index-Main-Container #x-thanks .x-thanks-ref { margin: 0 0 6px !important; font-size: 22px !important; color: var(--c-text) !important; }
html body #Index-Main-Container #x-thanks .x-thanks-ref strong { color: var(--x-copper); letter-spacing: .03em; }
html body #Index-Main-Container #x-thanks .x-thanks-sub { margin: 0 0 18px !important; font-size: 14px !important; color: var(--c-muted) !important; }
html body #Index-Main-Container #x-thanks .x-thanks-when { margin: 0 0 22px !important; font-size: 16px !important; font-weight: 600; color: var(--c-text) !important; }
html body #Index-Main-Container #x-thanks .x-thanks-panel { background: var(--x-panel); border: 1px solid var(--c-line); border-radius: 14px; padding: 22px 24px; margin: 0 0 22px; }
html body #Index-Main-Container #x-thanks .x-thanks-title { margin: 0 0 16px !important; font-size: 18px !important; font-weight: 600 !important; text-transform: uppercase; color: var(--x-copper) !important; }
html body #Index-Main-Container #x-thanks .x-thanks-steps { list-style: none; margin: 0 0 18px !important; padding: 0 !important; display: grid; gap: 14px; }
html body #Index-Main-Container #x-thanks .x-thanks-steps > li {  /* the old theme styles every li in .box-category (fixed width, centred) */
  display: flex !important; align-items: flex-start; gap: 14px; width: auto !important; max-width: none !important; float: none !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; text-align: left !important;
}
html body #Index-Main-Container #x-thanks .x-thanks-steps > li > div { flex: 1 1 auto; min-width: 0; text-align: left; }
html body #Index-Main-Container #x-thanks .x-thanks p { line-height: 1.55 !important; }
html body #Index-Main-Container #x-thanks .x-thanks-steps strong { display: block; color: var(--c-text); font-size: 15px; }
html body #Index-Main-Container #x-thanks .x-thanks-steps p { margin: 2px 0 0 !important; font-size: 14px !important; color: var(--c-muted) !important; }
html body #Index-Main-Container #x-thanks .x-thanks-n {
  flex: 0 0 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--x-copper); color: var(--x-on-copper); font-weight: 600; font-size: 14px;
}
html body #Index-Main-Container #x-thanks .x-thanks-logo { margin: 0 !important; padding-top: 14px; border-top: 1px solid var(--c-line); font-size: 14px; color: var(--c-text) !important; }
html body #Index-Main-Container #x-thanks .x-thanks-contact { padding: 0 !important; font-size: 14px; color: var(--c-muted) !important; }
html body #Index-Main-Container #x-thanks .x-thanks-contact a { color: var(--x-copper) !important; }
@media (max-width: 600px) {
  html body #Index-Main-Container #x-thanks .x-thanks-ref { font-size: 19px !important; }
  html body #Index-Main-Container #x-thanks .x-thanks-panel { padding: 18px 16px; }
}

/* 2026-09-30: legacy main.css zet button[type=submit]:hover op teal (!important); koperen knoppen blijven koper */
#offertex:hover, .om-submit:hover, .x-btn:hover, .x-btn:focus-visible,
#offertex:active, .om-submit:active { background-color: var(--x-copper-hover) !important; color: var(--x-on-copper) !important; border-color: var(--x-copper-hover) !important; }
/* scroll-naar-boven: zichtbare pijl in beide thema's, hover in koper, op de telefoon boven de sticky prijsbalk en kleiner */
#scrollUp { color: #ffffff !important; font-size: 18px !important; opacity: .9; }
#scrollUp:hover { background-color: var(--x-copper) !important; color: var(--x-on-copper) !important; }
@media (max-width: 767px) { #scrollUp { width: 36px !important; height: 36px !important; line-height: 36px !important; right: 10px !important; bottom: 74px !important; } }