/* Spilled Ink 1.1E
   Unified 5-item quality row + correct dedicated modals for Stripe and Delivery. */

/* Keep slightly smaller Subscribe. */
#home .si-hero-subscribe > a{
  font-size:.68rem !important;
  letter-spacing:.13em !important;
  padding-bottom:1px !important;
}

#home #spilledOnlyBottomBar{
  width:100%;
}

#home #spilledOnlyBottomBar .spilled-quality{
  min-width:0;
}

/* New two items: same typography/layout as existing row, but gold accent
   to visually match the established quality icon language. */
#home #spilledOnlyBottomBar .spilled-quality-payment .spilled-quality-icon,
#home #spilledOnlyBottomBar .spilled-quality-delivery .spilled-quality-icon,
#home #spilledOnlyBottomBar .spilled-quality-payment strong,
#home #spilledOnlyBottomBar .spilled-quality-delivery strong{
  color:#c99a43 !important;
}

/* Preserve the existing muted descriptive copy. */
#home #spilledOnlyBottomBar .spilled-quality-payment em,
#home #spilledOnlyBottomBar .spilled-quality-delivery em{
  color:inherit;
}

/* Wide screens: all 5 matching quality items on one row. */
@media (min-width:1101px){
  #home #spilledOnlyBottomBar{
    display:grid !important;
    grid-template-columns:auto repeat(5,minmax(0,1fr)) !important;
    align-items:stretch !important;
  }

  #home #spilledOnlyBottomBar .spilled-social{
    min-width:92px;
  }

  #home #spilledOnlyBottomBar .spilled-quality{
    width:auto !important;
  }
}

/* Medium screens. */
@media (max-width:1100px) and (min-width:641px){
  #home #spilledOnlyBottomBar{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
  }

  #home #spilledOnlyBottomBar .spilled-social{
    grid-column:1 / -1;
    justify-self:center;
  }
}

/* Mobile. */
@media (max-width:640px){
  #home #spilledOnlyBottomBar{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  #home #spilledOnlyBottomBar .spilled-social{
    grid-column:1 / -1;
    justify-self:center;
  }

  #home #spilledOnlyBottomBar .spilled-quality:last-child{
    grid-column:1 / -1;
  }

  #home .si-hero-subscribe > a{
    font-size:.64rem !important;
  }
}

/* -------- Dedicated Stripe / Delivery modal -------- */
.si-extra-info-modal{
  position:fixed;
  inset:0;
  z-index:10050;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.76);
  backdrop-filter:blur(4px);
}

.si-extra-info-modal.open{
  display:flex;
}

.si-extra-info-panel{
  position:relative;
  width:min(690px,calc(100vw - 32px));
  max-height:min(86vh,760px);
  overflow:auto;
  background:#0a0907;
  color:#ece7de;
  border:1px solid rgba(201,154,67,.58);
  box-shadow:
    0 24px 80px rgba(0,0,0,.66),
    inset 0 0 0 10px rgba(201,154,67,.035);
}

.si-extra-info-head{
  display:grid;
  grid-template-columns:76px minmax(0,1fr) 42px;
  align-items:center;
  gap:18px;
  padding:26px 28px 24px;
  border-bottom:1px solid rgba(201,154,67,.28);
}

.si-extra-info-badge{
  width:68px;
  height:68px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:#d2a24a;
  border:1px solid rgba(201,154,67,.55);
  background:
    radial-gradient(circle at 50% 50%,rgba(201,154,67,.15),rgba(201,154,67,.035) 65%,transparent 66%);
  box-shadow:0 0 26px rgba(201,154,67,.10);
}

.si-extra-info-badge svg{
  width:33px;
  height:33px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.45;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.si-extra-info-kicker{
  margin:0 0 7px;
  color:#c99a43;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.si-extra-info-title{
  margin:0;
  color:#f0ebe1;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(28px,4vw,39px);
  line-height:1.08;
  font-weight:400;
}

.si-extra-info-close{
  align-self:start;
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:#050504;
  color:#eee8dd;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}

.si-extra-info-close:hover,
.si-extra-info-close:focus-visible{
  border-color:#c99a43;
  color:#c99a43;
  outline:none;
}

.si-extra-info-body{
  padding:30px 36px 28px;
}

.si-extra-info-intro{
  margin:0 0 22px;
  color:#ece6da;
  font-family:Georgia,"Times New Roman",serif;
  font-size:18px;
  line-height:1.65;
}

.si-extra-info-rule{
  width:62px;
  height:1px;
  margin:0 0 20px;
  background:linear-gradient(90deg,#c99a43,rgba(201,154,67,.08));
}

.si-extra-info-list{
  list-style:none;
  padding:0;
  margin:0;
}

.si-extra-info-list li{
  position:relative;
  margin:0;
  padding:8px 0 8px 25px;
  color:#bdb6ab;
  font-size:14px;
  line-height:1.55;
}

.si-extra-info-list li::before{
  content:"◇";
  position:absolute;
  left:0;
  top:7px;
  color:#c99a43;
  font-size:14px;
}

.si-extra-info-footer{
  margin:0 12px 12px;
  padding:16px 20px;
  border-top:1px solid rgba(201,154,67,.22);
  color:#8f887f;
  font-size:10px;
  line-height:1.5;
  letter-spacing:.16em;
  text-align:center;
  text-transform:uppercase;
}

@media (max-width:600px){
  .si-extra-info-modal{
    padding:12px;
    align-items:flex-start;
    padding-top:7vh;
  }

  .si-extra-info-head{
    grid-template-columns:56px minmax(0,1fr) 38px;
    gap:13px;
    padding:20px 18px 18px;
  }

  .si-extra-info-badge{
    width:54px;
    height:54px;
  }

  .si-extra-info-badge svg{
    width:27px;
    height:27px;
  }

  .si-extra-info-title{
    font-size:28px;
  }

  .si-extra-info-body{
    padding:23px 22px 22px;
  }

  .si-extra-info-intro{
    font-size:16px;
  }

  .si-extra-info-list li{
    font-size:13px;
  }
}