:root{
  --o:#f47721;
  --o-dark:#db6213;
  --b:#111;
  --w:#fff;
  --g:#f5f5f3;
  --gray:#6b6b6b;
  --line:#ececec;
  --green:#20a64a;
  --danger:#c0392b;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:var(--g);
  color:#171717;
}

button,
input,
textarea{
  font-family:inherit;
}

button{
  -webkit-tap-highlight-color:transparent;
}

.hero{
  background:
    radial-gradient(
      circle at top,
      #333 0,
      #171717 45%,
      #0d0d0d 100%
    );

  color:white;

  padding:
    25px
    18px
    32px;

  text-align:center;
}

.logo{
  width:165px;
  height:165px;

  object-fit:cover;

  border-radius:50%;

  border:
    4px solid
    var(--o);

  box-shadow:
    0 12px 34px
    rgba(0,0,0,.45);
}

.hero h1{
  margin:
    14px 0
    5px;

  font-size:30px;
}

.hero p{
  margin:0;

  color:#ddd;

  font-size:14px;
}

.status{
  display:inline-block;

  margin-top:14px;

  background:#173d23;

  color:#c7f5d1;

  padding:
    8px
    13px;

  border-radius:999px;

  font-weight:700;

  font-size:13px;
}

.tabs{
  position:sticky;

  top:0;

  z-index:5;

  background:white;

  display:flex;

  gap:8px;

  overflow-x:auto;

  padding:
    12px
    14px;

  box-shadow:
    0 3px 14px
    rgba(0,0,0,.07);

  scrollbar-width:none;
}

.tabs::-webkit-scrollbar{
  display:none;
}

.tabs button{
  border:0;

  background:#efefef;

  padding:
    10px
    16px;

  border-radius:999px;

  font-weight:700;

  white-space:nowrap;

  cursor:pointer;

  transition:.2s;
}

.tabs button:hover{
  background:#e2e2e2;
}

.tabs .active{
  background:var(--o);
  color:white;
}

.wrap{
  max-width:820px;

  margin:auto;

  padding:
    18px
    14px
    120px;
}

.section{
  margin:
    24px 0
    30px;
}

.section h2{
  font-size:25px;

  margin:
    0 0
    12px;
}

.card{
  background:white;

  border-radius:20px;

  padding:10px;

  margin:12px 0;

  box-shadow:
    0 6px 22px
    rgba(0,0,0,.07);

  display:grid;

  grid-template-columns:
    92px 1fr 44px;

  gap:12px;

  align-items:center;

  border:
    1px solid
    #f0f0ee;

  transition:
    transform .2s,
    box-shadow .2s;
}

.card:hover{
  box-shadow:
    0 8px 28px
    rgba(0,0,0,.1);
}

.card:active{
  transform:scale(.99);
}

.thumb{
  width:92px;

  height:82px;

  object-fit:cover;

  border-radius:15px;

  background:#eee;
}

.info{
  min-width:0;
}

.info h3{
  margin:
    0 0
    5px;

  font-size:17px;
}

.info p{
  margin:0;

  color:#666;

  font-size:13px;

  line-height:1.4;
}

.price{
  font-weight:900;

  color:var(--o);

  margin-top:7px;
}

.add{
  border:0;

  background:#111;

  color:#fff;

  width:40px;

  height:40px;

  border-radius:50%;

  font-size:25px;

  cursor:pointer;

  transition:.2s;
}

.add:hover{
  background:var(--o);
}

.cartbar{
  position:fixed;

  bottom:0;
  left:0;
  right:0;

  background:white;

  padding:
    12px
    14px;

  box-shadow:
    0 -4px 20px
    rgba(0,0,0,.12);

  z-index:10;
}

.cartbar button{
  display:block;

  max-width:820px;

  margin:auto;

  width:100%;

  background:var(--o);

  border:0;

  color:white;

  padding:15px;

  border-radius:14px;

  font-size:17px;

  font-weight:800;

  cursor:pointer;

  box-shadow:
    0 7px 18px
    rgba(244,119,33,.28);
}

.cartbar button:hover{
  background:var(--o-dark);
}

.modal{
  display:none;

  position:fixed;

  inset:0;

  background:
    rgba(0,0,0,.65);

  z-index:20;

  align-items:flex-end;
}

.sheet{
  background:white;

  width:100%;

  max-height:92vh;

  overflow:auto;

  border-radius:
    26px
    26px
    0
    0;

  padding:
    22px
    20px
    28px;
}

.sheet h2{
  margin:
    0 0
    16px;

  font-size:27px;
}

.close{
  float:right;

  border:0;

  background:#eee;

  border-radius:50%;

  width:36px;

  height:36px;

  cursor:pointer;

  font-size:16px;
}

.row{
  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:12px;

  padding:
    12px 0;

  border-bottom:
    1px solid
    var(--line);
}

.qty{
  display:flex;

  align-items:center;

  gap:8px;

  font-weight:800;
}

.qty button{
  border:0;

  border-radius:50%;

  width:30px;

  height:30px;

  cursor:pointer;

  font-size:17px;
}

.note{
  background:#fff5ec;

  border-left:
    4px solid
    var(--o);

  padding:13px;

  border-radius:10px;

  margin:
    17px 0;

  font-size:13px;

  line-height:1.4;
}

.choice{
  display:flex;

  gap:10px;

  margin-bottom:18px;
}

.choice label{
  flex:1;

  border:
    1px solid
    #ddd;

  padding:13px;

  border-radius:14px;

  cursor:pointer;

  font-weight:700;

  background:#fafafa;
}

.choice label:has(input:checked){
  border-color:var(--o);

  background:#fff4eb;

  color:#b94f09;
}

.form-section{
  margin-top:20px;
}

.form-section h3{
  margin:
    0 0
    9px;

  font-size:17px;
}

.field{
  width:100%;

  padding:
    13px
    14px;

  border:
    1px solid
    #ddd;

  border-radius:13px;

  margin-top:9px;

  font-size:15px;

  outline:none;

  background:#fff;

  transition:.2s;
}

.field:focus{
  border-color:var(--o);

  box-shadow:
    0 0 0 3px
    rgba(244,119,33,.1);
}

textarea.field{
  min-height:90px;

  resize:vertical;
}

.field-row{
  display:grid;

  grid-template-columns:
    120px 1fr;

  gap:9px;
}

.coupon-box{
  margin-top:15px;

  background:#fafafa;

  border:
    1px dashed
    #d8d8d8;

  border-radius:15px;

  padding:14px;
}

.coupon-box h4{
  margin:
    0 0
    9px;

  font-size:14px;
}

.coupon-row{
  display:flex;

  gap:8px;

  align-items:stretch;
}

.coupon-row .field{
  margin:0;

  text-transform:uppercase;
}

.coupon-button{
  border:0;

  background:#111;

  color:#fff;

  padding:
    0 18px;

  border-radius:12px;

  font-weight:800;

  cursor:pointer;
}

#cupomMsg{
  margin-top:8px;

  font-size:13px;

  font-weight:700;
}

.payment-grid{
  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:9px;

  margin-top:10px;
}

.payment-option{
  border:
    1px solid
    #ddd;

  border-radius:13px;

  padding:12px;

  cursor:pointer;

  background:#fafafa;

  font-weight:700;
}

.payment-option input{
  margin-right:5px;
}

.payment-option:has(input:checked){
  border-color:var(--o);

  background:#fff4eb;

  color:#b94f09;
}

.summary{
  margin-top:23px;

  background:#f7f7f7;

  border-radius:16px;

  padding:15px;
}

.summary-line{
  display:flex;

  justify-content:space-between;

  gap:10px;

  padding:
    7px 0;

  font-size:14px;
}

.summary-total{
  display:flex;

  justify-content:space-between;

  border-top:
    1px solid
    #ddd;

  margin-top:6px;

  padding-top:12px;

  font-size:22px;

  font-weight:900;
}

.summary-total strong{
  color:var(--o);
}

.confirm{
  width:100%;

  background:var(--green);

  color:white;

  border:0;

  border-radius:15px;

  padding:16px;

  font-weight:800;

  font-size:16px;

  cursor:pointer;

  margin-top:17px;

  box-shadow:
    0 7px 20px
    rgba(32,166,74,.24);
}

.confirm:hover{
  filter:brightness(.95);
}

@media(max-width:430px){

  .hero{
    padding-top:20px;
  }

  .logo{
    width:145px;
    height:145px;
  }

  .hero h1{
    font-size:26px;
  }

  .card{
    grid-template-columns:
      82px 1fr 40px;
  }

  .thumb{
    width:82px;
    height:76px;
  }

  .info h3{
    font-size:16px;
  }

  .info p{
    font-size:12px;
  }

  .field-row{
    grid-template-columns:
      95px 1fr;
  }

  .coupon-button{
    padding:
      0 13px;
  }

}

@media(max-width:350px){

  .field-row{
    grid-template-columns:1fr;
  }

  .coupon-row{
    flex-direction:column;
  }

  .coupon-button{
    padding:12px;
  }

}

@media(min-width:700px){

  .modal{
    align-items:center;

    justify-content:center;

    padding:20px;
  }

  .sheet{
    max-width:620px;

    border-radius:26px;
  }

}

/* =========================================
   CONTROLE DE QUANTIDADE NO CARD
========================================= */

.product-actions {
    margin-left: auto;
    padding-left: 12px;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 8px;

    flex-shrink: 0;

    /* mantém tudo dentro do card */
    position: relative;
}


/* BOTÕES + E - */

.product-actions button {
    width: 44px;
    height: 44px;

    min-width: 44px;

    border: none;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;
    margin: 0;

    font-size: 22px;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;

    box-sizing: border-box;
}


/* BOTÃO MENOS */

.product-minus {
    background: #eeeeee !important;
    color: #111 !important;
}


/* BOTÃO MAIS */

.product-plus,
.product-actions .add {
    background: #111 !important;
    color: #fff !important;
}


/* NÚMERO DA QUANTIDADE */

.product-quantity {
    width: 24px;
    min-width: 24px;

    text-align: center;

    font-size: 18px;
    font-weight: 700;

    color: #111;
}


/* =========================================
   GARANTE QUE O CARD SEGURE OS ELEMENTOS
========================================= */

.card {
    display: flex;
    align-items: center;

    width: 100%;

    box-sizing: border-box;

    overflow: hidden;
}


.card .info {
    flex: 1;

    min-width: 0;
}


/* =========================================
   CELULAR
========================================= */

@media (max-width: 600px) {

    .product-actions {
        gap: 5px;
        padding-left: 6px;
    }

    .product-actions button {
        width: 38px;
        height: 38px;
        min-width: 38px;

        font-size: 19px;
    }

    .product-quantity {
        width: 18px;
        min-width: 18px;

        font-size: 16px;
    }

}

/* =========================================
   BOTÃO CONTINUAR COMPRANDO
========================================= */

.continue-shopping {
    width: 100%;

    margin: 18px 0 24px;
    padding: 14px 20px;

    border: 2px solid #e87525;
    border-radius: 12px;

    background: #fff;
    color: #e87525;

    font-size: 16px;
    font-weight: 700;
    font-family: inherit;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    box-sizing: border-box;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.15s ease;
}


/* Quando passa o mouse */

.continue-shopping:hover {
    background: #e87525;
    color: #fff;
}


/* Quando clica */

.continue-shopping:active {
    transform: scale(0.98);
}


/* Celular */

@media (max-width: 600px) {

    .continue-shopping {
        padding: 13px 16px;
        font-size: 15px;
        border-radius: 10px;
    }

}