.elementor-62 .elementor-element.elementor-element-c62fdd4{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:none;--border-style:none;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-62 .elementor-element.elementor-element-c62fdd4:not(.elementor-motion-effects-element-type-background), .elementor-62 .elementor-element.elementor-element-c62fdd4 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-e07e73f );}.elementor-62 .elementor-element.elementor-element-c96f739{--display:flex;--justify-content:center;--overlay-opacity:0.5;border-style:none;--border-style:none;--padding-top:0px;--padding-bottom:0px;--padding-left:80px;--padding-right:0px;}.elementor-62 .elementor-element.elementor-element-c96f739:not(.elementor-motion-effects-element-type-background), .elementor-62 .elementor-element.elementor-element-c96f739 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://timberstone.lk/wp-content/uploads/2026/07/Untitled-design-6.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-62 .elementor-element.elementor-element-c96f739::before, .elementor-62 .elementor-element.elementor-element-c96f739 > .elementor-background-video-container::before, .elementor-62 .elementor-element.elementor-element-c96f739 > .e-con-inner > .elementor-background-video-container::before, .elementor-62 .elementor-element.elementor-element-c96f739 > .elementor-background-slideshow::before, .elementor-62 .elementor-element.elementor-element-c96f739 > .e-con-inner > .elementor-background-slideshow::before, .elementor-62 .elementor-element.elementor-element-c96f739 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#100705;--background-overlay:'';}.elementor-62 .elementor-element.elementor-element-a4524c8{--spacer-size:50px;}.elementor-62 .elementor-element.elementor-element-e63e9b6{--display:flex;--justify-content:center;--padding-top:196px;--padding-bottom:100px;--padding-left:80px;--padding-right:80px;}.elementor-62 .elementor-element.elementor-element-008871a{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-62 .elementor-element.elementor-element-6d300cc{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-62 .elementor-element.elementor-element-c47218d{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 22px) 0px;--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-62 .elementor-element.elementor-element-c47218d .elementor-icon-list-icon i{color:var( --e-global-color-primary );transition:color 0.3s;}.elementor-62 .elementor-element.elementor-element-c47218d .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );transition:fill 0.3s;}.elementor-62 .elementor-element.elementor-element-c47218d .elementor-icon-list-icon{padding-inline-end:14px;}.elementor-62 .elementor-element.elementor-element-c47218d .elementor-icon-list-item > .elementor-icon-list-text, .elementor-62 .elementor-element.elementor-element-c47218d .elementor-icon-list-item > a{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-size:var( --e-global-typography-accent-font-size );font-weight:var( --e-global-typography-accent-font-weight );text-transform:var( --e-global-typography-accent-text-transform );}.elementor-62 .elementor-element.elementor-element-c47218d .elementor-icon-list-text{color:var( --e-global-color-44e2b61 );transition:color 0.3s;}.elementor-62 .elementor-element.elementor-element-eecf340 .elementor-heading-title{color:var( --e-global-color-44e2b61 );}.elementor-62 .elementor-element.elementor-element-9d649bd{color:var( --e-global-color-578da0f );}.elementor-62 .elementor-element.elementor-element-23339fe2{--display:flex;--padding-top:100px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}@media(min-width:768px){.elementor-62 .elementor-element.elementor-element-c96f739{--width:100%;}}@media(max-width:1024px){.elementor-62 .elementor-element.elementor-element-c62fdd4{--gap:50px 50px;--row-gap:50px;--column-gap:50px;}.elementor-62 .elementor-element.elementor-element-c96f739{--padding-top:0px;--padding-bottom:0px;--padding-left:30px;--padding-right:0px;}.elementor-62 .elementor-element.elementor-element-e63e9b6{--padding-top:157px;--padding-bottom:69px;--padding-left:0px;--padding-right:30px;}.elementor-62 .elementor-element.elementor-element-c47218d .elementor-icon-list-item > .elementor-icon-list-text, .elementor-62 .elementor-element.elementor-element-c47218d .elementor-icon-list-item > a{font-size:var( --e-global-typography-accent-font-size );}}@media(max-width:767px){.elementor-62 .elementor-element.elementor-element-c62fdd4{--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-62 .elementor-element.elementor-element-c96f739{--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-62 .elementor-element.elementor-element-c96f739.e-con{--order:99999 /* order end hack */;}.elementor-62 .elementor-element.elementor-element-a4524c8{--spacer-size:261px;}.elementor-62 .elementor-element.elementor-element-e63e9b6{--padding-top:50px;--padding-bottom:21px;--padding-left:20px;--padding-right:20px;}.elementor-62 .elementor-element.elementor-element-6d300cc{--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-62 .elementor-element.elementor-element-c47218d .elementor-icon-list-item > .elementor-icon-list-text, .elementor-62 .elementor-element.elementor-element-c47218d .elementor-icon-list-item > a{font-size:var( --e-global-typography-accent-font-size );}.elementor-62 .elementor-element.elementor-element-eecf340{text-align:center;}.elementor-62 .elementor-element.elementor-element-9d649bd{text-align:center;}.elementor-62 .elementor-element.elementor-element-23339fe2{--padding-top:50px;--padding-bottom:50px;--padding-left:20px;--padding-right:20px;}}/* Start custom CSS for container, class: .elementor-element-c62fdd4 *//* =========================================================
   TIMBERSTONE – PREMIUM SHOP HERO SECTION
   Keeps the existing green colour palette
========================================================= */

:root {
  --ts-green: #1f6339;
  --ts-green-dark: #103f27;
  --ts-green-deep: #082f1d;
  --ts-green-light: #4d9164;
  --ts-beige: #c9c39a;
  --ts-beige-light: #eeeacd;
  --ts-white: #ffffff;
}

/* =========================================================
   MAIN HERO WRAPPER
========================================================= */

.ts-shop-hero {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(31, 99, 57, 0.14);
  background: #ffffff;
  box-shadow:
    0 22px 50px rgba(16, 63, 39, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Premium top accent line */
.ts-shop-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 4px;
  border-radius: 0 0 20px 20px;
  background:
    linear-gradient(
      90deg,
      var(--ts-green-dark),
      var(--ts-green-light),
      var(--ts-beige),
      var(--ts-green)
    );
  z-index: 8;
}

/* Decorative lower shape */
.ts-shop-hero::after {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  right: -210px;
  bottom: -230px;
  border-radius: 50%;
  border: 65px solid rgba(201, 195, 154, 0.07);
  box-shadow: 0 0 0 32px rgba(77, 145, 100, 0.05);
  pointer-events: none;
  z-index: 1;
}

/* Keep Elementor content visible */
.ts-shop-hero .elementor-container,
.ts-shop-hero .e-con-inner,
.ts-shop-hero .elementor-column,
.ts-shop-hero .elementor-widget-wrap,
.ts-shop-hero .elementor-element {
  position: relative;
  z-index: 3;
}

/* =========================================================
   LEFT IMAGE COLUMN
========================================================= */

.ts-shop-hero-image {
  position: relative;
  min-height: 500px;
  overflow: hidden;
  isolation: isolate;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Refined dark overlay */
.ts-shop-hero-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(8, 47, 29, 0.18) 0%,
      rgba(8, 47, 29, 0.07) 48%,
      rgba(8, 47, 29, 0.22) 100%
    ),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.04) 0%,
      rgba(8, 47, 29, 0.30) 100%
    );
  z-index: 2;
  pointer-events: none;
}

/* Decorative frame */
.ts-shop-hero-image::after {
  content: "";
  position: absolute;
  inset: 24px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 18px;
  box-shadow:
    inset 0 0 0 1px rgba(201, 195, 154, 0.12);
  z-index: 3;
  pointer-events: none;
}

/* Image transition */
.ts-shop-hero-image {
  transition:
    filter 0.5s ease,
    transform 0.5s ease;
}

.ts-shop-hero:hover .ts-shop-hero-image {
  filter: saturate(1.05) contrast(1.03);
}

/* =========================================================
   RIGHT CONTENT COLUMN
========================================================= */

.ts-shop-hero-content {
  position: relative;
  min-height: 500px;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  color: #ffffff;
  background:
    radial-gradient(
      circle at 88% 18%,
      rgba(201, 195, 154, 0.18),
      transparent 28%
    ),
    radial-gradient(
      circle at 15% 90%,
      rgba(77, 145, 100, 0.18),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      #1a5a36 0%,
      #14502f 42%,
      #0f4329 72%,
      #082f1d 100%
    ) !important;
}

/* Vertical divider line */
.ts-shop-hero-content::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(238, 234, 205, 0.72),
      transparent
    );
  z-index: 3;
}

/* Decorative ring */
.ts-shop-hero-content::after {
  content: "";
  position: absolute;
  width: 230px;
  height: 230px;
  right: -105px;
  top: -105px;
  border-radius: 50%;
  border: 42px solid rgba(255, 255, 255, 0.035);
  box-shadow:
    0 0 0 24px rgba(201, 195, 154, 0.035);
  z-index: 1;
  pointer-events: none;
}

/* =========================================================
   SMALL LABEL
========================================================= */

.ts-shop-hero-content .ts-shop-label,
.ts-shop-hero-content .hero-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ts-beige-light) !important;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.02em;
}

/* Label square */
.ts-shop-hero-content .ts-shop-label::before,
.ts-shop-hero-content .hero-label::before {
  content: "";
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  border-radius: 2px;
  background:
    linear-gradient(
      135deg,
      var(--ts-beige-light),
      var(--ts-beige)
    );
  box-shadow:
    0 0 0 5px rgba(201, 195, 154, 0.08),
    0 5px 12px rgba(0, 0, 0, 0.12);
}

/* =========================================================
   HEADING
========================================================= */

.ts-shop-hero-content h1,
.ts-shop-hero-content h2,
.ts-shop-hero-content .elementor-heading-title {
  position: relative;
  color: #ffffff !important;
  font-size: clamp(48px, 5vw, 76px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.045em;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

/* Heading underline */
.ts-shop-hero-content h1::after,
.ts-shop-hero-content h2::after,
.ts-shop-hero-content .elementor-heading-title::after {
  content: "";
  display: block;
  width: 82px;
  height: 5px;
  margin-top: 18px;
  border-radius: 20px;
  background:
    linear-gradient(
      90deg,
      var(--ts-beige-light),
      var(--ts-beige),
      rgba(255, 255, 255, 0.44)
    );
  box-shadow: 0 7px 15px rgba(0, 0, 0, 0.12);
}

/* =========================================================
   DESCRIPTION
========================================================= */

.ts-shop-hero-content p,
.ts-shop-hero-content .elementor-widget-text-editor,
.ts-shop-hero-content .elementor-widget-text-editor p {
  max-width: 720px;
  color: rgba(255, 255, 255, 0.84) !important;
  font-size: 17px;
  line-height: 1.8;
}

/* Description accent */
.ts-shop-hero-content .elementor-widget-text-editor:last-child {
  position: relative;
  border-left: 3px solid rgba(201, 195, 154, 0.75);
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.05),
      transparent
    );
}

/* =========================================================
   OPTIONAL BUTTON
========================================================= */

.ts-shop-hero-content .elementor-button {
  position: relative;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 12px !important;
  color: var(--ts-green-dark) !important;
  background:
    linear-gradient(
      135deg,
      var(--ts-beige-light),
      var(--ts-beige)
    ) !important;
  box-shadow:
    0 12px 25px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
  font-size: 15px;
  font-weight: 700;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    color 0.3s ease;
}

/* Button overlay */
.ts-shop-hero-content .elementor-button::before {
  content: "";
  position: absolute;
  inset: 100% 0 0;
  background:
    linear-gradient(
      135deg,
      var(--ts-green-light),
      var(--ts-green-dark)
    );
  transition: inset 0.35s ease;
  z-index: 0;
}

.ts-shop-hero-content .elementor-button span,
.ts-shop-hero-content .elementor-button-content-wrapper {
  position: relative;
  z-index: 2;
}

.ts-shop-hero-content .elementor-button:hover {
  color: #ffffff !important;
  transform: translateY(-4px);
  box-shadow:
    0 17px 30px rgba(0, 0, 0, 0.25),
    0 0 0 4px rgba(201, 195, 154, 0.16);
}

.ts-shop-hero-content .elementor-button:hover::before {
  inset: 0;
}

/* =========================================================
   OPTIONAL BREADCRUMB
========================================================= */

.ts-shop-hero-content .woocommerce-breadcrumb,
.ts-shop-hero-content .breadcrumb,
.ts-shop-hero-content .rank-math-breadcrumb {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: rgba(255, 255, 255, 0.65) !important;
  font-size: 13px;
  font-weight: 600;
}

.ts-shop-hero-content .woocommerce-breadcrumb a,
.ts-shop-hero-content .breadcrumb a,
.ts-shop-hero-content .rank-math-breadcrumb a {
  color: var(--ts-beige-light) !important;
  text-decoration: none;
}

.ts-shop-hero-content .woocommerce-breadcrumb a:hover,
.ts-shop-hero-content .breadcrumb a:hover,
.ts-shop-hero-content .rank-math-breadcrumb a:hover {
  color: #ffffff !important;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1024px) {
  .ts-shop-hero,
  .ts-shop-hero-image,
  .ts-shop-hero-content {
    min-height: 450px;
  }

  .ts-shop-hero-content h1,
  .ts-shop-hero-content h2,
  .ts-shop-hero-content .elementor-heading-title {
    font-size: clamp(40px, 5vw, 58px);
  }

  .ts-shop-hero-content p {
    font-size: 16px;
  }

  .ts-shop-hero-image::after {
    inset: 18px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
  .ts-shop-hero {
    min-height: auto;
    border-radius: 0 0 20px 20px;
  }

  .ts-shop-hero-image {
    min-height: 330px;
    background-position: center center !important;
  }

  .ts-shop-hero-image::before {
    background:
      linear-gradient(
        180deg,
        rgba(8, 47, 29, 0.04) 0%,
        rgba(8, 47, 29, 0.35) 100%
      );
  }

  .ts-shop-hero-image::after {
    inset: 14px;
    border-radius: 14px;
  }

  .ts-shop-hero-content {
    min-height: auto;
    text-align: center;
  }

  .ts-shop-hero-content::before {
    top: 0;
    left: 12%;
    right: 12%;
    bottom: auto;
    width: auto;
    height: 1px;
    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(238, 234, 205, 0.7),
        transparent
      );
  }

  .ts-shop-hero-content .ts-shop-label,
  .ts-shop-hero-content .hero-label {
    justify-content: center;
  }

  .ts-shop-hero-content h1,
  .ts-shop-hero-content h2,
  .ts-shop-hero-content .elementor-heading-title {
    font-size: 42px;
    line-height: 1.08;
  }

  .ts-shop-hero-content h1::after,
  .ts-shop-hero-content h2::after,
  .ts-shop-hero-content .elementor-heading-title::after {
    margin-left: auto;
    margin-right: auto;
  }

  .ts-shop-hero-content p,
  .ts-shop-hero-content .elementor-widget-text-editor p {
    font-size: 15px;
    line-height: 1.75;
    text-align: center;
  }

  .ts-shop-hero-content .elementor-widget-text-editor:last-child {
    border-left: none;
    border-top: 3px solid rgba(201, 195, 154, 0.7);
    border-radius: 12px;
  }

  .ts-shop-hero-content .elementor-button {
    min-height: 47px;
  }

  .ts-shop-hero-content .woocommerce-breadcrumb,
  .ts-shop-hero-content .breadcrumb,
  .ts-shop-hero-content .rank-math-breadcrumb {
    justify-content: center;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {
  .ts-shop-hero-image {
    min-height: 270px;
  }

  .ts-shop-hero-content h1,
  .ts-shop-hero-content h2,
  .ts-shop-hero-content .elementor-heading-title {
    font-size: 34px;
  }

  .ts-shop-hero-content .elementor-button-wrapper,
  .ts-shop-hero-content .elementor-button {
    width: 100%;
  }

  .ts-shop-hero-content .elementor-button {
    min-height: 45px;
    font-size: 14px;
  }
}

/* =========================================================
   VISIBILITY FIX
========================================================= */

.ts-shop-hero *,
.ts-shop-hero-image *,
.ts-shop-hero-content * {
  visibility: visible;
}

.ts-shop-hero .elementor-widget-container {
  opacity: 1;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-23339fe2 *//* =========================================================
   TIMBERSTONE CART – COLOURFUL FIELDS & BUTTONS
   No layout, width, column or spacing changes
========================================================= */

:root {
  --ts-green: #1f6339;
  --ts-green-dark: #103f27;
  --ts-green-deep: #082f1d;
  --ts-green-light: #4d9164;
  --ts-beige: #c9c39a;
  --ts-beige-light: #eeeacd;
  --ts-cream: #faf9f2;
  --ts-white: #ffffff;
  --ts-text: #294536;
  --ts-muted: #718078;
}

/* =========================================================
   CART TABLE COLOURS
========================================================= */

body.woocommerce-cart
table.shop_table {
  border-color: rgba(31, 99, 57, 0.18) !important;
  background:
    linear-gradient(
      145deg,
      #ffffff 0%,
      #fbfaf3 58%,
      #eef5ef 100%
    ) !important;
  box-shadow:
    0 14px 32px rgba(16, 63, 39, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

/* Table headings */
body.woocommerce-cart
table.shop_table thead {
  background:
    linear-gradient(
      90deg,
      rgba(238, 234, 205, 0.72),
      rgba(231, 243, 234, 0.85)
    ) !important;
}

body.woocommerce-cart
table.shop_table thead th {
  color: var(--ts-green-dark) !important;
  font-weight: 750 !important;
}

/* Product row */
body.woocommerce-cart
table.shop_table tbody tr.cart_item {
  background:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.92),
      rgba(243, 248, 244, 0.92)
    ) !important;
  transition:
    background 0.3s ease,
    box-shadow 0.3s ease !important;
}

body.woocommerce-cart
table.shop_table tbody tr.cart_item:hover {
  background:
    linear-gradient(
      90deg,
      rgba(238, 234, 205, 0.34),
      rgba(228, 242, 232, 0.5)
    ) !important;
}

/* Cell borders */
body.woocommerce-cart
table.shop_table td,
body.woocommerce-cart
table.shop_table th {
  border-color: rgba(31, 99, 57, 0.11) !important;
}

/* =========================================================
   PRODUCT NAME, PRICE AND SUBTOTAL
========================================================= */

body.woocommerce-cart
td.product-name a {
  color: var(--ts-green) !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

body.woocommerce-cart
td.product-name a:hover {
  color: var(--ts-green-dark) !important;
}

body.woocommerce-cart
td.product-price,
body.woocommerce-cart
td.product-subtotal,
body.woocommerce-cart
td.product-price .amount,
body.woocommerce-cart
td.product-subtotal .amount {
  color: var(--ts-green-dark) !important;
  font-weight: 750 !important;
}

/* =========================================================
   PRODUCT IMAGE
========================================================= */

body.woocommerce-cart
table.cart img {
  border: 1px solid rgba(31, 99, 57, 0.18) !important;
  border-radius: 12px !important;
  background:
    radial-gradient(
      circle,
      #ffffff 0%,
      #f6f3e7 100%
    ) !important;
  box-shadow:
    0 7px 16px rgba(16, 63, 39, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

/* =========================================================
   REMOVE PRODUCT BUTTON
========================================================= */

body.woocommerce-cart
a.remove {
  color: #a23f3f !important;
  border: 1px solid rgba(162, 63, 63, 0.2) !important;
  border-radius: 9px !important;
  background:
    linear-gradient(
      145deg,
      #fffafa,
      #f8eaea
    ) !important;
  box-shadow: 0 5px 12px rgba(120, 38, 38, 0.08) !important;
  transition:
    color 0.3s ease,
    background 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease !important;
}

body.woocommerce-cart
a.remove:hover {
  color: #ffffff !important;
  background:
    linear-gradient(
      135deg,
      #bd5a52,
      #913532
    ) !important;
  transform: rotate(90deg) scale(1.04);
  box-shadow:
    0 9px 18px rgba(130, 42, 42, 0.22),
    0 0 0 4px rgba(162, 63, 63, 0.1) !important;
}

/* =========================================================
   QUANTITY FIELD
========================================================= */

body.woocommerce-cart
.quantity .qty {
  color: var(--ts-green-dark) !important;
  border: 1px solid rgba(31, 99, 57, 0.25) !important;
  border-left: 4px solid var(--ts-green-light) !important;
  border-radius: 9px !important;
  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f8f5e8 48%,
      #eaf4ec 100%
    ) !important;
  box-shadow:
    inset 0 2px 5px rgba(16, 63, 39, 0.04),
    0 5px 12px rgba(16, 63, 39, 0.06) !important;
  font-weight: 700 !important;
  outline: none !important;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease !important;
}

body.woocommerce-cart
.quantity .qty:hover {
  border-color: var(--ts-green-light) !important;
}

body.woocommerce-cart
.quantity .qty:focus {
  border-color: var(--ts-green) !important;
  border-left-color: var(--ts-beige) !important;
  background: #ffffff !important;
  box-shadow:
    0 0 0 4px rgba(31, 99, 57, 0.11),
    0 8px 18px rgba(16, 63, 39, 0.08) !important;
}

/* =========================================================
   COUPON FIELD
========================================================= */

body.woocommerce-cart
.coupon input.input-text {
  color: var(--ts-green-dark) !important;
  border: 1px solid rgba(31, 99, 57, 0.24) !important;
  border-left: 4px solid var(--ts-beige) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #faf7ea 50%,
      #eaf4ec 100%
    ) !important;
  box-shadow:
    inset 0 2px 5px rgba(16, 63, 39, 0.04),
    0 6px 14px rgba(16, 63, 39, 0.06) !important;
  -webkit-text-fill-color: var(--ts-green-dark) !important;
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease !important;
}

body.woocommerce-cart
.coupon input.input-text:hover {
  border-color: var(--ts-green-light) !important;
}

body.woocommerce-cart
.coupon input.input-text:focus {
  border-color: var(--ts-green) !important;
  border-left-color: var(--ts-green) !important;
  background: #ffffff !important;
  box-shadow:
    0 0 0 4px rgba(31, 99, 57, 0.1),
    0 9px 19px rgba(16, 63, 39, 0.08) !important;
  outline: none !important;
}

body.woocommerce-cart
.coupon input.input-text::placeholder {
  color: #7f8e85 !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #7f8e85 !important;
}

/* =========================================================
   APPLY COUPON BUTTON
========================================================= */

body.woocommerce-cart
.coupon button.button {
  color: #ffffff !important;
  border: 1px solid rgba(31, 99, 57, 0.22) !important;
  border-radius: 10px !important;
  background:
    linear-gradient(
      135deg,
      var(--ts-green-light) 0%,
      var(--ts-green) 50%,
      var(--ts-green-dark) 100%
    ) !important;
  box-shadow:
    0 9px 20px rgba(16, 63, 39, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  font-weight: 750 !important;
  transition:
    color 0.3s ease,
    background 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease !important;
}

body.woocommerce-cart
.coupon button.button:hover {
  color: var(--ts-green-dark) !important;
  background:
    linear-gradient(
      135deg,
      var(--ts-beige-light),
      var(--ts-beige)
    ) !important;
  transform: translateY(-3px);
  box-shadow:
    0 14px 25px rgba(16, 63, 39, 0.23),
    0 0 0 4px rgba(201, 195, 154, 0.18) !important;
}

/* =========================================================
   UPDATE CART BUTTON
========================================================= */

body.woocommerce-cart
button[name="update_cart"],
body.woocommerce-cart
button[name="update_cart"]:disabled {
  border: 1px solid rgba(31, 99, 57, 0.2) !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  transition:
    color 0.3s ease,
    background 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease,
    opacity 0.3s ease !important;
}

body.woocommerce-cart
button[name="update_cart"]:not(:disabled) {
  color: #ffffff !important;
  background:
    linear-gradient(
      135deg,
      var(--ts-green-light),
      var(--ts-green-dark)
    ) !important;
  box-shadow: 0 8px 18px rgba(16, 63, 39, 0.2) !important;
}

body.woocommerce-cart
button[name="update_cart"]:not(:disabled):hover {
  color: var(--ts-green-dark) !important;
  background:
    linear-gradient(
      135deg,
      var(--ts-beige-light),
      var(--ts-beige)
    ) !important;
  transform: translateY(-3px);
  box-shadow:
    0 13px 24px rgba(16, 63, 39, 0.22),
    0 0 0 4px rgba(201, 195, 154, 0.17) !important;
}

/* Disabled update button */
body.woocommerce-cart
button[name="update_cart"]:disabled {
  color: #7b887f !important;
  background:
    linear-gradient(
      135deg,
      #eef1ed,
      #e3e9e4
    ) !important;
  border-color: rgba(31, 99, 57, 0.11) !important;
  box-shadow: none !important;
  opacity: 0.78 !important;
}

/* =========================================================
   CART TOTALS CARD
========================================================= */

body.woocommerce-cart
.cart-collaterals .cart_totals {
  border-color: rgba(31, 99, 57, 0.18) !important;
  background:
    radial-gradient(
      circle at 90% 10%,
      rgba(201, 195, 154, 0.2),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #ffffff 0%,
      #faf8ed 55%,
      #eaf4ec 100%
    ) !important;
  box-shadow:
    0 16px 36px rgba(16, 63, 39, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

/* Cart totals heading */
body.woocommerce-cart
.cart_totals h2 {
  color: var(--ts-green-dark) !important;
  font-weight: 750 !important;
}

body.woocommerce-cart
.cart_totals h2::after {
  background:
    linear-gradient(
      90deg,
      var(--ts-green-dark),
      var(--ts-green-light),
      var(--ts-beige)
    ) !important;
}

/* Totals rows */
body.woocommerce-cart
.cart_totals table.shop_table {
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.9),
      rgba(239, 246, 241, 0.8)
    ) !important;
}

body.woocommerce-cart
.cart_totals table.shop_table th {
  color: var(--ts-text) !important;
}

body.woocommerce-cart
.cart_totals table.shop_table td,
body.woocommerce-cart
.cart_totals table.shop_table .amount {
  color: var(--ts-green-dark) !important;
  font-weight: 750 !important;
}

body.woocommerce-cart
.cart_totals .order-total th,
body.woocommerce-cart
.cart_totals .order-total td {
  background:
    linear-gradient(
      90deg,
      rgba(201, 195, 154, 0.28),
      rgba(77, 145, 100, 0.13)
    ) !important;
}

/* =========================================================
   PROCEED TO CHECKOUT BUTTON
========================================================= */

body.woocommerce-cart
.wc-proceed-to-checkout
a.checkout-button {
  color: #ffffff !important;
  border: 1px solid rgba(31, 99, 57, 0.22) !important;
  border-radius: 11px !important;
  background:
    linear-gradient(
      135deg,
      var(--ts-green-light) 0%,
      var(--ts-green) 48%,
      var(--ts-green-dark) 100%
    ) !important;
  box-shadow:
    0 11px 24px rgba(16, 63, 39, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  font-weight: 750 !important;
  transition:
    color 0.3s ease,
    background 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease !important;
}

body.woocommerce-cart
.wc-proceed-to-checkout
a.checkout-button:hover {
  color: var(--ts-green-dark) !important;
  background:
    linear-gradient(
      135deg,
      var(--ts-beige-light),
      var(--ts-beige)
    ) !important;
  transform: translateY(-4px);
  box-shadow:
    0 17px 31px rgba(16, 63, 39, 0.3),
    0 0 0 5px rgba(201, 195, 154, 0.2) !important;
}

/* Optional arrow */
body.woocommerce-cart
.wc-proceed-to-checkout
a.checkout-button::after {
  content: "→";
  display: inline-block;
  margin-left: 10px;
  font-size: 18px;
  transition: transform 0.3s ease;
}

body.woocommerce-cart
.wc-proceed-to-checkout
a.checkout-button:hover::after {
  transform: translateX(5px);
}

/* =========================================================
   MOBILE COLOUR VISIBILITY
========================================================= */

@media (max-width: 767px) {
  body.woocommerce-cart
  .coupon input.input-text,
  body.woocommerce-cart
  .quantity .qty {
    background:
      linear-gradient(
        135deg,
        #ffffff,
        #f5f1df,
        #e8f3ea
      ) !important;
  }

  body.woocommerce-cart
  .coupon button.button,
  body.woocommerce-cart
  .wc-proceed-to-checkout
  a.checkout-button {
    color: #ffffff !important;
  }
}/* End custom CSS */