/* =====================================================================
   KINDERSHOP – Home page sections (mobile-first)
   Region CSS classes:
     Girl      → ks-cat ks-girl
     Boy       → ks-cat ks-boy
     New Born  → ks-cat ks-newborn
     Toys      → ks-cat ks-toys
     Other home sections → ks-sec
   View All buttons → CSS class ks-viewall, Hot = No
   ===================================================================== */

/* ---------- Colours per section (border + text only) ---------- */
.ks-girl   { --ks-border:#F6C6D6; --ks-accent:#C2185B; --ks-accent-dark:#8E1245; }
.ks-boy    { --ks-border:#C7DAF4; --ks-accent:#1F5FBF; --ks-accent-dark:#164A96; }
.ks-newborn{ --ks-border:#C3E5D2; --ks-accent:#2E7D5B; --ks-accent-dark:#215C43; }
.ks-toys   { --ks-border:#F3D6A4; --ks-accent:#B45309; --ks-accent-dark:#8A3F06; }

/* side space between the section border and the cards */
.ks-cat{ --ks-pad:8px; }

/* ---------- Equal spacing between all home sections ---------- */
.ks-sec,
.ks-cat{ margin:0 12px 24px !important; }
.ks-sec{ background:transparent !important; border:0 !important; box-shadow:none !important; }

/* ---------- Section box: no fill, 1px light border ---------- */
.ks-cat{
  background:transparent !important;
  border:1px solid var(--ks-border, #E5E7EB) !important;
  border-radius:20px !important;
  box-shadow:none !important;
  overflow:hidden;
}
.ks-cat > .t-Region-header,
.ks-cat > .t-Region-bodyWrap,
.ks-cat .t-Region-body,
.ks-cat .t-Region-buttons{
  background:transparent !important;
  border:0 !important;
}

/* ---------- Heading: centred, no underline, tight ---------- */
.ks-cat > .t-Region-header{
  display:flex;
  justify-content:center;
  min-height:0 !important;
  padding:16px 16px 0px !important;
}
.ks-cat > .t-Region-header .t-Region-headerItems--title{ flex:1; text-align:center; }
.ks-cat > .t-Region-header .t-Region-title{
  margin:0 !important;
  padding:0 !important;
  font-size:21px;
  font-weight:800;
  letter-spacing:.3px;
  line-height:1.2;
  color:var(--ks-accent-dark);
}

/* ---------- Body: no extra top gap, equal left/right space ---------- */
.ks-cat > .t-Region-bodyWrap > .t-Region-body{
  padding:0 var(--ks-pad) 0 !important;
}
/* nested regions / grid inside the section add no extra space */
.ks-cat .t-Region{
  margin:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.ks-cat .t-Region .t-Region-body{ padding:0 !important; }
.ks-cat .t-Region .t-Region-header{ min-height:0 !important; }
.ks-cat .container,
.ks-cat .row{ margin:0 !important; padding:0 !important; }
.ks-cat .col{ padding:0 !important; }
.ks-cat .t-Region-body > *:first-child{ margin-top:0 !important; }

/* ---------- Product cards ---------- */
.ks-cat .a-CardView-items{
  margin:0 !important;
  padding:0 !important;
  width:100% !important;
  box-sizing:border-box;
  gap:10px !important;
}
.ks-cat .a-CardView,
.ks-cat .t-Card .t-Card-wrap{
  background:#fff !important;
  border:0 !important;
  border-radius:14px !important;
  overflow:hidden;
  box-shadow:0 1px 4px rgba(0,0,0,.06) !important;
  transition:box-shadow .15s ease, transform .15s ease;
}
.ks-cat .a-CardView:hover,
.ks-cat .t-Card .t-Card-wrap:hover{
  box-shadow:0 6px 18px rgba(0,0,0,.10) !important;
  transform:translateY(-2px);
}

/* ---------- Card action buttons (Add to Cart etc.) ---------- */
.ks-cat .a-CardView-button{
  min-height:40px;
  border-radius:10px !important;
  font-weight:600;
  background:var(--ks-accent) !important;
  color:#fff !important;
  border:0 !important;
}
.ks-cat .a-CardView-actions .a-CardView-button{ width:100%; justify-content:center; }

/* ---------- Bottom button area ---------- */
.ks-cat .t-Region-buttons{
  display:block !important;
  padding:6px 16px 4px !important;
}

/* ---------- "View all" – centred underlined link ---------- */
.t-Region-buttons-left:has(.ks-viewall),
.t-Region-buttons-right:has(.ks-viewall){
  float:none !important;
  width:100% !important;
  display:flex !important;
  justify-content:center !important;
}
.t-Button.ks-viewall{
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:fit-content !important;
  min-height:44px;
  margin:6px auto 12px !important;
  padding:0 12px !important;
  float:none !important;
  position:static !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  color:var(--ks-accent, #1F5FBF) !important;
  font-size:15px !important;
  font-weight:700 !important;
  letter-spacing:.2px;
}
.t-Button.ks-viewall .t-Button-label{
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:5px;
}
.t-Button.ks-viewall .t-Button-label::after{
  content:"\203A";
  display:inline-block;
  margin-left:6px;
  font-size:18px;
  text-decoration:none;
}
.t-Button.ks-viewall:hover{
  background:transparent !important;
  color:var(--ks-accent-dark, #164A96) !important;
}
.t-Button.ks-viewall:hover .t-Button-label{ text-decoration-thickness:2.5px; }
.t-Button.ks-viewall:focus-visible{
  outline:2px solid var(--ks-accent-dark, #164A96);
  outline-offset:2px;
  border-radius:6px !important;
}

/* ---------- Larger screens ---------- */
@media (min-width:768px){
  .ks-cat{ --ks-pad:16px; }
  .ks-sec,
  .ks-cat{ margin:0 24px 32px !important; }
  .ks-cat > .t-Region-header .t-Region-title{ font-size:24px; }
}





/* =====================================================================
   Shop by occasion  /  Shop for men – same spacing as the other sections
   ===================================================================== */

/* ---------- Shop by occasion ---------- */
.ks-occasion{
  margin:0 12px 24px !important;
  padding:0 !important;
}
.ks-occasion img{
  display:block;
  width:100%;
  border-radius:14px;
}
.ks-occasion > *{
  border-radius:16px;
}

/* ---------- Shop for men: intro card ("Dress dad too") ---------- */
.ks-men-intro{
  margin:0 12px 12px !important;
  padding:18px 16px !important;
  border-radius:20px !important;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}

/* ---------- Shop for men: product tiles ---------- */
.ks-men-tiles{
  margin:0 0 24px !important;
  padding:0 12px !important;
  gap:10px !important;
  box-sizing:border-box;
}
.ks-men-tiles > *{
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.ks-men-tiles img{
  display:block;
  width:100%;
}

/* If these sit inside a region that already has ks-sec,
   don't add the side margin twice */
.ks-sec .ks-occasion,
.ks-sec .ks-men-intro{ margin-left:0 !important; margin-right:0 !important; }
.ks-sec .ks-men-tiles{ padding-left:0 !important; padding-right:0 !important; }

/* ---------- Larger screens ---------- */
@media (min-width:768px){
  .ks-occasion{ margin:0 24px 32px !important; }
  .ks-men-intro{ margin:0 24px 16px !important; padding:24px !important; }
  .ks-men-tiles{ padding:0 24px !important; margin-bottom:32px !important; }
}