/* ==========================================================================
   PHOTO CAKE.CSS  —  this page only
   Tokens, fonts, --gutter, header and footer live in common.css.
   ========================================================================== */

/* ============ TOKENS ============ */
:root{
  --head-color:#1D364D;
  --text-color:#3C4B64;
  --muted:#7A8699;
  --page:#E5E5DF;          /* page behind the card */
  --card:#F5F8FC;          /* the white card */
  --stone:#DEDDD5;         /* inputs, badge strip */
  --stone-2:#D5D4CB;
  --livid:#9CBED3;         /* qty + eggless */
  --chip:#EDF0F8;          /* weight pills */
  --sel:#3A4980;           /* selected radio fill */
  --ink:#000000;           /* rich black - weight labels */
  --golden-brown:#93400C;  /* struck price */
  --err:#B3261E;
  --line:#C9D0D8;

  --r-sm:6px; --r-md:8px; --r-lg:12px;
  --shell:1440px;
}

body{
  margin:0;background:var(--page);color:var(--text-color);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;
  font-family: var(--font-secondary);
}
a{
    text-decoration: none;
}
input,select,textarea{font:inherit;color:var(--head-color)}
:focus-visible{outline:0px solid var(--head-color);outline-offset:2px;border-radius:4px}
option {
    background:var(--head-color);
    color: #F6FAFF !important;
}
select option:hover {
    background: var(--head-color) !important;
    color: #F6FAFF !important;
}
.wrap{padding:64px}
.card{background:var(--card);border-radius:var(--r-lg);padding:44px 40px}
h1{margin:0 0 34px;font-size:40px;line-height:1.2;font-weight:500;color:var(--head-color)}

/* ============ WEIGHT ============ */
.weight{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:30px}
.weight>span{font-size:16px;color:var(--head-color);line-height:40px;font-weight:500;}

/* grid => every pill (and "See more") is exactly the same width */
.pills{
  flex:1;min-width:260px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(118px,1fr));
  gap:12px;
}
.pill[aria-pressed="true"]{color:var(--head-color)}
.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  width:100%;height:40px;padding:0 10px;border:none;
  border-radius:10px;background:var(--chip);
  color:var(--ink);font-size:15px;font-weight:500;white-space:nowrap;
}
.dot{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--muted);position:relative;flex:none}
.pill .dot{width:17px;height:17px;border-width:2px;border-color:var(--muted)}
.pill[aria-pressed="true"] .dot{border-color:var(--head-color)}
.pill[aria-pressed="true"] .dot::after{content:"";position:absolute;inset:2.5px;border-radius:50%;background:var(--sel)}

/* hidden weights (2Kg … 8Kg) */
.pill.extra{display:none}
.pills.open .pill.extra{display:inline-flex}

.pill.plain{background:var(--chip);color:var(--head-color);font-weight:500}

/* ============ FIELDS ============ */
.fields{display:grid;grid-template-columns:1fr 1fr;column-gap:26px;row-gap:22px;margin-bottom:30px}
.f label{display:block;margin-bottom:10px;font-size:16px;font-weight:500;color:var(--head-color)}
.control{
  width:100%;height:52px;border:0;border-radius:var(--r-sm);background:var(--stone);
  padding:0 18px;font-size:15px;color:var(--head-color);
}
select.control{
  appearance:none;padding-right:44px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231D364D' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 18px center;
}
.upload{display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer}
.upload:hover{background:var(--stone-2)}
.f.is-bad .control{box-shadow:inset 0 0 0 1.5px var(--err)}
.f .err{display:none;margin:7px 0 0;font-size:13px;color:var(--err)}
.f.is-bad .err{display:block}

/* uploaded file chip */
.file-chip{display:none;align-items:center;gap:12px;margin-top:12px}
.file-chip.on{display:flex}
.file-chip img{width:52px;height:52px;object-fit:cover;border-radius:var(--r-sm);background:var(--stone)}
.file-chip .name{flex:1;min-width:0;font-size:14px;color:var(--head-color);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-chip .drop{font-size:14px;color:var(--golden-brown);text-decoration:none;border:none;}

/* ============ NOTES ============ */
.notes{
  border:1px solid var(--head-color);border-radius:var(--r-md);padding:26px 28px;
  display:grid;grid-template-columns:1fr 1fr;column-gap:28px;row-gap:24px;margin-bottom:28px;
}
.note{display:flex;gap:14px}
.note>svg{flex:none;margin-top:3px;color:var(--head-color)}
.note h2{margin:0 0 4px;font-size:18px;font-weight:500;color:var(--head-color)}
.note p{margin:0 0 16px;font-size:14px;line-height:1.5;color:var(--text-color)}
.note .body{flex:1;min-width:0}
.line-input{
  width:100%;border:0;border-bottom:1px solid var(--head-color);background:none;
  padding:6px 2px;font-size:15px;outline:none;
}
.line-input::placeholder{color:#98A2B3}
.counter{margin:6px 0 0;font-size:12px;color:var(--muted);text-align:right}

/* ============ ACTIONS ============ */
.actions{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.qty{display:inline-flex;align-items:center;background:var(--livid);border-radius:var(--r-sm);height:52px}
.qty button{width:32px;height:100%;font-size:18px;color:#F5F8FC}
.qty output{min-width:26px;text-align:center;color:#F5F8FC}
.eggless{
  display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 24px;
  border-radius:var(--r-sm);background:var(--livid);color:#F5F8FC;font-size:16px;
}
.eggless .dot{border-color:#F5F8FC}
.eggless[aria-pressed="true"] .dot::after{content:"";position:absolute;inset:3px;border-radius:50%;background:#F5F8FC}
.price{margin-left:auto;display:flex;align-items:baseline;gap:14px}
.price .now{font-size:36px;font-weight:600;color:var(--head-color)}
.price .was{font-size:20px;color:var(--golden-brown);text-decoration:line-through}
.cart{
  width:100%;height:58px;border-radius:var(--r-sm);background:var(--head-color);color:#fff;
  font-size:18px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  margin-bottom:34px;
}
.cart[disabled]{opacity:.75;cursor:default}
button{
    border:0; 
    background:0;
}
/* ============ BADGES ============ */
.badges{
  background:var(--stone);border-radius:var(--r-md);padding:30px 20px;
  display:grid;grid-template-columns:repeat(3,1fr);
}
.badges div{display:grid;justify-items:center;gap:14px;text-align:center;font-size:17px;color:var(--head-color)}

/* ============ TABLET ============ */
@media (max-width:1100px){
  .pills{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
}

/* ============ MOBILE ============ */
@media (max-width:900px){
  .wrap{padding:20px var(--gutter) 40px}
  .card{padding:26px 20px;border-radius:var(--r-lg)}
  h1{font-size:26px;margin-bottom:24px}

  .weight{display:block;margin-bottom:24px}
  .weight>span{display:block;margin-bottom:10px;line-height:1.55;font-weight:500;font-size:15px;color:var(--head-color)}
  .weight .pills{ 
    min-width:0;
    grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
    gap:10px;
  }
  .pill{height:38px;padding:0 8px;font-size:14px;gap:8px;border-radius:9px}
  .pill .dot{width:16px;height:16px}

  .fields{
      display:block;
      margin-bottom:24px;
    }
    
    .f{
      margin-bottom:18px;
    }
  .f label{font-size:15px;margin-bottom:8px}
  .control{height:48px;font-size:14px}

  .notes{grid-template-columns:1fr;padding:20px;row-gap:22px}
  .note h2{font-size:16px}
  .note p{font-size:13px;margin-bottom:12px}

  .actions{flex-wrap:wrap;gap:12px;margin-bottom:20px}
  .qty,.eggless{height:48px}
  .eggless{flex:1;justify-content:center;padding:0 18px}
  .price{order:3;width:100%;margin-left:0}
  .price .now{font-size:32px}
  .price .was{font-size:18px}

  .cart{height:52px;font-size:16px;margin-bottom:26px}

  .badges{grid-template-columns:1fr;gap:26px;padding:24px 20px}
  .badges div{grid-template-columns:44px 1fr;justify-items:start;align-items:center;text-align:left;gap:16px;font-size:15px}
}

/* very small phones — 3 pills per row stays readable */
@media (max-width:380px){
  .weight .pills{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
  .pill{font-size:13px;gap:6px;padding:0 6px}
  .pill .dot{width:15px;height:15px}
}

@media (prefers-reduced-motion:no-preference){
  .cart,.pill,.upload,.eggless{transition:background-color .15s ease,opacity .15s ease}
}