/*
    The planting planner stylesheet, from the WordPress site, unchanged except
    for the nesting wrapper around it and the asset URL rewrite.

    Nested under `.calc-planting-planner` rather than prefixed selector by
    selector: every rule in here is a bare `.gs-*` class, so unscoped they would
    reach the whole site, and nesting scopes all of it at once including the 33
    media queries. Native CSS nesting, because this file is served straight from
    `public/` and never meets a build step. Unlayered, so it beats Tailwind
    preflight and this theme's base without an `!important`. See
    `resources/css/08-calculators.css`.

    ONE URL WAS NOT EVEN POINTING AT STROL. `.gs-plot` loaded small-plot.png from
    cirtexresidential.co.nz, the previous brand, and that URL 301s today. It is
    vendored with the rest.

    The trailing `sourceMappingURL` comment is dropped. The map was never on the
    old site either, so it was a 404 in devtools on every load.
*/
/*
    HOISTED OUT OF THE WRAPPER BELOW, AND THEY HAVE TO STAY OUT.

    `@keyframes` is invalid inside a style rule. Nested, the browser drops it
    silently and every `animation:` naming it resolves to nothing — no console
    error, no failed request, the rule just never runs. That is how the plant
    list came to render at the right size in the right place and be invisible,
    stuck on the 0% frame of `grow`.

    Being out here makes the names global. `Tests\Unit\Calculators\
    VendoredStylesheetsTest` checks both halves: that none is nested, and that
    none collides with the theme or with the other calculator.
*/
@keyframes pointer {
  0% {
    transform: scale(0);
  }
  60% {
    transform: scale(1.2);
  }
  80% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes reset {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-359deg);
  }
}

@keyframes target {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.3);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

@keyframes renderList {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

.calc-planting-planner {
    .disable-click {
      pointer-events: none;
    }
    
    .mobile-only {
      display: none;
    }
    
    @media (max-width: 900px) {
      .mobile-only {
        display: block;
      }
    }
    .gs-back {
      position: relative;
      color: var(--color-tasman);
      margin: 0;
      font-weight: 500;
      font-size: 13px !important;
      line-height: 1.4 !important;
      cursor: pointer;
      transition: ease 0.2s;
      background: #f5f5f5;
      padding: 5px 10px;
      border-radius: 5px;
      box-shadow: 0 4px 9px rgba(0, 0, 0, 0.05);
      z-index: 9;
    }
    .gs-back i {
      font-size: 14px;
    }
    
    .gs-back:hover {
      color: #fff;
      background: var(--color-tasman);
    }
    
    .gs-disclaimer {
      margin: 0 auto;
      text-align: center;
    }
    .gs-disclaimer p {
      font-size: 12px !important;
      margin: 15px 0;
    }
    
    @media (max-width: 900px) {
      .gs-disclaimer {
        margin: 10px;
      }
    }
    .item-tag {
      padding: 4px 6px;
      background: #eee;
      display: inline-block;
      border-radius: 3px;
      border: none;
      margin: 5px 5px 0 0 !important;
      cursor: pointer;
      transition: ease 0.1s;
    }
    
    .item-tag:hover {
      background: var(--color-tasman);
      color: #fff;
    }
    
    .veg-name {
      text-transform: lowercase;
    }
    
    #veg-list {
      height: auto;
      max-width: 940px;
      min-width: 940px;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      grid-gap: 7px;
      padding: 0;
      transition: ease 0.5s;
      flex-flow: wrap;
      overflow-y: auto;
      scroll-behavior: smooth;
      scrollbar-width: none;
      -ms-overflow-style: none;
      margin: 0;
    }
    #veg-list ul {
      list-style-type: none;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-gap: 10px;
    }
    #veg-list ul li {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 100px;
      height: 100px;
      background: #fff;
      border-radius: 100px;
    }
    
    @media (max-width: 900px) {
      #veg-list {
        min-width: auto;
        padding: 10px;
        min-height: 100px;
        height: -moz-fit-content;
        height: fit-content;
        max-height: -moz-fit-content;
        max-height: fit-content;
        margin: 0 auto;
        grid-gap: 0;
        justify-content: center;
      }
      #veg-list ul {
        grid-gap: 0;
      }
    }
    #veg-list::-webkit-scrollbar {
      display: none;
    }
    
    /*
        THE MARKERS ARE NOT BUTTONS, AND USED TO LOOK LIKE THEY WERE.
        Changed on 2026-09-18; everything else in this file is the WordPress
        site's, unchanged.

        Each marker is a spacing annotation on the plot: one seed goes here. It
        carried `cursor: pointer` and grew 1.2x on hover, which together read as
        a button, so it was reported as a step of the planner that does nothing
        when clicked. It never did anything — no click handler here, in the
        earlier Cirtex build, or on the live site today.

        `help` is the cursor for "there is an explanation here", which is what
        the hover tooltip is, and the hover now lifts the marker slightly rather
        than swelling it: enough to say it responds, not enough to promise a
        click.

        Still open: on a phone there is no hover at all, so the tooltip cannot be
        read. `docs/specs/calculators.md` has the options.
    */
    .grid-item {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      cursor: help;
      transition: ease 0.2s;
    }

    .grid-item:hover {
      transform: scale(1.05);
    }
    
    .sixty-cm {
      width: 254px;
      height: auto;
      margin: auto;
      animation: pointer ease 0.5s;
    }
    
    @media (max-width: 900px) {
      .sixty-cm {
        width: 140px;
      }
    }
    .fifty-cm {
      width: 170px;
      height: auto;
      margin: auto;
      animation: pointer ease 0.5s;
    }
    
    @media (max-width: 900px) {
      .fifty-cm {
        width: 100px;
      }
    }
    .fourty-cm {
      width: 169px;
      height: auto;
      margin: auto;
      animation: pointer ease 0.5s;
    }
    
    @media (max-width: 900px) {
      .fourty-cm {
        width: 95px;
      }
    }
    .thirty-cm {
      width: 127.5px;
      height: auto;
      margin: auto;
      animation: pointer ease 0.5s;
    }
    
    @media (max-width: 900px) {
      .thirty-cm {
        width: 75px;
      }
    }
    .twenty-cm {
      width: 85px;
      height: auto;
      margin: auto;
      animation: pointer ease 0.5s;
    }
    
    @media (max-width: 900px) {
      .twenty-cm {
        width: 53px;
      }
    }
    .ten-cm {
      width: 42.5px;
      height: auto;
      margin: auto;
      animation: pointer ease 0.5s;
    }
    
    @media (max-width: 900px) {
      .ten-cm {
        width: 28px;
      }
    }
        .large-template {
      position: absolute;
      display: flex;
      flex-wrap: wrap;
      width: 510px;
      min-height: 342px;
      left: 138px;
      top: 140px;
    }
    
    @media (max-width: 900px) {
      .large-template {
        width: 318px;
        min-height: 210px;
        left: 26px;
        top: 78px;
      }
    }
    .small-raised-template {
      position: absolute;
      display: flex;
      flex-wrap: wrap;
      width: 299px;
      min-height: 164px;
      left: 249px;
      top: 234px;
      -moz-column-gap: 2px;
           column-gap: 2px;
    }
    
    @media (max-width: 900px) {
      .small-raised-template {
        width: 244px;
        min-height: 151px;
        left: 78px;
        top: 185px;
        -moz-column-gap: 12px;
             column-gap: 12px;
      }
    }
    .small-template {
      position: absolute;
      display: flex;
      flex-wrap: wrap;
      width: 342px;
      min-height: 254px;
      left: 224px;
      top: 183px;
    }
    
    @media (max-width: 900px) {
      .small-template {
        width: 212px;
        min-height: 157px;
        left: 79px;
        top: 103px;
      }
    }
    .herbSmall-template {
      position: absolute;
      display: flex;
      flex-wrap: wrap;
      width: 340px;
      min-height: 170px;
      left: 224px;
      top: 228px;
    }
    
    @media (max-width: 900px) {
      .herbSmall-template {
        width: 212px;
        min-height: 106px;
        left: 79px;
        top: 130px;
      }
    }
    .herbLarge-template {
      position: absolute;
      display: flex;
      flex-wrap: wrap;
      width: 508px;
      min-height: 170px;
      left: 138px;
      top: 228px;
    }
    
    @media (max-width: 900px) {
      .herbLarge-template {
        width: 313px;
        min-height: 105px;
        left: 28px;
        top: 131px;
      }
    }
    .scroll-section {
      display: block;
      max-height: 70px;
      overflow-y: scroll;
      scroll-behavior: smooth;
    }
    
    @media (max-width: 900px) {
      .scroll-section {
        max-height: 40px;
      }
    }
    .gs-reset {
      text-decoration: none;
      color: #222;
      cursor: pointer;
      transition: ease 0.2s;
    }
    
    .gs-reset:hover {
      color: var(--color-tasman);
    }
    
    .gs-veg-selection {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      height: 100%;
      border-radius: 10px;
      background: #ffffff;
      transition: ease 0.3s;
      z-index: 999;
      padding-top: 40px;
    }
    .gs-veg-selection .gs-inputs {
      display: flex;
      flex-direction: row;
      align-items: center;
      text-align: left;
      margin: 0 0 30px 0;
      width: 78%;
      gap: 10px;
      justify-content: space-between;
    }
    .gs-veg-selection .gs-inputs h1,
    .gs-veg-selection .gs-inputs h2,
    .gs-veg-selection .gs-inputs h3 {
      color: #333333;
      margin: 0;
      font-weight: 500;
    }
    .gs-veg-selection .gs-inputs h1 {
      font-weight: 600;
      font-size: 2rem;
    }
    .gs-veg-selection .gs-inputs h2 {
      font-weight: 300;
      font-size: 1.5rem;
      margin-top: -5px;
    }
    .gs-veg-selection .gs-inputs select {
      display: block;
      margin: 5px 0;
      width: 220px;
      -moz-text-align-last: center;
           text-align-last: center;
      border-radius: 5px;
    }
    .gs-veg-selection .gs-inputs label {
      padding: 15px 0 0 0;
      font-weight: 500;
    }
    
    @media (max-width: 900px) {
      .gs-veg-selection {
        border-radius: 0;
        padding: 10px 0 0 0;
      }
      .gs-veg-selection .gs-inputs {
        margin: 10px auto;
        flex-direction: column;
        width: 100%;
        text-align: center;
      }
      .gs-veg-selection .gs-inputs h1 {
        font-size: 26px;
        margin: 0 60px;
      }
      .gs-veg-selection .gs-inputs h2 {
        font-size: 18px;
        margin: 5px 0;
      }
      .gs-veg-selection select {
        font-size: 16px;
      }
    }
    .gs-options {
      display: grid;
      grid-template-columns: 1fr;
      margin: 20px 0 0 0;
      min-height: 500px;
    }
    
    @media (max-width: 900px) {
      .gs-options {
        width: 100%;
        margin: 0;
      }
    }
    .btnWrapper {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      height: 100px;
      width: 176px;
      color: #fff;
      box-shadow: inset 0 0 100px 20px rgba(0, 0, 0, 0.4);
      cursor: pointer;
      border-radius: 5px;
      font-size: 20px;
      font-family: var(--font-heading), sans-serif; /* was serifa */
      transition: ease 0.2s;
      margin: 2px;
      height: 100px;
      opacity: 0;
      animation: grow 0.5s ease forwards;
    }
    
    .btnWrapper:hover,
    .btnWrapper:focus {
      box-shadow: inset 0 0 100px 20px rgba(0, 181, 204, 0.7);
    }
    
    @media (max-width: 900px) {
      .btnWrapper {
        width: 100px;
        margin: 8px;
        font-size: 18px;
        animation: growMobile 0.5s ease forwards;
      }
    }
    .next-button {
      display: none;
      margin: 20px auto;
      font-size: 15px;
      font-weight: 600;
      width: 120px;
      height: 30px;
      border-radius: 5px;
      line-height: 1;
      background: var(--color-tasman);
      color: #ffffff;
    }
    
    @media (max-width: 900px) {
      .next-button {
        display: block;
      }
    }
    .search-type {
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;
      color: #222;
      gap: 7px;
    }
    .search-type .switch-view {
      padding-top: 15px;
      font-size: 18px;
      transition: ease 0.3s;
      cursor: pointer;
    }
    .search-type .switch-view:hover {
      color: var(--color-tasman);
    }
    .search-type .switch-view-2 {
      right: -50px;
    }
    .search-type .reset-search {
      position: absolute;
      right: 10px;
      bottom: 13px;
      cursor: pointer;
      transition: ease 0.3s;
    }
    
    @media (max-width: 900px) {
      .search-type {
        width: 100%;
      }
    }
    .select-options {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: flex-start;
      z-index: 9999;
      width: 78%;
      top: 20px;
    }
    
    @media (max-width: 900px) {
      .select-options {
        width: 90%;
        flex-direction: column;
        margin: 10px 0;
      }
    }
    .dropdown {
      position: relative;
    }
    
    .dropdown::after {
      content: "\f107";
      font-family: "Font Awesome 5 Pro";
      font-size: 18px;
      position: absolute;
      right: 15px;
      top: 27px;
      color: #000;
      pointer-events: none;
    }
    
    @media (max-width: 900px) {
      .dropdown::after {
        display: none;
        right: -150px;
        top: -30px;
      }
    }
    .select-options select {
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
      background: #fff;
    }
    
    .season-btn {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      height: 30px;
      width: 70px;
      color: #222;
      background: transparent;
      cursor: pointer;
      border-radius: 5px;
      transition: ease 0.2s;
      font-size: 12px;
      font-weight: 400;
    }
    .season-btn img {
      transition: ease 0.5s;
      margin-bottom: 10px;
    }
    
    .season-btn:hover img {
      transform: scale(1.2);
      opacity: 1 !important;
    }
    
    .season-btn:hover {
      opacity: 1 !important;
    }
    
    @media (max-width: 900px) {
      .season-btn {
        width: 100%;
      }
    }
    .select-size select {
      display: block;
    }
    
    @media (max-width: 900px) {
      .select-size {
        width: 100%;
        margin-left: 0;
      }
      .select-size select {
        width: 100%;
      }
    }
    .gs-seasons {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      grid-gap: 10px;
      padding: 0;
      margin: 0px;
      margin-top: -20px;
    }
    .gs-seasons img {
      max-width: 40px;
    }
    
    @media (max-width: 900px) {
      .gs-seasons {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        margin: 20px 0;
        grid-gap: 0;
      }
    }
    /* TOOLTIPS */
    .tooltip {
      position: relative;
    }
    
    .tooltip .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: var(--color-tasman);
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px;
      position: absolute;
      z-index: 1;
      bottom: 15px;
      left: 50%;
      margin-left: -60px;
      font-size: 11px;
      line-height: 1.2;
      transform: translateY(15px);
      opacity: 0;
      transition: ease 0.3s;
    }
    
    .tooltip .tooltiptext::after {
      content: "";
      position: absolute;
      top: 100%;
      left: 50%;
      margin-left: -5px;
      border-width: 5px;
      border-style: solid;
      border-color: var(--color-tasman) transparent transparent transparent;
    }
    
    .tooltip:hover .tooltiptext {
      visibility: visible;
      transform: translateY(0);
      opacity: 1;
    }
    
    .reset-animation {
      animation: reset ease 1s;
    }
    
        @media (max-width: 900px) {
      .select-type {
        width: 100%;
        margin-right: 10px;
      }
    }
    #selectType {
      width: 180px;
      display: block;
    }
    
    /* `max-width` was 1200px, which centred the planner 72px inside the content
       column and left it visibly narrower than the blocks around it. The column
       is the constraint now. */
    .gs-container {
      display: block;
      position: relative;
      max-width: 100%;
      height: -moz-fit-content;
      height: fit-content;
      margin: 0 auto;
      border-radius: 10px;
      overflow: hidden;
      transition: ease 0.3s;
      font-size: 13px !important;
    }
    .gs-container input[type=text] {
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
      display: block;
      padding: 5px;
      border: none;
      border: solid 1px #ccc;
      border-radius: 5px;
      width: 180px;
      height: 32px;
      font-size: 14px;
      outline: none;
      margin: 5px 0;
      text-indent: 4px;
      box-sizing: border-box;
    }
    .gs-container label {
      position: relative;
      color: #222;
      font-size: 12px;
      font-weight: 400;
      display: flex;
      flex-direction: column;
    }
    .gs-container button {
      padding: 6px;
      border: none;
      border-radius: 1px;
      background: #fff;
      width: 100px;
      cursor: pointer;
      transition: ease 0.2s;
      outline: none;
    }
    .gs-container button:hover {
      background: var(--color-tasman);
      color: #fff;
    }
    .gs-container h1,
    .gs-container h2,
    .gs-container h3,
    .gs-container h4,
    .gs-container h5 {
      font-family: var(--font-heading), sans-serif; /* was serifa */
      margin: 0;
    }
    .gs-container h4 {
      font-weight: 500;
      font-size: 16px;
    }
    .gs-container .gs-background,
    .gs-container .gs-plot {
      position: absolute;
      width: 1200px;
      height: 600px;
      background: url();
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 10px;
      filter: blur(4px);
    }
    .gs-container .gs-plot {
      background: url(/calculator-assets/planting-planner/small-plot.png);
      background-size: contain;
      background-position: center left;
      background-repeat: no-repeat;
    }
    .gs-container .gs-info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: absolute;
      width: 360px;
      max-height: 95%;
      background: rgb(244, 244, 244);
      border-radius: 10px;
      padding: 0;
      top: 50%;
      right: 15px;
      opacity: 0;
      z-index: 9;
      transform: translate(60px, -50%);
      box-shadow: rgba(0, 0, 0, 0.8) 0px 10px 20px -10px;
      transition: all 0.5s ease 0s;
    }
    .gs-container .gs-info-header {
      position: relative;
      display: flex;
      flex-direction: row;
      -webkit-box-align: center;
      justify-content: space-between;
      align-items: center;
      padding: 5%;
      height: 100px;
      border-radius: 10px 10px 0 0;
      background: #eee;
      background-size: cover;
      background-repeat: no-repeat;
      box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.8);
    }
    .gs-container .gs-info-header::after {
      content: "";
      position: absolute;
      border: solid 10px transparent;
      border-bottom: solid 10px #f4f4f4;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }
    .gs-container .gs-info-header .gs-item-icon {
      width: 60px;
      height: 60px;
      margin-right: 20px;
      background: url();
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 10px;
    }
    .gs-container .gs-info-header .gs-item-name h2 {
      margin: 0;
      font-size: 24px;
      color: #fff;
      text-transform: none;
    }
    .gs-container .gs-info-header .gs-item-name h4 {
      margin: 0;
      color: #fff;
      text-transform: none;
    }
    .gs-container .gs-info-content {
      position: relative;
      width: 100%;
      border-radius: 10px;
      margin: 10px 0;
    }
    .gs-container .gs-info-card {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      padding: 5px 17px 5px 0;
    }
    .gs-container .gs-info-card i {
      font-size: 20px;
      padding: 0 20px;
    }
    .gs-container .gs-info-card p {
      margin: 0 0 10px 0;
      font-size: 13px !important;
      line-height: 1.4 !important;
    }
    .gs-container .gs-info-footer {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      background: #fff;
      box-shadow: inset 0 20px 15px rgba(0, 0, 0, 0.1);
      width: 100%;
      border-radius: 0 0 10px 10px;
      padding: 10px 0;
    }
    
    @media (max-width: 900px) {
      .gs-container {
        width: auto;
        max-width: 100%;
        border-radius: 0;
        margin: 0 auto;
        overflow: hidden;
      }
      .gs-container input[type=text] {
        width: 98%;
        font-size: 16px;
      }
      .gs-container input[type=text]::-moz-placeholder {
        font-size: 14px;
      }
      .gs-container input[type=text]::placeholder {
        font-size: 14px;
      }
      .gs-container label {
        width: 99%;
      }
      .gs-container .gs-info {
        height: 585px;
        max-height: 100%;
        margin: 0 -8px;
        transform: translate(0px, 115%);
      }
      .gs-container .gs-info-header {
        border-radius: 10px;
      }
      .gs-container .gs-background,
      .gs-container .gs-plot {
        border-radius: 0;
        height: 500px;
        left: -15%;
      }
      .gs-container .gs-info-content {
        margin: 5px 0;
      }
      .gs-container .gs-info-card {
        padding: 5px;
      }
      .gs-container .gs-info-card i {
        padding: 0 10px;
      }
    }
    .gs-measurements {
      position: relative;
      width: 100%;
      height: 100%;
      opacity: 0;
      transition: ease 1s;
    }
    .gs-measurements img {
      position: absolute;
    }
    .gs-measurements .measure-line-horizontal {
      position: absolute;
      border-top: dashed 2px #fff;
      width: 45%;
      left: 140px;
    }
    .gs-measurements .measure-line-vertical {
      position: absolute;
      border-right: dashed 2px #fff;
      height: 72%;
      top: 51%;
      transform: translate(0, -50%);
    }
    .gs-measurements {
      /* Planitng Points */
    }
        .gs-measurements .planting-point {
      animation: target 6s infinite;
    }
    
    @media (max-width: 900px) {
      .gs-measurements .measure-line-vertical {
        height: 55%;
      }
      .gs-measurements .measure-line-horizontal {
        width: 90%;
      }
      .gs-measurements .vertical-measure {
        display: none;
      }
      .gs-measurements .horizontal-measure {
        display: none;
      }
    }
    .accordion {
      display: none;
      color: #fff !important;
      background: var(--color-tasman) !important;
    }
    
    @media (max-width: 900px) {
      .accordion {
        display: block;
        margin-top: 10px;
      }
    }
    /*
        SCOPED TO THE SAME BREAKPOINT AS THE BUTTON THAT OPENS IT. Changed
        2026-09-18.

        `.accordion` above is `display: none` until 900px, so More Info exists
        only on mobile. This rule was unscoped, which was survivable only because
        the markup never carried the `panel` class: the collapse never applied
        anywhere, and More Info threw instead of opening.

        Putting the class on fixed mobile and broke desktop in the same move,
        because the collapse then applied at every width and above 900px there is
        no button to undo it — the details simply vanished. Scoping it here is
        what the original meant: collapsed on mobile behind More Info, always
        open on desktop.
    */
    @media (max-width: 900px) {
      .panel {
        max-height: 0;
        overflow: hidden;
        border-radius: 10px;
        transition: max-height 0.4s ease-out;
      }
    }
    
    .buy-now {
      position: absolute;
      z-index: 1;
      top: 40px;
      left: 320px;
      background: #fff;
      font-size: 14px;
      font-weight: 600;
      color: var(--color-tasman);
      opacity: 0;
      padding: 10px;
      border-radius: 10px;
      text-align: center;
      transform: translateY(20px);
      box-shadow: 0 5px 20px -10px rgba(0, 0, 0, 0.2);
      text-decoration: none !important;
      cursor: pointer;
      transition: ease 0.4s;
    }
    .buy-now i {
      margin-right: 10px;
    }
    .buy-now::after {
      content: "";
      position: absolute;
      border: solid 10px transparent;
      border-top: solid 10px #fff;
      bottom: -20px;
      left: 50%;
      transform: translateX(-50%);
      transition: ease 0.2s;
    }
    
    .buy-now:hover {
      background: #f4f4f4;
    }
    .buy-now:hover::after {
      border-top: solid 10px #f4f4f4;
    }
    
    @media (max-width: 900px) {
      .buy-now {
        font-size: 13px;
        top: 18px;
        left: 110px;
        padding: 10px;
        border-radius: 5px;
      }
    }
    .dropdown-options {
      display: flex;
      flex-direction: row;
      gap: 10px;
      margin-left: 10px;
    }
    .dropdown-options select[name=sizes] {
      padding: 5px;
      border: none;
      border: solid 1px #ccc;
      border-radius: 5px;
      width: 190px;
      height: 32px;
      font-size: 14px;
      outline: none;
      margin: 5px 0;
      text-indent: 4px;
      cursor: pointer;
    }
    .dropdown-options #selectGardenBedType {
      width: 180px;
    }
    .dropdown-options #gardenSize {
      width: 220px;
    }
    
    @media (max-width: 900px) {
      .dropdown-options {
        width: 100%;
        margin-top: 10px;
        margin-left: 0;
      }
      .dropdown-options select[name=sizes] {
        width: 100% !important;
        font-size: 14px;
      }
    }
    @media (max-width: 600px) {
      .dropdown-options {
        flex-direction: column;
      }
    }
    .notice {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 380px;
      margin: 0 auto;
      font-size: 13px;
      text-align: center;
    }
    
    @media (max-width: 900px) {
      .notice {
        max-width: 310px;
      }
    }
        .list-view {
      position: relative;
      display: grid;
      grid-template-columns: 1fr 2fr 3fr 2fr 2fr 2fr;
      grid-gap: 10px;
      background: #f4f4f4;
      width: 100%;
      height: 60px;
      border-radius: 10px;
      animation: 1s ease 0s 1 normal forwards running renderList;
      border: solid 1px transparent;
      transition: ease 0.3s;
      cursor: pointer;
    }
    .list-view:hover {
      transition: ease 0.3s;
      background: rgba(0, 181, 204, 0.2);
    }
    .list-view i {
      color: var(--color-tasman);
      font-size: 18px;
    }
    .list-view .list-view-img {
      width: 50px;
      height: 50px;
      border-radius: 10px;
      margin: 5px;
    }
    .list-view .list-view-heading {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      font-size: 15px;
      font-weight: 700;
    }
    .list-view .list-view-text {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      font-size: 14px;
    }
    .list-view .list-view-text p {
      margin: 0;
      font-size: 13px;
    }
}