.elementor-9220 .elementor-element.elementor-element-1e07789 > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-9220 .elementor-element.elementor-element-1e07789 > .elementor-background-overlay{background-color:#FFFFFF;background-image:url("https://dreamsboutique.pt/wp-content/uploads/2025/08/bridesmaid-makes-bow-knot-back-brides-wedding-dress-1.jpg");background-position:center center;opacity:0.25;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-9220 .elementor-element.elementor-element-1e07789 > .elementor-container{min-height:350px;}.elementor-9220 .elementor-element.elementor-element-1e07789{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:-150px;margin-bottom:0px;padding:0px 0px 0px 0px;z-index:20;}.elementor-9220 .elementor-element.elementor-element-9297a83 > .elementor-element-populated{margin:0px 0px 0px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;padding:0px 0px 0px 0px;}.elementor-9220 .elementor-element.elementor-element-87c381f > .elementor-widget-container{margin:150px 0px 0px 0px;}.elementor-9220 .elementor-element.elementor-element-c409b2d > .elementor-background-overlay{background-color:#FFFFFF;opacity:0.2;}.elementor-9220 .elementor-element.elementor-element-c409b2d > .elementor-container{max-width:1250px;}.elementor-9220 .elementor-element.elementor-element-c409b2d{margin-top:0px;margin-bottom:0px;padding:0px 0px 0px 0px;}.elementor-9220 .elementor-element.elementor-element-f8fee6f > .elementor-element-populated{margin:0px 10px 0px 10px;--e-column-margin-right:10px;--e-column-margin-left:10px;}.elementor-9220 .elementor-element.elementor-element-e47471b{--spacer-size:50px;}@media(min-width:768px){.elementor-9220 .elementor-element.elementor-element-f8fee6f{width:100%;}}@media(max-width:1024px){.elementor-9220 .elementor-element.elementor-element-1e07789 > .elementor-container{min-height:400px;}}/* Start custom CSS for qode_essential_addons_product_list, class: .elementor-element-bbbdcd4 *//* ==========================================================
   DREAMS BOUTIQUE – WIDGET a420877 (Qode Product List)
   - Mostrar só categoria vestidos-de-noiva
   - Esconder título + breadcrumbs
   - Hover: overlay + pena + botão com losangos
   - Moldura hover
   - Tipografia nome/preço
========================================================== */


/* ==========================================================
   0) FILTRO – mostrar só categoria vestidos-de-noiva
========================================================== */

/* Esconde todos os produtos do grid */
.qodef-woo-shortcode-product-list .qodef-grid-item { display: none; }
/* Mostra apenas produtos da categoria Vestidos de Noiva */
.qodef-woo-shortcode-product-list .qodef-grid-item.product_cat-vestidos-de-noiva { display: block; }


/* ==========================================================
   1) ESCONDER TÍTULO + BREADCRUMBS
========================================================== */

/* Esconder título do produto (apenas neste widget) */
.elementor-element-a420877 .qodef-m-title.entry-title{
  display: none !important;
}

/* Esconder breadcrumbs (sitewide) */
.qodef-breadcrumbs{
  display: none !important;
}


/* ==========================================================
   DREAMS BOUTIQUE – CSS DO WIDGET (usar ".elementor-9220 .elementor-element.elementor-element-bbbdcd4")
   Overlay + Pena + Botão + Moldura + Tipografia
========================================================== */


/* ==========================================================
   MOLDURA HOVER (1px) — fade + desloca para cima/esquerda
========================================================== */

.elementor-9220 .elementor-element.elementor-element-bbbdcd4 .qodef-woo-product-image{
  position: relative !important;
  overflow: visible !important;
  z-index: 1 !important; /* cria contexto */
}

/* moldura */
.elementor-9220 .elementor-element.elementor-element-bbbdcd4 .qodef-woo-product-image::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border: 1px solid #c78665 !important;

  opacity: 0 !important;
  transform: translate(0,0) !important;

  transition: opacity .35s ease, transform .6s cubic-bezier(.4,0,.2,1) !important;
  pointer-events: none !important;

  z-index: 5 !important;  /* 👈 fica “atrás” de overlays/botões */
}

/* hover */
.elementor-9220 .elementor-element.elementor-element-bbbdcd4 .qodef-woo-product-inner:hover .qodef-woo-product-image::after{
  opacity: 1 !important;
  transform: translate(-10px, -10px) !important;
}


/* ==========================================================
   OVERLAY + PENA (imagem -> pena -> overlay -> botão)
========================================================== */

/* palco */
.elementor-9220 .elementor-element.elementor-element-bbbdcd4 .qodef-woo-product-image-inner{
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  text-align: center !important;
  overflow: hidden !important;

  background: transparent !important;
}

/* PENA */
.elementor-9220 .elementor-element.elementor-element-bbbdcd4 .qodef-woo-product-image-inner::before{
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 52% !important;

  width: 150px !important;
  height: 150px !important;

  background: url("https://ninestudentliving.com/wp-content/uploads/2026/02/pena.svg") no-repeat center !important;
  background-size: contain !important;
  filter: brightness(0) invert(1) !important;

  /* ⚠️ sem !important no transform (para a animação funcionar) */
  transform: translate(-50%, -50%) rotate(-8deg);

  opacity: 0 !important;
  z-index: 1 !important;
  pointer-events: none !important;

  will-change: transform, opacity;
  transition: opacity .35s ease !important;
}

/* OVERLAY */
.elementor-9220 .elementor-element.elementor-element-bbbdcd4 .qodef-woo-product-image-inner::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.25) !important;
  opacity: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;
  transition: opacity .35s ease !important;
}

/* hover ativa overlay + pena */
.elementor-9220 .elementor-element.elementor-element-bbbdcd4 .qodef-woo-product-inner:hover .qodef-woo-product-image-inner::after{
  opacity: 1 !important;
}

.elementor-9220 .elementor-element.elementor-element-bbbdcd4 .qodef-woo-product-inner:hover .qodef-woo-product-image-inner::before{
  opacity: 1 !important;
  animation: qodefFeatherFloat 3s ease-in-out infinite !important;
}

/* flutuar */
@keyframes qodefFeatherFloat{
  0%,100% { transform: translate(-50%, -50%) translateY(6px) rotate(-8deg); }
  50%     { transform: translate(-50%, -50%) translateY(-10px) rotate(-6deg); }
}


/* ==========================================================
   4) BOTÃO "Ler mais" — outlined branco + losangos a percorrer a borda
========================================================== */
.elementor-9220 .elementor-element.elementor-element-bbbdcd4 .qodef-woo-product-image-inner > a.button{
  position: relative !important;
  z-index: 2 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 14px 40px !important;
  border: 1px solid #ffffff !important;
  background: transparent !important;
  color: #ffffff !important;

  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  font-weight: 600 !important;
  line-height: 1 !important;

  border-radius: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;

  transition: background .35s ease, color .35s ease, border-color .35s ease !important;
}

/* ==========================================================
   LOSANGOS — trocam de canto pela borda (1x) com TRANSITIONS
   Rota correta: TL->TR->BR e BR->BL->TL (não se encontram)
========================================================== */

.elementor-9220 .elementor-element.elementor-element-bbbdcd4 .qodef-woo-product-image-inner > a.button{
  position: relative !important;
  overflow: visible !important;
}

/* Base */
.elementor-9220 .elementor-element.elementor-element-bbbdcd4 .qodef-woo-product-image-inner > a.button::before,
.elementor-9220 .elementor-element.elementor-element-bbbdcd4 .qodef-woo-product-image-inner > a.button::after{
  content: "" !important;
  position: absolute !important;

  width: 5px !important;
  height: 5px !important;
  background: #ffffff !important;

  transform: rotate(45deg) !important;
  pointer-events: none !important;

  box-shadow: none !important;
  outline: none !important;

  right: auto !important;
  bottom: auto !important;

  /* 2 etapas: primeiro 1 eixo, depois o outro */
  transition-property: top, left, transform !important;
  transition-duration: .35s, .35s, .35s !important;
  transition-timing-function: cubic-bezier(.4,0,.2,1) !important;
}

/* Início: TL */
.elementor-9220 .elementor-element.elementor-element-bbbdcd4 .qodef-woo-product-image-inner > a.button::before{
  top: -4px !important;
  left: -4px !important;

  /* TL -> TR (mexe left) primeiro, depois TR -> BR (mexe top) */
  transition-delay: .35s, 0s, 0s !important; /* top atrasado, left imediato */
}

/* Início: BR (com top/left, sem bottom/right) */
.elementor-9220 .elementor-element.elementor-element-bbbdcd4 .qodef-woo-product-image-inner > a.button::after{
  top: calc(100% - 1px) !important;
  left: calc(100% - 1px) !important;

  /* BR -> BL (mexe left) primeiro, depois BL -> TL (mexe top) */
  transition-delay: .35s, 0s, 0s !important; /* top atrasado, left imediato */
}

/* HOVER NO PRODUTO */
.elementor-9220 .elementor-element.elementor-element-bbbdcd4 .qodef-woo-product-inner:hover .qodef-woo-product-image-inner > a.button::before{
  /* Destino final: BR */
  left: calc(100% - 1px) !important;          /* 1ª etapa: TL -> TR */
  top:  calc(100% - 1px) !important;          /* 2ª etapa: TR -> BR */
  transform: rotate(225deg) !important;
}

.elementor-9220 .elementor-element.elementor-element-bbbdcd4 .qodef-woo-product-inner:hover .qodef-woo-product-image-inner > a.button::after{
  /* Destino final: TL */
  left: -4px !important;                      /* 1ª etapa: BR -> BL */
  top:  -4px !important;                      /* 2ª etapa: BL -> TL */
  transform: rotate(-135deg) !important;
}


/* ==========================================================
   5) TIPOGRAFIA
========================================================== */
.elementor-9220 .elementor-element.elementor-element-bbbdcd4 .qodef-woo-product-title,
.elementor-9220 .elementor-element.elementor-element-bbbdcd4 .qodef-woo-product-title a{
  font-family: "Playfair Display", serif !important;
  color: #06445e !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}

/* PREÇO PRODUTOS – Dreams Boutique */
.elementor-9220 .elementor-element.elementor-element-bbbdcd4 .qodef-woo-product-price,
.elementor-9220 .elementor-element.elementor-element-bbbdcd4 .qodef-woo-product-price .price,
.elementor-9220 .elementor-element.elementor-element-bbbdcd4 .qodef-woo-product-price .amount,
.elementor-9220 .elementor-element.elementor-element-bbbdcd4 .qodef-woo-product-price span{
  font-family: 'Playfair Display', serif !important;
  font-weight: 700 !important;
  color: #1799b4 !important;
  letter-spacing: 0.04em !important;
}


/* TÍTULO EM CIMA, PREÇO POR BAIXO */
.elementor-9220 .elementor-element.elementor-element-bbbdcd4 .qodef-woo-product-heading{
  display: flex !important;
  flex-direction: column !important;   /* empilha vertical */
  align-items: flex-start !important;  /* alinha à esquerda */
  gap: 6px !important;                 /* espaço entre nome e preço */
}

/* garante que o preço não fica inline */
.elementor-9220 .elementor-element.elementor-element-bbbdcd4 .qodef-woo-product-price{
  display: block !important;
}


/* ==========================================================
   6) FIX FINAL — botão à frente de TUDO (sem mexer em mais nada)
========================================================== */

/* apanha o botão mesmo quando NÃO é filho direto de .qodef-woo-product-image-inner */
.elementor-9220 .elementor-element.elementor-element-bbbdcd4 .qodef-woo-product-image-inner a.button,
.elementor-9220 .elementor-element.elementor-element-bbbdcd4 .qodef-woo-product-image-inner .button,
.elementor-9220 .elementor-element.elementor-element-bbbdcd4 .qodef-woo-product-image-inner .qodef-m-button,
.elementor-9220 .elementor-element.elementor-element-bbbdcd4 .qodef-woo-product-image-inner .qodef-m-button-inner{
  position: relative !important;
  z-index: 999 !important; /* 👈 fica acima do overlay (2) e da moldura (5) */
}/* End custom CSS */