/* ===============================
   BASE
   =============================== */
body{
  font-family: Arial, sans-serif;
  background:#f1f4f8;
  padding:20px;
  max-width:900px;
  margin:auto;
}

h1{
  text-align:center;
  margin-bottom:20px;
  font-weight:700;
  color:#222;
}

/* ===============================
   SEARCH
   =============================== */
form#searchForm{width:100%;text-align:center;margin-bottom:12px;}
form#searchForm input[type="text"]{
  width:350px;max-width:100%;
  padding:10px 12px;border-radius:12px;
  border:1px solid #ccc;font-size:16px;
  box-sizing:border-box;
}

/* ===============================
   FILTERS
   =============================== */
.filters{ text-align:center; margin-bottom:20px; }
.filters a,
.filters button{
  display:inline-block;
  padding:8px 16px;
  margin:0 6px;
  border-radius:20px;
  font-weight:600;
  color:#555;
  background:#ddd;
  border:none;
  cursor:pointer;
  transition:background-color .3s,color .3s;
}

.filters button.selected-all,
.filters button.selected-man,
.filters button.selected-woman,
.filters button.selected-unisex,
.filters button.selected-ritual{ color:#fff; }

.filters button.selected-all{background:#607d8b;}
.filters button.selected-man{background:#1e88e5;}
.filters button.selected-woman{background:#e91e63;}
.filters button.selected-unisex{background:#4caf50;}
.filters button.selected-ritual{background:#9c27b0;}

/* ===============================
   TABLE (SMART FIXED LAYOUT)
   =============================== */
table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,0.1);
  table-layout:fixed;              /* 🔑 strak */
}

th,td{
  padding:12px 15px;
  border-bottom:1px solid #eee;
  text-align:left;
  font-size:15px;
  color:#333;
  vertical-align:middle;
}

th{
  background:#273142;
  color:#fff;
  font-weight:600;
  letter-spacing:.2px;
}

tr:hover td{ background:#f9f9f9; }

/* Links */
a{ color:#1e88e5; font-weight:600; text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ===============================
   COLUMN SIZING (PRO LOOK)
   =============================== */
th.col-code, td.col-code{
  width:80px;
  white-space:nowrap;
  font-weight:600;
}

th.col-name, td.col-name{
  width:220px;                  /* naam krijgt vaste nette ruimte */
  white-space:normal;
  overflow-wrap:break-word;
  word-break:break-word;
}

th.col-inspired, td.col-inspired{
  width:auto;                   /* rest ruimte */
  white-space:normal;
  overflow-wrap:break-word;
  word-break:break-word;
}

th.col-image, td.col-image{
  width:90px;
  text-align:center;
  white-space:nowrap;
}

th.col-fragrantica, td.col-fragrantica{
  width:120px;
  text-align:center;
  white-space:nowrap;
}

th.col-category, td.col-category{
  width:120px;
  text-align:left;
  white-space:nowrap;
}

th.col-shop, td.col-shop{
  width:120px;
  text-align:center;
  white-space:nowrap;
}

/* ===============================
   STRIPES PER CATEGORY
   =============================== */
.custom-striped tr.row-man:nth-child(odd) td{ background-color:#cce5ff !important; }
.custom-striped tr.row-man:nth-child(even) td{ background-color:#e6f2ff !important; }

.custom-striped tr.row-woman:nth-child(odd) td{ background-color:#f8d7da !important; }
.custom-striped tr.row-woman:nth-child(even) td{ background-color:#fdecee !important; }

.custom-striped tr.row-unisex:nth-child(odd) td{ background-color:#d4edda !important; }
.custom-striped tr.row-unisex:nth-child(even) td{ background-color:#e9f7ef !important; }

.custom-striped tr.row-ritual:nth-child(odd) td{ background-color:#e2d6f3 !important; }
.custom-striped tr.row-ritual:nth-child(even) td{ background-color:#f3eafa !important; }

/* ===============================
   THUMB
   =============================== */
.perfume-thumb{
  width:45px;
  height:auto;
  border-radius:6px;
  display:block;
  margin:0 auto;
  cursor:pointer;
  touch-action:manipulation;
}


/* ===============================
   ACTIEKNOPPEN (primair)
   =============================== */
.btn-primary-action {
  background: #1e88e5;
  color: #ffffff !important;
  padding: 10px 25px;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s ease, transform 0.15s ease;
  white-space: nowrap;
}

.btn-primary-action:hover {
  background: #1565c0;
  transform: translateY(-1px);
}

/* Info knop – groen */
.btn-info-action {
  background: #28a745;       /* groen */
  border-color: #28a745;
}

.btn-info-action:hover {
  background: #218838;       /* donkerder groen */
  border-color: #1e7e34;
}

/* =====================================================
   FIX: KNOPPEN – ALLE TALEN (LIST + GRID)
   (plakt jouw issue dicht: Kup teraz / Acquista ora / Jetzt kaufen)
   ===================================================== */

/* 1) Knoppen in het algemeen (veilig) */
a.btn-primary-action,
a.btn-info-action,
.btn-info,
.btn-buy{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.1;
  white-space:nowrap;            /* ⛔ niet afbreken op desktop */
  overflow:hidden;
  text-overflow:ellipsis;
  box-sizing:border-box;
}

/* 2) LIST VIEW (TABEL): geef vaste minimum breedtes */
td.col-fragrantica a,
td.col-shop a{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  text-align:center;
  line-height:1.1;
  padding:10px 18px;
  border-radius:999px;
  text-decoration:none;
  white-space:nowrap !important;
  overflow:hidden;
  text-overflow:ellipsis;
  min-height:40px;
}

/* Info knop iets compacter */
td.col-fragrantica a.btn-info-action{
  min-width:86px;
}

/* Koop knop iets breder (ruimte voor 2-woorden talen) */
td.col-shop a.btn-primary-action{
  min-width:130px;
}

/* 3) GRID VIEW (FOTOWEERGAVE): als je daar .btn-info en .btn-buy gebruikt */
.card-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  flex-wrap:nowrap;              /* desktop: niet stapelen */
}

.card-actions .btn-info{
  min-width:86px;
  height:62px;
  border-radius:999px;
  padding:0 16px;
  background:#4caf50;
  color:#fff !important;
  font-weight:800;
}

.card-actions .btn-buy{
  min-width:140px;
  height:62px;
  border-radius:999px;
  padding:0 18px;
  background:#1e88e5;
  color:#fff !important;
  font-weight:800;
}

/* 4) MOBIEL: mag wrap als het echt nodig is (maar blijft mooi) */
@media (max-width:600px){
  .card-actions{ flex-wrap:wrap; }

  .card-actions .btn-info,
  .card-actions .btn-buy{
    white-space:normal;
    line-height:1.05;
    height:auto;
    padding:10px 16px;
  }

  td.col-fragrantica a,
  td.col-shop a{
    min-width:unset;
    padding:9px 16px;
  }
}

/* 5) Belangrijk: table nowrap mag de knop-cellen niet kapot maken */
td.col-fragrantica,
td.col-shop{
  white-space:normal !important;
  text-align:center;
}

/* =========================================
   GRID VIEW – KNOPPEN TERUG NAAR NORMAAL
   (fix voor Kup teraz / Acquista ora etc.)
   ========================================= */

/* Container */
.card-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
}

/* ALGEMENE GRID KNOP */
.card-actions a{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  font-size:14px;
  font-weight:700;
  border-radius:999px;
  white-space:nowrap;
  line-height:1;
  min-width:unset !important;
  height:auto !important;
}

/* Info knop (groen) */
.card-actions .btn-info{
  background:#4caf50;
  color:#fff !important;
  padding:10px 16px;
}

/* Koop knop (blauw) */
.card-actions .btn-buy{
  background:#1e88e5;
  color:#fff !important;
  padding:10px 18px;
}

/* =========================
   MOBIEL: iets compacter
   ========================= */
@media (max-width:600px){
  .card-actions{
    flex-wrap:wrap;
    gap:6px;
  }

  .card-actions a{
    font-size:13px;
    padding:9px 14px;
  }
}
/* =====================================================
   DEFINITIEVE GRID-KNOP FIX
   Desktop = Mobiel (zelfde gedrag & formaat)
   ===================================================== */

/* Actiecontainer */
.card-actions{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;              /* NOOIT stapelen */
}

/* Alle knoppen in grid */
.card-actions a{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  font-size:14px;
  font-weight:700;
  border-radius:999px;
  white-space:nowrap;            /* altijd 1 regel */
  line-height:1;
  min-width:unset !important;
  height:auto !important;
}

/* Info knop */
.card-actions .btn-info{
  background:#4caf50;
  color:#fff !important;
  padding:10px 16px;
}

/* Koop knop */
.card-actions .btn-buy{
  background:#1e88e5;
  color:#fff !important;
  padding:10px 18px;
}

/* ❌ BELANGRIJK: mobiel mag NIETS overschrijven */
@media (max-width:600px){
  .card-actions{
    flex-wrap:nowrap;
  }

  .card-actions a{
    padding:10px 18px;
    font-size:14px;
    white-space:nowrap;
  }
}