/* Kalles-LeatherHub — inner-page skin.
   Matches the live Kalles store's FULL-WIDTH layout (.t4s-container{max-width:100%})
   and restyles Cornerstone's functional components (product view, cards, category
   sidebar, cart, blog, forms) in the Kalles design language. Class names are
   Cornerstone's — only presentation changes, so all theme JS keeps working. */

/* ========== layout width ========== */
/* Legacy (Cornerstone-structured) pages get gutters; ported Kalles pages
   (which carry <main id="MainContent">) render full-bleed, as on the live store. */
/* the captured homepage header carries Kalles' transparent-overlay rule
   (negative margin pulls content under the header); only home wants that */
body:not(.template-index) .t4s-section-header{margin-bottom:0!important}
/* PDP thumbnails: Kalles lifts these opacities from its thumb-nav JS, which we
   replace with server-rendered thumbs — restore the same look in CSS */
.t4s-product__thumb img{opacity:1!important}
.t4s-product__thumb-item{opacity:.5;transition:opacity .2s;cursor:pointer}
.t4s-product__thumb-item:hover,.t4s-product__thumb-item.kls-sel{opacity:1}
.kls-pagewrap{max-width:100%;padding:0 25px}
.kls-pagewrap:has(main#MainContent){padding:0}
@media (max-width:767px){.kls-pagewrap{padding:0 15px}.kls-pagewrap:has(main#MainContent){padding:0}}
.body > .container{max-width:100%!important;width:100%;padding-left:25px;padding-right:25px;margin:0 auto}
@media (max-width:767px){.body > .container{padding-left:15px;padding-right:15px}}
body{background:#fff}

/* ========== typography & global elements ========== */
.page-heading{font-family:'Poppins',sans-serif;font-size:30px;font-weight:600;color:#222;text-align:center;margin:18px 0 28px;letter-spacing:.3px}
h1,h2,h3,h4,h5,h6{font-family:'Poppins',sans-serif;color:#222}
.breadcrumbs{margin:14px 0 6px;padding:0;font-size:13px}
.breadcrumb{display:inline-block;color:#878787}
.breadcrumb a{color:#878787;text-decoration:none}
.breadcrumb a:hover{color:#dd480e}
.breadcrumb.is-active a,.breadcrumb:last-child a{color:#222}
.breadcrumb:not(:first-child)::before{content:"/";margin:0 8px;color:#c9c9c9}

/* buttons -> Kalles black */
.button,a.button,button.button{font-family:'Poppins',sans-serif;border-radius:0;border:1px solid #222;background:transparent;color:#222;font-weight:500;font-size:13.5px;letter-spacing:.4px;padding:11px 26px;transition:.2s;text-transform:none}
.button:hover{background:#222;border-color:#222;color:#fff}
.button--primary,a.button--primary,button.button--primary{background:#222;border-color:#222;color:#fff}
.button--primary:hover{background:#000;border-color:#000;color:#fff}
.button--primary:active,.button--primary:focus{background:#000;border-color:#000}
.button--disabled,.button[disabled]{background:#bbb;border-color:#bbb;color:#fff}

/* forms */
.form-input,.form-select,select,input[type=text],input[type=email],input[type=password],input[type=tel],textarea.form-input{border:1px solid #e3e3e3;border-radius:0;font-family:'Poppins',sans-serif;font-size:14px;color:#222}
.form-input:focus,.form-select:focus{border-color:#222;box-shadow:none}
.form-label{font-size:13.5px;color:#222;font-weight:500}
.alertBox{border-radius:0}

/* ========== product cards (Cornerstone .card -> Kalles card) ========== */
.card{border:0;box-shadow:none}
.card-figure{position:relative;overflow:hidden;border-radius:4px;background:#f6f6f8;margin:0}
.card-figure .card-image,.card-img-container img{transition:transform .5s ease}
.card:hover .card-figure .card-image,.card:hover .card-img-container img{transform:scale(1.06)}
.card-figcaption{opacity:0;transition:.25s;transform:translateY(8px)}
.card:hover .card-figcaption{opacity:1;transform:none}
.card-figcaption-body{background:transparent}
.card-figcaption .button{background:#fff;border-color:#fff;color:#222;font-size:12px;padding:9px 16px;margin:3px;border-radius:2px;box-shadow:0 1px 8px rgba(0,0,0,.14)}
.card-figcaption .button:hover{background:#222;border-color:#222;color:#fff}
.card-body{padding:12px 2px 0;text-align:center}
.card-title{font-size:14px;font-weight:500;line-height:1.45;margin:0 0 6px}
.card-title a{color:#222;text-decoration:none}
.card-title a:hover{color:#dd480e}
.card-text{margin-bottom:4px}
.card .price{font-size:14.5px;font-weight:600;color:#222}
.card .price--rrp,.card .price--non-sale{color:#999;font-weight:400;text-decoration:line-through;margin-right:6px}
.card .price--discounted{color:#dd480e}
.card-text--brand{color:#878787;font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.card .rating--small .icon{width:13px;height:13px;fill:#e7a800}
.productGrid{display:grid!important;grid-template-columns:repeat(4,1fr);gap:30px 22px;margin:0;padding:0;list-style:none;width:100%}
.productGrid .product{padding:0;margin:0;width:auto!important;max-width:none!important;flex:none}
@media (max-width:1024px){.productGrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:767px){.productGrid{grid-template-columns:repeat(2,1fr);gap:18px 10px}}

/* sale badge */
.sale-flag-side,.sale-flag-sash{background:#dd480e;border-radius:3px;font-weight:600}

/* ========== product page (.productView) ========== */
.productView{padding-top:10px}
.productView-images{margin-bottom:30px}
.productView-image{border-radius:4px;overflow:hidden;background:#f6f6f8}
.productView-thumbnails .slick-slide{padding:0 4px}
.productView-thumbnail-link{border:1px solid transparent;border-radius:3px;transition:.2s;width:100%}
.productView-thumbnail-link:hover,.productView-thumbnail-link.is-active{border-color:#222}
.productView-title{font-size:26px;font-weight:600;color:#222;line-height:1.3;margin:0 0 10px}
.productView-brand{font-size:13px;letter-spacing:.6px;text-transform:uppercase;margin:0 0 8px}
.productView-brand a{color:#878787}
.productView-price{font-size:21px;font-weight:600;color:#222;margin-bottom:4px}
.productView-price .price--rrp,.productView-price .price--non-sale{color:#999;font-weight:400;text-decoration:line-through;font-size:17px;margin-right:8px}
.productView-price .price--discounted{color:#dd480e}
.productView-info{margin-top:18px;border-top:1px solid #efefef;padding-top:14px}
.productView-info-name{font-size:13px;color:#222;font-weight:600;text-transform:none}
.productView-info-value{font-size:13px;color:#878787}
.productView-reviewLink .icon{fill:#e7a800}
.productView-options{margin-top:16px}
.productView-options .form-label,[data-product-attribute] .form-label{font-size:13.5px;font-weight:600;color:#222}
.form-option{border:1px solid #e3e3e3;border-radius:2px;transition:.15s}
.form-option:hover{border-color:#222}
.form-radio:checked + .form-option,.form-option.is-selected{border-color:#222;box-shadow:0 0 0 1px #222}
.form-option-variant{font-size:13px;color:#222}
.form-increment{border:1px solid #e3e3e3}
.form-increment .button{border:0;background:#fff;color:#222;padding:8px 12px}
.form-increment .form-input--incrementTotal{border:0;font-weight:600}
#form-action-addToCart{min-width:240px;padding:14px 34px;font-size:14px;letter-spacing:.6px;font-weight:600}
.productView-description{margin-top:40px}

/* product tabs */
.tabs{border-bottom:1px solid #ececec;text-align:center}
.tab{border:0;display:inline-block;float:none}
.tab.is-active{border:0}
.tab-title{font-family:'Poppins',sans-serif;font-size:16px;font-weight:500;color:#999;padding:12px 22px;display:inline-block;border-bottom:2px solid transparent;transition:.2s}
.tab.is-active .tab-title{color:#222;border-bottom-color:#222}
.tab-title:hover{color:#222}
.tab-content{padding:28px 0;color:#555;font-size:14.5px;line-height:1.9}

/* reviews */
.productReview{border-bottom:1px solid #f0f0f0;padding:16px 0}
.productReview-rating .icon{fill:#e7a800}

/* related products strip */
.productCarousel .card{margin:0 8px}
.kls-related{margin:56px 0 30px}
.kls-related .kls-head h2{font-size:25px;font-weight:600;margin:0 0 26px}
.kls-related > h4,.kls-related .product-list + h4,.kls-related h4{display:none}
.kls-related .product-list{display:grid;grid-template-columns:repeat(5,1fr);gap:30px 22px;margin:0;padding:0;list-style:none}
.kls-related .product-list .product-card{margin:0;padding:0;list-style:none}
@media (max-width:1024px){.kls-related .product-list{grid-template-columns:repeat(3,1fr)}}
@media (max-width:767px){.kls-related .product-list{grid-template-columns:repeat(2,1fr);gap:18px 10px}}

/* ========== category page ========== */
.kls-cat-page{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start}
.kls-cat-page .page-sidebar{flex:0 0 240px;width:240px;float:none}
.kls-cat-page .page-content{flex:1 1 0;min-width:0;width:auto;float:none}
.kls-cat-page .page-region{flex-basis:100%}
@media (max-width:900px){.kls-cat-page{flex-direction:column;gap:24px}.kls-cat-page .page-sidebar{order:2;flex-basis:auto;width:100%}.kls-cat-page .page-content{order:1;width:100%}}
.kls-cat-head{text-align:center;padding:10px 0 6px}
.kls-cat-head .page-heading{margin-bottom:10px}
.kls-cat-desc{max-width:960px;margin:0 auto 26px;text-align:center;color:#777;font-size:14px;line-height:1.8}
.page-sidebar{font-family:'Poppins',sans-serif}
.sidebarBlock{border:0;padding:0;margin-bottom:34px}
.sidebarBlock-heading{font-size:16px;font-weight:600;color:#222;text-transform:none;letter-spacing:.3px;border-bottom:1px solid #ececec;padding-bottom:12px;margin-bottom:14px}
.navList-action{color:#555;font-size:13.5px;padding:4px 0;text-decoration:none}
.navList-action:hover,.navList-action.is-active{color:#dd480e}
.navList-item{margin:2px 0}
.facetedSearch-toggle{border:1px solid #ececec;padding:12px 14px;font-size:14px;color:#222}
.facetedSearch-optionColumns{font-size:13.5px}
.accordion--navList .accordion-title{font-size:14px;color:#222;font-weight:500}
.actionBar{margin-bottom:20px}
.actionBar .form-field{margin-bottom:0}
#sort{border:1px solid #e3e3e3;border-radius:0;font-size:13px;padding:8px 32px 8px 12px}
.pagination{text-align:center}
.pagination-list{justify-content:center;display:flex;gap:6px;list-style:none}
.pagination-item{border:1px solid #e3e3e3;border-radius:0;margin:0}
.pagination-item--current{background:#222;border-color:#222}
.pagination-item--current .pagination-link{color:#fff}
.pagination-link{color:#222;font-size:13.5px;padding:8px 14px;text-decoration:none}
.pagination-item:hover{border-color:#222}
.category-header-image{border-radius:5px;margin-bottom:18px;width:100%;object-fit:cover;max-height:320px}

/* ========== cart ========== */
.cart{font-family:'Poppins',sans-serif}
.cart-header{border-bottom:2px solid #222}
.cart-header-item{font-size:13px;font-weight:600;color:#222;text-transform:uppercase;letter-spacing:.5px}
.cart-item{border-bottom:1px solid #f0f0f0}
.cart-item-name{font-size:15px;font-weight:500}
.cart-item-name a{color:#222;text-decoration:none}
.cart-item-name a:hover{color:#dd480e}
.cart-item-value{font-size:14px;color:#222}
.cart-total-value{font-weight:600}
.cart-actions .button--primary{min-width:220px;padding:14px 30px}
.coupon-code input{border:1px solid #e3e3e3}

/* ========== blog ========== */
.blog{border:0;margin-bottom:34px}
.blog-title{font-size:18px;font-weight:600}
.blog-title a{color:#222;text-decoration:none}
.blog-title a:hover{color:#dd480e}
.blog-post-body{color:#555;font-size:14.5px;line-height:1.9}
.blog-date{color:#999;font-size:12.5px}
.blog-thumbnail img{border-radius:5px}

/* ========== static pages / account / auth ========== */
.page-content{font-size:14.5px;line-height:1.9;color:#484848}
.page-content h2{font-size:22px}
.panel{border:1px solid #ececec;border-radius:0}
.panel-header{background:#f6f6f8}
.panel-title{font-size:15px;font-weight:600;color:#222}
.navBar--account .navBar-action{color:#555}
.navBar--account .navBar-action.is-active{color:#dd480e}

/* quick search + misc modals keep readable */
.modal{border-radius:0}
.previewCartAction .button{width:100%}