/* The Nut Shop - Contact Us page
   Mobile-first, lightweight, and intentionally contains no contact form. */

.contact-page{
  background:#fff;
}

.contact-page .site-header{
  box-shadow:0 4px 18px rgba(52,26,10,.035);
}

/* Hero */
.contact-hero{
  overflow:hidden;
  background:
    radial-gradient(circle at 90% 0%,rgba(205,153,79,.17),transparent 34%),
    linear-gradient(180deg,#fffaf2 0%,#fff 100%);
  border-bottom:1px solid #f0e2d0;
}

.contact-hero__inner{
  padding-top:15px;
  padding-bottom:28px;
}

.contact-breadcrumb{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:20px;
  color:var(--muted,#74675c);
  font-size:11px;
}

.contact-breadcrumb a{
  color:var(--brown-700,#6e3617);
  font-weight:800;
}

.contact-breadcrumb strong{
  color:var(--ink,#21170f);
}

.contact-hero__content{
  display:grid;
  gap:18px;
}

.contact-hero h1{
  margin:7px 0 10px;
  color:var(--brown-950,#321306);
  font-size:clamp(35px,10.5vw,58px);
  line-height:1.01;
  letter-spacing:-.045em;
}

.contact-hero p{
  max-width:680px;
  margin:0;
  color:var(--muted,#74675c);
  font-size:14px;
  line-height:1.65;
}

.contact-hero__wa{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:68px;
  padding:11px 14px;
  border-radius:18px;
  color:#fff;
  background:linear-gradient(135deg,var(--green,#287722),#3d902b);
  box-shadow:0 14px 30px rgba(36,121,31,.19);
}

.contact-hero__wa-icon{
  width:43px;
  height:43px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:rgba(255,255,255,.15);
}

.contact-hero__wa-icon svg{
  width:25px;
  height:25px;
  fill:currentColor;
}

.contact-hero__wa>span:last-child{
  display:grid;
  gap:2px;
}

.contact-hero__wa small{
  font-size:10px;
  font-weight:700;
  opacity:.88;
}

.contact-hero__wa strong{
  font-size:17px;
  letter-spacing:.01em;
}

/* Main contact area */
.contact-main{
  padding:38px 0 46px;
  background:#fff;
}

.contact-grid{
  display:grid;
  gap:16px;
}

.contact-methods{
  display:grid;
  gap:11px;
}

.contact-card{
  display:grid;
  grid-template-columns:52px 1fr;
  gap:13px;
  padding:16px;
  border:1px solid var(--line,#eadbc8);
  border-radius:19px;
  background:linear-gradient(180deg,#fff,#fffdf9);
  box-shadow:0 9px 27px rgba(65,32,11,.05);
}

.contact-card--whatsapp{
  border-color:#cfe5cb;
  background:
    radial-gradient(circle at 100% 0%,rgba(58,143,42,.08),transparent 36%),
    linear-gradient(180deg,#fff,#fbfff9);
}

.contact-card__icon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:15px;
  color:var(--brown-700,#6e3617);
  background:#f7eadb;
}

.contact-card__icon--green{
  color:#fff;
  background:linear-gradient(135deg,var(--green,#287722),#43922d);
}

.contact-card__icon svg{
  width:27px;
  height:27px;
  fill:currentColor;
}

.contact-card__eyebrow{
  color:var(--green,#287722);
  font-size:8px;
  font-weight:950;
  letter-spacing:.1em;
}

.contact-card h2{
  margin:3px 0 4px;
  color:var(--brown-950,#321306);
  font-size:20px;
  line-height:1.1;
}

.contact-card__number{
  display:inline-block;
  margin-bottom:7px;
  color:var(--green,#287722);
  font-size:22px;
  font-weight:950;
  letter-spacing:-.02em;
}

.contact-card__number--brown{
  color:var(--brown-800,#59280e);
}

.contact-card p{
  margin:0;
  color:var(--muted,#74675c);
  font-size:12.5px;
  line-height:1.55;
}

.contact-card__button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:100%;
  min-height:42px;
  margin-top:12px;
  border-radius:12px;
  color:#fff;
  background:var(--green,#287722);
  font-size:11.5px;
  font-weight:900;
}

.contact-card__button--light{
  color:var(--brown-800,#59280e);
  border:1px solid var(--line,#eadbc8);
  background:#fff8ee;
}

.contact-card__button span{
  font-size:15px;
}

/* How to order */
.contact-order-panel{
  padding:20px;
  border:1px solid var(--line,#eadbc8);
  border-radius:20px;
  background:
    radial-gradient(circle at 94% 3%,rgba(205,153,79,.14),transparent 28%),
    #fffaf4;
}

.contact-order-panel h2{
  margin:5px 0 6px;
  color:var(--brown-950,#321306);
  font-size:27px;
  line-height:1.08;
}

.contact-order-panel__intro{
  margin:0 0 19px;
  color:var(--muted,#74675c);
  font-size:12.5px;
  line-height:1.55;
}

.contact-steps{
  display:grid;
  gap:8px;
}

.contact-step{
  display:grid;
  grid-template-columns:38px 1fr;
  gap:10px;
  align-items:center;
  padding:10px;
  border:1px solid rgba(119,73,34,.1);
  border-radius:13px;
  background:rgba(255,255,255,.76);
}

.contact-step__number{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:11px;
  color:#fff;
  background:var(--brown-800,#59280e);
  font-size:11px;
  font-weight:950;
}

.contact-step>div{
  display:grid;
  gap:2px;
}

.contact-step b{
  color:var(--brown-950,#321306);
  font-size:12px;
}

.contact-step small{
  color:var(--muted,#74675c);
  font-size:10px;
  line-height:1.35;
}

.contact-shop-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  margin-top:14px;
  border-radius:12px;
  color:#fff;
  background:linear-gradient(135deg,#4a1e08,#6a2f0e);
  font-size:12px;
  font-weight:900;
}

/* Shared headings */
.contact-section-heading{
  max-width:700px;
  margin:0 auto 23px;
  text-align:center;
}

.contact-section-heading h2{
  margin:6px 0 8px;
  color:var(--brown-950,#321306);
  font-size:29px;
  line-height:1.08;
  letter-spacing:-.035em;
}

.contact-section-heading p{
  margin:0;
  color:var(--muted,#74675c);
  font-size:13px;
  line-height:1.55;
}

/* Payment cards */
.contact-payments{
  padding:45px 0;
  background:#fffaf3;
  border-top:1px solid #f1e4d3;
  border-bottom:1px solid #f1e4d3;
}

.contact-payments__grid{
  display:grid;
  gap:9px;
}

.contact-payment-card{
  display:grid;
  grid-template-columns:49px 1fr;
  gap:12px;
  align-items:center;
  min-height:88px;
  padding:14px;
  border:1px solid var(--line,#eadbc8);
  border-radius:17px;
  background:#fff;
  box-shadow:0 8px 24px rgba(67,34,12,.04);
}

.contact-payment-card__icon,
.contact-payment-card__k{
  width:49px;
  height:49px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:var(--brown-700,#6e3617);
  background:#f7eadb;
}

.contact-payment-card--cod .contact-payment-card__icon{
  color:var(--green,#287722);
  background:#e9f6e6;
}

.contact-payment-card__icon svg{
  width:24px;
  height:24px;
  fill:currentColor;
}

.contact-payment-card__k{
  color:#fff;
  background:var(--koko,#6f2dbd);
  font-size:23px;
  font-weight:950;
}

.contact-payment-card h3{
  margin:0 0 4px;
  color:var(--brown-950,#321306);
  font-size:16px;
}

.contact-payment-card p{
  margin:0 0 6px;
  color:var(--muted,#74675c);
  font-size:11.5px;
  line-height:1.45;
}

.contact-payment-card>div:last-child>span{
  display:inline-block;
  padding:4px 8px;
  border-radius:999px;
  color:var(--brown-700,#6e3617);
  background:#fff5e8;
  font-size:8px;
  font-weight:900;
}

/* Delivery */
.contact-delivery{
  padding:45px 0;
  background:#fff;
}

.contact-delivery__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
}

.contact-delivery__grid article{
  min-width:0;
  display:grid;
  justify-items:center;
  gap:7px;
  padding:14px 5px;
  border:1px solid var(--line,#eadbc8);
  border-radius:15px;
  text-align:center;
  background:#fffdf9;
}

.contact-delivery__icon{
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  border-radius:10px;
  color:var(--brown-700,#6e3617);
  background:#f7eadb;
}

.contact-delivery__icon svg{
  width:19px;
  height:19px;
  fill:currentColor;
}

.contact-delivery__grid article>span{
  min-width:0;
  display:grid;
  gap:2px;
}

.contact-delivery__grid small{
  overflow:hidden;
  color:var(--muted,#74675c);
  font-size:8.5px;
  font-weight:800;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.contact-delivery__grid strong{
  color:var(--brown-950,#321306);
  font-size:14px;
}

/* FAQ */
.contact-faq{
  padding:45px 0;
  background:#fffaf3;
}

.contact-faq__list{
  max-width:850px;
  margin:0 auto;
  display:grid;
  gap:8px;
}

.contact-faq details{
  overflow:hidden;
  border:1px solid var(--line,#eadbc8);
  border-radius:14px;
  background:#fff;
}

.contact-faq summary{
  position:relative;
  padding:14px 42px 14px 14px;
  color:var(--brown-950,#321306);
  cursor:pointer;
  list-style:none;
  font-size:12.5px;
  font-weight:850;
}

.contact-faq summary::-webkit-details-marker{
  display:none;
}

.contact-faq summary::after{
  content:"+";
  position:absolute;
  top:50%;
  right:15px;
  transform:translateY(-50%);
  color:var(--brown-700,#6e3617);
  font-size:19px;
  font-weight:500;
}

.contact-faq details[open] summary::after{
  content:"−";
}

.contact-faq details p{
  margin:0;
  padding:0 14px 14px;
  color:var(--muted,#74675c);
  font-size:11.5px;
  line-height:1.55;
}

.contact-faq details a{
  color:var(--green,#287722);
  font-weight:900;
}

/* Final CTA */
.contact-cta{
  padding:42px 0 56px;
  background:#fff;
}

.contact-cta__box{
  overflow:hidden;
  display:grid;
  gap:16px;
  padding:22px;
  border-radius:23px;
  background:
    radial-gradient(circle at 95% 5%,rgba(200,148,71,.34),transparent 31%),
    linear-gradient(135deg,#341304,#58260b 58%,#74330f);
  box-shadow:0 18px 43px rgba(57,25,7,.17);
}

.contact-cta__logo img{
  width:66px;
  height:66px;
  border-radius:50%;
  object-fit:cover;
}

.contact-cta .section-kicker{
  color:#f3d3a4;
}

.contact-cta h2{
  margin:5px 0 5px;
  color:#fff;
  font-size:29px;
  line-height:1.05;
}

.contact-cta p{
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:12.5px;
}

.contact-cta__actions{
  display:grid;
  gap:8px;
}

.contact-cta__actions .btn{
  width:100%;
}

.contact-cta .btn--primary{
  color:#472006;
  border-color:#f3d098;
  background:#f3d098;
}

/* Mobile menu */
@media (max-width:799px){
  .contact-page .main-nav{
    inset:88px 0 auto 0;
  }
}

/* Wider phones/tablet */
@media (min-width:540px){
  .contact-hero__content{
    grid-template-columns:1fr auto;
    gap:25px;
    align-items:end;
  }

  .contact-hero__wa{
    min-width:260px;
  }

  .contact-card{
    grid-template-columns:65px 1fr;
    padding:20px;
  }

  .contact-card__icon{
    width:65px;
    height:65px;
  }

  .contact-card__icon svg{
    width:32px;
    height:32px;
  }

  .contact-card h2{
    font-size:23px;
  }

  .contact-card__number{
    font-size:26px;
  }

  .contact-card p{
    font-size:13.5px;
  }

  .contact-payments__grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .contact-payment-card{
    grid-template-columns:1fr;
    align-content:start;
    min-height:180px;
    padding:18px;
  }

  .contact-delivery__grid{
    gap:10px;
  }

  .contact-delivery__grid article{
    padding:19px 10px;
  }

  .contact-delivery__grid small{
    font-size:10px;
  }

  .contact-delivery__grid strong{
    font-size:18px;
  }

  .contact-cta__actions{
    grid-template-columns:auto auto;
    justify-content:start;
  }

  .contact-cta__actions .btn{
    width:auto;
  }
}

/* Desktop */
@media (min-width:800px){
  .contact-hero__inner{
    padding-top:24px;
    padding-bottom:38px;
  }

  .contact-breadcrumb{
    margin-bottom:28px;
    font-size:12px;
  }

  .contact-hero h1{
    font-size:58px;
  }

  .contact-hero p{
    font-size:16px;
  }

  .contact-main{
    padding:60px 0 70px;
  }

  .contact-grid{
    grid-template-columns:minmax(0,1.03fr) minmax(360px,.97fr);
    gap:28px;
    align-items:stretch;
  }

  .contact-methods{
    gap:14px;
  }

  .contact-card{
    min-height:245px;
    align-content:start;
  }

  .contact-card h2{
    font-size:27px;
  }

  .contact-card__number{
    font-size:29px;
  }

  .contact-card p{
    max-width:560px;
    font-size:14px;
  }

  .contact-card__button{
    width:auto;
    min-width:170px;
    max-width:220px;
  }

  .contact-order-panel{
    padding:28px;
  }

  .contact-order-panel h2{
    font-size:36px;
  }

  .contact-order-panel__intro{
    font-size:14px;
  }

  .contact-step{
    grid-template-columns:46px 1fr;
    gap:13px;
    padding:13px;
  }

  .contact-step__number{
    width:46px;
    height:46px;
  }

  .contact-step b{
    font-size:14px;
  }

  .contact-step small{
    font-size:11.5px;
  }

  .contact-shop-btn{
    min-height:49px;
    font-size:13px;
  }

  .contact-payments,
  .contact-delivery,
  .contact-faq{
    padding:68px 0;
  }

  .contact-section-heading{
    margin-bottom:34px;
  }

  .contact-section-heading h2{
    font-size:39px;
  }

  .contact-section-heading p{
    font-size:15px;
  }

  .contact-payments__grid{
    gap:16px;
  }

  .contact-payment-card{
    min-height:210px;
    padding:23px;
    border-radius:21px;
  }

  .contact-payment-card__icon,
  .contact-payment-card__k{
    width:58px;
    height:58px;
  }

  .contact-payment-card__icon svg{
    width:28px;
    height:28px;
  }

  .contact-payment-card h3{
    font-size:20px;
  }

  .contact-payment-card p{
    font-size:13.5px;
  }

  .contact-payment-card>div:last-child>span{
    font-size:9px;
  }

  .contact-delivery__grid{
    gap:16px;
  }

  .contact-delivery__grid article{
    grid-template-columns:58px 1fr;
    align-items:center;
    justify-items:start;
    gap:15px;
    padding:21px;
    text-align:left;
  }

  .contact-delivery__icon{
    width:58px;
    height:58px;
    border-radius:16px;
  }

  .contact-delivery__icon svg{
    width:28px;
    height:28px;
  }

  .contact-delivery__grid small{
    font-size:12px;
  }

  .contact-delivery__grid strong{
    font-size:23px;
  }

  .contact-faq summary{
    padding:18px 52px 18px 20px;
    font-size:14px;
  }

  .contact-faq details p{
    padding:0 20px 19px;
    font-size:13px;
  }

  .contact-cta{
    padding:60px 0 76px;
  }

  .contact-cta__box{
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:24px;
    padding:31px 36px;
    border-radius:28px;
  }

  .contact-cta__logo img{
    width:82px;
    height:82px;
  }

  .contact-cta h2{
    font-size:37px;
  }

  .contact-cta p{
    font-size:14px;
  }
}