/* ==========================================================
   FRUITY RESPONSIVE SYSTEM
   Desktop: 901px+
   Mobile/tablet: <= 900px
   ========================================================== */

html,
body{
  max-width:100%;
}

html{
  overflow-x:hidden;
}

body{
  overflow-x:hidden;
}


/* ==========================================================
   MOBILE NAVIGATION ELEMENTS
   Hidden completely on desktop.
   ========================================================== */

.fruity-mobile-menu-button,
.fruity-mobile-menu{
  display:none;
}


/* ==========================================================
   DESKTOP
   ========================================================== */

@media(min-width:901px){

  html[data-fruity-layout="desktop"]
  .fruity-mobile-menu-button,

  html[data-fruity-layout="desktop"]
  .fruity-mobile-menu{
    display:none !important;
  }

}


/* ==========================================================
   MOBILE + TABLET
   ========================================================== */

@media(max-width:900px){

  :root{
    --fruity-mobile-gutter:16px;
    --fruity-mobile-radius:18px;
  }


  html.fruity-menu-open,
  html.fruity-menu-open body{
    overflow:hidden !important;
  }


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

  .site-header,
  .main-header,
  header.site-header{
    position:relative;

    z-index:100;

    width:
      calc(
        100% - 20px
      ) !important;

    box-sizing:border-box;

    margin:
      10px auto 0 !important;

    border-radius:
      18px !important;
  }


  /*
   * The full desktop link rows are not useful at 390px.
   */

  .site-header nav,
  .main-header nav,
  header.site-header nav,
  .desktop-nav,
  .header-nav,
  .merch-nav{
    display:none !important;
  }


  .site-header{
    min-height:66px;
  }


  /*
   * Keep existing Fruity logo in the middle.
   */

  .site-header .logo,
  .site-header .brand,
  .site-header .header-logo,
  .site-header .logo-link{
    position:relative;

    z-index:103;
  }


  /*
   * Hide less-important desktop controls when they are
   * competing with the logo.
   */

  .site-header .header-about,
  .site-header .header-home{
    display:none !important;
  }


  .fruity-mobile-menu-button{
    position:absolute;

    top:50%;
    left:16px;

    z-index:105;

    width:42px;
    height:42px;

    display:flex;

    flex-direction:column;

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

    gap:5px;

    padding:0;

    transform:
      translateY(-50%);

    border:0;

    border-radius:50%;

    background:#f5f3ed;

    cursor:pointer;
  }


  .fruity-mobile-menu-button span{
    width:17px;
    height:2px;

    display:block;

    border-radius:99px;

    background:#111;

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


  .fruity-mobile-menu-button.is-open span:nth-child(1){
    transform:
      translateY(7px)
      rotate(45deg);
  }


  .fruity-mobile-menu-button.is-open span:nth-child(2){
    opacity:0;
  }


  .fruity-mobile-menu-button.is-open span:nth-child(3){
    transform:
      translateY(-7px)
      rotate(-45deg);
  }


  .fruity-mobile-menu{
    position:fixed;

    z-index:9998;

    inset:
      0;

    display:block;

    padding:
      100px
      16px
      max(
        24px,
        env(
          safe-area-inset-bottom
        )
      );

    box-sizing:border-box;

    opacity:0;

    visibility:hidden;

    transform:
      translateY(-12px);

    background:
      rgba(
        250,
        249,
        245,
        .985
      );

    backdrop-filter:
      blur(20px);

    transition:
      opacity .18s ease,
      visibility .18s ease,
      transform .18s ease;
  }


  .fruity-mobile-menu.is-open{
    opacity:1;

    visibility:visible;

    transform:none;
  }


  .fruity-mobile-menu nav{
    width:100%;

    display:grid !important;

    gap:4px;
  }


  .fruity-mobile-menu a{
    display:flex;

    align-items:center;

    min-height:50px;

    padding:
      0 18px;

    border-radius:14px;

    color:#111;

    font-family:
      "Permanent Marker",
      cursive;

    font-size:
      clamp(
        20px,
        7vw,
        29px
      );

    line-height:1;

    text-decoration:none;
  }


  .fruity-mobile-menu a:active{
    background:#f1b900;
  }


  .mobile-nav-rule{
    height:1px;

    margin:
      8px 0;

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


  /* --------------------------------------------------------
     GENERAL PAGE WIDTHS
     -------------------------------------------------------- */

  main,
  .page,
  .page-content{
    max-width:100%;
  }


  .section,
  .content-section,
  .directory-main section{
    box-sizing:border-box;
  }


  /* --------------------------------------------------------
     HEROES
     -------------------------------------------------------- */

  .hero,
  .drop-hero,
  .directory-hero,
  .product-hero{
    width:
      calc(
        100% - 20px
      ) !important;

    min-height:
      340px !important;

    box-sizing:border-box;

    margin-left:auto !important;
    margin-right:auto !important;

    border-radius:
      20px !important;

    overflow:hidden;
  }


  .hero h1,
  .drop-hero h1,
  .hero-word,
  .drop-hero__mark{
    font-size:
      clamp(
        54px,
        18vw,
        92px
      ) !important;

    line-height:
      .85 !important;
  }


  .hero-tagline,
  .drop-hero__tagline{
    font-size:
      clamp(
        15px,
        4.5vw,
        22px
      ) !important;
  }


  /* --------------------------------------------------------
     SECTION HEADINGS
     -------------------------------------------------------- */

  .script-title,
  .brush-title,
  .fruity-secondary-heading h2{
    font-size:
      clamp(
        31px,
        10vw,
        48px
      ) !important;

    line-height:
      .95 !important;
  }


  /* --------------------------------------------------------
     CATEGORY DIRECTORY
     -------------------------------------------------------- */

  .category-track,
  [data-category-track]{
    width:
      calc(
        100vw - 16px
      );

    display:flex !important;

    gap:12px !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    padding:
      2px
      16px
      14px
      0 !important;

    scroll-snap-type:
      x mandatory;

    overscroll-behavior-x:
      contain;

    -webkit-overflow-scrolling:
      touch;

    scrollbar-width:none;
  }


  .category-track::-webkit-scrollbar,
  [data-category-track]::-webkit-scrollbar{
    display:none;
  }


  .category-card{
    width:
      min(
        76vw,
        300px
      ) !important;

    min-width:
      min(
        76vw,
        300px
      ) !important;

    max-width:
      min(
        76vw,
        300px
      ) !important;

    flex:
      0
      0
      min(
        76vw,
        300px
      ) !important;

    scroll-snap-align:start;
  }


  /* --------------------------------------------------------
     PRODUCT GRIDS
     -------------------------------------------------------- */

  .product-grid,
  .products-grid,
  .merch-grid{
    display:grid !important;

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

    gap:
      12px !important;
  }


  .product-card{
    min-width:0;
  }


  .product-card img{
    width:100%;

    height:auto;

    object-fit:cover;
  }


  /* --------------------------------------------------------
     PRODUCT DETAILS
     -------------------------------------------------------- */

  .product-layout,
  .product-page-grid,
  .product-detail-grid,
  .product-detail,
  .product-main{
    display:grid !important;

    grid-template-columns:
      1fr !important;

    gap:
      24px !important;
  }


  .product-media,
  .product-info,
  .product-details{
    width:100% !important;

    max-width:none !important;
  }


  .product-media{
    position:relative !important;

    top:auto !important;
  }


  .product-media-main,
  .product-main-media{
    border-radius:
      18px !important;
  }


  .product-thumbnails,
  .thumbnail-row{
    display:flex !important;

    gap:8px !important;

    overflow-x:auto !important;

    scrollbar-width:none;
  }


  .product-thumbnails::-webkit-scrollbar,
  .thumbnail-row::-webkit-scrollbar{
    display:none;
  }


  .product-actions,
  .purchase-actions{
    display:grid !important;

    gap:8px !important;
  }


  .product-actions button,
  .product-actions a,
  .purchase-actions button,
  .purchase-actions a{
    width:100% !important;

    box-sizing:border-box;
  }


  /* --------------------------------------------------------
     BAG
     -------------------------------------------------------- */

  .bag-row,
  .cart-row{
    display:grid !important;

    grid-template-columns:
      82px
      minmax(
        0,
        1fr
      ) !important;

    gap:
      13px !important;
  }


  .bag-row img,
  .cart-row img{
    width:82px !important;
    height:98px !important;

    object-fit:cover;
  }


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

  .about-layout,
  .about-grid,
  .about-copy-grid{
    display:grid !important;

    grid-template-columns:
      1fr !important;

    gap:
      24px !important;
  }


  /* --------------------------------------------------------
     NEWSLETTER + PARTNERS
     -------------------------------------------------------- */

  .fruity-merch-secondary{
    width:
      calc(
        100% - 20px
      ) !important;

    margin:
      32px auto 0 !important;
  }


  .fruity-secondary-grid{
    display:grid !important;

    grid-template-columns:
      1fr !important;

    gap:
      12px !important;
  }


  .fruity-newsletter-card,
  .fruity-partners-card{
    min-height:
      290px !important;

    padding:
      25px !important;

    border-radius:
      20px !important;
  }


  .newsletter-input-wrap{
    display:grid !important;

    grid-template-columns:
      1fr !important;

    padding:
      6px !important;

    border-radius:
      15px !important;
  }


  .newsletter-input-wrap input,
  .newsletter-input-wrap button{
    width:100% !important;

    box-sizing:border-box !important;
  }


  .newsletter-input-wrap button{
    min-height:
      44px !important;
  }


  .fruity-partner-card{
    grid-template-columns:
      64px
      minmax(
        0,
        1fr
      )
      32px !important;
  }


  /* --------------------------------------------------------
     LEGAL
     -------------------------------------------------------- */

  .legal-shell{
    width:
      calc(
        100% - 20px
      ) !important;

    padding-top:
      18px !important;
  }


  .legal-paper{
    border-radius:
      20px !important;
  }


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


  .legal-content{
    padding:
      28px
      22px !important;
  }


  .legal-card-grid,
  .jurisdiction-grid,
  .legal-detail-grid{
    grid-template-columns:
      1fr !important;
  }


  .legal-region-switch{
    align-items:stretch !important;

    flex-direction:column !important;
  }


  .legal-region-buttons{
    display:grid !important;

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


  /* --------------------------------------------------------
     ACCOUNT
     -------------------------------------------------------- */

  .account-live-shell{
    padding:
      28px
      10px !important;
  }


  .account-live-card{
    padding:
      27px
      20px !important;

    border-radius:
      20px !important;
  }


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


  /* --------------------------------------------------------
     ADMIN
     -------------------------------------------------------- */

  .admin-grid,
  .pro-grid{
    grid-template-columns:
      1fr !important;
  }


  .pro-span-2{
    grid-column:auto !important;
  }


  .pro-category-row{
    grid-template-columns:
      1fr !important;
  }


  /* ========================================================
     MOBILE ORANGE FOOTER
     ======================================================== */

  /*
   * The existing canvas renderer is untouched.

   * The mobile version deliberately displays that SAME
   * canvas wider than the viewport. That gives the fruit
   * enough horizontal geometry to retain the broad mockup
   * silhouette instead of becoming a narrow orange tower.
   */

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

    width:100% !important;

    height:
      690px !important;

    min-height:
      690px !important;

    margin-top:
      38px !important;

    overflow:hidden !important;
  }


  .fruity-orange-canvas{
    position:absolute !important;

    top:0 !important;

    left:50% !important;

    width:
      155% !important;

    max-width:none !important;

    height:
      100% !important;

    transform:
      translateX(-50%) !important;

    transform-origin:
      center top !important;

    pointer-events:none !important;
  }


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

    z-index:5 !important;

    width:
      calc(
        100% - 32px
      ) !important;

    height:100% !important;

    box-sizing:border-box !important;

    margin:
      0 auto !important;

    padding:
      215px
      0
      25px !important;

    display:grid !important;

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

    align-content:start !important;

    align-items:start !important;

    gap:
      24px
      22px !important;
  }


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

    padding:
      0 !important;
  }


  .fruity-footer-logo{
    min-height:
      45px !important;
  }


  .fruity-footer-logo .logo-text{
    font-size:
      52px !important;
  }


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

    font-size:
      10px !important;
  }


  .fruity-footer-socials{
    gap:
      14px !important;

    margin-top:
      13px !important;
  }


  .fruity-footer-copy{
    margin-top:
      13px !important;

    font-size:
      9px !important;
  }


  .fruity-footer-column{
    padding:
      0 !important;
  }


  .fruity-footer-column h4{
    margin:
      0 0 12px !important;

    font-size:
      12px !important;
  }


  .fruity-footer-column a{
    margin:
      0 0 10px !important;

    font-size:
      11px !important;

    line-height:
      1.2 !important;
  }


  /*
   * If there are three footer columns, the third sits in the
   * left half of the next row rather than being squeezed into
   * three microscopic columns.
   */

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

    align-self:start !important;

    justify-content:flex-start !important;

    flex-wrap:wrap !important;

    gap:
      8px !important;

    padding:
      0 !important;
  }


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

    height:
      27px !important;
  }

}


/* ==========================================================
   SMALL PHONES
   ========================================================== */

@media(max-width:480px){

  :root{
    --fruity-mobile-gutter:12px;
  }


  .hero,
  .drop-hero,
  .directory-hero,
  .product-hero{
    width:
      calc(
        100% - 14px
      ) !important;

    min-height:
      315px !important;

    border-radius:
      17px !important;
  }


  .product-grid,
  .products-grid,
  .merch-grid{
    gap:
      9px !important;
  }


  .product-card{
    font-size:
      10px !important;
  }


  .category-card{
    width:
      80vw !important;

    min-width:
      80vw !important;

    max-width:
      80vw !important;

    flex-basis:
      80vw !important;
  }


  .fruity-client-footer{
    height:
      720px !important;

    min-height:
      720px !important;
  }


  .fruity-orange-canvas{
    width:
      175% !important;
  }


  .fruity-footer-live{
    width:
      calc(
        100% - 26px
      ) !important;

    padding-top:
      230px !important;

    gap:
      22px
      16px !important;
  }


  .fruity-footer-column a{
    font-size:
      10px !important;
  }


  .legal-region-buttons{
    grid-template-columns:
      1fr !important;
  }

}


/* ==========================================================
   VERY SMALL DEVICES
   ========================================================== */

@media(max-width:350px){

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


  .fruity-footer-live{
    gap:
      19px
      12px !important;
  }

}


/* ==========================================================
   LANDSCAPE PHONE
   ========================================================== */

@media(
  max-width:900px
)
and
(
  orientation:landscape
)
and
(
  max-height:500px
){

  .fruity-mobile-menu{
    padding-top:
      70px;
  }


  .fruity-mobile-menu nav{
    grid-template-columns:
      repeat(
        2,
        1fr
      );
  }


  .mobile-nav-rule{
    display:none;
  }

}