/*
Theme Name: Canasnspace
Theme URI: https://canasnspace.com
Author: Canasnspace
Author URI: https://canasnspace.com
Description: A modern beauty & cosmetics e-commerce theme for Canasnspace, built for WordPress + WooCommerce. Features a hero slider, category grid, deal banners, best sellers, and a full shop/cart/checkout/account experience.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: canasnspace
Tags: e-commerce, woocommerce, custom-menu, custom-logo, featured-images, translation-ready
*/

/* ==========================================================================
   1. Variables & Reset
   ========================================================================== */
:root{
  --c-primary:#e91e63;
  --c-primary-dark:#c2185b;
  --c-primary-light:#fde7ef;
  --c-dark:#222222;
  --c-text:#4a4a4a;
  --c-gray:#767676;
  --c-border:#ececec;
  --c-bg:#ffffff;
  --c-bg-soft:#faf6f7;
  --c-success:#2e7d32;
  --c-danger:#e53935;
  --radius:6px;
  --container:1240px;
  --font-base:'Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-base);
  color:var(--c-text);
  background:var(--c-bg);
  font-size:15px;
  line-height:1.6;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;transition:color .15s ease;}
a:hover{color:var(--c-primary);}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{color:var(--c-dark);font-weight:600;margin:0 0 .5em;line-height:1.3;}
input,button,select,textarea{font-family:inherit;font-size:inherit;}
button{cursor:pointer;}
.container{max-width:var(--container);margin:0 auto;padding:0 20px;}
.screen-reader-text{position:absolute!important;clip:rect(1px,1px,1px,1px);overflow:hidden;height:1px;width:1px;word-wrap:normal!important;}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  background:var(--c-primary);color:#fff;border:1px solid var(--c-primary);
  padding:11px 22px;border-radius:var(--radius);font-weight:500;font-size:14px;
  cursor:pointer;transition:.15s ease;
}
.btn:hover{background:var(--c-primary-dark);border-color:var(--c-primary-dark);color:#fff;}
.btn-outline{background:transparent;color:var(--c-primary);}
.btn-outline:hover{background:var(--c-primary);color:#fff;}
.section{padding:40px 0;}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px;}
.section-head h2{font-size:22px;margin:0;position:relative;padding-left:14px;border-left:4px solid var(--c-primary);}
.section-head .view-all{font-size:13px;font-weight:600;color:var(--c-primary);}

/* ==========================================================================
   2. Top Bar & Header
   ========================================================================== */
.top-bar{background:var(--c-dark);color:#cfcfcf;font-size:12px;}
.top-bar .container{display:flex;align-items:center;justify-content:space-between;height:34px;}
.top-bar a{color:#cfcfcf;}
.top-bar a:hover{color:#fff;}
.top-bar-left span{margin-right:16px;}
.top-bar-social a{margin-left:12px;font-size:13px;}

.site-header{border-bottom:1px solid var(--c-border);position:sticky;top:0;background:#fff;z-index:100;}
.header-main{display:flex;align-items:center;gap:24px;padding:16px 0;}
.site-branding{flex-shrink:0;}
.site-branding img{max-height:52px;}
.site-title{font-size:24px;margin:0;font-weight:700;letter-spacing:.5px;}
.site-title a{color:var(--c-dark);}
.site-description{font-size:11px;color:var(--c-gray);margin:0;}

.header-search{flex:1;max-width:560px;}
.header-search form{display:flex;border:2px solid var(--c-primary);border-radius:var(--radius);overflow:hidden;}
.header-search input[type="search"]{flex:1;border:0;padding:11px 14px;outline:none;}
.header-search button{background:var(--c-primary);border:0;color:#fff;padding:0 20px;font-size:16px;}

.header-actions{display:flex;align-items:center;gap:22px;margin-left:auto;}
.header-actions .action-item{position:relative;display:flex;flex-direction:column;align-items:center;font-size:11px;color:var(--c-dark);}
.header-actions .action-item .icon{font-size:20px;line-height:1;margin-bottom:2px;}
.header-actions .count{position:absolute;top:-6px;right:-10px;background:var(--c-primary);color:#fff;border-radius:50%;width:18px;height:18px;font-size:10px;display:flex;align-items:center;justify-content:center;}

.main-navigation{background:var(--c-primary);}
.main-navigation .container{display:flex;align-items:center;}
.main-navigation ul.menu{display:flex;flex-wrap:wrap;}
.main-navigation ul.menu > li{position:relative;}
.main-navigation ul.menu > li > a{display:block;padding:13px 18px;color:#fff;font-size:13.5px;font-weight:500;text-transform:uppercase;letter-spacing:.3px;}
.main-navigation ul.menu > li:hover > a{background:var(--c-primary-dark);}
.main-navigation ul.menu ul.sub-menu{display:none;position:absolute;left:0;top:100%;background:#fff;min-width:220px;box-shadow:0 8px 24px rgba(0,0,0,.12);border-radius:0 0 var(--radius) var(--radius);padding:6px 0;z-index:50;}
.main-navigation ul.menu li:hover > ul.sub-menu{display:block;}
.main-navigation ul.menu ul.sub-menu li a{color:var(--c-dark);padding:9px 18px;font-size:13px;text-transform:none;font-weight:400;}
.main-navigation ul.menu ul.sub-menu li a:hover{background:var(--c-primary-light);color:var(--c-primary);}
.menu-toggle{display:none;background:none;border:0;font-size:24px;color:#fff;padding:12px 16px;}

/* ==========================================================================
   3. Hero Slider
   ========================================================================== */
.hero-slider{position:relative;overflow:hidden;background:var(--c-bg-soft);}
.hero-slider .slides{display:flex;transition:transform .5s ease;}
.hero-slider .slide{min-width:100%;}
.hero-slider .slide img{width:100%;object-fit:cover;max-height:440px;}
.hero-slider .slide-caption{position:absolute;left:60px;top:50%;transform:translateY(-50%);max-width:420px;}
.hero-slider .slide-caption h2{font-size:34px;}
.hero-slider .slide-caption p{color:var(--c-text);margin-bottom:18px;}
.hero-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;}
.hero-dots button{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.6);}
.hero-dots button.active{background:var(--c-primary);}
.hero-arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.85);border:0;width:38px;height:38px;border-radius:50%;font-size:16px;z-index:5;}
.hero-arrow.prev{left:16px;}
.hero-arrow.next{right:16px;}

/* ==========================================================================
   4. Banner / Category Grids
   ========================================================================== */
.banner-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.banner-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.banner-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.banner-grid a{display:block;border-radius:var(--radius);overflow:hidden;position:relative;background:var(--c-bg-soft);}
.banner-grid img{width:100%;transition:transform .3s ease;}
.banner-grid a:hover img{transform:scale(1.04);}

.category-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:14px;}
.category-grid .cat-item{text-align:center;}
.category-grid .cat-thumb{width:100%;aspect-ratio:1/1;border-radius:50%;overflow:hidden;background:var(--c-primary-light);margin-bottom:8px;border:1px solid var(--c-border);}
.category-grid .cat-thumb img{width:100%;height:100%;object-fit:cover;}
.category-grid .cat-name{font-size:12.5px;font-weight:500;color:var(--c-dark);}

.concern-links{display:flex;flex-wrap:wrap;gap:10px;}
.concern-links a{border:1px solid var(--c-border);border-radius:30px;padding:8px 18px;font-size:13px;background:#fff;}
.concern-links a:hover{border-color:var(--c-primary);background:var(--c-primary);color:#fff;}

/* ==========================================================================
   5. Products
   ========================================================================== */
ul.products{display:grid!important;grid-template-columns:repeat(4,1fr);gap:20px;margin:0!important;padding:0!important;}
ul.products li.product{list-style:none;background:#fff;border:1px solid var(--c-border);border-radius:var(--radius);padding:14px;position:relative;transition:box-shadow .2s ease,transform .2s ease;}
ul.products li.product:hover{box-shadow:0 10px 26px rgba(0,0,0,.08);transform:translateY(-3px);}
ul.products li.product img{border-radius:var(--radius);margin-bottom:10px;aspect-ratio:1/1;object-fit:cover;}
ul.products li.product .woocommerce-loop-product__title{font-size:14px;font-weight:500;color:var(--c-dark);margin:6px 0 4px;}
ul.products li.product .price{color:var(--c-primary);font-weight:600;font-size:14.5px;}
ul.products li.product .price del{color:var(--c-gray);font-weight:400;opacity:.7;margin-right:6px;}
ul.products li.product .price ins{text-decoration:none;}
ul.products li.product .onsale{position:absolute;top:10px;left:10px;background:var(--c-primary);color:#fff;font-size:11px;font-weight:600;padding:3px 8px;border-radius:20px;}
ul.products li.product .button{margin-top:10px;width:100%;text-align:center;background:var(--c-dark);border-color:var(--c-dark);font-size:12.5px;padding:9px;border-radius:var(--radius);color:#fff;display:block;}
ul.products li.product .button:hover{background:var(--c-primary);border-color:var(--c-primary);}
ul.products li.product .star-rating{font-size:12px;margin-bottom:4px;}

.woocommerce div.product div.summary{padding-left:20px;}
.woocommerce div.product p.price,.woocommerce div.product span.price{color:var(--c-primary);font-size:24px;font-weight:600;}
.woocommerce div.product .product_title{font-size:26px;}
.woocommerce #respond input#submit,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{
  background:var(--c-primary);color:#fff;border-radius:var(--radius);padding:12px 26px;font-weight:500;border:1px solid var(--c-primary);
}
.woocommerce #respond input#submit:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover{
  background:var(--c-primary-dark);border-color:var(--c-primary-dark);color:#fff;
}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{border-radius:var(--radius);}
.woocommerce nav.woocommerce-pagination ul li a:hover,.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--c-primary);color:#fff;border-color:var(--c-primary);}

.woocommerce-cart table.shop_table,.woocommerce-checkout table.shop_table{border-radius:var(--radius);border-color:var(--c-border);}
.woocommerce-checkout #payment{background:var(--c-bg-soft);border-radius:var(--radius);}
.woocommerce-checkout #payment div.payment_box{background:var(--c-primary-light);}
.woocommerce ul.order_details{background:var(--c-bg-soft);padding:16px;border-radius:var(--radius);display:flex;flex-wrap:wrap;gap:20px;}
.woocommerce table.woocommerce-table--order-details{border-radius:var(--radius);}
.woocommerce-MyAccount-navigation ul{border:1px solid var(--c-border);border-radius:var(--radius);overflow:hidden;}
.woocommerce-MyAccount-navigation ul li{border-bottom:1px solid var(--c-border);}
.woocommerce-MyAccount-navigation ul li a{display:block;padding:12px 16px;}
.woocommerce-MyAccount-navigation ul li.is-active a{background:var(--c-primary);color:#fff;}
.woocommerce-orders-table__cell-order-status mark.order-status{border-radius:20px;padding:4px 12px;background:var(--c-primary-light);color:var(--c-primary-dark);font-weight:600;}

/* ==========================================================================
   6. Newsletter / Trust strip
   ========================================================================== */
.trust-strip{background:var(--c-bg-soft);border-top:1px solid var(--c-border);border-bottom:1px solid var(--c-border);}
.trust-strip .container{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:24px 20px;}
.trust-strip .trust-item{display:flex;align-items:center;gap:12px;font-size:13px;}
.trust-strip .trust-item .icon{font-size:26px;color:var(--c-primary);}
.newsletter{background:var(--c-dark);color:#fff;padding:34px 0;text-align:center;}
.newsletter h3{color:#fff;font-size:20px;}
.newsletter p{color:#bdbdbd;margin-bottom:16px;}
.newsletter form{display:flex;max-width:420px;margin:0 auto;}
.newsletter input[type="email"]{flex:1;padding:11px 14px;border:0;border-radius:var(--radius) 0 0 var(--radius);}
.newsletter button{border-radius:0 var(--radius) var(--radius) 0;padding:0 22px;}

/* ==========================================================================
   7. Footer
   ========================================================================== */
.site-footer{background:#181818;color:#c9c9c9;font-size:13.5px;padding-top:44px;}
.footer-widgets{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding-bottom:30px;}
.footer-widgets h2,.footer-widgets h3{color:#fff;font-size:15px;margin-bottom:14px;text-transform:uppercase;letter-spacing:.5px;}
.footer-widgets ul li{margin-bottom:9px;}
.footer-widgets a{color:#c9c9c9;}
.footer-widgets a:hover{color:var(--c-primary);}
.payment-icons{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
.payment-icons span{background:#2a2a2a;border-radius:4px;padding:5px 9px;font-size:11px;color:#ddd;}
.footer-bottom{border-top:1px solid #2c2c2c;padding:16px 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.footer-bottom .footer-menu ul{display:flex;gap:16px;flex-wrap:wrap;}

/* ==========================================================================
   8. Blog / Single / Page
   ========================================================================== */
.content-area{padding:40px 0;}
article.post{margin-bottom:36px;padding-bottom:36px;border-bottom:1px solid var(--c-border);}
article.post .entry-title{font-size:22px;}
article.post .entry-title a{color:var(--c-dark);}
.entry-meta{font-size:12px;color:var(--c-gray);margin-bottom:10px;}
.page-title{font-size:26px;margin-bottom:20px;border-left:4px solid var(--c-primary);padding-left:14px;}

/* ==========================================================================
   9. Responsive
   ========================================================================== */
@media(max-width:1024px){
  .category-grid{grid-template-columns:repeat(4,1fr);}
  ul.products{grid-template-columns:repeat(3,1fr);}
  .banner-grid{grid-template-columns:repeat(2,1fr);}
  .trust-strip .container{grid-template-columns:repeat(2,1fr);}
  .footer-widgets{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:782px){
  .top-bar{display:none;}
  .header-search{order:3;flex-basis:100%;max-width:100%;margin-top:10px;}
  .header-main{flex-wrap:wrap;}
  .menu-toggle{display:block;}
  .main-navigation ul.menu{display:none;flex-direction:column;width:100%;}
  .main-navigation.open ul.menu{display:flex;}
  .main-navigation ul.menu ul.sub-menu{position:static;box-shadow:none;display:none;}
  .main-navigation ul.menu li.menu-item-open > ul.sub-menu{display:block;}
  ul.products{grid-template-columns:repeat(2,1fr);}
  .category-grid{grid-template-columns:repeat(3,1fr);}
  .banner-grid{grid-template-columns:1fr;}
  .footer-widgets{grid-template-columns:1fr;}
  .hero-slider .slide-caption{left:24px;max-width:80%;}
  .hero-slider .slide-caption h2{font-size:22px;}
}