/* Archive Product page */
  .promo-card{
    min-width: 460px;              /* flexible width */
    width: 100%;
    background: #e6f4ef;
    border-radius: 20px;
    padding: 28px 24px 32px;
    box-shadow: 0 8px 18px rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    justify-content: space-between;	  
  }

  .promo-card .promo-title{
    font-size: 32px;
    line-height: 1.25;
    font-weight: 700;
    color: #1f8462;
    margin: 0 0 18px 0;
  }

  .promo-card .promo-copy{
    font-size: 16px;
    line-height: 1.6;
    color: #1f8462;
    margin: 0 0 16px;
  }

  .promo-card .price-row{
    font-size: 16px;
    line-height: 1.5;
    color: #1f8462;
    margin: 0 0 26px;
  }
  .promo-card .price-row s{
    color: #999;
    text-decoration-thickness: 2px;
    margin-right: 6px;
  }
  .promo-card .price{
    font-weight: 800;
    color: #1f8462;
  }

  .promo-card .btn{
    display:inline-block;
    font-size: 16px;
    font-weight: 600;
    padding: 12px 20px;
    background: #1f8462;
    color:#fff;
    border:0;
    border-radius: 9999px;  /* pill */
    cursor:pointer;
    text-decoration:none;
    transition: background .2s ease, transform .1s ease;
	width: 168px;  
	text-align:center;
  }

  @media (max-width: 480px){
    .promo-card .promo-title{
      font-size: 24px;   /* scale down heading */
    }
    .promo-card .promo-copy, .price-row{
      font-size: 14px;   /* body text smaller */
    }
    .promo-card .promo-card{
      padding: 20px;
    }
  }

/* ===== Price block styles (scoped-ish) ===== */
 .w2w-klarna {
    display: flex;
    flex-direction: row;
    gap: 10px;
    font-size: clamp(12px, 2vw, 16px);	
}		
.w2w-price-wrap{
  display:flex; gap:48px; align-items:flex-start; flex-wrap:wrap;
  margin: 60px 0px;
  font-family: 'Lato';
  justify-content:space-between;
}
.w2w-price{
  min-width: 300px;
}
.w2w-price .label{
margin-bottom:6px;
color: #B4B4B3;
font-family: "Noto Sans";
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 28px; /* 116.667% */
letter-spacing: -0.12px;
text-transform: capitalize;	
}
.w2w-colours-left .label{
margin-bottom:20px;
color: #B4B4B3;
font-family: "Noto Sans";
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 28px; /* 116.667% */
letter-spacing: -0.12px;
text-transform: capitalize;	
}
.w2w-price-wrap .w2w-price .value{
  font-size:32px; line-height:1.2; font-weight:700; color:#1c1d1c; letter-spacing: -0.14px; font-family: Noto Sans;
}
.w2w-price .value small{
  font-size:.65em; font-weight:600; color:#8E9A96; margin-left:6px;
}

/* ===== Colours ===== */
.w2w-colours{
  width:100%;
  margin-top:20px;
}
.w2w-colours .label{
  font-size:14px; color:#8E9A96; font-weight:600; margin-bottom:10px;font-family: 'Noto Sans';
}
.w2w-swatch-list{
  display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; list-style:none; padding:0; margin:0;
}
.w2w-swatch{
  display:flex; flex-direction:column; align-items:center; gap:8px; position:relative;
}
.w2w-swatch .thumb{
  width:64px; height:64px; border-radius:50%;
  background:#e6ecea; background-size:cover; background-position:center;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.04);
  position:relative; cursor:pointer;
  transition: box-shadow .15s ease, transform .05s ease;
}
.w2w-swatch .thumb:hover{ box-shadow: inset 0 0 0 2px rgba(0,0,0,.12); }
.w2w-swatch .thumb:active{ transform: translateY(1px); }
.w2w-swatch .name{
  font-size:13px; color:#666e6b;
}
.w2w-swatch.is-selected .thumb{
  box-shadow: inset 0 0 0 3px #21A366; /* brand green ring */
}
.w2w-swatch.is-selected .chip{
  position:absolute; bottom:-22px; left:50%; transform:translateX(-50%);
  font-size:12px; color:#21A366; border:1.5px solid #21A366; padding:3px 8px; border-radius:999px;
  background:#fff; white-space:nowrap;
}

/* “+ N colours” link */
.w2w-more{
  display:flex; align-items:center; gap:8px; margin-left:6px; cursor:pointer; user-select:none;
  font-size:14px; color:#6b7571; border-bottom:1.5px dashed #cfd6d3; padding-bottom:2px;
}
.w2w-hidden{ display:none !important; }

/* Responsive */
@media (max-width: 560px){
  .w2w-price .value{ font-size:24px; }
  .w2w-swatch .thumb{ width:56px; height:56px; }
}


.woocommerce-tabs {
  display: none !important;
}
	
/* ====== Scoped styles (only this block) ====== */
.w2w-calc-wrap{
  display:grid; grid-template-columns: 1fr 420px; gap: 28px; align-items:stretch; margin: 18px 0 8px;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
}
@media (max-width: 980px){ .w2w-calc-wrap{ grid-template-columns: 1fr; } }

.w2w-h2{
  font-size: clamp(22px, 3.2vw, 28px); line-height:1.2; font-weight:640; color:#363635; margin: 0 0 16px; letter-spacing: -0.14px; font-family:Noto Sans;
}
.w2w-card{
  padding:5px; position:relative; background:#fff;
}
.w2w-card-inner{	
	border:1px solid #E3E8E6; border-radius:16px; padding:16px; position:relative; background:#fff;
}
.w2w-tabs{
  display:flex; gap: 18px; align-items:center; margin-bottom:10px;
}
.w2w-tab{
  font-weight:700; color:#21A366; position:relative; padding-bottom:6px;
}
.w2w-tab:after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px; background:#21A366; border-radius:2px;
}
.w2w-guide a{ color:#21A366; text-underline-offset: 2px; }
.w2w-guide{ margin-left:auto; font-weight:600; }

.w2w-grid{
  display:grid; grid-template-columns: 1fr auto; gap: 18px; align-items:center;
}
@media (max-width: 640px){ .w2w-grid{ grid-template-columns: 1fr; } }

.w2w-fieldset{ display:flex; flex-wrap:wrap; gap:10px; }
.w2w-chip{
  min-width:40px; height:44px; padding:0 6px; border:1.6px solid #CFD6D3; background:#fff; border-radius:12px;
  display:grid; place-items:center; font-weight:700; color:#1C1D1C; cursor:pointer; transition: border-color .15s ease;
}
.w2w-chip.is-active{ border-color:#21A366; box-shadow: inset 0 0 0 2px rgba(33,163,102,.1); }

.w2w-input{
  height:44px; padding:0 14px; border:1.6px solid #CFD6D3; border-radius:12px; outline:0; width:100%; font-size:16px;
}
.w2w-select{ height:44px; border:1.6px solid #CFD6D3; border-radius:12px; padding:0 12px; font-size:16px; background:#fff; }

.w2w-aside{
  text-align:right; color:#6E7774; font-size:13px; line-height:1.4;
    height: 100%;display: flex;flex-direction: column;justify-content: space-between;	
}
@media (max-width: 640px){ .w2w-aside{ text-align:left; } }

.w2w-qty{
  display:flex; align-items:center; gap:16px; margin-top:8px;
}
.w2w-qty .btn-icon{
  width:28px; height:28px; border-radius:999px; border:0; color:#21A366; font-size:20px; line-height:0;background: transparent;
  display:grid; place-items:center; cursor:pointer;
}
.w2w-qty .val{ font-size:32px; font-weight:800; min-width:24px; text-align:center; }

.w2w-price{
  margin-top:10px;
}
.w2w-calc-wrap .w2w-price .label{ color:#8D9894; font-weight:700; font-size:14px; }
.w2w-calc-wrap .w2w-price .value{ font-size:36px; font-weight:900; color:#1C1D1C; }

.w2w-ctas{
  display:flex; flex-direction:column; gap:14px; justify-content:center; height:100%;
}
.w2w-btn{
  display:inline-grid; place-items:center; width:100%; height:56px; border-radius:18px; font-weight:800; font-size:18px;
  border:2px solid #21A366; background:#fff; color:#21A366; cursor:pointer; transition: transform .05s ease, background .15s ease, color .15s ease;
}
.w2w-btn:hover{ background:#F2FBF6; }
.w2w-btn.primary{
  background:#21A366; color:#fff; border-color:#21A366;
}
.w2w-btn.primary:hover{ background:#1E935A; }
.w2w-btn:active{ transform: translateY(1px); }
.w2w-btn[disabled]{ opacity:.5; cursor:not-allowed; }
.w2w-fieldset{float: left;margin-right: 10px;}	
 .w2w-key-features {
    margin: 28px 0;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  }
  .w2w-key-features h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
  }
  .w2w-features-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .w2w-feature-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1.5px solid #CFD6D3;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: #1C1D1C;
    background: #fff;
  }
  .w2w-feature-pill svg {
    width: 16px;
    height: 16px;
  }	
  .w2w-product-details {
    margin: 40px 0;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  }
  .w2w-product-details h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #1C1D1C;
  }
  .w2w-product-details .content {
    line-height: 1.6;
    font-size: 16px;
    color: #000;
    font-family: 'Noto Sans';
  }
  .w2w-product-details .content a {
    color: #21A366;
    font-weight: 600;
  }	

.w2w-related h3 {
    font-size: 32px;
    margin-bottom: 6rem;
    font-family: 'Noto Sans';
}
.w2w-related h3 span {
    display: block;
    font-size: 1.3rem;
    font-weight: normal;
    line-height: 2.2;
}	
.w2w-related {
    margin-bottom: 60px;
}	
.w2w-related article .inputs{
    display:none;
}	
.w2w-related article .price-line {
    font-size: 18px !important;
    font-weight: 700;
    color: #222;
    margin-bottom: 10px;
}
.w2w-related article .price-line .price-decimal {
    font-size: 12px !important;
    vertical-align: super !important;
	}
.w2w-related article .price-line::after {
    content: " per sqm";
    font-weight: bold;
    font-size: 13px !important;
	}

/* ---------- container ---------- */
.custom-cart-list{display:flex;flex-direction:column;gap:18px;margin-bottom:22px;}
.wrapper-title{
	color: #B4B4B3;
	font-family: "Noto Sans";
	font-size: 24px;
	font-style: normal;
	font-weight: 600;
	line-height: 28px; 
	letter-spacing: -0.12px;
	text-transform: capitalize;	
}
.wrapper-second-title{
color: #B4B4B3;
font-family: Lato;
font-size: 22px;
font-style: normal;
font-weight: 400;
line-height: 36px; /* 163.636% */
letter-spacing: 0.52px;	
}
.basket-wrapper {
    margin-top: 16px;
}
/* each item */
.custom-cart-item{
  display:flex;
  border:1px solid #B4B4B3;
  border-radius:20px;
  background:#fff;
  height: 175px;
  padding: 20px;
  justify-content: center;
  align-items: center;
  position:relative;
  z-index:999999;
}
.qty-wrap{
	display: flex;
    justify-content: center;
    align-items: center;
}
/* image */
.cci-image{flex:0 0 210px;}
.cci-image img{width:210px;height:125px;border-radius:20px;display:block;}

/* info */
.cci-info{flex:1;min-width:0;}
.cci-title a, .cci-small{
	font-weight:400;
	color:#7C7C7A;
	text-decoration:none;
	font-size:12px;
	font-family:Lato;
	letter-spacing:0.12px;
	opacity:0.6;
	line-height:20px;
}
.cci-meta{color:#7d7d7d;font-size:13px;margin-top:8px;}

/* small label row */
.cci-row{display:flex;gap:40px;margin-top:18px;align-items:center;justify-content:center;}


/* qty */
.cci-qty-block{}
.qty-wrap .qty{width:40px;margin: 0px;text-align: center;border:0px; padding-left: 16px;}
.qty-wrap .qty-btn{background:transparent;border:0px;padding:0px;}
/* price */
.cci-price-block{min-width:120px;}
.cci-price{font-weight:700;font-size:16px;color:#111;}

/* color pill */
.cci-color-block{min-width:160px;}
.cci-color-toggle .color-pill{
display: flex;
width: 124px;
height: 40px;
padding: 0;
justify-content: flex-end;
align-items: center;
border-radius: 40px;	
overflow:hidden;
}
.cci-color-toggle .color-pill img{
	width:100%;
}
.color-pill .pill-label{font-weight:600;}
.color-pill .pill-drop{opacity:0.9;font-size:12px;}
.vhr{
	height: 30px;
    width: 1px;
    background: #B4B4B3;
    margin: auto;
}
.cci-edit{
    display: flex;
    height: 58px;
    padding: 17px 32px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    background: transparent;
    border: 0px;
    color: #30A67F;
    text-align: center;
    font-family: "Noto Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 640;
    line-height: 24px;
    letter-spacing: 0.2px;
    border-bottom: 1px solid #B4B4B3;
}
/* actions (right) */
.cci-actions{display:flex;justify-content:center;align-items:center;flex-direction:column;}
.cci-actions-mobile{display:flex;justify-content:center;align-items:center;flex-direction:column;}
.action-buttons{display:flex;flex-direction:rowalign-items:center;}
.cci-fav{
border-radius: 0px;
    border: 0px;
    background: #fff;
    color: #2bb673;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    width: 88px;
    height: 58px;	
}
.cci-fav:hover{
	background: #e0f9f0;
	border:1px solid #30A67F;
}
.cci-remove:hover{
	background: #e0f9f0;
}
.cci-remove{
background:#fff;
color:#FF3B30;
font-size:18px;
cursor:pointer;
display: flex;
padding: 0px;
justify-content: center;
align-items: center;
width:88px;
height:58px;
text-decoration:none;	
}

/* cart actions */
.custom-cart-actions{display:flex;gap:12px;align-items:center;margin-top:20px;}
.update-cart{background:#2bb673;color:#fff;padding:10px 18px;border-radius:10px;border:0;font-weight:600;}

/* bottom coupon + subtotal area */
.cart-bottom-row{display:flex;gap:24px;align-items:center;margin-top:26px;margin-bottom:26px;}
.coupon-card{
background:rgba(180, 180, 179, 0.40);
display: flex;
width: 584px;
height: 171px;
padding: 40px;
justify-content: space-between;
align-items: center;
border-radius:40px;	
}
#step-3 .cc-subtotal {
	align-items: center;
}
.cc-subtotal {
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
}
.coupon-card h4{margin:0 0 6px 0;font-size:18px;}
.coupon-card .muted{margin:0;color:#6f6f6f;font-size:13px;}
.coupon-copy{background:#fff;border:1px solid #d0d0d0;padding:10px 14px;border-radius:40px;cursor:pointer;font-weight:600;}
#step-3 .muted{
	color: #363635;
	font-family: "Noto Sans";
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px; /* 150% */
	letter-spacing: 0.64px;
}
/* subtotal card */

.subtotal-card{width:584px;background:transparent;display:flex;flex-direction:column;gap:12px;align-items:flex-start;}
.subtotal-line{display:flex;justify-content:space-between;align-items:center;padding:6px 10px;width:100%;}
.subtotal-label{
	color: #7C7C7A;
	font-family: "Noto Sans";
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px; 
	letter-spacing: 0.64px;
	opacity:0.6;
}
.subtotal-amount{
	color: #363635;
	font-family: "Noto Sans";
	font-size: 32px;
	font-style: normal;
	font-weight: 700;
	line-height: 44px; /* 137.5% */
	letter-spacing: -0.14px;
	text-transform: capitalize;
}

/* subtotal buttons */
.subtotal-actions{display:flex;flex-direction:column;gap:10px;width: 100%;}
#step-3 .cc-btn{
	float:right;
}
.cc-btn{
    display:inline-flex;
	align-items:center;
	gap:8px;
	padding:17px 32px;
	border-radius:20px;
	border:0;
	background:#30A67F;
	cursor:not-allowed;	
	color: #E6F4EF;
	text-align: center;
	font-family: "Noto Sans";
	font-size: 18px;
	font-style: normal;
	font-weight: 640;
	line-height: 24px; 
	letter-spacing: 0.2px;	
	align-items: center;
    justify-content: center;
}
.cc-btn.enabled{background:#30A67F;cursor:pointer;}
.cc-btn-secondary{
  display:flex;align-items:center;justify-content: center;gap:10px;padding: 17px 32px;border-radius:20px;border:0;background:#30A67F;color:#fff;font-weight:700;
	font-family:"Noto Sans";font-size:18px;line-height: 24px; letter-spacing: 0.2px;
}
.cc-btn-secondary.enabled{
		background:#30A67F;cursor:pointer;
}	
		
.continue-shop{
	display: flex;
	padding: 17px 32px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	align-self: stretch;
	border-radius: 20px;
	border: 1px solid #30A67F;	
	color: #30A67F;
	text-align: center;
	font-family: "Noto Sans";
	font-size: 18px;
	font-style: normal;
	font-weight: 640;
	line-height: 24px; 
	letter-spacing: 0.2px;	
	text-decoration:none;
}
.continue-shop:hover{
	background: #e0f9f0;
}
/* responsive */
@media (max-width: 980px){
  .custom-cart-item{
        display: flex;
        width: 340px;
        padding: 20px;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        margin: auto;	
	    height:auto;
	}
.cci-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
}	
  .cci-image{width:100%;}
  .cci-image img{width:100%;max-width:420px;height:165px;}
  .cci-row{flex-direction:column;gap:12px;}
  .cci-actions{width:100%;display:flex;justify-content:flex-end;flex-direction:column;}
  .cci-actions-mobile{width:100%;display:flex;justify-content:flex-end;flex-direction:column;}	
  .cart-bottom-row{flex-direction:column-reverse;gap:16px;}
  .subtotal-card{width:100%;}
}
@media (max-width: 520px){
.cci-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
}	
	.cci-edit{
    display: flex;
    height: 40px;
    padding: 13px 0;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-bottom: 0px;
	}
	.lg-hidden .qty-wrap input{
			color: #363635;
			leading-trim: both;
			text-edge: cap;
			font-family: "Noto Sans";
			font-size: 16px;
			font-style: normal;
			font-weight: 400;
			line-height: 24px;
			letter-spacing: 0.64px;
			padding: 0;
			text-align: left;			
	}	
	.qty-wrap{
		justify-content:start;
	}
.cci-qty-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}	
.cci-price-block {
    min-width: unset;
}	
.cci-price-block {
    min-width: 92px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}	
	.cci-price{
color: #363635;
font-family: "Noto Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
letter-spacing: 0.64px;
	}	
  .coupon-card{padding:14px;border-radius:14px;min-height:unset;}
  .coupon-copy{padding:8px 10px;}
  .cci-image img{border-radius:6px;}
  .action-buttons{flex-direction:row !important;gap:0px;}
	.vhr{display:none;}	
  .cci-fav,.cci-remove{
		display: flex;
		width: 144px;
		height: 40px;
		padding: 13px 32px;
		justify-content: center;
		align-items: center;
		gap: 8px;
	}
	.cci-fav{
		border-radius: 20px;
		border: 1px solid #30A67F;			
	}	
	.cci-remove{
		border-radius: 20px;
		border: 1px solid #FF3B30;		
	}	
  .qty-wrap .qty{width:92px;}
}


    .grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:10px; }
    .grid .full{ grid-column:1 / -1; }
    input[type="text"], input[type="email"]{ width:100%; padding:10px 12px; border-radius:8px; border:1px solid #e6ece9; outline:none; font-size:14px; }
    .btn{ background:#00995C; color:#fff; padding:10px 14px; border-radius:10px; border:0; cursor:pointer; font-weight:600 }
    .cards{ display:flex; gap:20px; flex-wrap:wrap; align-items:flex-start }
   /* .card{ width:320px; min-height:170px; background:#fff; border-radius:18px; padding:18px; position:relative; box-shadow: 0 6px 20px rgba(0,0,0,.04); border:1px solid var(--card-border); } */

.card.preset{ 
	display: flex;
	width: 382px;
	padding: 40px;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;		
	border-radius: 40px; 
	border: 2px solid rgba(180, 180, 179, 0.40);
	background: #E6F4EF;
	box-shadow: 0 2px 24px -4px rgba(180, 180, 179, 0.40);
	backdrop-filter: blur(20px);
}
.card{ 
	display: flex;
	width: 382px;
	min-height: 335px;
	padding: 40px;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;		
	border-radius: 40px; 
	border: 2px solid rgba(180, 180, 179, 0.40);
	background: linear-gradient(0deg, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.50) 100%), #E6F4EF;
	box-shadow: 0 2px 24px -4px rgba(180, 180, 179, 0.40);
	backdrop-filter: blur(20px);
}


    .card p{ margin:0; color:#6b6f6f; font-size:13px; line-height:1.45 }
    .card .controls{ position:realtive; display:flex; gap:8px }

    .card .footer{ display:flex; justify-content:space-between; align-items:center;}
    .switch{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:#7a7f7f }
    .switch input{ width:36px; height:18px; appearance:none; background:#E6F4EF; border: 1px solid #30A67F; border-radius:12px; position:relative; outline:none; cursor:pointer; }
    .switch input:checked{ background: #30A67F; }
    .switch input::after{ content:''; width:14px; height:14px; background:#fff; position:relative; left:2px; top:2px; display:block; border-radius:50%; transition:all .18s }
    .switch input:checked::after{ transform: translateX(18px) }
    .muted{ color:#a9b0af; font-size:13px; text-align:center; padding:0 8px }
    @media (max-width:900px){ .grid{ grid-template-columns: 1fr; } .cards{ justify-content:center } .card, .add-card{ width:100%; max-width:420px } .slide-form{ padding:12px } }
.add-card{
	display: flex;
	width: 382px;
	height: 277px;
	padding: 40px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 24px;	
	border-radius: 40px;
	border: 2px dashed rgba(180, 180, 179, 0.40);
	background: rgba(255, 255, 255, 0.50);
	backdrop-filter: blur(20px);
	cursor:pointer;
}
.add-card .title{
	color: rgba(48, 166, 127, 0.80);
	font-family: "Noto Sans";
	font-size: 22px;
	font-style: normal;
	font-weight: 700;
	line-height: 32px; 
	letter-spacing: 0.22px;
	position:relative;
}
.add-card .title::before {
    content: "+";
    position: absolute;
    left: -19px;
    font-size: 22px;
    font-weight: bold;
    width: 24px;
    height: 24px;
}
.add-card .muted{
	color: #B4B4B3;
    text-align: center;
    font-family: "Noto Sans";
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px; 
	letter-spacing: 0.64px;
}
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;;
    width: 55px;
    padding: 13px 10px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 20px;
	background:transparent;
}
.icon-btn img{
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	aspect-ratio: 1/1;
}
.del-btn{
	border-radius: 20px;
    border: 1px solid #FF3B30;
}
.edit-btn{
	border-radius:20px;
    border: 1px solid #30A67F;
}
.card-box-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
	min-height: 54px;
}
.card-box-header h4{
	overflow: hidden;
    color: #30A67F;
    text-overflow: ellipsis;
    font-family: "Noto Sans";
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px; 
    letter-spacing: 0.22px;
}
.card-address-box{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap:6px;
	align-self: stretch;
	min-height: 110px;
}

.card-address-box p{
	color: #363635;
    font-family: "Noto Sans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; 
    letter-spacing: 0.64px;
}
.slide-form{
display: none;
width: 1192px;
padding: 40px;
flex-direction: column;
align-items: flex-start;
gap: 10px;
border-radius: 40px;
border: 2px solid  rgba(180, 180, 179, 0.40);
background: linear-gradient(0deg, rgba(255, 255, 255, 0.50) 0%, rgba(255, 255, 255, 0.50) 100%), #F5FBF9;
box-shadow: 0 2px 24px -4px rgba(180, 180, 179, 0.40);
backdrop-filter: blur(20px);
}
.savecard-header{
display: flex;
justify-content: space-between;
align-items: center;
align-self: stretch;	
width:100%;	
}
.savecard-header .leftbox {
    display: flex;
	gap:8px;
}
.savecard-header .rightbox{
	display: flex;
    align-items: center;
    gap: 12px;
}
.savecard-header input[type="text"]{
	display: flex;
	height: 48px;
	padding: 16px 12px;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
	width:266px;
	border-radius: 12px;
    border: 1px solid rgba(54, 54, 53, 0.50);
}
.savecard-header .switch{
	display: flex;
	width: 77px;
	height: 41px;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	flex-shrink: 0;
}
.savecard-header .switch span{
	color: rgba(54, 54, 53, 0.50);
	font-family: Lato;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px; 
	letter-spacing: 0.12px;	
}
.savecard-header .switch input::after{
	top:0px;
}
.discard-btn{
	display: flex;
	padding: 13px 32px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	border-radius: 20px;
	border: 1px solid #FF3B30;	
	color: #FF3B30;
	text-align: center;
	font-family: "Noto Sans";
	font-size: 18px;
	font-style: normal;
	font-weight: 640;
	line-height: 24px; 
	letter-spacing: 0.2px;	
	background:#fff;
	text-decoration:none;
}
.save-btn{
	display: flex;
	padding: 13px 32px;
	justify-content: center;
	align-items: center;
	gap: 8px;
	border-radius: 20px;
    border: 1px solid #34C759;
	color:  #34C759;
	text-align: center;
	font-family:"Noto Sans";
	font-size: 18px;
	font-style: normal;
	font-weight: 640;
	line-height: 24px; 
	letter-spacing: 0.2px;	
	background:#fff;
	text-decoration:none;
}
.strokline {
    display: block;
    margin: 32px 0px;
}
.slide-form.open{ 
	transform: translateY(0); 
	opacity:1; 
	display:flex;
    margin-top: 20px;
}
.addressdetails .form-row .form-col input{
	display: flex;
	height: 48px;
	padding: 16px 12px;
	justify-content: space-between;
	align-items: center;
	align-self: stretch;
	border-radius: 12px;
    border: 1px solid rgba(54, 54, 53, 0.50);
}
.addressdetails .form-row{
    display: flex;
    flex-direction: row;
    gap: 24px;	
}
.form-col {
    width: 40%;
}
.addressdetails .form-row .form-col label{
	color: #363635;
	font-family: "Noto Sans";
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px; /* 150% */
	letter-spacing: 0.64px;	
}
.addressdetails {
    display: flex;
    flex-direction: column;
    gap: 33px;
}
.slide-form .grid{
	width:100%;
}
.w2w-related .sample-btn{
	display:none;
}
select {
    width: 100%;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #e6ece9;
    outline: none;
    font-size: 14px;
	color:#666;
	padding: 10px 12px;
}
div#shipping-methods-wrap {
    display: inline-flex;
    gap: 25px;
    width: 100%;
    align-items: flex-start;
    border: 0px !important;
    margin: 20px 0px 50px 0px !important;
    padding-top: 20px !important;
}
.cci-update, .cci-discard {
  display: none;
}
.cci-update{
    height: 58px;
    padding: 17px 32px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    background: transparent;
    border: 0px;
    color: #30A67F;
    text-align: center;
    font-family: "Noto Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 640;
    line-height: 24px;
    letter-spacing: 0.2px;
    border-bottom: 1px solid #B4B4B3;	
}
.cci-discard{
    height: 58px;
    padding: 17px 32px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    background: transparent;
    border: 0px;
    color: #FF3B30;
    text-align: center;
    font-family: "Noto Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 640;
    line-height: 24px;
    letter-spacing: 0.2px;	
}
.cart-calc {
  background: #147a56; /* green */
  color: #fff;
	margin-top: -22px;
	border-radius: 0px 0px 20px 20px;
	padding: 50px 24px 24px 24px;
  display: none; /* hidden by default; will slideDown */
}

/* inner calc layout */
.cart-calc .calc-controls { display:flex; align-items:center; gap:18px; }
.cart-calc .sizes { display:flex; gap:8px; }
.cart-calc .size-btn { 
	display: flex;
	padding: 16px 12px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
	align-self: stretch;
	border-radius: 10px;
	border: 1px solid #E6F4EF;
	background:rgba(255, 255, 255, 0.50);
	color: #000;
	font-family: Lato;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px; /* 166.667% */
	letter-spacing: 0.12px;	
}
.cart-calc .size-btn.active{
	border: 1px solid #FFF;
	background: #E6F4EF;	
}
.cart-calc .inputs { display:flex; gap:8px; align-items:center; position:relative;}
.cart-calc .inputs label { font-size:13px; color:rgba(255,255,255,0.9);position:absolute;padding: 10px; }
.cart-calc .input {padding: 10px 10px 10px 23px !important;}
.cart-calc .input-width { padding:8px 10px; border-radius:6px; border:none; min-width:160px; }
.cart-calc .unit { padding:8px; border-radius:6px; border:none;width: 80px; }

.cart-calc .calc-summary { margin-left:auto; display:flex; gap:18px; align-items:center; }
.cart-calc .qty-control { display:flex; gap:10px; align-items:center; }
.cart-calc .qty-control button { background:none; border:none; color:#fff; font-size:22px; cursor:pointer; }
.cart-calc .calc-qty { min-width:30px; text-align:center; font-weight:700; font-size:18px; }
.cart-calc .calc-price { font-weight:800; font-size:18px; }

/* ---------- Container / basic reset ---------- */
.wc_payment_methods { 
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
align-items: center;
    justify-content: flex-start;
  margin: 0 0 18px 0;
  padding: 0;
  list-style: none;
  position:relative;
}

/* Make each li minimal width (label shown as chip). We keep li as inline block */
.wc_payment_method {
  margin: 0;
  padding: 0;
  min-width: 0;
}

/* Hide native radio but keep it accessible */
.wc_payment_method .input-radio {
  position: absolute;
  left: -9999px;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* STYLE THE LABELS AS CHIPS (top row) */
.wc_payment_method > label {
display: flex;
padding: 10px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 20px;
border: 1px solid #363635;
color: #000;
font-family: "Noto Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; /* 150% */
letter-spacing: 0.64px;	
}

/* smaller logos inside label: keep them small so chip text remains primary */
.payment-methods--logos { display:inline-flex; gap:8px; align-items:center; margin-left:6px; }
.payment-methods--logos img { display:block; height:22px; width:auto; }

/* ACTIVE chip look (radio checked) */
.wc_payment_method .input-radio:checked + label {
	border-radius: 20px;
	border: 1px solid #363635;
	background: #30A67F;
    color: #E6F4EF;
}

/* make the chips wrap on small screens and keep spacing */
@media (max-width:740px){
  .wc_payment_methods { gap:8px; }
  .wc_payment_method > label { font-size:13px; padding:7px 12px; }
	.cart-calc .calc-controls	{flex-direction: column;}
	.cart-calc .size-btn {padding:16px 8px;}
	.cart-calc .sizes{gap:4px;}
	.cart-calc .calbox {flex-direction:row;}
	.cart-calc .inputs input{
		display: flex;
		padding: 12px 24px;
		align-items: center;
		gap: 160px;
		align-self: stretch;
		border-radius: 12px;
		border: 1px solid #363635;
		background: #F5FBF9;	
		color: #363635;
		font-family: Lato;
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: 24px; /* 171.429% */
		letter-spacing: 0.2px;		
	}
}

/* ---------- Ensure payment_box shows below and is full width ---------- */
/* Hide all boxes by default */
.wc_payment_method .payment_box {
  display: none;
  width: 100%;
	flex-direction: column;
	align-items: flex-start;
	gap: 36px;
  background: #fff;
  position:absolute;
    left: -7px;
    top: 113%;
	margin-top: 30px;
}
.pay-header-lft {
    display: flex;
    flex-direction: column;
	color: #000;
	font-family: "Noto Sans";
	font-size: 22px;
	font-style: normal;
	font-weight: 700;
	line-height: 32px; /* 145.455% */
	letter-spacing: 0.22px;	
}
.pay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
}
.pay-header-lft label{
	color: #7C7C7A;
	font-family: Lato;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 24px; /* 171.429% */
	letter-spacing: 0.2px;	
}
.woocommerce-terms-and-conditions-wrapper{
	display:none;
}
/* Show the payment_box for the checked radio */
.wc_payment_method .input-radio:checked ~ .payment_box {
  display: flex;
}

/* ---------- Inside payment box: header + logos area ---------- */
.wc_payment_method .payment_box .wcpay-upe-form,
.wc_payment_method .payment_box .wc-payment-form {
  width: 100%;
}

/* Make a header area: show the label text as bigger heading by re-using the label */
.wc_payment_method .input-radio:checked + label {
  /* move label visually above the box (it already sits above), so style label to be a small chip.
     We'll add a faux header inside the box for clarity */
}


/* ---------- Saved payment methods list ---------- */
.woocommerce-SavedPaymentMethods {
  margin: 0 0 12px 0;
  padding: 0;
  list-style: none;
  display: block;
}
.woocommerce-SavedPaymentMethods li { margin: 6px 0; display:flex; align-items:center; gap:10px; position:relative;}
.woocommerce-SavedPaymentMethods li input {  position: absolute;opacity: 0;pointer-events: none; }
.woocommerce-SavedPaymentMethods label {
display: flex;
padding: 34px 24px;
justify-content: space-between;
align-items: center;
align-self: stretch;
border-radius: 20px;
border: 1px solid #1F8462;
background: #F5FBF9;
box-shadow: 0 4px 12px -2px rgba(54, 54, 53, 0.20);	
}
.pay-header-ryt img {
    width: 100px;
}
/* Checkbox / save new payment method row */
.form-row.woocommerce-SavedPaymentMethods-saveNew { margin-top:12px; font-size:14px; }

/* ---------- Field styling (Stripe iframe wrapper + inputs) ---------- */
.wc-payment-form { padding: 10px 0 0 0; }

/* Stripe element iframe wrapper — make it look like a rounded input */
.wcpay-upe-element,
.wcpay-upe-element .__PrivateStripeElement,
.wcpay-upe-element iframe {
  width: 100% !important;
  display: block !important;
  border-radius: 10px !important;
  border: 1px solid #d3d3d3 !important;
  background: #fff !important;
  box-sizing: border-box;
  padding: 8px !important;
  min-height: 44px !important;
  margin-bottom: 12px;
}

/* If there are other text inputs inside .wc-payment-form, style them too */
.wc-payment-form input[type="text"],
.wc-payment-form input[type="tel"],
.wc-payment-form input[type="email"],
.wc-payment-form select {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #dcdcdc;
  box-sizing: border-box;
  font-size: 14px;
  margin-bottom: 12px;
  background: #fff;
}

/* Two-column row for expiration date and CVC */
.wc-payment-form .two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}
@media (max-width:640px){
  .wc-payment-form .two-col { grid-template-columns: 1fr; }
}

/* smaller helper text (e.g., "Your payment is encrypted & secured") */
.wc_payment_method .payment_box .help {
  color: #6b6b6b;
  font-size: 13px;
  margin-bottom: 10px;
}

/* Save-as-default toggle area - position bottom-left like screenshot */
.wc-payment_method .payment_box .form-row.woocommerce-SavedPaymentMethods-saveNew {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top: 10px;
}

/* small visual tweaks for checkboxes inside payment box */
.wc-payment_method .payment_box input[type="checkbox"] {
  margin-right: 8px;
  transform: scale(1.05);
}

/* ---------- Accessibility: focus styles ---------- */
.wc_payment_method > label:focus,
.wc_payment_method > label:hover,
.wc-payment_method .input-radio:focus + label {
  outline: 3px solid rgba(47,167,122,0.16);
  outline-offset: 3px;
}

/* ---------- Final polishing ---------- */
/* Make sure each payment_box keeps comfortable spacing from the chips */
.wc_payment_methods + .woocommerce-notices-wrapper { margin-top: 12px; }