.wcpct-wrapper{margin:20px 0}

/* Tabs - single row, scrollable instead of wrapping to a second row */
.wcpct-tabs{
 display:flex;
 flex-wrap:nowrap;
 overflow-x:auto;
 -webkit-overflow-scrolling:touch;
 list-style:none;
 margin:0 0 0;
 padding:0;
 border-bottom:1px solid #ddd;
 background:#f1f1f1;
 scrollbar-width:thin;
}
.wcpct-tabs::-webkit-scrollbar{height:5px}
.wcpct-tabs::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}

.wcpct-tabs li{margin:0;flex-shrink:0;white-space:nowrap}

.wcpct-tabs button{
 cursor:pointer;
 padding:14px 22px;
 border:none;
 border-right:1px solid #ddd;
 background:#f1f1f1;
 color:#555;
 font-size:13px;
 font-weight:600;
 letter-spacing:.3px;
 text-transform:uppercase;
 white-space:nowrap;
 transition:background .2s,color .2s;
}
.wcpct-tabs button:hover{background:#e6e6e6}
.wcpct-tabs button.active{background:#fff;color:#222;box-shadow:inset 0 -2px 0 #888}

/* Product grid - column counts come from CSS custom properties set per
 shortcode instance (desktop/tablet/mobile), configurable in
 WooCommerce > Category Tabs. No more hardcoded breakpoints. */
.wcpct-panel{display:none;padding:25px 0}
.wcpct-panel.active{
 display:grid;
 grid-template-columns:repeat(var(--wcpct-cols-desktop,4),1fr);
 gap:25px;
}

.wcpct-no-products,.wcpct-error{padding:20px 0;grid-column:1/-1;color:#777}

/* Product card */
.product-card{
 display:flex;
 flex-direction:column;
 align-items:center;
 text-align:center;
 background:#fff;
 border:1px solid #eee;
 border-radius:4px;
 box-shadow:0 1px 3px rgba(0,0,0,.06);
 padding:25px 18px;
}

.wcpct-product-link{text-decoration:none;color:inherit;display:block;width:100%}

.wcpct-image-wrap{position:relative;display:block;margin-bottom:15px}
.wcpct-image-wrap img{width:100%;height:auto;display:block;border-radius:3px}

.onsale{
 position:absolute;
 top:0;
 right:0;
 background:#e2401f;
 color:#fff;
 font-size:11px;
 font-weight:600;
 text-transform:uppercase;
 padding:3px 9px;
 border-radius:0 3px 0 3px;
 z-index:1;
}

.wcpct-product-title{font-size:15px;font-weight:500;margin:0 0 8px;color:#3c4858}

/* Extra meta: category / tags / SKU */
.wcpct-meta{font-size:12px;color:#888;margin:0 0 6px;line-height:1.4}
.wcpct-meta a{color:#888;text-decoration:underline}
.wcpct-meta a:hover{color:#555}
.wcpct-meta-category{text-transform:uppercase;letter-spacing:.3px}

.wcpct-short-description{font-size:13px;color:#666;line-height:1.5;margin:0 0 10px}

.wcpct-price{font-size:14px;margin:0 0 15px;color:#777}
.wcpct-price del{color:#aaa;text-decoration:line-through;margin-right:6px}
.wcpct-price ins{color:#333;text-decoration:none;font-weight:600}

.wcpct-add-to-cart{margin-top:auto;width:100%}

/* Quantity stepper (+ / -)
 -------------------------------------------------------------------------
 Some themes apply their own global styling to <button> / number inputs
 (rounded "pill" buttons, hidden text, etc.) which can visually break this
 control or hide the typed quantity. The reset below strips any inherited
 theme styling from this component specifically, then re-applies our own
 styles with !important so they always win regardless of theme load order
 or specificity. */
.wcpct-qty-selector,
.wcpct-qty-selector *{
 all:unset;
 box-sizing:border-box!important;
}
.wcpct-qty-selector{
 display:flex!important;
 align-items:stretch!important;
 justify-content:center!important;
 width:100%!important;
 max-width:120px!important;
 margin:0 auto 10px!important;
 border:1px solid #ccc!important;
 border-radius:3px!important;
 overflow:hidden!important;
 background:#fff!important;
}
.wcpct-qty-btn{
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 flex:0 0 32px!important;
 height:32px!important;
 background:#f1f1f1!important;
 cursor:pointer!important;
 font-size:16px!important;
 line-height:1!important;
 color:#333!important;
 user-select:none!important;
 -webkit-user-select:none!important;
}
.wcpct-qty-btn:hover{background:#e2e2e2!important}
.wcpct-qty-input{
 display:block!important;
 flex:1 1 auto!important;
 width:40px!important;
 min-width:30px!important;
 height:32px!important;
 line-height:32px!important;
 text-align:center!important;
 font-size:14px!important;
 color:#333!important;
 background:#fff!important;
 border-left:1px solid #ccc!important;
 border-right:1px solid #ccc!important;
 padding:0!important;
}
.wcpct-qty-input::-webkit-outer-spin-button,
.wcpct-qty-input::-webkit-inner-spin-button{-webkit-appearance:none!important;margin:0!important}

.wcpct-add-to-cart .button{
 display:inline-block;
 width:100%;
 box-sizing:border-box;
 padding:10px 16px;
 background:#f1f1f1;
 border:1px solid #ccc;
 color:#333;
 border-radius:3px;
 text-decoration:none;
 font-size:13px;
 cursor:pointer;
 transition:background .2s,color .2s;
}
.wcpct-add-to-cart .button:hover{background:#333;color:#fff;border-color:#333}
.wcpct-add-to-cart .button.loading{opacity:.5}
.wcpct-add-to-cart .added_to_cart{display:block;margin-top:8px;font-size:12px;text-decoration:underline}

.wcpct-error{color:#b32d2e}

@media (max-width:1024px){
 .wcpct-panel.active{grid-template-columns:repeat(var(--wcpct-cols-tablet,3),1fr)}
}
@media (max-width:600px){
 .wcpct-panel.active{grid-template-columns:repeat(var(--wcpct-cols-mobile,2),1fr);gap:12px}
 .product-card{padding:15px 10px}
 .wcpct-product-title{font-size:13px}
 .wcpct-price{font-size:13px;margin-bottom:10px}
 .wcpct-tabs button{padding:12px 16px;font-size:12px}
}