:root {
--cream:     #f5ede0;
--cream-dk:  #edddd0;
--warm-bg:   #faf5ee;
--orange:    #d4601a;
--orange-lt: #e8854a;
--gold:      #c9943a;
--gold-lt:   #e8c07a;
--brown:     #3a1f10;
--brown-md:  #6b3a20;
--brown-lt:  #9a6a50;
--text:      #2d1a0e;
--text-md:   #5a3820;
--border:    #e0cdb8;
--white:     #ffffff;
--shadow:    0 4px 24px rgba(58,31,16,0.10);
--shadow-lg: 0 12px 48px rgba(58,31,16,0.16);
} .ts-breadcrumb{
padding: 14px 0;
font-size: 12px;
letter-spacing: 1px;
text-transform: capitalize;
color: var(--brown-lt);
border-bottom: 1px solid var(--border);
background: #f4e7d8;
}
.ts-breadcrumb a,
.woocommerce-breadcrumb a { color: var(--brown-lt); text-decoration: none; }
.ts-breadcrumb a:hover,
.woocommerce-breadcrumb a:hover { color: var(--orange); }
.woocommerce .woocommerce-breadcrumb{ margin: 0 !important;}
.woocommerce-breadcrumb a + span { padding: 8px;}
.woocommerce-breadcrumb a{ color: #ff6000 !important;} .ts-product {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
max-width: 1400px;
margin: 0 auto;
padding: 40px 15px;
align-items: start;
}
@media (max-width: 900px) {
.ts-product { grid-template-columns: 1fr; padding: 24px 15px; }
} .ts-gallery {
position: sticky;
top: 24px;
display: flex;
flex-direction: column;
gap: 14px;
}
.ts-main-img {
position: relative;
width: 100%;
aspect-ratio: 3/4;
overflow: hidden;
border-radius: 8px;
background: var(--cream);
box-shadow: var(--shadow-lg);
cursor: zoom-in;
}
.ts-main-img img {
width: 100%; height: 100%;
object-fit: cover; object-position: top center;
transition: transform 0.6s ease, opacity 0.35s ease;
display: block;
}
.ts-main-img:hover img { transform: scale(1.04); }
.ts-zoom-hint {
position: absolute; bottom: 14px; right: 14px;
background: rgba(255,255,255,0.88);
border: 1px solid var(--border);
border-radius: 20px;
padding: 5px 12px;
font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
color: var(--brown-md);
display: flex; align-items: center; gap: 5px;
pointer-events: none;
}
.ts-zoom-hint svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
.ts-img-badge {
position: absolute; top: 16px; left: 16px;
background: var(--orange); color: #fff;
font-size: 10px; font-weight: 600;  text-transform: uppercase;
padding: 4px 12px; border-radius: 2px;
}
.ts-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.ts-thumb {
width: calc(25% - 8px); aspect-ratio: 1;
overflow: hidden; border-radius: 6px; cursor: pointer;
border: 2px solid transparent;
transition: border-color 0.25s, transform 0.25s;
background: var(--cream);
}
.ts-thumb:hover { transform: translateY(-2px); border-color: var(--gold); }
.ts-thumb.active { border-color: var(--orange); }
.ts-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .ts-info {
padding-left: 52px;
}
@media (max-width: 900px) { .ts-info { padding-left: 0; padding-top: 28px; } .ts-gallery{position: static;} }
.ts-category {
display: inline-block;
font-size: 10px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
color: var(--orange); border: 1px solid var(--orange);
padding: 3px 12px; border-radius: 2px; margin-bottom: 16px;
}
.ts-title {
text-transform: capitalize;
font-size: clamp(26px, 3vw, 40px); font-weight: 700;
color: var(--brown); line-height: 1.2; margin-bottom: 10px;
}
.ts-rating-row { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.ts-stars { color: var(--gold); font-size: 16px;  }
.ts-rating-count { font-size: 13px; color: var(--brown-lt); }
.ts-rating-count a { color: var(--orange); text-decoration: none; }
.ts-price-wrap {
display: flex; align-items: baseline; gap: 12px;
margin-bottom: 24px; padding-bottom: 24px;
border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.ts-price {
font-size: 32px; font-weight: 700; color: var(--orange);
}
.ts-price-old { font-size: 18px; color: var(--brown-lt); text-decoration: line-through; }
.ts-price-save {
background: #fff3e8; color: var(--orange);
font-size: 14px; font-weight: 600; letter-spacing: 1px;
padding: 3px 10px; border-radius: 2px; text-transform: uppercase;
}
.ts-out-of-stock {
background: #fde8e8; color: #c0392b;
font-size: 12px; font-weight: 600; letter-spacing: 1px;
padding: 4px 12px; border-radius: 2px; text-transform: uppercase;
}
.ts-low-stock {
background: #fff3e0; color: var(--orange);
font-size: 12px; font-weight: 600; letter-spacing: 1px;
padding: 4px 12px; border-radius: 2px; text-transform: uppercase;
}
.ts-short-desc {
font-size: 17px; font-style: italic;
color: var(--text-md); line-height: 1.75; margin-bottom: 26px;
}
.ts-short-desc p { margin-bottom: 8px; }
.ts-meta-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.ts-pill {
display: flex; align-items: center; gap: 6px;
background: var(--cream); border: 1px solid var(--border);
border-radius: 20px; padding: 5px 14px;
font-size: 12px; color: var(--brown-md); letter-spacing: 0.3px;
}
.ts-pill svg { width: 13px; height: 13px; stroke: var(--orange); fill: none; stroke-width: 2; flex-shrink: 0; }
.ts-pill strong { color: var(--brown); } .ts-purchase-row {
display: flex; gap: 12px; margin-bottom: 14px; align-items: stretch;
}
.ts-qty {
display: flex;
align-items: center;
border: 1.5px solid #8d7e6e;
border-radius: 4px;
overflow: hidden;
background: transparent;
}
.ts-qty button {
width: 40px; height: 52px; border: none; background: transparent;
font-size: 20px; cursor: pointer; color: var(--brown-md);
transition: background 0.2s; display: flex; align-items: center; justify-content: center;
}
.ts-qty button:hover { background: var(--cream); }
.ts-qty input {
width: 48px; height: 52px; border: none; text-align: center;
font-size: 16px; font-weight: 500;
color: var(--brown); background: transparent; -moz-appearance: textfield;
}
.ts-qty input::-webkit-inner-spin-button,
.ts-qty input::-webkit-outer-spin-button { -webkit-appearance: none; }
.ts-qty input:focus { outline: none; }
.ts-add-btn, .single_add_to_cart_button.button {
flex: 1;
background: var(--brown) !important; color: #fff !important;
border: none !important; border-radius: 4px !important;  
font-size: 16px !important; font-weight: 600 !important;
letter-spacing: 2.5px !important; text-transform: uppercase !important;
cursor: pointer; transition: background 0.3s, transform 0.15s;
display: flex !important; align-items: center !important;
justify-content: center !important; gap: 10px;
padding: 0 28px !important; height: 52px;
text-decoration: none !important;
}
.ts-add-btn:hover, .single_add_to_cart_button.button:hover {
background: var(--orange) !important; transform: translateY(-1px);
}
.ts-add-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.ts-wishlist-btn {
width: 52px; height: 52px; flex-shrink: 0;
border: 1.5px solid #8d7e6e; border-radius: 4px;
background: transparent; cursor: pointer;
display: flex; align-items: center; justify-content: center;
color: var(--brown-lt); transition: all 0.25s;
padding: 0;
}
.ts-wishlist-btn:hover { border-color: var(--orange-lt); color: var(--orange-lt); background-color: transparent; }
.ts-wishlist-btn svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
.ts-wishlist-btn.active { border-color:  var(--orange-lt); color:  var(--orange-lt); }
.ts-wishlist-btn.active svg { fill:  var(--orange-lt); }
.ts-buy-btn {
display: block; width: 100%;
background: var(--orange); color: #fff; border: none; border-radius: 4px;
font-size: 14px; font-weight: 600;
text-transform: uppercase;
padding: 16px; cursor: pointer; transition: background 0.3s;
margin-bottom: 22px; text-align: center; text-decoration: none;
}
.ts-buy-btn:hover { background: var(--orange-lt); color: #fff; } .ts-trust {
display: flex; gap: 0;
border: 1px solid var(--border); border-radius: 6px;
overflow: hidden; margin-bottom: 24px;
}
.ts-trust-item {
flex: 1; display: flex; flex-direction: column;
align-items: center; gap: 5px; padding: 14px 8px;
font-size: 14px; color: var(--brown-md); text-align: center;
border-right: 1px solid var(--border); background: #ffeed6;
letter-spacing: 0.3px;
}
.ts-trust-item:last-child { border-right: none; }
.ts-trust-item svg { width: 22px; height: 22px; stroke: var(--orange); fill: none; stroke-width: 1.5; }
.ts-trust-item strong { font-size: 12px; font-weight: 600; color: var(--brown); display: block; }
@media (max-width: 600px) {
.ts-trust { flex-wrap: wrap; }
.ts-trust-item { width: 50%; border-bottom: 1px solid var(--border); }
} .ts-share { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.ts-share-label { font-size: 14px;  text-transform: uppercase; color: var(--brown-lt); }
.ts-share-btn {
width: 34px; height: 34px; border-radius: 50%;
border: 1px solid var(--border); background: #ffeed6;
cursor: pointer; display: flex; align-items: center; justify-content: center;
color: var(--brown-md); font-size: 13px; font-weight: 700;
transition: all 0.25s; text-decoration: none;
padding: 0;
}
.ts-share-btn:hover { background: var(--orange); color: #fff; border-color: var(--orange); } .ts-tabs-section {
max-width: 1400px; margin: 0 auto 60px;
}
.ts-tabs-nav {
display: flex; border-bottom: 2px solid var(--border);
margin-bottom: 32px; overflow-x: auto; gap: 0;
}
.ts-tab-btn {
padding: 14px 28px; border: none; background: transparent;
font-size: 12px; font-weight: 600;
text-transform: uppercase; color: var(--brown-lt);
cursor: pointer; border-bottom: 2px solid transparent;
margin-bottom: 0px; white-space: nowrap;
transition: color 0.25s, border-color 0.25s;
}
.ts-tab-btn:hover { color: var(--orange); background: transparent !important;  box-shadow: none !important;}
.ts-tab-btn.active { color: var(--orange); border-bottom-color: var(--orange); }
.ts-tab-panel { display: none; }
.ts-tab-panel.active { display: block; } .ts-desc-grid {
display: grid; grid-template-columns: 1fr;
gap: 15px; align-items: start;
}
@media (max-width: 768px) { .ts-desc-grid { grid-template-columns: 1fr; gap: 24px; } }
.ts-desc-text {
font-size: 18px; line-height: 1.85; color: var(--text-md);
}
.ts-desc-text p { margin-bottom: 16px; }
.ts-desc-text strong { color: var(--brown); font-weight: 600; }
.ts-spec-table { width: 100%; border-collapse: collapse; }
.ts-spec-table tr { border-bottom: 1px solid var(--border); }
.ts-spec-table td { padding: 12px 16px; font-size: 14px; vertical-align: top; }
.ts-spec-table td:first-child {
font-weight: 600; color: var(--brown); width: 38%;
background: var(--cream); font-size: 12px; letter-spacing: 0.5px;
}
.ts-spec-table td:last-child { color: var(--text-md); } .ts-size-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.ts-size-table th {
background: var(--brown); color: #fff;
padding: 12px 18px; text-align: left;
font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 600;
}
.ts-size-table td {
padding: 12px 18px; border-bottom: 1px solid var(--border);
font-size: 14px; color: var(--text-md);
}
.ts-size-table tr:nth-child(even) td { background: var(--cream); }
.ts-size-note {
margin-top: 16px; font-size: 13px; color: var(--brown-lt);
font-style: italic; display: flex; align-items: flex-start; gap: 8px;
} .ts-reviews-summary {
display: flex; gap: 40px; align-items: center;
padding: 28px; background: var(--white);
border-radius: 8px; border: 1px solid var(--border); margin-bottom: 28px;
}
@media (max-width: 600px) { .ts-reviews-summary { flex-direction: column; gap: 20px; } }
.ts-avg-score { text-align: center; min-width: 100px; }
.ts-avg-score .score {
font-size: 56px; font-weight: 700; color: var(--orange); line-height: 1;
}
.ts-avg-score .stars { color: var(--gold); font-size: 18px; margin: 6px 0 4px; }
.ts-avg-score .count { font-size: 12px; color: var(--brown-lt); }
.ts-rating-bars { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.ts-bar-row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--brown-md); }
.ts-bar-row span:first-child { width: 32px; text-align: right; }
.ts-bar-bg { flex: 1; height: 7px; background: var(--cream-dk); border-radius: 4px; overflow: hidden; }
.ts-bar-fill { height: 100%; background: var(--gold); border-radius: 4px; }
.ts-bar-row span:last-child { width: 28px; font-size: 14px; color: var(--brown-lt); } #reviews #comments { padding: 0; }
#reviews .comment_container { border: 1px solid var(--border); border-radius: 8px; padding: 22px 26px; margin-bottom: 16px; background: var(--white); }
#reviews .comment-text { padding: 0; border: none; }
#reviews .star-rating { color: var(--gold); }
#reviews p.meta { font-size: 12px; color: var(--brown-lt); margin-bottom: 8px; }
#reviews .description p {  font-size: 16px; color: var(--text-md); line-height: 1.75; }
#reviews #respond { background: var(--cream); padding: 28px; border-radius: 8px; border: 1px solid var(--border); margin-top: 24px; }
#reviews #respond h3 {  font-size: 20px; color: var(--brown); margin-bottom: 16px; }
#reviews .comment-form-rating .stars a { color: var(--gold); font-size: 20px; }
#reviews .comment-form-comment textarea,
#reviews .comment-form input[type=text],
#reviews .comment-form input[type=email] {
border: 1.5px solid var(--border); border-radius: 4px;
padding: 10px 14px; font-size: 14px;
width: 100%; background: var(--white); color: var(--text);
}
#reviews .form-submit input[type=submit] {
background: var(--brown) !important; color: #fff !important; border: none; border-radius: 4px;
font-size: 12px; font-weight: 600;
text-transform: uppercase; padding: 12px 28px !important; cursor: pointer;
transition: background 0.3s;
}
#reviews .form-submit input[type=submit]:hover { background: var(--orange) !important; } .ts-related { background: var(--cream); padding: 56px 0%; }
.ts-related-head { text-align: center; margin-bottom: 36px; }
.ts-related-head h2 {
font-size: clamp(24px, 3vw, 36px); font-weight: 700;
color: var(--brown); margin-bottom: 6px;
}
.ts-related-head p {
font-size: 17px; color: var(--brown-lt); font-style: italic;
}
.ts-related-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 20px; max-width: 1400px; margin: 0 auto; padding: 0px 15px;
}
@media (max-width: 900px) { .ts-related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ts-related-grid { grid-template-columns: 1fr; } }
.ts-rel-card {
background: #f5ede0; overflow: hidden;
transition: transform 0.3s, box-shadow 0.3s; cursor: pointer;
}
.ts-rel-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.ts-rel-img { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--cream);}
.ts-rel-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.ts-rel-card:hover .ts-rel-img img { transform: scale(1.06); }
.ts-rel-img .ts-rel-badge {
position: absolute; top: 12px; left: 12px;
background: var(--orange); color: #fff;
font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
padding: 3px 9px; border-radius: 2px;
}
.ts-rel-info { padding: 16px; text-align:center }
.ts-rel-name {
text-transform: capitalize;
font-size: 15px; font-weight: 600; color: var(--brown); margin-bottom: 6px; line-height: 1.3;
}
.ts-rel-price { font-size: 16px; font-weight: 700; color: var(--orange); margin-bottom: 12px; }
.ts-rel-old { font-size: 13px; color: var(--brown-lt); text-decoration: line-through; margin-left: 6px; font-weight: 400; }
.ts-rel-btn{
display: block; width: max-content; padding: 10px;
background: transparent; border: 1.5px solid var(--brown); border-radius: 6px;
font-size: 14px; font-weight: 600;
text-transform: uppercase; color: var(--brown);
cursor: pointer; transition: all 0.25s; text-align: center; text-decoration: none;
margin:0px auto;
}
.ts-rel-btn:hover{ background: var(--brown); color: #fff; } .ts-lightbox {
display: none; position: fixed; inset: 0;
background: rgba(30,12,4,0.92); z-index: 99999;
align-items: center; justify-content: center; padding: 24px;
}
.ts-lightbox.open { display: flex; }
.ts-lightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; border-radius: 6px; }
.ts-lightbox-close {
position: fixed; top: 20px; right: 24px;
background: none; border: none; color: #fff;
font-size: 32px; cursor: pointer; line-height: 1;
} .ts-toast {
position: fixed; bottom: 28px; left: 50%;
transform: translateX(-50%) translateY(80px);
background: var(--brown); color: #fff;
padding: 14px 28px; border-radius: 6px;
font-size: 14px; font-weight: 500;
z-index: 99998; display: flex; align-items: center; gap: 10px;
transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
box-shadow: 0 8px 32px rgba(0,0,0,0.25); white-space: nowrap;
}
.ts-toast.show { transform: translateX(-50%) translateY(0); }
.ts-toast svg { width: 18px; height: 18px; stroke: var(--gold-lt); fill: none; stroke-width: 2; } @keyframes ts-fadeUp {
from { opacity: 0; transform: translateY(18px); }
to   { opacity: 1; transform: translateY(0); }
}
.ts-info > * { animation: ts-fadeUp 0.5s ease both; }
.ts-info > *:nth-child(1) { animation-delay: 0.05s; }
.ts-info > *:nth-child(2) { animation-delay: 0.10s; }
.ts-info > *:nth-child(3) { animation-delay: 0.15s; }
.ts-info > *:nth-child(4) { animation-delay: 0.20s; }
.ts-info > *:nth-child(5) { animation-delay: 0.25s; }
.ts-info > *:nth-child(6) { animation-delay: 0.30s; }
.ts-info > *:nth-child(7) { animation-delay: 0.35s; }
@media(max-width:900px){
.ts-sticky-title{font-size: 16px; text-transform: capitalize;}
.ts-sticky-cart{background: #ffe2d1;}
}
@media(max-width:600px){
.ts-product{display: flex; flex-direction: column;}
.ts-info{display: flex;
flex-direction: column;
width: 100%;
align-items: inherit;}
.ts-trust, .ts-price-wrap, .ts-tabs-section{width: 100%;}
}