/*========================================= DECETI TEMPLATES ===============================*/
:root{--deceti-template-primary-text:#ffffff;--deceti-template-accent-text:#ffffff;--deceti-template-panel-bg:#ffffff;--deceti-template-border:#d0d7e2;--deceti-template-text-muted:#667085;--deceti-template-menu-hover-bg:#3f5fb5}


/* =============== DECETI Templates =============== */

/* Search bar */
.deceti-templates-search {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 20px 0;
}

.deceti-templates-search-input {
  flex: 1 1 auto;
  min-width: 260px;
  max-width: 900px;
  padding: 10px 12px;
  font-size: 18px;
  border: 2px solid #edf1f6;
  border-radius: 6px;
  outline: none;
  box-sizing: border-box;
}

.deceti-templates-search-input:focus {
  border-color: #14213d;
}

.deceti-templates-search-btn,
.deceti-templates-clear-btn {
  background: #14213d;
  color: #ffffff;
  font-size: 18px;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 6px;
  cursor: pointer;
  user-select: none;
}

.deceti-templates-search-btn:hover,
.deceti-templates-clear-btn:hover {
  background: #14213d;
}

/* Optional message box (search status / nothing found) */
.deceti-templates-msg {
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid #d0d7e2;
  border-radius: 8px;
  background: #ffffff;
  box-sizing: border-box;
}

/* Product grid list */
.deceti-productlist {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  padding: 0;
  margin: 15px 0;
  list-style: none;
}

.deceti-productlist-item {
  flex: 0 1 270px;
  max-width: 290px;
  background: #ffffff;
  padding: 15px;
  border-radius: 10px;
  border: 2px solid #d0d7e2;
  text-align: center;
  box-sizing: border-box;
  transition: transform 0.25s ease, outline 0.25s ease, background-color 0.25s ease;
}

.deceti-productlist-item:hover {
  transform: scale(1.03);
  outline: 4px solid #14213d;
  background-color: #ffffff;
}

.deceti-productlist-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.deceti-productlist-title {
  font-size: 18px;
  margin: 0 0 10px;
  font-weight: 600;
}

.deceti-productlist-img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
  display: block;
}

/* Buttons under templates */
.deceti-productlist-actions {
  margin-top: 10px;
}

/* Pagination */
.deceti-templates-pages {
  margin-top: 15px;
  text-align: center;
}

.deceti-templates-pages .btn {
  margin: 0 4px 6px;
}

/* Mobile */
@media (max-width: 768px) {
  .deceti-productlist {
    gap: 15px;
  }

  .deceti-productlist-item {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .deceti-templates-search {
    margin: 15px 0;
  }

  .deceti-templates-search-input {
    min-width: 0;
    max-width: 100%;
  }
}

/* DECETI TEMPLATE CATALOG — migrated from deceti_cp_b_templates_.twig */
.c-container{
  display:flex;
  align-items:flex-start;
  max-width:100%;
  margin:0 auto;
}

.navmenu{
  width: var(--deceti-template-nav-width);
  min-width: var(--deceti-template-nav-width);
  flex:0 0 var(--deceti-template-nav-width);
  background-color: #ffffff;
  padding: var(--deceti-template-content-padding);
  margin-top: var(--deceti-template-content-pad-top);
  border:2px solid #d0d7e2;
  box-sizing:border-box;
  border-radius: var(--deceti-template-radius);
}

.s-content{
  flex:1 1 auto;
  min-width:0;
  padding: var(--deceti-template-content-padding);
  padding-top: var(--deceti-template-content-pad-top);
}

.template-item{
  font-size:18px;
  font-weight:bold;
  margin:10px 0;
  cursor:pointer;
  user-select:none;
}

.subtemplate-item{
  font-size:18px;
  margin:5px 0;
  color: #14213d;
  transition:color .3s,font-size .3s,font-weight .3s,background .3s;
  border-radius: var(--deceti-template-radius);
  user-select:none;
}

.subtemplate-item.active{
  background-color: #14213d;
  color: #ffffff !important;
  font-weight:bold;
}

.subtemplate-item:hover{
  color: #667085 !important;
}

.navmenu .template-item{
  padding:15px 20px;
  cursor:pointer;
  color:#000;
  background: #ffffff;
  font-size:21px;
  font-weight:bold;
  text-align:left;
  transition:background .3s,color .3s;
  border-radius: var(--deceti-template-radius);
}

.navmenu .template-item:hover{
  background: #f8fafc;
}

.navmenu .template-item.active{
  background: #14213d;
  color: #ffffff;
}

.navmenu .submenu{
  display:none;
  background: #ffffff;
  text-align:left;
}

.navmenu .template-item.active + .submenu{
  display:block;
}

.navmenu .subtemplate-item{
  margin-left:20px;
  padding:12px 20px;
  font-size:18px;
  color: #667085;
  transition:font-weight .3s;
}

.navmenu .subtemplate-item:hover{
  background: #f8fafc;
  font-weight:bold;
}

.search-bar{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:5px;
}

.search-bar input{
  padding:10px;
  width:80%;
  font-size:16px;
  border:1px solid #edf1f6;
  border-radius: var(--deceti-template-input-radius);
  padding-right:20px;
  margin-left:10px;
}

.search-bar input:focus{
  outline:none;
  border:3px solid #14213d;
}

.search-bar button{
  background-color: #14213d;
  color: #ffffff;
  font-size:20px;
  border:none;
  width:50px;
  margin-top:10px;
  height:50px;
  border-radius: var(--deceti-template-input-radius);
  cursor:pointer;
  transition:background-color .3s ease;
  margin-left:10px;
  user-select:none;
}

.search-bar button:hover{
  background-color: #14213d;
  color: #ffffff;
}

.c-grid.s-c-grid{
  display:flex;
  flex-wrap:wrap;
  gap: var(--deceti-template-gap);
  width:100%;
}

.i-grid{
  flex:0 0 calc(25% - var(--deceti-template-gap));
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  max-width:310px;
}

.item-box{
  width:100%;
  text-align:center;
  background-color: #ffffff;
  padding:15px;
  border-radius: var(--deceti-template-radius);
  border:2px solid #d0d7e2;
  box-sizing:border-box;
  transition:transform .3s ease, outline .3s ease, background-color .3s ease;
  user-select:none;
}

.item-box:hover{
  transform:scale(1.05);
  outline: var(--deceti-template-outline-width) solid #14213d;
  background-color: #ffffff;
}

.item-box img{
  width:100%;
  height:auto;
  pointer-events:none;
  -webkit-user-drag:none;
}

.new-category-name{
  font-size:16px;
  font-weight:bold;
  margin-top:10px;
}

a.btn.btn-customize,
a.btn-customize,
.btn.btn-customize,
.btn-customize{
  display:inline-block !important;
  background: #14213d !important;
  color: #ffffff !important;
  border:none !important;
  border-radius: var(--deceti-template-btn-radius) !important;
  padding:10px 12px !important;
  margin-top:12px !important;
  font-weight:bold !important;
  text-decoration:none !important;
}

a.btn.btn-customize:hover,
a.btn-customize:hover,
.btn.btn-customize:hover,
.btn-customize:hover{
  background: #14213d !important;
  color: #ffffff !important;
}

.button-container{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(20px,1fr));
  margin-top:5px;
}

.color-button{
  width:25px;
  height:25px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  margin-top:5px;
}

.color-button.active{
  border:3px solid #14213d;
}

.shape-accordion{
  margin-top:10px;
}

.shape-accordion.is-hidden{
  display:none;
}

.shape-accordion-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 20px;
  cursor:pointer;
  color:#000;
  background: #ffffff;
  font-size:21px;
  font-weight:bold;
  text-align:left;
  border:none;
  border-radius: var(--deceti-template-radius);
  transition:background .3s,color .3s;
  box-sizing:border-box;
}

.shape-accordion-toggle:hover{
  background: #f8fafc;
}

.shape-accordion-toggle.active{
  background: #14213d;
  color: #ffffff;
}

.shape-accordion-icon{
  font-size:24px;
  line-height:1;
  font-weight:bold;
}

.shape-accordion-panel{
  display:none;
  margin-top:8px;
}

.shape-accordion-panel.open{
  display:block;
}

.shape-container{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}

.shape-button{
  border:1px solid #d0d7e2;
  background: #ffffff;
  border-radius: var(--deceti-template-btn-radius);
  padding:8px 12px;
  cursor:pointer;
  font-size:14px;
  line-height:1.2;
}

.shape-button:hover{
  background: #f8fafc;
}

.shape-button.active{
  background: #14213d;
  color: #ffffff;
  border-color: #14213d;
}

.size-container{
  margin-top:10px;
}

.size-select{
  width:100%;
  font-size:18px;
  padding:10px;
  border:1px solid #edf1f6;
  border-radius: var(--deceti-template-input-radius);
  box-sizing:border-box;
  background:#fff;
}

.template-card-link{
  display:block;
  text-decoration:none;
  color:inherit;
}

@media (max-width: 768px){
  .c-container{
    flex-direction:column;
  }

  .navmenu{
    width:100%;
    min-width:0;
    flex:1 1 auto;
  }

  .s-content{
    width:100%;
  }

  .i-grid{
    flex:0 0 100%;
    max-width:100%;
  }
}

@media (max-width: 1100px){
  .i-grid{
    flex:0 0 calc(33.333% - var(--deceti-template-gap));
  }
}

@media (max-width: 900px){
  .i-grid{
    flex:0 0 calc(50% - var(--deceti-template-gap));
  }
}
/* END DECETI TEMPLATE CATALOG */
.color-button.is-red{background-color:red}.color-button.is-orange{background-color:orange}.color-button.is-yellow{background-color:#ff0}.color-button.is-green{background-color:green}.color-button.is-blue{background-color:#0060ff}.color-button.is-navy{background-color:#0d0d81}.color-button.is-violet{background-color:#7a19cc}.color-button.is-magenta{background-color:#de06cc}.color-button.is-black{background-color:#000}
.deceti-template-image-placeholder{display:flex;align-items:center;justify-content:center;width:180px;height:180px;margin:0 auto;background:#ffffff}