:root{--ink:#080808;--paper:#fbfaf8;--yellow:#f6b900;--yellow2:#ffc61c;--muted:#625f5a;--line:#dedbd5;--shadow:0 12px 35px rgba(0,0,0,.07)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fbfaf8;color:var(--ink);font-family:Inter,Arial,sans-serif}button,input,textarea,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}.boot{height:100vh;display:grid;place-items:center;font:58px "Permanent Marker",cursive}.brush{font-family:"Permanent Marker",cursive}.header{height:145px;background:#fff}.header-top{height:94px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 28px}.header-left{display:flex;gap:48px;align-items:center;font-size:13px;font-weight:700}.header-actions{display:flex;justify-content:flex-end;align-items:center;gap:28px}.logo-link{width:112px;height:76px;display:grid;place-items:center}.logo-img{max-width:96px;max-height:70px;object-fit:contain}.logo-text{font:54px/1 "Permanent Marker",cursive;letter-spacing:-4px;transform:rotate(-5deg)}.icon{position:relative;width:40px;height:40px;display:grid;place-items:center;background:none;border:0}.icon svg{width:29px;height:29px;fill:none;stroke:#090909;stroke-width:1.65}.cart-badge{position:absolute;right:-1px;top:-2px;width:19px;height:19px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;font-size:10px;font-weight:900}.header-tabs{height:51px;display:flex;justify-content:center;align-items:center;gap:64px;font-size:13px;font-weight:700}.header-tabs a{position:relative;height:51px;display:flex;align-items:center;white-space:nowrap}.header-tabs a.active:after{content:"";position:absolute;left:0;right:0;bottom:12px;height:3px;background:var(--yellow);border-radius:99px}.hero{position:relative;height:295px;background:#090909 center/cover no-repeat;overflow:hidden}.hero.rounded{margin:0 10px;border-radius:16px;height:293px}.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.80),rgba(0,0,0,.10) 44%,rgba(0,0,0,.52))}.hero-left{position:absolute;z-index:2;left:68px;top:95px;color:#fff}.hero-small{font:26px/1 "Permanent Marker",cursive}.hero-word{margin:7px 0 10px;color:var(--yellow);font:72px/.82 "Permanent Marker",cursive;letter-spacing:-4px;transform:rotate(-4deg);transform-origin:left}.hero-tag{font-size:12px;letter-spacing:.04em}.hero-center{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-5deg);font:83px/1 "Permanent Marker",cursive;color:#d4d4d4;letter-spacing:-5px}.hero-bottom{position:absolute;z-index:3;left:29px;right:29px;bottom:18px;color:#fff;font-size:13px;display:flex;justify-content:space-between}.hero-down{position:absolute;z-index:3;left:50%;bottom:22px;width:16px;height:16px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg) translateX(-50%)}.directory-main{padding:0 35px}.section-head{display:flex;justify-content:space-between;align-items:flex-end}.directory-categories{padding-top:38px}.kicker{font-size:12px;font-weight:900;color:#db9f00;text-transform:uppercase}.script-title{position:relative;margin:7px 0 0;font:34px/1.05 "Permanent Marker",cursive;letter-spacing:-1.5px}.script-title:after{content:"";position:absolute;width:101px;height:3px;background:var(--yellow);left:3px;bottom:-10px;transform:rotate(-2deg)}.carousel-buttons{display:flex;gap:10px;padding-bottom:1px}.round-btn{width:38px;height:38px;border:1px solid #e1ddd7;border-radius:50%;background:#fff;font-size:20px;box-shadow:0 5px 15px rgba(0,0,0,.04)}.category-window{overflow:hidden;margin-top:27px}.category-track{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;padding:0 1px 5px}.category-track::-webkit-scrollbar{display:none}.category-card{position:relative;flex:0 0 180px;height:333px;border-radius:18px;overflow:hidden;scroll-snap-align:start;background:#ddd;box-shadow:var(--shadow)}.category-card img{width:100%;height:100%;object-fit:cover}.category-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 41%,rgba(0,0,0,.04) 51%,rgba(0,0,0,.88) 100%)}.category-name{position:absolute;z-index:2;left:17px;bottom:70px;color:var(--yellow);font:28px/1 "Permanent Marker",cursive;letter-spacing:-1px}.category-count{position:absolute;z-index:2;left:18px;bottom:43px;color:#fff;font-size:12px;font-weight:700}.category-arrow{position:absolute;z-index:3;right:13px;bottom:14px;width:37px;height:37px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:20px}.category-card:hover .category-arrow{background:var(--yellow)}.featured{padding-top:27px}.view-all{height:36px;border:1px solid #79756f;border-radius:999px;background:#fff;padding:0 17px;font-size:11px;font-weight:800;display:flex;align-items:center;gap:18px}.product-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:11px;margin-top:26px}.product-card{border-radius:18px;overflow:hidden;background:#fff;border:1px solid #eeeae4;box-shadow:0 9px 28px rgba(0,0,0,.045)}.product-image{height:194px;background:#efede9;overflow:hidden}.product-image img{width:100%;height:100%;object-fit:cover}.product-placeholder{height:100%;display:grid;place-items:center;background:linear-gradient(145deg,#efede9,#f8ce51);font:39px "Permanent Marker",cursive}.product-body{height:93px;padding:8px 11px 9px}.product-badge{display:inline-block;background:var(--yellow);border-radius:999px;padding:2px 5px;font-size:7px;font-weight:800}.product-name{margin-top:5px;font-size:10px;font-weight:800}.product-price{margin-top:4px;font-size:10px}.product-footer{display:flex;align-items:flex-end;justify-content:space-between}.swatches{display:flex;gap:4px;margin-top:9px}.swatch{width:11px;height:11px;border-radius:50%;border:1px solid rgba(0,0,0,.12)}.mini-cart{width:30px;height:30px;border:1px solid #ddd9d2;border-radius:9px;background:#fff;display:grid;place-items:center}.mini-cart svg{width:16px}.empty-products{margin-top:26px;height:287px;border-radius:18px;border:1px solid #eeeae4;background:linear-gradient(145deg,#fff,#f4efe6);display:grid;place-items:center;text-align:center;padding:30px;position:relative;overflow:hidden}.empty-products:before,.empty-products:after{content:"";position:absolute;border-radius:50%}.empty-products:before{width:170px;height:170px;left:-60px;bottom:-70px;background:radial-gradient(circle,#ffe9a4 0 15%,#ffd85a 16% 54%,#ffae15 55% 70%,transparent 71%)}.empty-products:after{width:130px;height:130px;right:-38px;top:-48px;background:radial-gradient(circle,#e8ffc5 0 15%,#a9dc59 16% 54%,#5fa72f 55% 70%,transparent 71%)}.empty-products div{position:relative;z-index:2}.empty-products h3{margin:0;font:31px "Permanent Marker",cursive}.empty-products p{max-width:460px;margin:8px auto 0;color:#66615b;font-size:11px;line-height:1.6}.product-main{padding:27px 28px 0}.purchase{display:grid;grid-template-columns:477px 1fr;gap:39px}.media-main{position:relative;height:405px;border-radius:24px;overflow:hidden;background:#cdb7d1;box-shadow:var(--shadow)}.media-main img{width:100%;height:100%;object-fit:cover}.media-placeholder{height:100%;display:grid;place-items:center;font:65px "Permanent Marker",cursive;background:linear-gradient(145deg,#cbb1cf,#e8dae8)}.media-status{position:absolute;top:21px;left:21px;color:#fff;font-size:11px}.media-status:before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--yellow);margin-right:8px}.media-time{position:absolute;left:20px;bottom:27px;color:#fff;font-size:11px}.media-progress{position:absolute;left:20px;right:20px;bottom:14px;height:4px;background:rgba(255,255,255,.68)}.media-progress span{display:block;width:29%;height:100%;background:var(--yellow)}.thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:15px}.thumb{height:107px;border:0;border-radius:14px;overflow:hidden;padding:0;background:#f0eee9}.thumb.active{outline:2px solid #111;outline-offset:-2px}.thumb img{width:100%;height:100%;object-fit:cover}.thumb-placeholder{height:100%;display:grid;place-items:center;font:28px "Permanent Marker",cursive;background:linear-gradient(145deg,#efb800,#f8cc4f)}.product-info{padding-top:4px}.product-info .product-badge{font-size:9px;padding:4px 10px}.product-title{margin:14px 0 6px;font:34px/1.08 "Permanent Marker",cursive;letter-spacing:-1.1px}.big-price{font-size:18px}.tax{margin-top:4px;font-size:10px}.option{display:grid;grid-template-columns:65px 1fr;align-items:center;gap:12px;margin-top:29px}.option-label{font-size:10px;font-weight:700}.colors,.sizes{display:flex;gap:12px;align-items:center;flex-wrap:wrap}.color{width:29px;height:29px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #dad6cf}.color.active{box-shadow:0 0 0 2px #111}.size{min-width:38px;height:35px;border:1px solid #d9d5cf;background:#fff;border-radius:999px;font-size:10px}.size.active{background:#111;color:#fff;border-color:#111}.size-guide{margin:11px 0 0 77px;font-size:10px;text-decoration:underline}.quantity{display:flex;border:1px solid #ddd9d3;border-radius:999px;width:123px;overflow:hidden}.quantity button,.quantity span{width:41px;height:34px;border:0;background:#fff;display:grid;place-items:center;font-size:11px}.actions{display:grid;gap:11px;margin-top:15px}.action{height:43px;border-radius:999px;border:1px solid #111;font-size:12px;background:#fff}.action.dark{background:#050505;color:#fff}.action.buy{border:0;background:linear-gradient(90deg,#ffc31a,#ffb800)}.description{display:grid;grid-template-columns:398px 1fr;gap:12px;margin-top:38px;align-items:center}.description-copy{padding:0 0 0 28px}.description-copy h2{position:relative;margin:0 0 21px;font:25px "Permanent Marker",cursive}.description-copy h2:after{content:"";position:absolute;left:0;bottom:-7px;width:115px;height:3px;background:var(--yellow)}.description-copy p,.description-copy li{font-size:10px;line-height:1.9}.description-copy ul{padding-left:19px}.description-image{height:337px;border-radius:24px;overflow:hidden;background:#ddd}.description-image img{width:100%;height:100%;object-fit:cover}.fruit-footer{position:relative;overflow:hidden;height:208px;margin-top:28px;background:repeating-conic-gradient(from -4deg at 50% -35%,rgba(255,255,255,.16) 0 1deg,transparent 1deg 13deg),radial-gradient(ellipse at 50% -35%,#fff0bd 0 11%,#ffd76f 11.5% 16%,#ffc53b 16.5% 58%,#ffa61c 59% 71%,#ffcc5b 71.5% 74%,#ffb111 75%);border-radius:52% 52% 0 0/25% 25% 0 0;border-top:4px solid #ffe19b}.footer-grid{position:relative;z-index:4;height:100%;display:grid;grid-template-columns:220px 135px 135px 135px 1fr;gap:15px;align-items:start;padding:53px 57px 0}.footer-logo .logo-text{font-size:44px}.footer-tag{font-size:10px;font-weight:700;margin-top:6px}.socials{display:flex;gap:12px;margin-top:10px;font-size:14px}.copyright{margin-top:16px;font-size:9px}.footer-col h4{margin:0 0 12px;font-size:12px}.footer-col a{display:block;margin:7px 0;font-size:9px}.payments{align-self:end;display:flex;gap:8px;padding-bottom:24px}.payment{background:#fff;border-radius:4px;padding:4px 7px;font-size:8px;font-weight:800}.fruit{position:absolute;z-index:2;border-radius:50%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.08))}.fruit:after{content:"";position:absolute;inset:15%;border-radius:50%;background:repeating-conic-gradient(rgba(255,255,255,.5) 0 1.5deg,transparent 1.5deg 29deg);opacity:.55}.fruit.lemon{width:76px;height:76px;left:15px;top:4px;background:radial-gradient(circle,#fff7ba 0 15%,#ffe566 16% 55%,#f2c12f 56% 70%,transparent 71%)}.fruit.lime{width:55px;height:55px;left:113px;top:35px;background:radial-gradient(circle,#e8ffc1 0 15%,#a6da54 16% 55%,#5ba12f 56% 70%,transparent 71%)}.fruit.grapefruit{width:81px;height:81px;right:22px;top:5px;background:radial-gradient(circle,#ffd3d7 0 15%,#ff8793 16% 55%,#de485f 56% 70%,transparent 71%)}.fruit.berry{width:51px;height:51px;right:124px;top:43px;background:radial-gradient(circle,#e1d6ff 0 15%,#a68be5 16% 55%,#6650b5 56% 70%,transparent 71%)}.leaf{position:absolute;z-index:3;left:20px;top:-5px;width:68px;height:36px;border-radius:100% 0 100% 0;background:linear-gradient(145deg,#9bd855,#397d25);transform:rotate(-24deg)}.home-main,.about-main{padding:40px 35px}.home-story{display:grid;grid-template-columns:1fr 1fr;gap:18px}.home-panel,.about-panel{border-radius:22px;padding:34px;background:#fff;border:1px solid #ebe7df;box-shadow:var(--shadow)}.home-panel.yellow{background:#ffc72f}.home-panel h1,.about-panel h1{font:38px/1.1 "Permanent Marker",cursive;margin:8px 0 14px}.home-panel p,.about-panel p{font-size:12px;line-height:1.8;color:#4d4944}.home-panel.yellow p{color:#17130b}.about-hero{display:grid;grid-template-columns:1fr 1fr;min-height:470px}.about-hero-copy{padding:58px;background:#ffc92f;display:flex;flex-direction:column;justify-content:center}.about-hero-copy h1{font:52px/1 "Permanent Marker",cursive;margin:13px 0}.about-hero-copy p{font-size:14px;line-height:1.8}.about-art{background:linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.3)),url("https://images.unsplash.com/photo-1523381210434-271e8be1f52b?auto=format&fit=crop&w=1000&q=86") center/cover}.about-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}.about-panel.dark{background:#111;color:#fff}.about-panel.dark p{color:#ddd}.account-coming{min-height:640px;display:grid;place-items:center;padding:40px}.account-card{width:min(780px,100%);height:390px;border-radius:28px;background:#080808;color:#fff;display:grid;place-items:center;text-align:center;padding:40px;position:relative;overflow:hidden}.account-card:before{content:"";position:absolute;width:220px;height:220px;left:-70px;bottom:-90px;border-radius:50%;background:radial-gradient(circle,#fff2ae 0 15%,#ffd754 16% 55%,#f3a913 56% 70%,transparent 71%)}.account-card h1{font:51px "Permanent Marker",cursive;margin:8px 0}.account-card p{font-size:12px;color:#bbb}.account-card>div{position:relative;z-index:2}.category-heading{padding:40px 35px 6px}.category-heading h1{font:42px "Permanent Marker",cursive;margin:5px 0}.category-heading p{font-size:11px;color:#666}.category-products{padding:0 35px 38px}.admin-body{background:#f1ede5}.admin-login-wrap{min-height:100vh;display:grid;place-items:center;padding:25px}.admin-login{width:min(430px,100%);background:#fff;border-radius:28px;padding:34px;box-shadow:0 24px 70px rgba(0,0,0,.12)}.admin-login .logo-text{font-size:52px}.admin-login h1{font:32px "Permanent Marker",cursive;margin:18px 0 7px}.admin-login p{font-size:11px;line-height:1.65;color:#666}.admin-login form{display:grid;gap:10px;margin-top:18px}.admin-login input,.admin-form input,.admin-form textarea,.admin-form select{width:100%;border:1px solid #d9d4cc;border-radius:12px;padding:11px 12px;outline:none}.admin-login button,.admin-button{height:42px;border:0;border-radius:999px;background:#111;color:#fff;font-size:11px;font-weight:900}.admin-login-error{font-size:10px;color:#a32222;min-height:14px}.admin-shell{max-width:1120px;margin:0 auto;padding:28px 24px 70px}.admin-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.admin-top h1{font:33px "Permanent Marker",cursive;margin:0}.admin-logout{border:1px solid #aaa;border-radius:999px;background:#fff;padding:9px 15px;font-size:10px;font-weight:800}.admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.admin-panel{background:#fff;border-radius:21px;padding:25px;border:1px solid #e9e4db;box-shadow:0 10px 30px rgba(0,0,0,.04)}.admin-panel.wide{grid-column:1/-1}.admin-panel h2{margin:4px 0 8px;font-size:18px}.admin-panel p{font-size:10px;color:#666;line-height:1.6}.admin-form{display:grid;gap:11px;margin-top:15px}.admin-fields{display:grid;grid-template-columns:1fr 1fr;gap:11px}.admin-fields label{display:grid;gap:5px;font-size:9px;font-weight:800}.admin-fields .wide{grid-column:1/-1}.admin-button.yellow{background:var(--yellow);color:#111}.admin-message{font-size:10px;min-height:14px;margin-top:9px}.admin-logo-preview{height:80px;border-radius:14px;background:#f5f1ea;display:grid;place-items:center;overflow:hidden;margin-bottom:12px}.admin-logo-preview img{height:100%;max-width:200px;object-fit:contain;padding:7px}.admin-products{display:grid;gap:8px;margin-top:15px}.admin-product{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;border:1px solid #ebe6de;border-radius:12px;padding:11px}.admin-product strong{font-size:10px}.admin-product small{display:block;margin-top:3px;color:#777;font-size:9px}.delete{border:1px solid #e1aaaa;color:#922b2b;background:#fff4f4;border-radius:999px;padding:7px 10px;font-size:9px}@media(min-width:1025px){body{background:#eeeae2}#app{width:1024px;margin:0 auto;background:#fbfaf8;min-height:100vh;box-shadow:0 0 50px rgba(0,0,0,.08)}}@media(max-width:820px){.header{height:auto}.header-top{height:82px;padding:0 18px}.header-left a:nth-child(2){display:none}.header-left{gap:0}.header-tabs{justify-content:flex-start;overflow:auto;gap:32px;padding:0 18px}.hero-left{left:34px}.hero-center{display:none}.directory-main,.product-main,.home-main,.about-main,.category-products,.category-heading{padding-left:18px;padding-right:18px}.category-card{flex-basis:180px}.product-grid{grid-template-columns:repeat(2,1fr)}.purchase{grid-template-columns:1fr}.product-info{padding-top:10px}.description{grid-template-columns:1fr}.description-copy{padding-left:0}.footer-grid{grid-template-columns:1fr 1fr;height:auto;padding:70px 28px 24px}.fruit-footer{height:auto;min-height:340px}.payments{align-self:start}.home-story,.about-grid,.about-hero{grid-template-columns:1fr}.about-art{min-height:340px}.admin-grid{grid-template-columns:1fr}.admin-panel.wide{grid-column:auto}}@media(max-width:520px){.header-top{grid-template-columns:1fr auto 1fr}.header-left a{display:none}.header-actions{gap:2px}.logo-text{font-size:42px}.hero{height:285px}.hero.rounded{height:280px;margin:0}.hero-word{font-size:58px}.section-head{align-items:flex-start}.carousel-buttons{margin-top:0}.script-title{font-size:29px}.product-grid{grid-template-columns:1fr 1fr;gap:8px}.product-image{height:170px}.product-body{height:98px}.media-main{height:430px}.thumbs{gap:6px}.thumb{height:72px}.option{grid-template-columns:60px 1fr}.size-guide{margin-left:72px}.admin-fields{grid-template-columns:1fr}.admin-fields .wide{grid-column:auto}}



#app{
  overflow-x:hidden;
}

.header,
.hero,
.fruit-footer{
  width:100%;
  max-width:none;
}

.hero.rounded{
  width:calc(100% - 20px);
}

.directory-main,
.product-main,
.home-main,
.about-main,
.category-heading,
.category-products{
  width:100%;
  max-width:none;
}

.merch-directory-only{
  min-height:calc(100vh - 145px - 293px - 208px);
  padding-bottom:46px;
}

/* Let the directory use the extra width instead of keeping
   screenshot-sized category cards forever. */
@media(min-width:1200px){
  .category-track{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    overflow:visible;
    gap:18px;
  }

  .category-card{
    width:100%;
    min-width:0;
    max-width:none;
    height:clamp(360px,35vw,540px);
  }

  .carousel-buttons{
    display:none;
  }

  .product-grid{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:18px;
  }

  .product-image{
    height:clamp(230px,24vw,390px);
  }

  .product-body{
    height:auto;
    min-height:105px;
  }

  .purchase{
    grid-template-columns:minmax(0,1.1fr) minmax(390px,.9fr);
    gap:48px;
  }

  .media-main{
    height:min(70vh,720px);
  }

  .description{
    grid-template-columns:minmax(360px,.8fr) minmax(0,1.2fr);
  }
}

/* Tablets */
@media(max-width:1199px) and (min-width:821px){
  .category-card{
    flex:0 0 22vw;
    min-width:210px;
  }
}

/* Phones remain horizontally swipeable, as intended. */
@media(max-width:820px){
  .hero.rounded{
    width:100%;
    margin-left:0;
    margin-right:0;
    border-radius:0;
  }

  .merch-directory-only{
    min-height:auto;
    padding-bottom:32px;
  }
}

/* === FRUITY REFERENCE REDESIGN V4 === */

/*
  This section intentionally overrides the older layout rules.

  Goal:
  - Keep the page physically full-screen.
  - Keep the actual content proportions close to the approved screenshots.
  - Do NOT stretch cards to ridiculous monitor widths.
  - Preserve the strong white / black / fruit-yellow identity.
*/

:root{
  --fruity-yellow:#f5b800;
  --fruity-yellow-light:#ffc929;
  --fruity-black:#080808;
  --fruity-paper:#fbfaf7;
  --fruity-white:#ffffff;
  --fruity-muted:#69645d;

  --fruity-content:1480px;

  --fruity-soft-shadow:
    0 18px 50px rgba(22,16,6,.08);

  --fruity-deep-shadow:
    0 30px 80px rgba(16,12,3,.14);
}

/* ---------------------------------------------------------
   GLOBAL
   --------------------------------------------------------- */

html,
body,
#app{
  width:100%;
  max-width:none;
  min-height:100%;
}

body{
  margin:0;

  background:
    radial-gradient(
      circle at 12% 0%,
      rgba(245,184,0,.045),
      transparent 35rem
    ),
    #fbfaf7;
}

#app{
  width:100%;
  max-width:none;
  margin:0;

  background:#fbfaf7;

  box-shadow:none;

  overflow-x:hidden;
}


/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */

.header{
  position:sticky;

  top:0;

  z-index:80;

  width:100%;

  height:auto;

  background:
    rgba(255,255,255,.975);

  backdrop-filter:
    blur(17px);

  border-bottom:
    1px solid rgba(0,0,0,.055);
}

.header-top{
  width:min(
    calc(100% - 48px),
    var(--fruity-content)
  );

  height:88px;

  margin:0 auto;

  padding:0;

  display:grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items:center;
}

.header-left{
  display:flex;

  align-items:center;

  gap:48px;

  font-size:13px;

  font-weight:800;
}

.header-left a{
  transition:
    opacity .18s ease,
    transform .18s ease;
}

.header-left a:hover{
  opacity:.55;

  transform:
    translateY(-1px);
}

.logo-link{
  min-width:116px;

  height:70px;

  display:grid;

  place-items:center;
}

.logo-img{
  width:auto;

  max-width:120px;

  max-height:64px;

  object-fit:contain;
}

.logo-text{
  display:inline-block;

  font-family:
    "Permanent Marker",
    cursive;

  font-size:52px;

  line-height:.8;

  font-weight:400;

  letter-spacing:-5px;

  transform:
    rotate(-5deg);
}

.header-actions{
  display:flex;

  justify-content:flex-end;

  align-items:center;

  gap:13px;
}

.icon{
  width:43px;
  height:43px;

  display:grid;

  place-items:center;

  border-radius:50%;

  transition:
    background .18s ease;
}

.icon:hover{
  background:#f4f1eb;
}

.icon svg{
  width:27px;
  height:27px;
}

.cart-badge{
  right:-2px;
  top:-2px;

  width:20px;
  height:20px;

  background:
    var(--fruity-yellow);
}

.header-tabs{
  width:min(
    calc(100% - 48px),
    var(--fruity-content)
  );

  height:53px;

  margin:0 auto;

  padding:0;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:clamp(
    32px,
    5vw,
    72px
  );

  overflow-x:auto;

  scrollbar-width:none;
}

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

.header-tabs a{
  height:53px;

  padding:0;

  font-size:13px;

  font-weight:800;

  transition:
    opacity .18s ease;
}

.header-tabs a:hover{
  opacity:.55;
}

.header-tabs a.active:after{
  bottom:7px;

  height:3px;

  border-radius:99px;

  background:
    var(--fruity-yellow);
}


/* ---------------------------------------------------------
   HERO

   This is deliberately large again.
   The previous patch made it feel like a banner ad.
   The approved design feels more like editorial photography.
   --------------------------------------------------------- */

.hero{
  position:relative;

  width:100%;

  height:clamp(
    390px,
    39vw,
    565px
  );

  max-height:565px;

  overflow:hidden;

  background-position:center 42%;

  background-size:cover;

  background-color:#080808;
}

.hero.rounded{
  width:
    min(
      calc(100% - 42px),
      var(--fruity-content)
    );

  height:clamp(
    390px,
    38vw,
    545px
  );

  margin:
    0 auto;

  border-radius:
    0 0 26px 26px;
}

.hero:before{
  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.84) 0%,
      rgba(0,0,0,.42) 27%,
      rgba(0,0,0,.08) 50%,
      rgba(0,0,0,.33) 100%
    );
}

.hero-left{
  left:
    max(
      5vw,
      calc(
        (100% - var(--fruity-content)) / 2
        + 58px
      )
    );

  top:50%;

  transform:
    translateY(-50%);
}

.hero.rounded .hero-left{
  left:58px;
}

.hero-small{
  font-size:
    clamp(
      24px,
      2vw,
      31px
    );
}

.hero-word{
  margin:
    7px 0 13px;

  font-size:
    clamp(
      70px,
      7vw,
      105px
    );

  letter-spacing:-7px;
}

.hero-tag{
  font-size:13px;

  font-weight:600;

  letter-spacing:.045em;
}

.hero-center{
  font-size:
    clamp(
      78px,
      8vw,
      120px
    );

  letter-spacing:-8px;

  opacity:.9;
}

.hero-bottom{
  left:31px;
  right:31px;

  bottom:20px;
}


/* ---------------------------------------------------------
   MERCH DIRECTORY

   Exactly one job:
   choose the kind of merch.
   --------------------------------------------------------- */

.directory-main{
  width:min(
    calc(100% - 48px),
    var(--fruity-content)
  );

  margin:0 auto;

  padding:
    0 0 62px;
}

.merch-directory-only{
  min-height:
    500px;
}

.directory-categories{
  padding-top:52px;
}

.section-head{
  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:28px;
}

.kicker{
  font-size:12px;

  font-weight:900;

  letter-spacing:.025em;

  color:
    #d99d00;
}

.script-title{
  margin:
    7px 0 0;

  font-family:
    "Permanent Marker",
    cursive;

  font-size:
    clamp(
      34px,
      3.2vw,
      48px
    );

  line-height:1;

  font-weight:400;

  letter-spacing:-2.2px;
}

.script-title:after{
  width:114px;

  height:3px;

  bottom:-11px;

  background:
    var(--fruity-yellow);
}

.carousel-buttons{
  display:flex;

  gap:10px;
}

.round-btn{
  width:44px;
  height:44px;

  border-radius:50%;

  border:
    1px solid
    #ddd9d1;

  background:#fff;

  box-shadow:
    0 7px 20px
    rgba(0,0,0,.045);

  transition:
    transform .18s ease,
    background .18s ease;
}

.round-btn:hover{
  background:
    var(--fruity-yellow);

  transform:
    translateY(-2px);
}

.category-window{
  margin-top:34px;

  overflow:hidden;
}

.category-track{
  display:grid;

  grid-template-columns:
    repeat(
      5,
      minmax(0,1fr)
    );

  gap:18px;

  overflow:visible;

  padding:
    5px 3px 26px;
}

.category-card{
  position:relative;

  width:100%;

  min-width:0;

  height:auto;

  aspect-ratio:
    0.69;

  border-radius:24px;

  overflow:hidden;

  background:#ddd;

  box-shadow:
    var(--fruity-soft-shadow);

  transition:
    transform .28s
    cubic-bezier(.2,.7,.2,1),
    box-shadow .28s ease;
}

.category-card:hover{
  transform:
    translateY(-7px);

  box-shadow:
    var(--fruity-deep-shadow);
}

.category-card img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:
    transform .55s
    cubic-bezier(.2,.7,.2,1);
}

.category-card:hover img{
  transform:
    scale(1.04);
}

.category-card:after{
  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      180deg,
      transparent 30%,
      rgba(0,0,0,.025) 48%,
      rgba(0,0,0,.88) 100%
    );
}

.category-name{
  left:20px;
  right:60px;

  bottom:69px;

  font-family:
    "Permanent Marker",
    cursive;

  font-size:
    clamp(
      23px,
      2vw,
      34px
    );

  line-height:.96;

  letter-spacing:-1.6px;

  color:
    var(--fruity-yellow);
}

.category-count{
  left:21px;

  bottom:42px;

  font-size:11px;

  font-weight:800;

  letter-spacing:.02em;
}

.category-arrow{
  right:17px;

  bottom:16px;

  width:43px;
  height:43px;

  font-size:22px;

  border-radius:50%;

  box-shadow:
    0 6px 17px
    rgba(0,0,0,.12);

  transition:
    transform .2s ease,
    background .2s ease;
}

.category-card:hover
.category-arrow{
  transform:
    translateX(2px);

  background:
    var(--fruity-yellow);
}


/* arrows are only useful once cards actually overflow */
@media(min-width:1100px){
  .directory-categories
  .carousel-buttons{
    display:none;
  }
}


/* ---------------------------------------------------------
   CATEGORY PRODUCT PAGES
   --------------------------------------------------------- */

.category-heading{
  width:min(
    calc(100% - 48px),
    var(--fruity-content)
  );

  margin:0 auto;

  padding:
    54px 0 18px;
}

.category-heading h1{
  margin:
    5px 0 5px;

  font-family:
    "Permanent Marker",
    cursive;

  font-size:
    clamp(
      40px,
      4vw,
      60px
    );

  line-height:1;

  font-weight:400;

  letter-spacing:-2.4px;
}

.category-heading p{
  margin-top:13px;

  color:
    var(--fruity-muted);

  font-size:12px;
}

.category-products{
  width:min(
    calc(100% - 48px),
    var(--fruity-content)
  );

  margin:0 auto;

  padding:
    0 0 65px;
}

.product-grid{
  display:grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:21px;

  margin-top:25px;
}

.product-card{
  border-radius:22px;

  overflow:hidden;

  background:#fff;

  border:
    1px solid
    rgba(0,0,0,.055);

  box-shadow:
    var(--fruity-soft-shadow);

  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.product-card:hover{
  transform:
    translateY(-6px);

  box-shadow:
    var(--fruity-deep-shadow);
}

.product-image{
  height:auto;

  aspect-ratio:1 / 1.14;

  background:
    #f0ede8;
}

.product-image img{
  width:100%;
  height:100%;

  object-fit:cover;

  transition:
    transform .45s ease;
}

.product-card:hover
.product-image img{
  transform:
    scale(1.025);
}

.product-body{
  height:auto;

  min-height:112px;

  padding:
    13px 14px 15px;
}

.product-badge{
  padding:
    4px 7px;

  font-size:8px;
}

.product-name{
  margin-top:9px;

  font-size:12px;
}

.product-price{
  margin-top:5px;

  font-size:11px;
}


/* ---------------------------------------------------------
   EMPTY PRODUCT STATE

   Same visual language as the site rather than one random box.
   --------------------------------------------------------- */

.empty-products{
  position:relative;

  height:315px;

  overflow:hidden;

  display:grid;

  place-items:center;

  margin-top:26px;

  padding:45px;

  text-align:center;

  border-radius:28px;

  border:
    1px solid
    rgba(0,0,0,.06);

  background:
    linear-gradient(
      135deg,
      #fff,
      #f4efe6
    );

  box-shadow:
    var(--fruity-soft-shadow);
}

.empty-products:before{
  width:200px;
  height:200px;

  left:-74px;
  bottom:-81px;
}

.empty-products:after{
  width:155px;
  height:155px;

  right:-44px;
  top:-58px;
}

.empty-products h3{
  font-size:35px;

  letter-spacing:-1.4px;
}

.empty-products p{
  max-width:540px;

  margin-top:10px;

  font-size:12px;

  line-height:1.7;
}


/* ---------------------------------------------------------
   PRODUCT DETAIL PAGE

   Reference:
   gallery left,
   buying controls right,
   editorial description underneath.
   --------------------------------------------------------- */

.product-main{
  width:min(
    calc(100% - 48px),
    var(--fruity-content)
  );

  margin:0 auto;

  padding:
    42px 0 0;
}

.purchase{
  display:grid;

  grid-template-columns:
    minmax(0,1.08fr)
    minmax(390px,.92fr);

  gap:
    clamp(
      46px,
      5vw,
      78px
    );

  align-items:start;
}

.media-main{
  height:auto;

  aspect-ratio:
    1.13 / 1;

  border-radius:29px;

  background:
    linear-gradient(
      145deg,
      #cab1cf,
      #eaddea
    );

  box-shadow:
    var(--fruity-soft-shadow);
}

.media-main img{
  width:100%;
  height:100%;

  object-fit:cover;
}

.media-status{
  top:20px;
  left:21px;

  font-size:11px;

  font-weight:700;
}

.media-time{
  left:21px;

  bottom:28px;
}

.media-progress{
  left:21px;
  right:21px;

  bottom:15px;
}

.thumbs{
  margin-top:14px;

  gap:11px;
}

.thumb{
  width:100%;

  height:auto;

  aspect-ratio:1;

  border-radius:15px;

  background:#eeeae4;
}

.product-info{
  position:sticky;

  top:166px;

  padding-top:8px;
}

.product-info
.product-badge{
  padding:
    5px 10px;

  font-size:9px;
}

.product-title{
  margin:
    13px 0 7px;

  font-family:
    "Permanent Marker",
    cursive;

  font-size:
    clamp(
      36px,
      3.6vw,
      53px
    );

  line-height:1.02;

  letter-spacing:-2px;

  font-weight:400;
}

.big-price{
  margin-top:3px;

  font-size:21px;
}

.tax{
  margin-top:5px;

  font-size:11px;

  color:#54504b;
}

.option{
  margin-top:27px;

  grid-template-columns:
    72px 1fr;

  gap:13px;
}

.option-label{
  font-size:11px;

  font-weight:800;
}

.color{
  width:32px;
  height:32px;
}

.size{
  min-width:42px;

  height:39px;

  font-size:11px;
}

.size-guide{
  margin:
    13px 0 0 85px;
}

.quantity{
  width:132px;
}

.quantity button,
.quantity span{
  width:44px;
  height:39px;
}

.actions{
  gap:11px;

  margin-top:18px;
}

.action{
  height:51px;

  font-size:12px;

  font-weight:900;

  transition:
    transform .17s ease,
    box-shadow .17s ease;
}

.action:hover{
  transform:
    translateY(-2px);
}

.action.dark{
  box-shadow:
    0 9px 24px
    rgba(0,0,0,.13);
}

.action.buy{
  background:
    linear-gradient(
      90deg,
      #ffc722,
      #ffb800
    );
}

.description{
  display:grid;

  grid-template-columns:
    minmax(340px,.8fr)
    minmax(0,1.2fr);

  gap:45px;

  align-items:center;

  margin-top:60px;
}

.description-copy{
  padding:
    25px 15px 31px 28px;
}

.description-copy h2{
  font-size:30px;
}

.description-copy p,
.description-copy li{
  font-size:12px;

  line-height:1.8;
}

.description-image{
  width:100%;

  height:auto;

  aspect-ratio:
    1.35 / 1;

  border-radius:29px;

  box-shadow:
    var(--fruity-soft-shadow);
}


/* ---------------------------------------------------------
   HOME / ABOUT

   Keep same identity rather than looking like a second site.
   --------------------------------------------------------- */

.home-main,
.about-main{
  width:min(
    calc(100% - 48px),
    var(--fruity-content)
  );

  margin:0 auto;

  padding:
    52px 0;
}

.home-story{
  gap:22px;
}

.home-panel,
.about-panel{
  padding:
    45px;

  border-radius:28px;

  box-shadow:
    var(--fruity-soft-shadow);
}

.home-panel h1,
.about-panel h1{
  font-size:
    clamp(
      38px,
      4vw,
      56px
    );
}

.home-panel p,
.about-panel p{
  font-size:13px;

  line-height:1.8;
}

.about-hero{
  width:100%;

  min-height:
    590px;
}

.about-hero-copy{
  padding:
    clamp(
      45px,
      6vw,
      90px
    );
}

.about-hero-copy h1{
  font-size:
    clamp(
      50px,
      5vw,
      74px
    );
}


/* ---------------------------------------------------------
   FOOTER

   Large orange slice base with extra fruit sitting around it.
   --------------------------------------------------------- */

.fruit-footer{
  position:relative;

  width:100%;

  height:auto;

  min-height:265px;

  margin-top:62px;

  padding-bottom:29px;

  border-radius:
    50% 50% 0 0 /
    26% 26% 0 0;

  background:
    repeating-conic-gradient(
      from -5deg
      at 50% -30%,
      rgba(255,255,255,.18)
      0 1deg,
      transparent
      1deg 13deg
    ),
    radial-gradient(
      ellipse
      at 50% -30%,
      #fff0bd
      0 11%,
      #ffd771
      11.5% 16%,
      #ffc543
      16.5% 57%,
      #ffa51b
      58% 70%,
      #ffcc5c
      71% 74%,
      #ffb111
      75%
    );

  border-top:
    5px solid
    #ffe29a;
}

.footer-grid{
  width:min(
    calc(100% - 70px),
    1390px
  );

  height:auto;

  min-height:230px;

  margin:0 auto;

  padding:
    72px 0 0;

  display:grid;

  grid-template-columns:
    1.4fr
    1fr
    1fr
    1fr
    1.15fr;

  gap:40px;
}

.footer-logo
.logo-text{
  font-size:53px;
}

.footer-col h4{
  font-size:13px;
}

.footer-col a{
  font-size:10px;

  line-height:1.4;
}

.payments{
  padding-bottom:0;

  align-self:start;

  justify-content:flex-end;

  flex-wrap:wrap;
}

.fruit.lemon{
  width:92px;
  height:92px;

  left:3%;

  top:7px;
}

.fruit.lime{
  width:67px;
  height:67px;

  left:13%;

  top:48px;
}

.fruit.grapefruit{
  width:100px;
  height:100px;

  right:4%;

  top:6px;
}

.fruit.berry{
  width:64px;
  height:64px;

  right:16%;

  top:52px;
}

.leaf{
  width:87px;
  height:45px;

  left:3%;

  top:-6px;
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media(max-width:1099px){

  .category-track{
    display:flex;

    gap:16px;

    overflow-x:auto;

    padding-bottom:24px;

    scroll-snap-type:
      x mandatory;
  }

  .category-card{
    flex:
      0 0
      min(
        310px,
        40vw
      );

    width:auto;

    aspect-ratio:.69;
  }

  .directory-categories
  .carousel-buttons{
    display:flex;
  }

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

  .purchase{
    grid-template-columns:1fr;
  }

  .product-info{
    position:static;

    max-width:760px;
  }

  .description{
    grid-template-columns:1fr;
  }

  .footer-grid{
    grid-template-columns:
      1.3fr 1fr 1fr;

    row-gap:30px;
  }

}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:720px){

  .header-top{
    width:calc(100% - 30px);

    height:76px;
  }

  .header-left{
    gap:0;
  }

  .header-left a{
    display:none;
  }

  .logo-text{
    font-size:43px;
  }

  .header-tabs{
    width:100%;

    padding:
      0 17px;

    gap:30px;

    justify-content:flex-start;
  }

  .hero,
  .hero.rounded{
    width:100%;

    height:320px;

    margin:0;

    border-radius:0;
  }

  .hero-left,
  .hero.rounded
  .hero-left{
    left:27px;
  }

  .hero-center{
    display:none;
  }

  .directory-main,
  .product-main,
  .home-main,
  .about-main,
  .category-heading,
  .category-products{
    width:calc(100% - 30px);
  }

  .directory-categories{
    padding-top:37px;
  }

  .script-title{
    font-size:31px;
  }

  .category-window{
    margin-top:30px;
  }

  .category-card{
    flex:
      0 0
      min(
        78vw,
        300px
      );
  }

  .category-name{
    font-size:29px;
  }

  .product-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

    gap:11px;
  }

  .product-card{
    border-radius:17px;
  }

  .product-body{
    min-height:100px;

    padding:
      10px;
  }

  .media-main{
    border-radius:22px;
  }

  .thumbs{
    gap:6px;
  }

  .product-title{
    font-size:37px;
  }

  .description-copy{
    padding:
      10px 2px;
  }

  .footer-grid{
    width:calc(100% - 48px);

    grid-template-columns:
      1fr 1fr;

    padding-top:95px;
  }

}


/* ---------------------------------------------------------
   SMALL MOBILE
   --------------------------------------------------------- */

@media(max-width:480px){

  .product-grid{
    grid-template-columns:
      1fr;
  }

  .category-card{
    flex-basis:
      80vw;
  }

  .footer-grid{
    grid-template-columns:1fr;
  }

  .payments{
    justify-content:flex-start;
  }

}


/* === FRUITY BAG === */

.bag-page{
  width:min(
    calc(100% - 48px),
    var(--fruity-content,1480px)
  );

  margin:0 auto;

  padding:
    58px 0 90px;
}

.bag-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;

  gap:30px;

  padding-bottom:34px;

  border-bottom:
    1px solid #dfdbd3;
}

.bag-heading h1{
  position:relative;

  margin:
    7px 0 10px;

  font-family:
    "Permanent Marker",
    cursive;

  font-size:
    clamp(
      52px,
      6vw,
      88px
    );

  line-height:.9;

  letter-spacing:-4px;
}

.bag-heading h1:after{
  content:"";

  position:absolute;

  width:122px;
  height:4px;

  left:5px;
  bottom:-12px;

  border-radius:99px;

  background:
    var(--fruity-yellow,#f5b800);

  transform:
    rotate(-2deg);
}

.bag-heading p{
  margin-top:25px;

  color:#66615a;

  font-size:12px;
}

.bag-count-big{
  padding-bottom:8px;

  font-size:12px;

  font-weight:900;

  letter-spacing:.05em;
}

.bag-layout{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    370px;

  gap:50px;

  margin-top:36px;

  align-items:start;
}

.bag-list{
  display:grid;

  gap:15px;
}

.bag-item{
  display:grid;

  grid-template-columns:
    175px
    minmax(0,1fr)
    auto;

  gap:24px;

  min-height:175px;

  padding:14px;

  border:
    1px solid #ebe6de;

  border-radius:24px;

  background:#fff;

  box-shadow:
    0 10px 34px
    rgba(0,0,0,.045);
}

.bag-item-image{
  width:175px;
  height:175px;

  overflow:hidden;

  border-radius:17px;

  background:#efede8;
}

.bag-item-image img{
  width:100%;
  height:100%;

  object-fit:cover;
}

.bag-fruit-placeholder{
  width:100%;
  height:100%;

  display:grid;

  place-items:center;

  font:
    40px "Permanent Marker",
    cursive;

  background:
    linear-gradient(
      145deg,
      #ffd34c,
      #f1b500
    );
}

.bag-item-copy{
  align-self:center;
}

.bag-item-copy h2{
  margin:
    9px 0 12px;

  font-family:
    "Permanent Marker",
    cursive;

  font-size:
    clamp(
      21px,
      2vw,
      31px
    );

  line-height:1.05;
}

.bag-option{
  margin-top:4px;

  color:#68635d;

  font-size:10px;

  font-weight:700;
}

.bag-item-price{
  margin-top:15px;

  font-size:13px;

  font-weight:800;
}

.bag-controls{
  min-width:125px;

  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:flex-end;

  gap:14px;
}

.bag-quantity{
  display:grid;

  grid-template-columns:
    36px 38px 36px;

  overflow:hidden;

  border:
    1px solid #ddd8d0;

  border-radius:999px;
}

.bag-quantity button,
.bag-quantity span{
  width:100%;
  height:35px;

  border:0;

  display:grid;

  place-items:center;

  background:#fff;
}

.bag-remove{
  border:0;

  background:none;

  color:#706b64;

  font-size:9px;

  font-weight:900;

  text-decoration:underline;
}

.bag-summary{
  position:sticky;

  top:175px;

  padding:28px;

  border-radius:25px;

  background:#0a0a0a;

  color:#fff;

  box-shadow:
    0 24px 60px
    rgba(0,0,0,.16);
}

.bag-summary .kicker{
  color:
    var(--fruity-yellow,#f5b800);
}

.bag-summary-row{
  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:20px;

  margin-top:28px;

  padding:
    20px 0;

  border-top:
    1px solid #333;

  border-bottom:
    1px solid #333;

  font-size:13px;
}

.bag-summary-row strong{
  font-size:17px;
}

.bag-summary p{
  margin:
    17px 0;

  color:#aaa;

  font-size:10px;

  line-height:1.6;
}

.bag-checkout{
  width:100%;

  min-height:54px;

  padding:
    0 20px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:15px;

  border:0;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      #ffc92d,
      #f4b500
    );

  color:#090909;

  font-size:10px;

  font-weight:900;
}

.bag-checkout span{
  font-size:20px;
}

.bag-continue{
  display:block;

  margin-top:19px;

  text-align:center;

  color:#ccc;

  font-size:9px;

  font-weight:800;
}

.bag-empty{
  grid-column:1/-1;

  min-height:430px;

  display:grid;

  place-items:center;

  align-content:center;

  text-align:center;

  overflow:hidden;

  padding:40px;

  border-radius:30px;

  border:
    1px solid #ebe6de;

  background:
    radial-gradient(
      circle at 15% 110%,
      #ffc323 0 13%,
      transparent 13.3%
    ),
    radial-gradient(
      circle at 94% -15%,
      #88c341 0 10%,
      transparent 10.3%
    ),
    #fff;
}

.bag-empty-fruit{
  width:70px;
  height:70px;

  margin-bottom:20px;

  display:grid;

  place-items:center;

  border-radius:50%;

  background:
    var(--fruity-yellow,#f5b800);

  font-size:40px;
}

.bag-empty h2{
  margin:
    8px 0;

  font:
    clamp(
      35px,
      5vw,
      57px
    )/1
    "Permanent Marker",
    cursive;
}

.bag-empty p{
  margin:
    0 0 25px;

  color:#68635d;

  font-size:12px;
}

.bag-shop-button{
  min-height:44px;

  padding:
    0 21px;

  display:inline-flex;

  align-items:center;

  border-radius:999px;

  background:#090909;

  color:#fff;

  font-size:10px;

  font-weight:900;
}

@media(max-width:900px){

  .bag-layout{
    grid-template-columns:1fr;
  }

  .bag-summary{
    position:static;
  }

}

@media(max-width:620px){

  .bag-page{
    width:calc(100% - 30px);

    padding-top:35px;
  }

  .bag-heading{
    align-items:flex-start;

    flex-direction:column;
  }

  .bag-item{
    grid-template-columns:
      105px 1fr;

    gap:13px;
  }

  .bag-item-image{
    width:105px;
    height:120px;
  }

  .bag-controls{
    grid-column:1/-1;

    width:100%;

    flex-direction:row;

    align-items:center;

    justify-content:space-between;
  }

}


/* === REALISTIC FRUITY FOOTER V2 === */

.realistic-fruit-footer{
  position:relative;

  width:100%;

  min-height:330px;

  margin-top:65px;

  overflow:hidden;

  background:#f6ad12;

  border-radius:
    50% 50% 0 0 /
    18% 18% 0 0;

  border-top:
    3px solid rgba(255,231,160,.9);
}


/* actual detailed fruit artwork rather than flat circles */
.fruit-footer-art{
  position:absolute;

  z-index:0;

  inset:0;

  width:100%;
  height:100%;

  background-image:
    url("/assets/fruity-footer.svg");

  background-position:
    center top;

  background-size:
    cover;

  background-repeat:
    no-repeat;

  pointer-events:none;
}


.realistic-fruit-footer
.footer-grid{
  position:relative;

  z-index:3;

  width:min(
    calc(100% - 70px),
    1390px
  );

  min-height:330px;

  margin:0 auto;

  padding:
    112px 0 34px;

  display:grid;

  grid-template-columns:
    1.45fr
    .8fr
    .9fr
    .9fr
    1.45fr;

  gap:
    clamp(
      24px,
      4vw,
      58px
    );

  align-items:start;
}


/* make footer information readable over fruit pulp */
.realistic-fruit-footer
.footer-brand,
.realistic-fruit-footer
.footer-col,
.realistic-fruit-footer
.proper-payments{
  position:relative;

  z-index:3;
}


.realistic-fruit-footer
.footer-logo{
  display:inline-flex;

  min-height:53px;

  align-items:center;
}


.realistic-fruit-footer
.footer-logo
.logo-img{
  max-width:120px;

  max-height:61px;

  filter:
    brightness(0);
}


.realistic-fruit-footer
.footer-logo
.logo-text{
  color:#080808;

  font-size:54px;
}


.realistic-fruit-footer
.footer-tag{
  margin-top:6px;

  color:#111;

  font-size:10px;

  font-weight:900;

  letter-spacing:.025em;
}


.realistic-fruit-footer
.copyright{
  margin-top:19px;

  color:
    rgba(0,0,0,.72);

  font-size:9px;
}


.realistic-fruit-footer
.footer-col h4{
  margin:
    7px 0 14px;

  color:#090909;

  font-size:12px;

  font-weight:900;
}


.realistic-fruit-footer
.footer-col a{
  display:block;

  margin:8px 0;

  color:
    rgba(0,0,0,.75);

  font-size:9px;

  font-weight:600;

  transition:
    opacity .15s ease;
}


.realistic-fruit-footer
.footer-col a:hover{
  opacity:.5;
}


/* proper social logo treatment */
.proper-socials{
  display:flex;

  align-items:center;

  gap:9px;

  margin-top:14px;
}


.social-logo{
  width:32px;
  height:32px;

  display:grid;

  place-items:center;

  border-radius:50%;

  background:
    rgba(255,255,255,.67);

  border:
    1px solid rgba(0,0,0,.08);

  backdrop-filter:
    blur(6px);

  box-shadow:
    0 5px 13px
    rgba(0,0,0,.07);
}


.social-logo img{
  width:15px;
  height:15px;

  object-fit:contain;
}


/* proper payment/card badge styling */
.proper-payments{
  align-self:end;

  display:flex;

  justify-content:flex-end;

  align-items:center;

  flex-wrap:wrap;

  gap:7px;

  padding-bottom:2px;
}


.payment-logo{
  width:55px;
  height:34px;

  display:grid;

  place-items:center;

  padding:7px 8px;

  border-radius:6px;

  background:#fff;

  border:
    1px solid
    rgba(0,0,0,.07);

  box-shadow:
    0 5px 13px
    rgba(0,0,0,.08);
}


.payment-logo img{
  width:100%;
  height:100%;

  object-fit:contain;
}


/* ==========================================================
   CLEAN FRT LOGO PLACEHOLDERS
   ========================================================== */

.branded-placeholder{
  position:relative;

  display:grid;

  place-items:center;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 20% 15%,
      rgba(255,207,55,.17),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #f8f6f2,
      #ebe8e2
    );
}


.branded-placeholder:after{
  content:"";

  position:absolute;

  width:130px;
  height:130px;

  right:-62px;
  bottom:-72px;

  border-radius:50%;

  background:
    rgba(245,184,0,.11);
}


.branded-placeholder
.logo-img{
  position:relative;

  z-index:2;

  width:auto;

  max-width:42%;

  max-height:42%;

  object-fit:contain;

  opacity:.92;
}


.branded-placeholder
.logo-text{
  position:relative;

  z-index:2;

  font-size:
    clamp(
      37px,
      5vw,
      71px
    );

  color:#111;

  opacity:.92;
}


.thumb-placeholder
.logo-text{
  font-size:28px;
}


.bag-fruit-placeholder
.logo-text{
  font-size:38px;
}


/* kill the old decorative CSS fruit circles */
.realistic-fruit-footer
> .fruit,
.realistic-fruit-footer
> .leaf{
  display:none;
}


@media(max-width:1000px){

  .realistic-fruit-footer
  .footer-grid{
    grid-template-columns:
      1.3fr 1fr 1fr;

    padding-top:115px;

    row-gap:28px;
  }

  .proper-payments{
    justify-content:flex-start;
  }

}


@media(max-width:650px){

  .realistic-fruit-footer{
    min-height:560px;

    border-radius:
      45% 45% 0 0 /
      10% 10% 0 0;
  }

  .fruit-footer-art{
    background-size:
      auto 100%;
  }

  .realistic-fruit-footer
  .footer-grid{
    width:
      calc(100% - 44px);

    grid-template-columns:
      1fr 1fr;

    padding-top:145px;

    gap:27px 20px;
  }

  .footer-brand{
    grid-column:1/-1;
  }

  .proper-payments{
    grid-column:1/-1;

    justify-content:flex-start;
  }

}


@media(max-width:430px){

  .realistic-fruit-footer{
    min-height:650px;
  }

  .realistic-fruit-footer
  .footer-grid{
    grid-template-columns:1fr;
  }

  .footer-brand,
  .proper-payments{
    grid-column:auto;
  }

}


/* === FRUITY PHOTO FOOTER FINAL === */


/* ----------------------------------------------------------
   LOGO

   Uploaded logo if valid.
   FRT brush mark if not.
   ---------------------------------------------------------- */

.fruity-logo-wrap{
  display:inline-grid;

  place-items:center;

  min-width:110px;

  min-height:65px;
}


.fruity-fallback-logo{
  display:inline-block;

  color:#080808;

  font-family:
    "Permanent Marker",
    cursive;

  font-size:54px;

  font-weight:400;

  line-height:.8;

  letter-spacing:-5px;

  transform:
    rotate(-5deg);
}


.header
.fruity-uploaded-logo{
  width:auto;

  max-width:115px;

  max-height:64px;

  object-fit:contain;
}


/* ----------------------------------------------------------
   FRT PLACEHOLDERS
   ---------------------------------------------------------- */

.branded-placeholder{
  display:grid;

  place-items:center;

  background:
    radial-gradient(
      circle at 50% 45%,
      #fff 0%,
      #f7f4ee 65%,
      #efebe4 100%
    ) !important;
}


.branded-placeholder
.logo-text{
  color:#111;

  font-size:
    clamp(
      42px,
      5vw,
      72px
    );

  opacity:.96;
}


.branded-placeholder
.logo-img{
  max-width:42%;

  max-height:42%;

  object-fit:contain;
}


/* ----------------------------------------------------------
   REAL PHOTO FRUIT FOOTER

   White background first.

   Then the real orange photograph forms one huge curved
   orange half underneath the footer content.
   ---------------------------------------------------------- */

.fruity-photo-footer{
  position:relative;

  width:100%;

  min-height:315px;

  margin-top:34px;

  overflow:hidden;

  background:#fbfaf7 !important;

  border:0 !important;

  border-radius:0 !important;

  isolation:isolate;
}


/* huge photographic orange half */
.fruity-photo-footer::before{
  content:"";

  position:absolute;

  z-index:-2;

  left:-4%;

  top:37px;

  width:108%;

  height:430px;

  background-image:
    url("/assets/fruity-footer-realistic.svg");

  background-repeat:
    no-repeat;

  background-position:
    center 43%;

  background-size:
    cover;

  border-radius:
    50% 50% 0 0 /
    20% 20% 0 0;

  border-top:
    7px solid
    rgba(255,223,132,.96);

  box-shadow:
    inset 0 9px 0
    rgba(255,171,0,.62),
    0 -5px 28px
    rgba(171,97,0,.09);

  filter:
    saturate(1.07)
    contrast(1.035)
    brightness(1.025);
}


/* small green leaf like the reference */
.fruity-photo-footer::after{
  content:"";

  position:absolute;

  z-index:-1;

  left:3%;

  top:17px;

  width:92px;

  height:43px;

  border-radius:
    100% 0 100% 0;

  transform:
    rotate(-22deg);

  background:
    linear-gradient(
      145deg,
      #9cda59,
      #5a9c32 53%,
      #27651f
    );

  box-shadow:
    0 7px 17px
    rgba(31,82,19,.18);
}


/* completely kill the previous fake fruit artwork */
.fruity-photo-footer
.fruit-footer-art,

.fruity-photo-footer
.fruit,

.fruity-photo-footer
.leaf{
  display:none !important;
}


/* ----------------------------------------------------------
   FOOTER CONTENT
   ---------------------------------------------------------- */

.fruity-photo-footer
.footer-grid{
  position:relative;

  z-index:3;

  width:min(
    calc(100% - 100px),
    1280px
  );

  min-height:315px;

  margin:0 auto;

  padding:
    102px 0 30px;

  display:grid;

  grid-template-columns:
    1.35fr
    .72fr
    .82fr
    .9fr
    1.45fr;

  gap:
    clamp(
      25px,
      3vw,
      55px
    );

  align-items:start;
}


.fruity-photo-footer
.footer-logo{
  display:inline-flex;

  min-height:48px;

  align-items:center;
}


.fruity-photo-footer
.footer-logo
.logo-text{
  font-size:50px;

  color:#080808;
}


.fruity-photo-footer
.footer-logo
.logo-img{
  max-width:105px;

  max-height:55px;

  filter:
    brightness(0);
}


.fruity-photo-footer
.footer-tag{
  margin-top:7px;

  font-size:10px;

  font-weight:900;

  color:#080808;
}


.fruity-photo-footer
.copyright{
  margin-top:18px;

  font-size:9px;

  color:
    rgba(0,0,0,.72);
}


.fruity-photo-footer
.footer-col h4{
  margin:
    7px 0 13px;

  font-size:11px;

  font-weight:900;

  color:#080808;
}


.fruity-photo-footer
.footer-col a{
  display:block;

  margin:8px 0;

  font-size:9px;

  font-weight:600;

  color:
    rgba(0,0,0,.78);
}


/* ----------------------------------------------------------
   PROPER SOCIAL ICONS
   ---------------------------------------------------------- */

.proper-socials{
  display:flex;

  align-items:center;

  gap:9px;

  margin-top:13px;
}


.social-logo{
  width:31px;

  height:31px;

  display:grid;

  place-items:center;

  border-radius:50%;

  background:
    rgba(255,255,255,.88);

  border:
    1px solid
    rgba(0,0,0,.08);

  box-shadow:
    0 4px 13px
    rgba(0,0,0,.08);

  transition:
    transform .18s ease,
    background .18s ease;
}


.social-logo:hover{
  transform:
    translateY(-2px);

  background:#fff;
}


.social-logo img{
  width:15px;

  height:15px;

  display:block;

  object-fit:contain;
}


/* ----------------------------------------------------------
   ACTUAL PAYMENT CARDS
   ---------------------------------------------------------- */

.proper-payments{
  align-self:end;

  display:flex;

  align-items:center;

  justify-content:flex-end;

  flex-wrap:wrap;

  gap:8px;

  padding-bottom:4px;
}


.payment-logo{
  width:56px;

  height:34px;

  display:grid;

  place-items:center;

  padding:
    7px 8px;

  overflow:hidden;

  border-radius:6px;

  background:#fff;

  border:
    1px solid
    rgba(0,0,0,.085);

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


.payment-logo img{
  display:block;

  width:100%;

  height:100%;

  object-fit:contain;
}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media(max-width:950px){

  .fruity-photo-footer{
    min-height:410px;
  }

  .fruity-photo-footer::before{
    top:45px;

    height:520px;

    width:130%;

    left:-15%;
  }

  .fruity-photo-footer
  .footer-grid{
    width:
      calc(100% - 60px);

    grid-template-columns:
      1.25fr 1fr 1fr;

    padding-top:125px;

    row-gap:30px;
  }

  .proper-payments{
    justify-content:flex-start;
  }

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media(max-width:620px){

  .fruity-fallback-logo{
    font-size:43px;
  }

  .fruity-photo-footer{
    min-height:570px;

    margin-top:28px;
  }

  .fruity-photo-footer::before{
    top:48px;

    left:-45%;

    width:190%;

    height:650px;

    background-position:
      center 45%;

    border-radius:
      48% 48% 0 0 /
      11% 11% 0 0;
  }

  .fruity-photo-footer::after{
    left:8px;

    top:27px;

    width:72px;

    height:35px;
  }

  .fruity-photo-footer
  .footer-grid{
    width:
      calc(100% - 42px);

    min-height:570px;

    padding-top:135px;

    grid-template-columns:
      1fr 1fr;

    gap:
      28px 18px;
  }

  .footer-brand{
    grid-column:
      1 / -1;
  }

  .proper-payments{
    grid-column:
      1 / -1;

    justify-content:flex-start;
  }

}


@media(max-width:420px){

  .fruity-photo-footer{
    min-height:650px;
  }

  .fruity-photo-footer
  .footer-grid{
    grid-template-columns:1fr;
  }

  .footer-brand,
  .proper-payments{
    grid-column:auto;
  }

}

/* === FRUITY STYLISED-REALISTIC FOOTER === */

/*
   Override the literal photographic treatment.
   Aim: realistic fruit texture, but clean enough to look designed.
*/

.fruity-photo-footer{
  min-height:310px;

  margin-top:42px;

  background:#fbfaf7 !important;

  overflow:hidden;
}


/* soften the photo heavily so it becomes part of the design */
.fruity-photo-footer::before{
  top:50px;

  left:-4%;

  width:108%;

  height:390px;

  background-position:center 44%;

  background-size:cover;

  border-radius:
    50% 50% 0 0 /
    22% 22% 0 0;

  border-top:
    6px solid
    rgba(255,220,123,.95);

  filter:
    saturate(.82)
    contrast(.90)
    brightness(1.12);

  opacity:.82;

  box-shadow:
    inset 0 15px 35px
    rgba(255,238,180,.38),
    0 -4px 28px
    rgba(205,132,12,.07);
}


/*
   Warm translucent layer makes it feel like the
   reference render rather than a raw photograph.
*/
.fruity-photo-footer{
  background:
    linear-gradient(
      to bottom,
      #fbfaf7 0,
      #fbfaf7 47px,
      transparent 48px
    ) !important;
}


.fruity-photo-footer .footer-grid{
  padding-top:112px;

  min-height:310px;
}


/* cleaner floating fruit leaf */
.fruity-photo-footer::after{
  left:4%;

  top:30px;

  width:82px;
  height:39px;

  opacity:.92;

  filter:
    saturate(.86);

  box-shadow:
    0 5px 12px
    rgba(31,82,19,.12);
}


/* make footer content feel intentionally laid over the fruit */
.fruity-photo-footer .footer-brand,
.fruity-photo-footer .footer-col,
.fruity-photo-footer .proper-payments{
  text-shadow:
    0 1px 1px
    rgba(255,255,255,.22);
}


/* logo stays sharp and graphic */
.fruity-photo-footer .footer-logo .logo-text{
  opacity:1;

  filter:none;
}


/* payment cards stay small and clean */
.fruity-photo-footer .payment-logo{
  width:54px;
  height:33px;

  padding:7px 8px;

  border:
    1px solid
    rgba(0,0,0,.065);

  box-shadow:
    0 3px 9px
    rgba(0,0,0,.055);
}


/* socials should look like part of the UI, not fruit stickers */
.fruity-photo-footer .social-logo{
  width:30px;
  height:30px;

  background:
    rgba(255,255,255,.78);

  box-shadow:
    0 3px 9px
    rgba(0,0,0,.055);
}


@media(max-width:620px){

  .fruity-photo-footer{
    min-height:560px;
  }

  .fruity-photo-footer::before{
    top:55px;

    left:-35%;

    width:170%;

    height:620px;

    opacity:.8;

    border-radius:
      48% 48% 0 0 /
      12% 12% 0 0;
  }

  .fruity-photo-footer .footer-grid{
    padding-top:140px;

    min-height:560px;
  }

}

/* === FRUITY FOOTER COLOUR RESTORE === */

.fruity-photo-footer::before{
  opacity:.96 !important;

  filter:
    saturate(1.22)
    contrast(1.04)
    brightness(1.03) !important;

  box-shadow:
    inset 0 12px 28px rgba(255,240,180,.16),
    0 -5px 25px rgba(220,135,0,.10) !important;
}

.fruity-photo-footer::after{
  opacity:1 !important;

  filter:
    saturate(1.28)
    contrast(1.04) !important;
}

/* Stronger citrus colour behind the footer */
.fruity-photo-footer{
  background:
    linear-gradient(
      to bottom,
      #fbfaf7 0,
      #fbfaf7 46px,
      rgba(255,188,24,.08) 47px,
      transparent 110px
    ) !important;
}

/* Keep cards bright and crisp */
.fruity-photo-footer .payment-logo{
  background:#fff !important;
  opacity:1 !important;
}

.fruity-photo-footer .social-logo{
  background:rgba(255,255,255,.90) !important;
}

/* Stronger Fruity yellow accent */
.fruity-photo-footer .footer-tag{
  color:#111 !important;
}

.fruity-photo-footer .footer-col h4{
  color:#080808 !important;
}

/* Fruity logo stays deep black against the orange */
.fruity-photo-footer .logo-text{
  color:#060606 !important;
  opacity:1 !important;
}

@media(max-width:620px){
  .fruity-photo-footer::before{
    opacity:.95 !important;

    filter:
      saturate(1.24)
      contrast(1.04)
      brightness(1.03) !important;
  }
}


/* === EXACT CLIENT MOCKUP LIVE === */

:root{
  --frt-yellow:#f6b900;
  --frt-black:#080808;
  --frt-paper:#fbfaf7;
  --frt-max:1500px;
}

body{
  background:#f7f6f3 !important;
}

#app{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  background:#fbfaf7 !important;
}


/* HEADER */

.header{
  width:min(calc(100% - 28px),var(--frt-max)) !important;
  margin:12px auto 0 !important;

  position:relative !important;

  background:#fff !important;

  border-radius:25px 25px 0 0 !important;

  border:0 !important;

  overflow:hidden;
}

.header-top{
  width:100% !important;
  max-width:none !important;

  height:92px !important;

  padding:0 42px !important;
}

.header-tabs{
  width:100% !important;
  max-width:none !important;

  height:62px !important;

  padding:0 28px !important;

  gap:clamp(35px,6vw,90px) !important;
}

.logo-text{
  font-size:58px !important;
  color:#090909 !important;
}

.header-tabs a.active:after{
  background:var(--frt-yellow) !important;
  height:4px !important;
}


/* HERO */

.hero.rounded{
  width:min(calc(100% - 28px),var(--frt-max)) !important;

  height:430px !important;

  margin:0 auto !important;

  border-radius:0 0 25px 25px !important;
}

.hero:not(.rounded){
  height:430px !important;
}

.hero-word{
  color:var(--frt-yellow) !important;
}

.hero-left{
  left:70px !important;
}

.hero.rounded .hero-left{
  left:70px !important;
}


/* DIRECTORY */

.directory-main{
  width:min(calc(100% - 70px),1430px) !important;

  margin:0 auto !important;

  padding:52px 0 0 !important;
}

.directory-categories{
  padding:0 !important;
}

.kicker{
  color:#eca900 !important;

  font-weight:900 !important;
}

.script-title{
  font-size:46px !important;
}

.category-window{
  margin-top:34px !important;
}

.category-track{
  display:grid !important;

  grid-template-columns:repeat(5,minmax(0,1fr)) !important;

  gap:20px !important;

  overflow:visible !important;
}

.category-card{
  width:100% !important;
  min-width:0 !important;

  aspect-ratio:.64 !important;

  height:auto !important;

  border-radius:24px !important;

  box-shadow:
    0 15px 38px rgba(0,0,0,.09) !important;
}

.category-name{
  color:#f6b900 !important;

  font-size:32px !important;
}

.category-arrow{
  width:48px !important;
  height:48px !important;
}


/* FEATURED */

.featured{
  margin-top:48px !important;
}

.featured .section-head{
  align-items:flex-end !important;
}

.product-grid{
  display:grid !important;

  grid-template-columns:repeat(5,minmax(0,1fr)) !important;

  gap:19px !important;

  margin-top:28px !important;
}

.product-card{
  border-radius:23px !important;

  overflow:hidden !important;

  background:#fff !important;

  box-shadow:
    0 12px 32px rgba(0,0,0,.065) !important;
}

.product-image{
  aspect-ratio:1/.98 !important;

  height:auto !important;
}

.product-body{
  min-height:112px !important;
}


/* PRODUCT DETAIL */

.product-main{
  width:min(calc(100% - 80px),1450px) !important;

  margin:0 auto !important;

  padding:40px 0 0 !important;
}

.purchase{
  display:grid !important;

  grid-template-columns:
    minmax(0,1.03fr)
    minmax(400px,.97fr) !important;

  gap:58px !important;
}

.media-main{
  aspect-ratio:1.08 !important;

  height:auto !important;

  border-radius:28px !important;
}

.product-info{
  padding-top:22px !important;
}

.product-title{
  font-size:47px !important;
}

.action{
  height:56px !important;
}

.description{
  margin-top:62px !important;

  grid-template-columns:
    .8fr
    1.2fr !important;
}


/* ==========================================================
   EXACT ORANGE FOOTER
   ========================================================== */

.exact-fruity-footer{
  position:relative !important;

  width:100% !important;

  min-height:315px !important;

  margin-top:58px !important;

  overflow:hidden !important;

  background:#fbfaf7 !important;

  border:0 !important;

  border-radius:0 !important;

  isolation:isolate !important;
}

.exact-footer-art{
  position:absolute;

  z-index:-1;

  left:0;
  right:0;
  bottom:-3px;

  width:100%;
  height:310px;

  background-image:
    url("/assets/fruity-footer-realistic.svg");

  background-repeat:no-repeat;

  background-position:center top;

  background-size:100% 100%;
}

.exact-footer-content{
  width:min(calc(100% - 120px),1370px);

  min-height:315px;

  margin:0 auto;

  padding:104px 0 28px;

  display:grid;

  grid-template-columns:
    1.35fr
    .8fr
    .9fr
    .9fr
    1.45fr;

  gap:42px;

  align-items:start;
}

.exact-footer-brand{
  align-self:start;
}

.exact-footer-brand .logo-text{
  font-size:58px !important;
}

.footer-drop{
  margin-top:8px;

  font-size:11px;

  font-weight:800;
}

.exact-socials{
  display:flex;

  gap:13px;

  margin-top:13px;
}

.exact-socials a{
  width:24px;
  height:24px;

  display:grid;

  place-items:center;
}

.exact-socials img{
  width:18px;
  height:18px;

  object-fit:contain;
}

.footer-copy{
  margin-top:18px;

  font-size:9px;
}

.exact-footer-col h4{
  margin:10px 0 13px;

  font-size:14px;

  font-weight:900;
}

.exact-footer-col a{
  display:block;

  margin:9px 0;

  color:#0a0a0a;

  font-size:10px;
}

.exact-payments{
  align-self:end;

  display:flex;

  justify-content:flex-end;

  gap:10px;

  padding-bottom:10px;
}

.exact-payments span{
  width:52px;
  height:30px;

  padding:6px;

  display:grid;

  place-items:center;

  border-radius:5px;

  background:#fff;

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

.exact-payments img{
  width:100%;
  height:100%;

  object-fit:contain;
}


/* TABLET */

@media(max-width:1050px){

  .category-track{
    display:flex !important;

    overflow-x:auto !important;

    scroll-snap-type:x mandatory !important;
  }

  .category-card{
    flex:0 0 280px !important;
  }

  .product-grid{
    grid-template-columns:
      repeat(3,minmax(0,1fr)) !important;
  }

  .purchase{
    grid-template-columns:1fr !important;
  }

  .exact-footer-content{
    grid-template-columns:
      1.3fr 1fr 1fr !important;
  }

}


/* MOBILE */

@media(max-width:700px){

  .header{
    width:100% !important;

    margin:0 !important;

    border-radius:0 !important;
  }

  .header-top{
    padding:0 18px !important;
  }

  .header-tabs{
    justify-content:flex-start !important;

    overflow-x:auto !important;
  }

  .hero.rounded,
  .hero:not(.rounded){
    width:100% !important;

    height:320px !important;

    margin:0 !important;

    border-radius:0 !important;
  }

  .hero-left,
  .hero.rounded .hero-left{
    left:28px !important;
  }

  .directory-main,
  .product-main{
    width:calc(100% - 30px) !important;
  }

  .category-card{
    flex:0 0 78vw !important;
  }

  .product-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

  .exact-fruity-footer{
    min-height:560px !important;
  }

  .exact-footer-art{
    width:180%;

    left:-40%;

    height:560px;
  }

  .exact-footer-content{
    width:calc(100% - 44px);

    min-height:560px;

    padding-top:150px;

    grid-template-columns:
      1fr 1fr !important;

    gap:28px 20px;
  }

  .exact-footer-brand,
  .exact-payments{
    grid-column:1/-1;
  }

  .exact-payments{
    justify-content:flex-start;
  }

}

@media(max-width:450px){

  .product-grid{
    grid-template-columns:1fr !important;
  }

}

/* === FINAL FRUITY FOOTER ASSET FIX === */

.exact-fruity-footer{
  position:relative !important;
  overflow:hidden !important;
  background:#fbfaf7 !important;
}

.exact-footer-art{
  position:absolute !important;

  z-index:-1 !important;

  left:0 !important;
  right:0 !important;
  bottom:-2px !important;

  width:100% !important;
  height:315px !important;

  background-image:
    url("/assets/fruity-footer-realistic.svg") !important;

  background-repeat:no-repeat !important;

  background-position:
    center bottom !important;

  background-size:
    100% 100% !important;
}

.exact-footer-content{
  position:relative !important;
  z-index:2 !important;
}

@media(max-width:700px){

  .exact-footer-art{
    left:-40% !important;

    width:180% !important;

    height:560px !important;

    background-size:
      100% 100% !important;
  }

}

/* ==========================================================
   FRUITY CLIENT FOOTER
   Procedural canvas recreation of approved mockup.
   ========================================================== */

.fruity-client-footer{
  position:relative;

  width:100%;

  height:300px;

  min-height:300px;

  margin-top:46px;

  overflow:hidden;

  isolation:isolate;

  background:#fbfaf7;
}


/* canvas owns ALL fruit artwork */
.fruity-orange-canvas{
  position:absolute;

  z-index:0;

  inset:0;

  width:100%;
  height:100%;

  display:block;

  pointer-events:none;
}


/* actual usable content */

.fruity-footer-live{
  position:relative;

  z-index:5;

  width:min(
    calc(100% - 115px),
    1370px
  );

  height:100%;

  margin:0 auto;

  padding-top:105px;
  padding-bottom:26px;

  display:grid;

  grid-template-columns:
    1.35fr
    .82fr
    .92fr
    .92fr
    1.55fr;

  gap:
    clamp(
      28px,
      3.3vw,
      55px
    );

  align-items:start;

  color:#080808;
}


/* brand */

.fruity-footer-brand{
  padding-left:4px;
}

.fruity-footer-logo{
  display:inline-flex;

  align-items:center;

  min-height:47px;
}

.fruity-footer-logo .logo-text{
  display:inline-block !important;

  color:#050505 !important;

  font-size:58px !important;

  line-height:.72 !important;

  opacity:1 !important;
}

.fruity-footer-logo .logo-img{
  width:auto !important;

  max-width:112px !important;
  max-height:58px !important;

  object-fit:contain !important;

  filter:brightness(0) !important;
}

.fruity-footer-drop{
  margin-top:8px;

  font-size:10px;

  font-weight:700;

  letter-spacing:.01em;
}

.fruity-footer-drop strong{
  font-weight:900;
}


/* social marks exactly like mockup: no bubbles */

.fruity-footer-socials{
  display:flex;

  align-items:center;

  gap:14px;

  margin-top:12px;
}

.fruity-footer-socials a{
  width:20px;
  height:20px;

  display:grid;

  place-items:center;

  padding:0;

  margin:0;

  background:transparent;

  border:0;

  border-radius:0;

  box-shadow:none;
}

.fruity-footer-socials img{
  display:block;

  width:17px;
  height:17px;

  object-fit:contain;
}

.fruity-footer-copy{
  margin-top:18px;

  font-size:9px;

  font-weight:500;
}


/* columns */

.fruity-footer-column{
  padding-top:7px;
}

.fruity-footer-column h4{
  margin:
    0 0 14px;

  color:#080808;

  font-size:13px;

  line-height:1;

  font-weight:900;
}

.fruity-footer-column a{
  display:block;

  width:max-content;

  margin:
    0 0 10px;

  color:#080808;

  font-size:10px;

  line-height:1;

  font-weight:500;

  text-decoration:none;
}

.fruity-footer-column a:hover{
  text-decoration:underline;
}


/* payment marks at bottom-right like approved image */

.fruity-footer-payments{
  align-self:end;

  display:flex;

  justify-content:flex-end;

  align-items:center;

  gap:10px;

  padding-bottom:2px;
}

.fruity-footer-payments span{
  width:50px;
  height:28px;

  display:grid;

  place-items:center;

  padding:5px 7px;

  border-radius:4px;

  background:#fff;

  border:0;

  box-shadow:
    0 2px 7px
    rgba(0,0,0,.04);
}

.fruity-footer-payments img{
  display:block;

  width:100%;
  height:100%;

  object-fit:contain;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media(max-width:1000px){

  .fruity-client-footer{
    height:410px;
    min-height:410px;
  }

  .fruity-footer-live{
    width:
      calc(100% - 58px);

    padding-top:135px;

    grid-template-columns:
      1.25fr 1fr 1fr;

    gap:
      30px 25px;
  }

  .fruity-footer-payments{
    justify-content:flex-start;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:650px){

  .fruity-client-footer{
    height:590px;
    min-height:590px;

    margin-top:34px;
  }

  .fruity-footer-live{
    width:
      calc(100% - 42px);

    padding-top:170px;

    grid-template-columns:
      1fr 1fr;

    gap:
      28px 20px;
  }

  .fruity-footer-brand{
    grid-column:
      1 / -1;
  }

  .fruity-footer-payments{
    grid-column:
      1 / -1;

    justify-content:flex-start;

    flex-wrap:wrap;
  }

}


/* small phone */

@media(max-width:420px){

  .fruity-client-footer{
    height:680px;
    min-height:680px;
  }

  .fruity-footer-live{
    grid-template-columns:1fr;

    padding-top:190px;
  }

  .fruity-footer-brand,
  .fruity-footer-payments{
    grid-column:auto;
  }

}

/* ==========================================================
   FRUITY CLIENT FOOTER
   Procedural canvas recreation of approved mockup.
   ========================================================== */

.fruity-client-footer{
  position:relative;

  width:100%;

  height:300px;

  min-height:300px;

  margin-top:46px;

  overflow:hidden;

  isolation:isolate;

  background:#fbfaf7;
}


/* canvas owns ALL fruit artwork */
.fruity-orange-canvas{
  position:absolute;

  z-index:0;

  inset:0;

  width:100%;
  height:100%;

  display:block;

  pointer-events:none;
}


/* actual usable content */

.fruity-footer-live{
  position:relative;

  z-index:5;

  width:min(
    calc(100% - 115px),
    1370px
  );

  height:100%;

  margin:0 auto;

  padding-top:105px;
  padding-bottom:26px;

  display:grid;

  grid-template-columns:
    1.35fr
    .82fr
    .92fr
    .92fr
    1.55fr;

  gap:
    clamp(
      28px,
      3.3vw,
      55px
    );

  align-items:start;

  color:#080808;
}


/* brand */

.fruity-footer-brand{
  padding-left:4px;
}

.fruity-footer-logo{
  display:inline-flex;

  align-items:center;

  min-height:47px;
}

.fruity-footer-logo .logo-text{
  display:inline-block !important;

  color:#050505 !important;

  font-size:58px !important;

  line-height:.72 !important;

  opacity:1 !important;
}

.fruity-footer-logo .logo-img{
  width:auto !important;

  max-width:112px !important;
  max-height:58px !important;

  object-fit:contain !important;

  filter:brightness(0) !important;
}

.fruity-footer-drop{
  margin-top:8px;

  font-size:10px;

  font-weight:700;

  letter-spacing:.01em;
}

.fruity-footer-drop strong{
  font-weight:900;
}


/* social marks exactly like mockup: no bubbles */

.fruity-footer-socials{
  display:flex;

  align-items:center;

  gap:14px;

  margin-top:12px;
}

.fruity-footer-socials a{
  width:20px;
  height:20px;

  display:grid;

  place-items:center;

  padding:0;

  margin:0;

  background:transparent;

  border:0;

  border-radius:0;

  box-shadow:none;
}

.fruity-footer-socials img{
  display:block;

  width:17px;
  height:17px;

  object-fit:contain;
}

.fruity-footer-copy{
  margin-top:18px;

  font-size:9px;

  font-weight:500;
}


/* columns */

.fruity-footer-column{
  padding-top:7px;
}

.fruity-footer-column h4{
  margin:
    0 0 14px;

  color:#080808;

  font-size:13px;

  line-height:1;

  font-weight:900;
}

.fruity-footer-column a{
  display:block;

  width:max-content;

  margin:
    0 0 10px;

  color:#080808;

  font-size:10px;

  line-height:1;

  font-weight:500;

  text-decoration:none;
}

.fruity-footer-column a:hover{
  text-decoration:underline;
}


/* payment marks at bottom-right like approved image */

.fruity-footer-payments{
  align-self:end;

  display:flex;

  justify-content:flex-end;

  align-items:center;

  gap:10px;

  padding-bottom:2px;
}

.fruity-footer-payments span{
  width:50px;
  height:28px;

  display:grid;

  place-items:center;

  padding:5px 7px;

  border-radius:4px;

  background:#fff;

  border:0;

  box-shadow:
    0 2px 7px
    rgba(0,0,0,.04);
}

.fruity-footer-payments img{
  display:block;

  width:100%;
  height:100%;

  object-fit:contain;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media(max-width:1000px){

  .fruity-client-footer{
    height:410px;
    min-height:410px;
  }

  .fruity-footer-live{
    width:
      calc(100% - 58px);

    padding-top:135px;

    grid-template-columns:
      1.25fr 1fr 1fr;

    gap:
      30px 25px;
  }

  .fruity-footer-payments{
    justify-content:flex-start;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:650px){

  .fruity-client-footer{
    height:590px;
    min-height:590px;

    margin-top:34px;
  }

  .fruity-footer-live{
    width:
      calc(100% - 42px);

    padding-top:170px;

    grid-template-columns:
      1fr 1fr;

    gap:
      28px 20px;
  }

  .fruity-footer-brand{
    grid-column:
      1 / -1;
  }

  .fruity-footer-payments{
    grid-column:
      1 / -1;

    justify-content:flex-start;

    flex-wrap:wrap;
  }

}


/* small phone */

@media(max-width:420px){

  .fruity-client-footer{
    height:680px;
    min-height:680px;
  }

  .fruity-footer-live{
    grid-template-columns:1fr;

    padding-top:190px;
  }

  .fruity-footer-brand,
  .fruity-footer-payments{
    grid-column:auto;
  }

}

/* ==========================================================
   FRUITY PAYMENT LOGOS
   Match approved footer reference.
   Footer artwork itself is untouched.
   ========================================================== */

.fruity-footer-payments{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;

  gap:9px !important;

  padding-bottom:3px !important;
}


/* identical white payment tiles */

.fruity-footer-payments span{
  box-sizing:border-box !important;

  width:48px !important;
  height:27px !important;

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

  padding:0 !important;

  overflow:hidden !important;

  background:#fff !important;

  border:0 !important;
  border-radius:5px !important;

  box-shadow:
    0 1px 4px rgba(0,0,0,.04) !important;
}


/*
 * Don't use width:100%; height:100%.
 * Different payment SVGs have wildly different proportions,
 * because apparently even rectangles needed standards wars.
 */

.fruity-footer-payments img{
  display:block !important;

  width:auto !important;
  height:auto !important;

  max-width:none !important;
  max-height:none !important;

  object-fit:contain !important;
}


/* Visa */

.fruity-footer-payments span:nth-child(1) img{
  width:35px !important;
  height:auto !important;
}


/* Mastercard */

.fruity-footer-payments span:nth-child(2) img{
  width:32px !important;
  height:20px !important;
}


/* PayPal: deliberately narrower/taller */

.fruity-footer-payments span:nth-child(3) img{
  width:20px !important;
  height:20px !important;
}


/* Apple Pay */

.fruity-footer-payments span:nth-child(4) img{
  width:34px !important;
  height:auto !important;
}


/* Google Pay */

.fruity-footer-payments span:nth-child(5) img{
  width:34px !important;
  height:auto !important;
}


/* mobile keeps the same visual proportions */

@media(max-width:650px){

  .fruity-footer-payments{
    gap:8px !important;

    justify-content:flex-start !important;
  }

  .fruity-footer-payments span{
    width:46px !important;
    height:26px !important;
  }

}

/* === FRUITY LEGAL PAGES === */

.legal-shell{
  width:min(
    calc(100% - 64px),
    1320px
  );

  margin:0 auto;

  padding:
    45px 0 10px;
}


.legal-nav{
  display:flex;

  align-items:center;

  gap:9px;

  overflow-x:auto;

  padding:
    4px 2px 18px;

  scrollbar-width:none;
}

.legal-nav::-webkit-scrollbar{
  display:none;
}

.legal-nav a{
  flex:0 0 auto;

  padding:
    10px 16px;

  border:
    1px solid
    rgba(0,0,0,.10);

  border-radius:999px;

  background:
    rgba(255,255,255,.68);

  color:#111;

  font-size:11px;

  font-weight:800;

  text-decoration:none;

  transition:
    background .16s ease,
    border-color .16s ease,
    transform .16s ease;
}

.legal-nav a:hover{
  transform:
    translateY(-1px);

  background:#fff;
}

.legal-nav a.active{
  background:#111;

  border-color:#111;

  color:#fff;
}


.legal-paper{
  overflow:hidden;

  background:#fff;

  border:
    1px solid
    rgba(0,0,0,.06);

  border-radius:30px;

  box-shadow:
    0 18px 60px
    rgba(0,0,0,.055);
}


.legal-heading{
  padding:
    clamp(34px,5vw,72px);

  padding-bottom:
    clamp(28px,4vw,50px);

  background:
    radial-gradient(
      circle at 92% 8%,
      rgba(246,185,0,.20),
      transparent 28%
    ),
    #fff;
}


.legal-eyebrow{
  margin-bottom:12px;

  color:#e7a900;

  font-size:12px;

  font-weight:900;

  letter-spacing:.04em;
}


.legal-heading h1{
  max-width:900px;

  margin:0;

  color:#080808;

  font-family:
    "Permanent Marker",
    cursive;

  font-size:
    clamp(
      38px,
      5.1vw,
      70px
    );

  line-height:.97;

  letter-spacing:-.035em;
}


.legal-lead{
  max-width:760px;

  margin:
    22px 0 0;

  color:#515151;

  font-size:
    clamp(
      14px,
      1.35vw,
      18px
    );

  line-height:1.7;
}


.legal-meta{
  display:flex;

  flex-wrap:wrap;

  gap:
    10px 24px;

  margin-top:25px;

  color:#777;

  font-size:11px;
}


.legal-meta strong{
  color:#222;
}


.legal-preview-notice{
  margin:
    0 clamp(25px,5vw,72px);

  padding:
    18px 20px;

  border:
    1px solid
    rgba(246,185,0,.35);

  border-radius:17px;

  background:
    rgba(246,185,0,.09);
}


.legal-preview-notice strong{
  color:#111;

  font-size:12px;

  font-weight:900;
}


.legal-preview-notice p{
  margin:
    7px 0 0;

  max-width:800px;

  color:#524b32;

  font-size:12px;

  line-height:1.6;
}


.legal-content{
  padding:
    clamp(25px,5vw,72px);

  padding-top:
    clamp(30px,4vw,52px);
}


.legal-section{
  max-width:900px;

  margin:
    0 0 44px;
}


.legal-section:last-child{
  margin-bottom:0;
}


.legal-section h2{
  margin:
    0 0 16px;

  color:#111;

  font-size:
    clamp(
      20px,
      2vw,
      27px
    );

  line-height:1.15;
}


.legal-section p{
  margin:
    0 0 15px;

  color:#444;

  font-size:14px;

  line-height:1.75;
}


.legal-section a{
  color:#111;

  font-weight:800;

  text-decoration-color:#f2b600;

  text-decoration-thickness:2px;

  text-underline-offset:3px;
}


.legal-list{
  margin:
    13px 0 18px;

  padding-left:22px;
}


.legal-list li{
  margin:
    8px 0;

  padding-left:4px;

  color:#444;

  font-size:14px;

  line-height:1.65;
}


.legal-card-grid{
  display:grid;

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

  gap:17px;

  margin-bottom:52px;
}


.legal-card{
  position:relative;

  min-height:185px;

  padding:26px;

  overflow:hidden;

  border:
    1px solid
    rgba(0,0,0,.07);

  border-radius:22px;

  background:#f8f7f3;

  color:#111;

  text-decoration:none;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}


.legal-card:hover{
  transform:
    translateY(-3px);

  background:#fff;

  box-shadow:
    0 13px 34px
    rgba(0,0,0,.07);
}


.legal-card h2{
  max-width:80%;

  margin:
    0 0 12px;

  font-size:20px;
}


.legal-card p{
  max-width:85%;

  margin:0;

  color:#666;

  font-size:12px;

  line-height:1.65;
}


.legal-card-arrow{
  position:absolute;

  top:21px;
  right:22px;

  width:36px;
  height:36px;

  display:grid;

  place-items:center;

  border-radius:50%;

  background:#fff;

  font-size:18px;
}


.legal-detail-grid{
  display:grid;

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

  gap:12px;
}


.legal-detail-grid > div{
  padding:
    17px 18px;

  border-radius:15px;

  background:#f6f5f1;
}


.legal-detail-grid span{
  display:block;

  margin-bottom:6px;

  color:#777;

  font-size:10px;

  font-weight:700;

  text-transform:uppercase;
}


.legal-detail-grid strong{
  display:block;

  color:#111;

  font-size:13px;

  line-height:1.5;
}


.legal-pending{
  color:#a56f00;

  font-weight:700;
}


.cookie-settings-panel{
  padding:22px;

  border-radius:18px;

  background:#f7f6f2;
}


.cookie-actions{
  display:flex;

  flex-wrap:wrap;

  gap:9px;

  margin:
    17px 0 12px;
}


.cookie-actions button{
  min-height:40px;

  padding:
    0 17px;

  border:0;

  border-radius:999px;

  background:#111;

  color:#fff;

  font-size:11px;

  font-weight:800;

  cursor:pointer;
}


.cookie-actions button.secondary{
  background:#fff;

  color:#111;

  border:
    1px solid
    rgba(0,0,0,.12);
}


.cookie-actions button:disabled{
  opacity:.38;

  cursor:not-allowed;
}


.cookie-choice{
  min-height:20px;

  margin:0 !important;

  font-size:11px !important;
}


.cancellation-form{
  padding:
    clamp(
      22px,
      4vw,
      35px
    );

  border:
    1px solid
    rgba(0,0,0,.10);

  border-radius:20px;

  background:#fbfaf7;
}


.cancellation-form hr{
  margin:
    25px 0;

  border:0;

  border-top:
    1px solid
    rgba(0,0,0,.10);
}


.form-line{
  height:32px;

  margin:
    -5px 0 18px;

  border-bottom:
    1px solid
    rgba(0,0,0,.30);
}


.form-line.short{
  width:200px;
}


@media(max-width:760px){

  .legal-shell{
    width:
      calc(100% - 28px);

    padding-top:25px;
  }

  .legal-paper{
    border-radius:22px;
  }

  .legal-nav{
    margin:
      0 -14px;

    padding-left:14px;
    padding-right:14px;
  }

  .legal-card-grid{
    grid-template-columns:1fr;
  }

  .legal-card{
    min-height:150px;
  }

  .legal-detail-grid{
    grid-template-columns:1fr;
  }

}


@media(max-width:440px){

  .legal-heading{
    padding:
      30px 22px;
  }

  .legal-content{
    padding:
      27px 22px;
  }

  .legal-preview-notice{
    margin:
      0 22px;
  }

}

/* ==========================================================
   FRUITY MERCH: NEWSLETTER + PARTNERS
   Replaces duplicate Fruity Picks row.
   ========================================================== */

.fruity-merch-secondary{
  width:min(
    calc(100% - 64px),
    1320px
  );

  margin:
    44px auto 10px;

  padding-bottom:10px;
}


.fruity-secondary-heading{
  display:flex;

  justify-content:space-between;

  align-items:end;

  margin-bottom:21px;
}


.fruity-secondary-kicker,
.secondary-card-kicker{
  display:block;

  margin-bottom:6px;

  color:#e7aa00;

  font-size:10px;

  line-height:1;

  font-weight:900;

  text-transform:uppercase;
}


.fruity-secondary-heading h2{
  margin:0;

  color:#090909;

  font-family:
    "Permanent Marker",
    cursive;

  font-size:
    clamp(
      34px,
      4.5vw,
      58px
    );

  line-height:.95;

  letter-spacing:-.025em;
}


.fruity-secondary-grid{
  display:grid;

  grid-template-columns:
    minmax(0,1.05fr)
    minmax(0,.95fr);

  gap:16px;
}


.fruity-newsletter-card,
.fruity-partners-card{
  position:relative;

  min-height:330px;

  overflow:hidden;

  box-sizing:border-box;

  padding:
    clamp(
      26px,
      4vw,
      43px
    );

  border-radius:25px;
}


.fruity-newsletter-card{
  background:#111;

  color:#fff;
}


.fruity-partners-card{
  background:#f0efe9;

  color:#111;
}


.fruity-newsletter-card h3,
.fruity-partners-card h3{
  position:relative;

  z-index:2;

  max-width:500px;

  margin:
    8px 0 13px;

  font-family:
    "Permanent Marker",
    cursive;

  font-size:
    clamp(
      30px,
      3.6vw,
      48px
    );

  line-height:1;

  letter-spacing:-.025em;
}


.fruity-newsletter-card > p,
.fruity-partners-card > p{
  position:relative;

  z-index:2;

  max-width:530px;

  margin:0;

  font-size:12px;

  line-height:1.65;
}


.fruity-newsletter-card > p{
  color:#c9c9c9;
}


.fruity-partners-card > p{
  color:#666;
}


/* NEWSLETTER */

[data-fruity-newsletter]{
  position:relative;

  z-index:3;

  max-width:570px;

  margin-top:34px;
}


.newsletter-input-wrap{
  display:flex;

  gap:8px;

  padding:6px;

  border-radius:999px;

  background:#fff;
}


.newsletter-input-wrap input{
  min-width:0;

  flex:1;

  height:45px;

  box-sizing:border-box;

  padding:
    0 16px;

  border:0;

  outline:0;

  background:transparent;

  color:#111;

  font-size:11px;

  font-weight:700;
}


.newsletter-input-wrap button{
  min-width:128px;

  height:45px;

  padding:
    0 18px;

  border:0;

  border-radius:999px;

  background:#f2b800;

  color:#111;

  font-size:10px;

  font-weight:900;

  cursor:pointer;
}


.newsletter-input-wrap button:disabled{
  opacity:.6;

  cursor:wait;
}


.newsletter-status{
  display:block;

  min-height:18px;

  margin:
    10px 0 0 8px;

  color:#f5bc16;

  font-size:9px;

  font-weight:800;
}


.newsletter-fruit-mark{
  position:absolute;

  right:-14px;
  bottom:-31px;

  color:
    rgba(
      244,
      184,
      0,
      .14
    );

  font-family:
    "Permanent Marker",
    cursive;

  font-size:
    clamp(
      110px,
      14vw,
      190px
    );

  line-height:1;

  transform:
    rotate(-5deg);

  pointer-events:none;
}


/* PARTNERS */

.fruity-partner-list{
  display:grid;

  gap:9px;

  margin-top:28px;
}


.fruity-partner-card{
  display:grid;

  grid-template-columns:
    75px
    minmax(0,1fr)
    34px;

  align-items:center;

  gap:14px;

  padding:13px;

  border-radius:17px;

  background:#fff;

  color:#111;

  text-decoration:none;

  transition:
    transform .15s ease,
    box-shadow .15s ease;
}


.fruity-partner-card:hover{
  transform:
    translateY(-2px);

  box-shadow:
    0 9px 24px
    rgba(0,0,0,.06);
}


.partner-logo{
  min-height:55px;

  display:grid;

  place-items:center;

  padding:7px;

  border-radius:12px;

  background:#0d0d0d;
}


.partner-logo img{
  display:block;

  width:100%;

  max-height:34px;

  object-fit:contain;
}


.partner-wordmark{
  color:#fff;

  font-family:
    "Permanent Marker",
    cursive;

  font-size:20px;
}


.partner-copy strong{
  display:block;

  margin-bottom:3px;

  font-size:12px;
}


.partner-copy p{
  margin:0;

  color:#717171;

  font-size:9px;

  line-height:1.45;
}


.partner-arrow{
  width:31px;
  height:31px;

  display:grid;

  place-items:center;

  border-radius:50%;

  background:#f3b900;

  font-size:14px;
}


@media(max-width:760px){

  .fruity-merch-secondary{
    width:
      calc(100% - 28px);

    margin-top:32px;
  }


  .fruity-secondary-grid{
    grid-template-columns:1fr;
  }


  .fruity-newsletter-card,
  .fruity-partners-card{
    min-height:300px;
  }

}


@media(max-width:480px){

  .newsletter-input-wrap{
    align-items:stretch;

    flex-direction:column;

    border-radius:17px;
  }


  .newsletter-input-wrap input{
    width:100%;
  }


  .newsletter-input-wrap button{
    width:100%;
  }


  .fruity-partner-card{
    grid-template-columns:
      62px
      minmax(0,1fr)
      31px;
  }

}

/* ==========================================================
   FRUITY EXPANDED ABOUT
   ========================================================== */

.aboutx{
  width:100%;

  padding:
    34px 0 15px;

  background:#fbfaf7;
}


.aboutx-inner{
  width:min(
    calc(100% - 64px),
    1320px
  );

  margin:0 auto;
}


.aboutx-kicker{
  display:block;

  margin-bottom:8px;

  color:#e4aa00;

  font-size:10px;

  font-weight:900;

  letter-spacing:.04em;

  text-transform:uppercase;
}


.aboutx-kicker-light{
  color:#f2ba16;
}


/* INTRO */

.aboutx-intro{
  display:grid;

  grid-template-columns:
    minmax(0,1.35fr)
    minmax(300px,.65fr);

  gap:
    clamp(
      30px,
      6vw,
      90px
    );

  align-items:end;

  padding:
    clamp(
      35px,
      6vw,
      78px
    );

  border-radius:28px;

  background:#fff;

  border:
    1px solid
    rgba(0,0,0,.05);
}


.aboutx-intro h1{
  max-width:800px;

  margin:0;

  font-family:
    "Permanent Marker",
    cursive;

  font-size:
    clamp(
      48px,
      7vw,
      92px
    );

  line-height:.89;

  letter-spacing:-.04em;
}


.aboutx-intro > p{
  margin:0;

  color:#555;

  font-size:
    clamp(
      14px,
      1.3vw,
      17px
    );

  line-height:1.75;
}


/* STORY */

.aboutx-story{
  display:grid;

  grid-template-columns:
    minmax(0,1.45fr)
    minmax(300px,.55fr);

  gap:15px;

  margin-top:16px;
}


.aboutx-story-main,
.aboutx-story-side{
  box-sizing:border-box;

  padding:
    clamp(
      30px,
      5vw,
      57px
    );

  border-radius:25px;
}


.aboutx-story-main{
  background:#f1efe9;
}


.aboutx-story-side{
  background:#f0b900;
}


.aboutx-story h2{
  max-width:720px;

  margin:
    0 0 20px;

  font-family:
    "Permanent Marker",
    cursive;

  font-size:
    clamp(
      38px,
      5vw,
      65px
    );

  line-height:.95;
}


.aboutx-story h3{
  margin:
    0 0 18px;

  font-family:
    "Permanent Marker",
    cursive;

  font-size:
    clamp(
      30px,
      4vw,
      46px
    );

  line-height:.95;
}


.aboutx-story p{
  max-width:780px;

  margin:0;

  color:#4f4f4f;

  font-size:13px;

  line-height:1.8;
}


.aboutx-story-side p{
  color:#332900;
}


/* HEADINGS */

.aboutx-section-heading{
  display:grid;

  grid-template-columns:
    minmax(0,1.2fr)
    minmax(260px,.7fr);

  gap:35px;

  align-items:end;

  margin-bottom:26px;
}


.aboutx-section-heading h2{
  margin:0;

  font-family:
    "Permanent Marker",
    cursive;

  font-size:
    clamp(
      38px,
      5vw,
      64px
    );

  line-height:.94;

  letter-spacing:-.025em;
}


.aboutx-section-heading > p{
  margin:0;

  color:#666;

  font-size:12px;

  line-height:1.7;
}


/* WHAT WE DO */

.aboutx-focus{
  padding:
    60px 0 10px;
}


.aboutx-focus-grid{
  display:grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0,1fr)
    );

  gap:12px;
}


.aboutx-focus-card{
  min-height:245px;

  box-sizing:border-box;

  display:flex;

  flex-direction:column;

  padding:25px;

  border-radius:21px;

  background:#fff;

  border:
    1px solid
    rgba(0,0,0,.055);
}


.aboutx-card-number{
  color:#d8a100;

  font-size:10px;

  font-weight:900;
}


.aboutx-focus-card h3{
  margin:
    auto 0 12px;

  font-family:
    "Permanent Marker",
    cursive;

  font-size:
    clamp(
      22px,
      2.7vw,
      34px
    );

  line-height:1;
}


.aboutx-focus-card p{
  margin:0;

  color:#666;

  font-size:11px;

  line-height:1.6;
}


/* VALUE BLOCK */

.aboutx-values{
  position:relative;

  min-height:340px;

  box-sizing:border-box;

  display:flex;

  align-items:center;

  overflow:hidden;

  margin-top:52px;

  padding:
    clamp(
      30px,
      6vw,
      70px
    );

  border-radius:28px;

  background:#111;

  color:#fff;
}


.aboutx-values-copy{
  position:relative;

  z-index:2;

  max-width:660px;
}


.aboutx-values h2{
  margin:
    0 0 18px;

  font-family:
    "Permanent Marker",
    cursive;

  font-size:
    clamp(
      42px,
      6vw,
      76px
    );

  line-height:.92;
}


.aboutx-values p{
  max-width:610px;

  margin:0;

  color:#cfcfcf;

  font-size:13px;

  line-height:1.75;
}


.aboutx-values-mark{
  position:absolute;

  right:-20px;
  bottom:-65px;

  color:
    rgba(
      241,
      182,
      0,
      .14
    );

  font-family:
    "Permanent Marker",
    cursive;

  font-size:
    clamp(
      170px,
      24vw,
      340px
    );

  line-height:1;

  transform:
    rotate(-6deg);
}


/* PARTNERS */

.aboutx-partners{
  padding:
    65px 0 12px;
}


.aboutx-partner-grid{
  display:grid;

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

  gap:12px;
}


.aboutx-partner-card,
.aboutx-empty-partner{
  min-height:105px;

  box-sizing:border-box;

  display:grid;

  grid-template-columns:
    85px
    minmax(0,1fr)
    38px;

  align-items:center;

  gap:15px;

  padding:14px;

  border-radius:20px;

  background:#f0efe9;

  color:#111;

  text-decoration:none;

  transition:
    transform .16s ease,
    box-shadow .16s ease;
}


.aboutx-partner-card:hover{
  transform:
    translateY(-2px);

  box-shadow:
    0 10px 28px
    rgba(0,0,0,.06);
}


.aboutx-partner-logo{
  min-height:66px;

  display:grid;

  place-items:center;

  padding:8px;

  box-sizing:border-box;

  border-radius:15px;

  background:#111;
}


.aboutx-partner-logo img{
  display:block;

  width:100%;

  max-height:42px;

  object-fit:contain;
}


.aboutx-partner-logo span{
  color:#fff;

  font-family:
    "Permanent Marker",
    cursive;

  font-size:21px;
}


.aboutx-partner-copy strong{
  display:block;

  margin-bottom:5px;

  font-size:13px;
}


.aboutx-partner-copy p{
  margin:0;

  color:#666;

  font-size:10px;

  line-height:1.55;
}


.aboutx-partner-arrow{
  width:34px;
  height:34px;

  display:grid;

  place-items:center;

  border-radius:50%;

  background:#f1b900;

  font-size:15px;
}


/* ==========================================================
   RESPONSIVE ABOUT
   ========================================================== */

@media(max-width:900px){

  .aboutx-inner{
    width:
      calc(100% - 20px);
  }


  .aboutx-intro,
  .aboutx-story,
  .aboutx-section-heading{
    grid-template-columns:
      1fr;
  }


  .aboutx-intro{
    gap:22px;

    padding:
      34px 24px;
  }


  .aboutx-story{
    gap:10px;
  }


  .aboutx-story-main,
  .aboutx-story-side{
    padding:
      30px 24px;
  }


  .aboutx-section-heading{
    gap:15px;
  }


  .aboutx-focus-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }


  .aboutx-focus-card{
    min-height:205px;
  }


  .aboutx-values{
    min-height:300px;

    padding:
      35px 25px;
  }


  .aboutx-partner-grid{
    grid-template-columns:
      1fr;
  }

}


@media(max-width:520px){

  .aboutx{
    padding-top:16px;
  }


  .aboutx-intro,
  .aboutx-story-main,
  .aboutx-story-side,
  .aboutx-values{
    border-radius:19px;
  }


  .aboutx-intro h1{
    font-size:
      clamp(
        44px,
        15vw,
        65px
      );
  }


  .aboutx-focus{
    padding-top:42px;
  }


  .aboutx-focus-grid{
    grid-template-columns:
      1fr;
  }


  .aboutx-focus-card{
    min-height:175px;
  }


  .aboutx-values{
    margin-top:38px;
  }


  .aboutx-partners{
    padding-top:45px;
  }


  .aboutx-partner-card{
    grid-template-columns:
      68px
      minmax(0,1fr)
      32px;

    gap:11px;
  }


  .aboutx-partner-logo{
    min-height:56px;
  }

}