.cf-body{
  --green:#53a16f;
  --green-dark:#3f8358;
  --green-deep:#2f6642;
  --yellow:#fcffae;
  --white:#fff;
  --soft:rgba(255,255,255,.82);
  --line:rgba(255,255,255,.28);
  --sans:'Vazirmatn','Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --script:'Caveat Brush','Caveat','Vazirmatn',cursive;
}

.cf-body *,.cf-body *::before,.cf-body *::after{box-sizing:border-box}
html{scroll-behavior:smooth}

body.cf-body{
  margin:0;background:var(--green);color:var(--white);
  font-family:var(--sans);font-size:16px;font-weight:400;line-height:1.8;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}

.cf-body img{max-width:100%;display:block;border:0}
.cf-body a{color:inherit;text-decoration:none;transition:all .25s ease}
.cf-body button{font-family:inherit}
.cf-body h1,.cf-body h2,.cf-body h3,.cf-body h4,.cf-body h5{
  font-family:var(--sans);font-weight:700;color:#fff;margin:0 0 18px;line-height:1.15;letter-spacing:.5px;
}
.cf-body h1{font-size:80px}
.cf-body h2{font-size:60px}
.cf-body h3{font-size:32px}
.cf-body h4{font-size:24px}
.cf-body h5{font-size:18px}
.cf-body p{margin:0 0 22px}

.cf-script{font-family:var(--script);color:var(--yellow);font-size:34px;line-height:1;display:block;letter-spacing:.5px}
.cf-wrap{max-width:1700px;margin:0 auto;padding:0 60px;position:relative;z-index:2}
.cf-center{text-align:center}

.cf-deco{position:absolute;pointer-events:none;z-index:1;user-select:none}
.cf-deco.soft{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 16%,#000 84%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 84%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 16%,#000 84%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}

.cf-btn{
  display:inline-block;border:2px solid #fff;background:#fff;color:var(--green-deep);
  font-size:12px;font-weight:700;letter-spacing:2.6px;
  padding:16px 38px;cursor:pointer;transition:all .3s ease;line-height:1;text-align:center;
}
.cf-btn:hover{background:transparent;color:#fff}

.cf-header{position:absolute;top:0;left:0;right:0;z-index:90;padding:34px 60px}
.cf-header.fixed{position:fixed;background:rgba(83,161,111,.96);padding:18px 60px;box-shadow:0 4px 22px rgba(0,0,0,.12)}
.admin-bar .cf-header.fixed{top:32px}
.cf-header-in{display:flex;align-items:center;justify-content:space-between;max-width:1780px;margin:0 auto}

.cf-logo{cursor:pointer;display:flex;align-items:center;gap:12px}
.cf-logo img{height:56px;width:auto}
.cf-header.fixed .cf-logo img{height:44px}
.cf-logo-txt{font-size:26px;font-weight:800;color:#fff;letter-spacing:-.2px;white-space:nowrap}
.cf-header.fixed .cf-logo-txt{font-size:22px}

.cf-tools{display:flex;align-items:center;gap:16px}
.cf-round{
  width:72px;height:72px;border-radius:50%;background:#fff;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;position:relative;
  transition:transform .25s ease,background .25s ease;
}
.cf-round:hover{transform:scale(1.06)}
.cf-header.fixed .cf-round{width:56px;height:56px}
.cf-round svg{width:24px;height:24px;stroke:var(--green-deep);fill:none;stroke-width:1.8}

.cf-burger-lines{display:block}
.cf-burger-lines i{display:block;width:30px;height:3px;background:var(--green-deep);margin:5px 0;border-radius:2px;transition:all .3s}
.cf-header.fixed .cf-burger-lines i{width:24px;margin:4px 0}

.cf-count{
  position:absolute;top:-2px;inset-inline-end:-2px;background:var(--yellow);color:var(--green-deep);
  border-radius:50%;min-width:24px;height:24px;font-size:12px;font-weight:700;line-height:24px;text-align:center;
}

.cf-menu{
  position:fixed;inset:0;background:var(--green-dark);z-index:150;
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .4s ease,visibility .4s ease;
}
.cf-menu.open{opacity:1;visibility:visible}
.cf-menu nav{text-align:center}
.cf-menu a{display:block;font-size:56px;font-weight:700;letter-spacing:2px;padding:12px 0;color:#fff}
.cf-menu a:hover,.cf-menu a.is-on{color:var(--yellow)}
.cf-close{position:absolute;top:40px;inset-inline-end:60px;background:none;border:0;color:#fff;font-size:52px;line-height:1;cursor:pointer}
.cf-close:hover{color:var(--yellow)}

.cf-hero{position:relative;padding:230px 0 40px;text-align:center;overflow:hidden}
.cf-hero h1{margin-bottom:0;font-size:82px}
.cf-hero .cf-script{margin-bottom:14px}
.cf-crumb{margin-top:18px;font-size:14px;color:var(--soft);position:relative;z-index:2}
.cf-crumb a:hover{color:var(--yellow)}
.cf-crumb span{margin:0 8px;opacity:.6}

.cf-shop{position:relative;padding:60px 0 110px;overflow:hidden}

.cf-bar{
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  margin-bottom:46px;position:relative;z-index:2;
}
.cf-found{font-size:15px;color:var(--soft);margin:0}
.cf-sort select{
  appearance:none;-webkit-appearance:none;border:2px solid var(--line);background:transparent;
  padding:12px 44px 12px 18px;font-family:var(--sans);font-size:13px;font-weight:600;
  letter-spacing:1px;color:#fff;cursor:pointer;border-radius:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='1.6' fill='none'/></svg>");
  background-repeat:no-repeat;background-position:left 16px center;background-size:11px;
}
.cf-sort select:focus{outline:none;border-color:var(--yellow)}
.cf-sort option{color:#2f6642}

.cf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:70px 40px;position:relative;z-index:2}
.cf-grid.is-3{grid-template-columns:repeat(3,1fr)}

.cf-card{text-align:center;display:flex;flex-direction:column}
.cf-media{position:relative;display:flex;align-items:flex-end;justify-content:center;height:330px;overflow:hidden}
.cf-media img{
  width:100%;height:100%;max-height:330px;
  object-fit:contain;object-position:center bottom;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
}
.cf-card:hover .cf-media img{transform:translateY(-14px) scale(1.03)}

.cf-badge{
  position:absolute;top:6px;inset-inline-end:6px;z-index:4;background:var(--yellow);
  color:var(--green-deep);font-size:12px;font-weight:700;padding:5px 14px;border-radius:20px;
}

.cf-info{padding-top:22px;position:relative;display:flex;flex-direction:column;flex:1}
.cf-info .cf-swap{margin-top:auto}
.cf-body .cf-name{
  font-size:var(--cf-name,18px);font-weight:700;letter-spacing:0;margin:0 0 6px;
  color:#fff;transition:color .25s;line-height:1.85;
}
.cf-body .cf-card:hover .cf-name{color:var(--yellow)}
.cf-units{display:block;font-size:14px;color:var(--soft);margin-bottom:8px}

.cf-swap{position:relative;min-height:34px}
.cf-price{
  font-size:20px;font-weight:400;color:#fff;position:absolute;inset-inline:0;top:0;
  transition:opacity .3s ease,transform .3s ease;
}
.cf-price del{opacity:.55;font-size:15px;margin-inline-start:8px}
.cf-price ins{text-decoration:none}
.cf-add{
  position:absolute;inset-inline:0;top:0;opacity:0;transform:translateY(8px);
  font-size:13px;font-weight:700;letter-spacing:2.6px;color:#fff;
  transition:opacity .3s ease,transform .3s ease;background:none;border:0;cursor:pointer;width:100%;
}
.cf-card:hover .cf-price{opacity:0;transform:translateY(-8px)}
.cf-card:hover .cf-add{opacity:1;transform:translateY(0)}
.cf-add:hover{color:var(--yellow)}
.cf-add.loading{opacity:1;transform:none;pointer-events:none}
.cf-add.added{opacity:1;transform:none;color:var(--yellow)}
.cf-add.is-out{color:var(--soft);cursor:default}

.cf-each{display:block;font-size:13px;color:var(--soft);margin-top:6px}

.cf-empty{text-align:center;padding:90px 20px;font-size:18px;color:var(--soft);position:relative;z-index:2}

.cf-pager{display:flex;justify-content:center;gap:10px;margin-top:80px;flex-wrap:wrap;position:relative;z-index:2}
.cf-pager .page-numbers{
  min-width:52px;height:52px;display:flex;align-items:center;justify-content:center;padding:0 14px;
  border:2px solid var(--line);color:#fff;font-size:15px;font-weight:600;transition:.25s;
}
.cf-pager .page-numbers:hover{border-color:#fff}
.cf-pager .page-numbers.current{background:#fff;border-color:#fff;color:var(--green-deep)}

.cf-footer{position:relative;text-align:center;padding:90px 0 40px;overflow:hidden}
.cf-footer .cf-script{margin-bottom:16px}
.cf-footer h2{font-size:72px;max-width:1100px;margin:0 auto 44px;line-height:1.25}
.cf-socials{display:flex;justify-content:center;gap:20px;margin-bottom:70px}
.cf-socials a{width:52px;height:52px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center}
.cf-socials a svg{width:20px;height:20px;fill:var(--green-deep)}
.cf-si{font-size:22px;line-height:1;color:var(--green-deep)}
.cf-socials a:hover{background:var(--yellow)}
.cf-contact{
  list-style:none;margin:0 auto 46px;padding:0;max-width:1000px;
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px 34px;
}
.cf-contact li{display:flex;align-items:baseline;gap:8px;font-size:15px;color:var(--soft)}
.cf-contact b{color:#fff;font-weight:700}

.cf-seals{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;margin:0 auto 40px}
.cf-seal{
  background:#fff;border-radius:12px;padding:10px;display:flex;align-items:center;justify-content:center;
  min-width:90px;min-height:90px;transition:transform .25s ease;
}
.cf-seal:hover{transform:translateY(-4px)}
.cf-seal img{max-width:110px;max-height:110px;width:auto;height:auto}
.cf-seal span{color:var(--green-deep);font-size:13px;font-weight:600;text-align:center}
.cf-seal-code img,.cf-seal-code a{display:block;margin:0 auto}

.cf-copy{font-size:15px;color:var(--soft);padding-top:26px;border-top:1px solid var(--line);max-width:1100px;margin:0 auto}

.cf-top{
  position:fixed;inset-inline-end:36px;bottom:36px;width:62px;height:62px;border-radius:50%;
  background:#fff;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:100;
  opacity:0;visibility:hidden;transition:all .3s ease;box-shadow:0 8px 24px rgba(0,0,0,.14);
}
.cf-top.show{opacity:1;visibility:visible}
.cf-top:hover{transform:translateY(-4px)}
.cf-top svg{width:22px;height:22px;stroke:var(--green-deep);fill:none;stroke-width:2}

.cf-toast{
  position:fixed;inset-inline-start:30px;bottom:36px;z-index:120;
  background:var(--yellow);color:var(--green-deep);padding:14px 24px;font-size:15px;font-weight:600;
  border-radius:40px;box-shadow:0 12px 30px rgba(0,0,0,.2);
  opacity:0;transform:translateY(14px);transition:.3s;pointer-events:none;
}
.cf-toast.is-on{opacity:1;transform:translateY(0)}

@media(max-width:1400px){
  .cf-grid{gap:60px 34px}
  .cf-body h1,.cf-hero h1{font-size:64px}
  .cf-footer h2{font-size:56px}
  .cf-body .cf-name{font-size:calc(var(--cf-name,18px) - 1px)}
}

@media(max-width:1100px){
  .cf-wrap,.cf-header{padding-left:36px;padding-right:36px}
  .cf-grid{grid-template-columns:repeat(3,1fr)}
  .cf-grid.is-3{grid-template-columns:repeat(3,1fr)}
  .cf-hero{padding-top:190px}
  .cf-menu a{font-size:38px}
}

@media(max-width:760px){
  .cf-body h1,.cf-hero h1{font-size:44px}
  .cf-body h2{font-size:34px}
  .cf-footer h2{font-size:36px}
  .cf-hero{padding:150px 0 20px}
  .cf-grid,.cf-grid.is-3{grid-template-columns:repeat(2,1fr);gap:44px 20px}
  .cf-media{height:210px}
  .cf-media img{max-height:210px}
  .cf-contact{gap:10px 20px}
  .cf-contact li{font-size:13.5px}
  .cf-seal{min-width:74px;min-height:74px}
  .cf-seal img{max-width:88px;max-height:88px}
  .cf-body .cf-name{font-size:calc(var(--cf-name,18px) - 2.5px)}
  .cf-price{font-size:14px}
  .cf-add{font-size:11px;letter-spacing:1.4px;opacity:1;transform:none;position:static;margin-top:6px}
  .cf-swap{min-height:0}
  .cf-price{position:static}
  .cf-card:hover .cf-price{opacity:1;transform:none}
  .cf-round{width:54px;height:54px}
  .cf-burger-lines i{width:24px;margin:4px 0}
  .cf-logo img{height:44px}
  .cf-logo-txt{font-size:20px}
  .cf-deco{display:none}
  .cf-wrap,.cf-header{padding-left:20px;padding-right:20px}
  .cf-close{inset-inline-end:24px;top:24px}
  .cf-bar{gap:14px}
}

/* On a phone the fixed header had desktop sized padding and controls, so the
   round buttons rode over the shop name once the header shrank on scroll.
   Everything in the bar is pulled in and the name is allowed to shorten. */
@media(max-width:760px){
  .cf-header{padding:16px 14px}
  .cf-header.fixed{padding:10px 14px}
  .cf-header-in{gap:10px}
  .cf-logo{min-width:0;flex:1 1 auto;overflow:hidden}
  .cf-logo-txt{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cf-header.fixed .cf-logo-txt{font-size:16px}
  .cf-logo img{height:34px}
  .cf-header.fixed .cf-logo img{height:30px}
  .cf-tools{flex:0 0 auto;gap:8px}
  .cf-round{width:42px;height:42px}
  .cf-header.fixed .cf-round{width:38px;height:38px}
  .cf-burger-lines i{width:17px;margin:3px 0}
  .cf-header.fixed .cf-burger-lines i{width:16px;margin:3px 0}
}

/* The shelves inside the coffee category.

   A picture with its name underneath, rather than a row of plain buttons: on
   a shelf like this the picture is what somebody recognises first, and the
   word only confirms it.

   The picture sits in a square and is fitted inside rather than cropped to
   fill, because these are product shots on their own background and cropping
   one to a square cuts the top off the packet. A shelf with no picture yet
   gets a lettered tile in the same shape, so a half filled row still looks
   deliberate instead of broken.

   On a narrow screen the row slides sideways instead of wrapping into a tall
   block that would push the products off the first screenful. */
.cf-shelf{position:relative;margin:0 0 30px;z-index:2}

.cf-shelf-row{
  display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;
}

.cf-tile{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  width:118px;text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}

.cf-tile .im{
  position:relative;display:grid;place-items:center;
  width:100%;aspect-ratio:1/1;border-radius:20px;overflow:hidden;
  background:rgba(255,255,255,.07);
  border:1px solid var(--line);
  transition:border-color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease;
}
.cf-tile .im img{
  width:100%;height:100%;object-fit:contain;padding:10px;display:block;
}
.cf-tile .im.is-blank{
  background:linear-gradient(140deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
}
.cf-tile .im i{
  font-style:normal;font-size:30px;font-weight:800;
  color:var(--white);opacity:.55;line-height:1;
}

/* The tally rides in the corner of the picture so the name below stays a
   name and nothing else. */
.cf-tile .im b{
  position:absolute;top:7px;inset-inline-start:7px;
  min-width:22px;padding:2px 7px;border-radius:99px;
  background:rgba(0,0,0,.34);color:var(--white);
  font-size:11.5px;font-weight:700;line-height:1.5;
  backdrop-filter:blur(2px);
}

.cf-tile .nm{
  font-size:13.5px;font-weight:500;line-height:1.6;text-align:center;
  color:var(--soft);transition:color .2s ease;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

.cf-tile:hover .im{
  border-color:var(--yellow);background:rgba(255,255,255,.13);
  transform:translateY(-3px);box-shadow:0 14px 28px -18px rgba(0,0,0,.6);
}
.cf-tile:hover .nm{color:var(--white)}
.cf-tile:active .im{transform:translateY(0) scale(.97)}

.cf-tile.is-on .im{
  border-color:var(--yellow);
  box-shadow:0 0 0 2px var(--yellow),0 14px 30px -18px rgba(0,0,0,.6);
  background:rgba(255,255,255,.14);
}
.cf-tile.is-on .nm{color:var(--white);font-weight:700}
.cf-tile.is-on .im.is-blank{background:var(--yellow)}
.cf-tile.is-on .im.is-blank i{color:var(--green-deep);opacity:1}
.cf-tile:focus-visible .im{outline:2px solid var(--yellow);outline-offset:3px}

@media(max-width:860px){
  .cf-shelf{margin-inline:-20px;margin-bottom:24px}
  /* The row runs off the trailing edge, which in this direction is the left. */
  .cf-shelf::after{
    content:'';position:absolute;top:0;bottom:8px;inset-inline-end:0;width:30px;
    pointer-events:none;
    background:linear-gradient(to left,transparent,var(--green));
  }
  .cf-shelf-row{
    flex-wrap:nowrap;overflow-x:auto;gap:11px;
    padding:2px 20px 8px;
    scroll-snap-type:x proximity;
    scrollbar-width:none;-ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
  }
  .cf-shelf-row::-webkit-scrollbar{display:none}
  .cf-tile{width:94px;flex:0 0 auto;scroll-snap-align:start}
  .cf-tile .im{border-radius:16px}
  .cf-tile .im i{font-size:24px}
  .cf-tile .nm{font-size:12.5px}
}

/* The two views.

   A pair joined into one control rather than two loose buttons, so it reads
   as a choice between them and it is always plain which one you are on. The
   lit half is filled rather than merely outlined, because on a background
   this strong an outline alone is not enough to tell them apart at a glance.

   The pair stretches to the full width on a phone, splitting the line evenly,
   which puts both within reach of a thumb without either wrapping. */
.cf-views{
  display:inline-flex;padding:5px;margin:0 0 24px;
  border-radius:99px;position:relative;z-index:2;
  background:rgba(0,0,0,.16);
  border:1px solid var(--line);
}
.cf-views .cf-view{
  display:inline-flex;align-items:center;justify-content:center;
  padding:11px 26px;border-radius:99px;text-decoration:none;
  color:var(--soft);font-size:15px;font-weight:600;line-height:1.5;
  white-space:nowrap;min-height:44px;
  -webkit-tap-highlight-color:transparent;
  transition:background .2s ease,color .2s ease;
}
.cf-views .cf-view:hover{color:var(--white)}
.cf-views .cf-view.is-on{
  background:var(--yellow);color:var(--green-deep);font-weight:800;
  box-shadow:0 8px 20px -10px rgba(0,0,0,.5);
}
.cf-views .cf-view:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}

@media(max-width:620px){
  .cf-views{display:flex;width:100%;margin-bottom:20px}
  .cf-views .cf-view{flex:1 1 0;padding:11px 10px;font-size:14px;min-width:0}
}

/* The banner across the top.

   Nothing is cut off it. The picture keeps its own proportions and its height
   follows from its width, because a banner has words drawn into it and any
   trimmed edge takes part of a word with it.

   That means the picture itself decides how tall this is, so the column it
   sits in is what holds the size down. Roughly four to one is the shape that
   reads well here: at this width a picture of 1600 by 400 comes out about
   three hundred points tall.

   The space above it clears the bar at the top of the page. That bar sits
   over the top of the page rather than pushing it down, so anything starting
   at nought would begin underneath it. */
.cf-hero.has-banner{padding:140px 0 0;min-height:0}
.cf-banner{
  width:min(1180px,calc(100% - 40px));
  margin-inline:auto;
  border-radius:20px;overflow:hidden;line-height:0;
  box-shadow:0 26px 54px -38px rgba(0,0,0,.6);
}
.cf-banner img{
  display:block;width:100%;height:auto;max-width:none;
}

@media(max-width:860px){
  .cf-hero.has-banner{padding-top:104px}
  .cf-banner{width:calc(100% - 24px);border-radius:14px}
}

@media(max-width:520px){
  .cf-hero.has-banner{padding-top:92px}
  .cf-banner{border-radius:12px}
}