/*
Theme Name: 	   DesignShopee2
Text Domain: 	   Design Shopee
Version:            1.0.12
Tested up to:       6.6
Requires at least:  4.7
Requires PHP:       5.6
Tags:               one-column, two-columns ,right-sidebar, flexible-header, custom-background, custom-header, custom-menu, editor-style, featured-images, footer-widgets, post-formats, theme-options, threaded-comments, translation-ready, full-width-template, custom-logo, blog, e-commerce, portfolio
License: GPLv3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
*/

/* -------------------------
   THEME VARIABLES & RESET
   ------------------------- */
:root{
  --brand:#C90A2B;
  --brand-dark:#9a081e;
  --bg: #080808;
  --text: #ffffff;
  --muted: rgba(255,255,255,0.78);
  --card-grad: linear-gradient(180deg, #000000 0%, #2b2b2b 100%);
  --max-width:1600px;
  --content-w:85%;
  --section-gap:36px;
  --divider: rgba(255,255,255,0.06);
  --header-h:90px;

  /* additional theme vars for compatibility */
  --dt-main-color: var(--brand);
  --dt-secondary-color: rgba(255,255,255,0.7);
}

/* Base reset / box sizing */
*{box-sizing:border-box}
html,body{height:100%; margin:0; padding:0}
body{
  font-family:'Poppins',system-ui,Arial;
  background: var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-text-size-adjust:100%;
  line-height:1.45;
}

a { color:inherit; text-decoration:none; }

/* Header */
.site-header{
  width:100%;
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:center;
  position:sticky;
  top:0;
  z-index:999;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(255,255,255,0.03);
  background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.15));
}
.header-inner{
  width:var(--content-w);
  max-width:var(--max-width);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:6px 0;
}

.logo{ display:flex; align-items:center; gap:2px; }
.logo img{ height:52px; width:auto; display:block; border-radius:6px; }
.logo .brand-title{ font-weight:400; font-size:10px; color:var(--text); }

.nav-wrap{ flex:1 1 auto; display:flex; justify-content:center; align-items:center; }
.nav-pill{
  display:inline-flex; gap:18px; align-items:center;
  padding:8px 18px; border-radius:999px;
  background: var(--card-grad);
  box-shadow:0 10px 30px rgba(0,0,0,0.45);
  border:1px solid rgba(255,255,255,0.04);
}
.nav-pill a{ padding:8px 10px; border-radius:999px; color:var(--text); font-weight:600; font-size:14px; transition: all .14s; display:inline-block; }
.nav-pill a:hover, .nav-pill a:focus{ color:var(--brand); transform:translateY(-2px); }

.header-cta{ display:flex; align-items:center; gap:12px; }
.btn{ cursor:pointer; padding:10px 16px; border-radius:999px; font-weight:600; border:0; font-size:14px; transition:all .18s; outline:none; background: var(--card-grad); color:var(--text); box-shadow: 0 8px 30px rgba(0,0,0,0.45); }
.btn:hover, .btn:focus{ background: var(--brand); border:2px solid var(--brand); color:#ffffff; transform:translateY(-2px); box-shadow: 0 10px 30px rgba(201,10,43,0.12); }
.btn-outline{ background: transparent; border:2px solid rgba(255,255,255,0.08); color:var(--text); padding:8px 14px; }
.btn-outline:hover{ background:var(--brand); border:2px solid var(--brand); color:#fff; transform:translateY(-2px); }

.page-bleed{ width:100%; min-height:calc(100vh - var(--header-h)); display:flex; justify-content:center; padding:28px 0 60px; }
.site-container{ width:var(--content-w); max-width:var(--max-width); margin:0 auto; padding:8px 0; }
.section-divider{ height:1px; background:var(--divider); margin:var(--section-gap) 0; border-radius:1px; }

/* HERO */
.hero-wrap{
  width:100%;
  min-height:calc(100vh - var(--header-h) - 160px);
  display:flex;
  gap:5%;
  align-items:stretch;
  justify-content:space-between;
  padding:32px;
  border-radius:14px;
  position:relative;
  overflow:visible;
}

.hero-left{ flex:0 0 52%; display:flex; flex-direction:column; justify-content:top; margin-top:25px; gap:18px; padding:6px 0; }
.eyebrow{ display:inline-block; padding:8px 14px; border-radius:999px; background:var(--card-grad); color:var(--text); font-weight:700; font-size:13px; letter-spacing:0.3px; width:auto; }
.hero-title{ font-family:'Playfair Display',serif; font-size:56px; line-height:1.06; margin:65px 0 50px; color:var(--text); font-weight:600; letter-spacing:-0.6px; }
.hero-sub{ color:var(--muted); font-size:16px; max-width:680px; margin-bottom:6px; }
.center-ctas{ display:flex; gap:14px; align-items:center; margin-top:35px; flex-wrap:wrap; }

/* hero right - FIXED: no inner padding/gap so one slide shows fully */
.hero-right{ flex:0 0 40%; min-width:360px; display:flex; align-items:stretch; justify-content:top; position:relative; }
.panel{ width:100%; height:90%; border-radius:18px; overflow:hidden; position:relative; box-shadow: 0 28px 80px rgba(0,0,0,0.6); background: transparent; padding:0; border:1px solid rgba(255,255,255,0.03); display:flex; flex-direction:column; min-height:420px; }
.panel .panel-title{ font-weight:700; text-transform:uppercase; font-size:12px; letter-spacing:1px; text-align:center; color:var(--muted); margin:12px 0; }

.mockup{ flex:1 1 auto; border-radius:12px; overflow:hidden; background:linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.2)); display:flex; align-items:center; justify-content:center; position:relative; padding:0; } /* padding 0 -> prevents partial slides */

.horizontal-carousel{ width:100%; height:100%; position:relative; overflow:hidden; }
.horizontal-track{ display:flex; height:100%; will-change:transform; transition: transform 700ms cubic-bezier(.22,.9,.32,1); gap:0; } /* gap removed */

.horizontal-track .slide{ min-width:100%; flex:0 0 100%; height:100%; border-radius:0; overflow:hidden; box-shadow:0 12px 40px rgba(0,0,0,0.4); background:var(--card-grad); display:flex; align-items:center; justify-content:center; } /* border-radius moved to container to avoid visual cut */
.horizontal-track .slide img{ width:100%; height:100%; object-fit:cover; display:block; }

.h-pager{ position:absolute; left:12px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:8px; z-index:5 }
.h-dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.12); cursor:pointer; }
.h-dot.active{ background:var(--brand) }

/* ---------- Sections (same gradient as buttons) ---------- */
.section{ width:100%; border-radius:10px; padding:26px; display:flex; gap:24px; align-items:center; min-height:0; background: var(--card-grad); border: 1px solid rgba(255,255,255,0.04); box-shadow: 0 12px 30px rgba(0,0,0,0.6); }
.about-text h2{ font-family:'Playfair Display',serif; font-size:28px; margin:8px 0 12px; color:var(--text) }
.about-text p{ color:var(--muted); line-height:1.7; margin-bottom:14px; }

.service-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; width:100%; }
.service-card{ border-radius:12px; overflow:hidden; background: transparent; border:1px solid rgba(255,255,255,0.04); display:flex; flex-direction:column; align-items: center; box-shadow:0 10px 30px rgba(0,0,0,0.45); padding:16px; gap:14px; color:var(--text); text-align: center}
.service-card img {
  width: 100%;
  height: 200px;         /* fixed height for image */
  object-fit: cover;     /* maintain aspect ratio and fill area */
  border-radius: 8px;
}
.why-grid { display: flex; gap: 16px; flex-wrap: wrap; width: 100%; }
.why-card { flex: 1 1 220px; min-height: 120px; border-radius: 12px; padding: 16px; background: transparent; border: 1px dashed rgba(255, 255, 255, 0.04); display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 8px; color: var(--text); transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.why-card:hover { border-color: #ffffff; box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1); }
.muted-small { color: var(--muted); line-height: 1.6; font-size: 15px; }

.portfolio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:12px; }
.portfolio-item{ border-radius:10px; overflow:hidden; min-height:140px; background: transparent; box-shadow:0 12px 30px rgba(0,0,0,0.45); display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.04); }
.portfolio-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.reviews-actions{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; width:100%; margin-top:12px; margin-bottom:12px; }
.action-box{ border-radius:12px; padding:14px; background: transparent; display:flex; flex-direction:column; gap:10px; align-items:center; box-shadow:0 12px 30px rgba(0,0,0,0.45); border:1px solid rgba(255,255,255,0.03); min-height:140px; color:var(--text);margin-bottom:15px}
.action-box img{ width:100%; height:100%; object-fit:cover; border-radius:8px; margin-bottom:10px}

/* Footer */
.site-footer{ width:100%; display:flex; align-items:center; justify-content:center; padding:18px 0 36px; color:var(--muted); }
.footer-inner{ width:var(--content-w); max-width:var(--max-width); display:flex; align-items:center; justify-content:center; }

.footer-address { font-size: 12px; line-height: 1.6; color: var(--muted);  text-align: center;}

/* Responsive */
@media(max-width:1180px){
  .header-inner{ padding:0 8px; gap:10px; }
  .nav-pill{ padding:8px 10px; gap:10px; }
  .hero-wrap{ flex-direction:column; gap:24px; padding:22px }
  .hero-left, .hero-right{ flex:0 0 100%; max-width:100% }
  .service-grid{ grid-template-columns:repeat(2,1fr) }
  .portfolio-grid{ grid-template-columns:repeat(2,1fr) }
  .reviews-actions{ grid-template-columns:repeat(2,1fr) }
}
@media(max-width:620px){
  .hero-title{ font-size:30px }
  .nav-pill{ display:flex; flex-wrap:wrap; gap:8px }
  .service-grid{ grid-template-columns:1fr }
  .portfolio-grid{ grid-template-columns:1fr }
  .reviews-actions{ grid-template-columns:1fr }
  .center-ctas{ justify-content:flex-start; flex-wrap:wrap }
  .h-pager{ left:8px }
  .logo img{ height:36px }
}

/* Fix for previously unclosed block and mobile footer layout */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
}

/* -------------------------
   Theme-specific / WooCommerce / Blocks
   (appended from your provided style.css fragment)
   ------------------------- */

.process-card .icon i {
    font-size: 60px;
}

.dt_post_item .meta li {
    font-size: 1.4rem;
    color: var(--dt-secondary-color);
    font-weight: 600;
    transition: all .2s ease-in-out;
}

.dt_post_item .meta i {
    font-size: 2rem;
    color: var(--dt-main-color);
    vertical-align: middle;
    margin-right: 0.8rem;
}

.wc-block-components-product-badge {
    background: var(--dt-main-color);
    color: #fff;
}

.wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button {
    background-color: var(--dt-main-color);
    color: #fff;
}

.wc-block-cart-items th {
    color: var(--dt-main-color);
}

.wp-block-image figcaption {
    text-align: center;
}

div.wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
    background: var(--dt-main-color);
    color: #ffffff;
}

.wp-block-embed figcaption {
    text-align: center;
}

.has-background.wp-block-read-more {
    padding: 0.25em 1.375em;
}

.wc-block-featured-category__link .wp-block-button__link:hover, 
.wc-block-featured-category__link .wp-block-button__link:focus {
    color: #fff;
}

nav.woocommerce-breadcrumb a {
    text-decoration: none;
}

.has-text-color a:hover, 
.has-text-color a:focus {
    color: inherit;
}

.wc-block-featured-product__price .woocommerce-Price-amount.amount {
    color: #fff;
}

.wp-block-pullquote.has-text-color blockquote {
    border-left-color: inherit;
}

.wc-block-featured-product__link a:hover, 
.wc-block-featured-product__link a:focus {
    color: #fff;
}

.wp-block-table figcaption {
    text-align: center;
    font-weight: 600;
}

.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link {
    color: #fff;
}

.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link:hover, 
.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link:focus {
    color: #fff;
}

.wp-block-code.has-text-color code {
    color: inherit;
}