/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.7.1781643010
Updated: 2026-06-16 20:50:10

*/
/* ============================================
   FAQ STYLES
   File: faq-style.css
   Place in: wp-content/themes/hello-elementor-child/
   ============================================ */

*{box-sizing:border-box;}

.faq-wrap{
  display:flex;
  gap:0.75rem;
  background:transparent;
  overflow:visible;
  align-items:flex-start;
}

/* ── LEFT COLUMN ── */
.faq-left{
  width:300px;
  min-width:300px;
  flex-shrink:0;
  background:#ffffff;
  align-self:stretch;
}
.faq-group-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 1.5rem;
  cursor:pointer;
  border-bottom:0.5px solid #e8e8e8;
  width:100%;
}
.faq-group:first-child .faq-group-header{
  padding-top:2rem;
}
.faq-group-icon{
  width:32px;height:32px;
  border-radius:50%;
  border:0.5px solid #bbb5ad;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.faq-group-icon svg{
  width:16px;height:16px;
  stroke:#555;fill:none;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.faq-group-name{
  font-family:'Overpass Mono',monospace;
  font-size:14px;font-weight:400;
  letter-spacing:.04em;text-transform:uppercase;
  color:#1a1a1a;flex:1;
}
.faq-group-chevron{
  width:22px;height:22px;
  stroke:#888;fill:none;
  stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform 500ms ease;
  flex-shrink:0;
  transform:rotate(180deg);
}
.faq-group.open .faq-group-chevron{
  transform:rotate(0deg);
}
.faq-subnav{
  max-height:0;
  overflow:hidden;
  transition:max-height 500ms ease;
  padding-left:1.5rem;
  border-bottom:0.5px solid #e8e8e8;
}
.faq-group.open .faq-subnav{
  max-height:600px;
}
.faq-subnav-inner{
  padding:0.5rem 0 0.75rem 0;
}
.faq-sub-item{
  display:block;
  padding:0.5rem 1rem 0.5rem 0;
  margin-bottom:1rem;
  font-family:'Manrope',sans-serif;
  font-size:14px;font-weight:400;
  color:#696969;
  cursor:pointer;
  line-height:1.4;
}
.faq-sub-item:last-child{margin-bottom:0;}
.faq-sub-item:hover{color:#000;}
.faq-sub-item.active{
  font-weight:700;
  color:#000;
}

/* ── RIGHT COLUMN ── */
.faq-right{
  flex:1;
  padding:0;
  background:#ffffff;
}
.faq-panel{display:none;}
.faq-panel.active{display:block;}

.faq-panel-title{
  font-family:'Overpass Mono',monospace;
  font-size:14px;font-weight:400;
  letter-spacing:.04em;text-transform:uppercase;
  color:#1a1a1a;
  padding:2rem 2rem 1.25rem 2rem;
  margin-bottom:0;
  border-bottom:0.5px solid #e8e8e8;
  width:100%;
  display:block;
}
.faq-item{
  border-bottom:0.5px solid #e8e8e8;
  padding:0 2rem;
}
.faq-q{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 0;
  cursor:pointer;
  font-family:'Manrope',sans-serif;
  font-size:14px;font-weight:700;
  color:#000;
  gap:16px;line-height:1.4;
}
.faq-toggle{
  font-size:28px;font-weight:200;
  color:#000;flex-shrink:0;line-height:1;
  display:inline-block;
}
.faq-a{
  font-family:'Manrope',sans-serif;
  font-size:14px;font-weight:400;
  color:#000;
  line-height:1.7;
  max-height:0;overflow:hidden;
  transition:max-height 500ms cubic-bezier(0.4,0,0.2,1), padding 500ms cubic-bezier(0.4,0,0.2,1);
}
.faq-a p{margin:0;}
.faq-item.open .faq-a{
  max-height:300px;
  padding-bottom:18px;
}

/* ── TABLET (max 900px) ── */
@media(max-width:900px){
  .faq-wrap{flex-direction:column;gap:1rem;}
  .faq-left{width:100%;min-width:unset;}
  .faq-group:first-child .faq-group-header{padding-top:14px;}
  .faq-right{padding:0;}
}

/* ── MOBILE (max 560px) ── */
@media(max-width:560px){
  .faq-group-name{font-size:13px;}
  .faq-sub-item{font-size:13px;margin-bottom:0.75rem;}
  .faq-panel-title{font-size:13px;}
  .faq-q{font-size:13px;padding:14px 0;}
  .faq-a{font-size:13px;}
}

/* ============================================================
   SPOLIA — Collection page CSS, consolidated v4
   Changes from v3:
   - 4 columns per row (was 3)
   - Quick-add panel max-height increased to cover ~75% of image
   - Bag icon repositioned to align with title/price text row
   ============================================================ */


/* ════════════════════════════════════════════════════════════
   FILTER SIDEBAR
   ════════════════════════════════════════════════════════════ */

.spolia-filter-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 510px;
    max-width: 90vw;
    background: #fff;
    border-left: 0.5px solid #d4c9b4;
    transform: translateX(100%);
    transition: transform .4s ease;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.spolia-filter-panel.open {
    transform: translateX(0);
}

.spolia-filter-panel .sb-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    padding: 2rem 2rem 1.5rem 2rem;
}
.spolia-filter-panel .sb-head h2 {
    font-family: 'Overpass Mono', monospace;
    font-weight: 400;
    font-size: 16px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #1a1a1a;
    margin: 0;
}
.spolia-filter-panel .sb-close,
.spolia-filter-panel .sb-close:hover,
.spolia-filter-panel .sb-close:focus {
    background: none !important;
    border: none !important;
    cursor: pointer;
    color: #1a1a1a !important;
    display: flex;
    padding: 0;
}
.spolia-filter-panel .sb-close svg {
    width: 18px;
    height: 18px;
}

.spolia-filter-panel .sb-content {
    flex: 1;
    overflow-y: auto;
    padding: 0 2rem;
}

.sb-section {
    border-bottom: 0.5px solid #e8e2d2;
}
.sb-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    cursor: pointer;
}
.sb-section-head span {
    font-family: 'Overpass Mono', monospace;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #1a1a1a;
}
.sb-section-head svg {
    width: 16px;
    height: 16px;
    transition: transform .25s ease;
    stroke: #1a1a1a;
    fill: none;
}
.sb-section.open .sb-section-head svg {
    transform: rotate(180deg);
}
.sb-section-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}
.sb-section.open .sb-section-body {
    max-height: 600px;
    padding-bottom: .75rem;
}

.sb-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: .45rem 0;
    font-size: 14px;
    color: #1a1a1a;
    font-family: 'Manrope', sans-serif;
    cursor: pointer;
}
.sb-option input[type=checkbox],
.sb-option input[type=radio] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
    accent-color: #1a1a1a !important;
}
.sb-count {
    color: #8a7a62;
    font-size: 11px;
    font-family: 'Overpass Mono', monospace;
}

.sb-color-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px 10px;
    padding: 0.5rem 0 1rem;
}
.sb-color-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.sb-color-item input[type=checkbox] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.sb-color-swatch {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 0.5px solid rgba(0,0,0,.12);
}
.sb-color-item input:checked + .sb-color-swatch {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}
.sb-color-label {
    font-family: 'Manrope', sans-serif;
    font-size: 11px;
    color: #1a1a1a;
    text-align: center;
    line-height: 1.3;
}
.sb-color-label .sb-count {
    font-size: 10px;
}

.sb-price-slider {
    padding: 0.25rem 0 1rem;
}
.sb-price-labels {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    font-family: 'Overpass Mono', monospace;
    font-size: 12px;
    letter-spacing: .04em;
    color: #1a1a1a;
}
.sb-range-wrap {
    position: relative;
    height: 22px;
    display: flex;
    align-items: center;
}
.sb-range-track {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: #d4c9b4;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}
.sb-range-fill {
    position: absolute;
    height: 100%;
    background: #1a1a1a;
}
.sb-range {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    border: none !important;
    padding: 0;
    margin: 0;
    top: 50%;
    transform: translateY(-50%);
}
.sb-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: all;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #1a1a1a;
    cursor: pointer;
    position: relative;
    z-index: 3;
    border: none;
    box-shadow: none;
}
.sb-range::-webkit-slider-runnable-track {
    background: transparent;
    border: none;
}
.sb-range::-moz-range-thumb {
    pointer-events: all;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #1a1a1a;
    cursor: pointer;
    border: none;
    box-shadow: none;
}
.sb-range::-moz-range-track {
    background: transparent;
    border: none;
}

.spolia-filter-panel .sb-footer {
    flex-shrink: 0;
    display: flex;
    gap: 10px;
    padding: 1.25rem 2rem 1.75rem 2rem;
    border-top: 0.5px solid #e8e2d2;
}
.spolia-filter-panel .sb-clear,
.spolia-filter-panel .sb-clear:hover,
.spolia-filter-panel .sb-clear:focus {
    flex: 1;
    background: #fff !important;
    color: #1a1a1a !important;
    border: 1px solid #1a1a1a !important;
    padding: 13px;
    font-family: 'Overpass Mono', monospace;
    font-size: 11px;
    letter-spacing: .15em;
    text-transform: uppercase;
    cursor: pointer;
}
.spolia-filter-panel .sb-apply,
.spolia-filter-panel .sb-apply:hover,
.spolia-filter-panel .sb-apply:focus {
    flex: 1;
    background-color: #1a1a1a !important;
    color: #faf6ee !important;
    border: none !important;
    padding: 13px;
    font-family: 'Overpass Mono', monospace;
    font-size: 11px;
    letter-spacing: .15em;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 0;
}

.sb-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20,16,8,.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
    z-index: 9998;
}
.sb-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.sb-trigger,
.sb-trigger:hover,
.sb-trigger:focus,
.sb-trigger:active {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: 'Overpass Mono', monospace;
    font-size: 11px;
    letter-spacing: .15em;
    text-transform: uppercase;
    background: none !important;
    background-color: transparent !important;
    color: #1a1a1a !important;
    border: none !important;
    cursor: pointer;
    padding: 0;
}
.sb-trigger svg {
    width: 16px;
    height: 16px;
}
.sb-trigger-count {
    font-size: 10px;
    color: #8a7a62;
}


/* ════════════════════════════════════════════════════════════
   PRODUCT GRID
   ════════════════════════════════════════════════════════════ */

ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 2rem 1.5rem !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 2rem 0 !important;
}
@media (max-width: 1024px) {
    ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem 1rem !important;
    }
}
@media (max-width: 480px) {
    ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem .75rem !important;
    }
}

ul.products li.product {
    display: flex !important;
    flex-direction: column !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    overflow: visible !important;
}

ul.products li.product a.woocommerce-loop-product__link {
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    color: inherit !important;
    flex: 1;
    position: relative !important;
}

ul.products li.product a.woocommerce-loop-product__link img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #f5f2ec !important;
    display: block !important;
    margin: 0 !important;
    padding: 1rem !important;
    transition: opacity .35s ease !important;
}
ul.products li.product a.woocommerce-loop-product__link:hover img {
    opacity: .85 !important;
}

ul.products li.product .woocommerce-loop-product__title {
    font-family: 'Manrope', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: .02em !important;
    color: #1a1a1a !important;
    margin: .85rem 0 .25rem !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

ul.products li.product .price {
    font-family: 'Overpass Mono', monospace !important;
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #8a7a62 !important;
    margin: 0 !important;
    padding: 0 !important;
}
ul.products li.product .price .woocommerce-Price-amount {
    font-family: 'Overpass Mono', monospace !important;
    font-size: 11px !important;
    color: #8a7a62 !important;
}

ul.products li.product .button.add_to_cart_button {
    display: none !important;
}

ul.products.spolia-products-loading {
    opacity: .5 !important;
    pointer-events: none !important;
    transition: opacity .2s ease !important;
}


/* ════════════════════════════════════════════════════════════
   QUICK-ADD PANEL
   ════════════════════════════════════════════════════════════ */

/* Bag icon: vertically centered with the title/price text row.
   The text row starts at .85rem below the image bottom edge.
   Title is ~1.2 lines at 13px = ~19px, price below it ~14px.
   Center of that block is roughly .85rem + 16px from image bottom.
   Button is 38px tall, so its top edge = center - 19px.
   We position bottom edge of button at image bottom (bottom:0
   relative to li.product) then offset up by the text row height
   to visually center it next to title + price. */
.spolia-quickadd-trigger {
    position: absolute !important;
    right: 0 !important;
    /* centers the circle vertically alongside title + price */
    bottom: 0.6rem !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 50% !important;
    border: 0.5px solid #1a1a1a !important;
    background: #faf6ee !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    cursor: pointer !important;
    z-index: 6 !important;
}
.spolia-quickadd-trigger svg {
    width: 18px !important;
    height: 18px !important;
    stroke: #1a1a1a !important;
    fill: none !important;
    display: block !important;
    flex-shrink: 0 !important;
}

/* Dim overlay matches square image aspect ratio */
.spolia-img-dim {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    aspect-ratio: 1 / 1 !important;
    background: rgba(15,12,6,0) !important;
    transition: background .4s ease !important;
    pointer-events: none !important;
    z-index: 2 !important;
}
.spolia-img-dim.show {
    background: rgba(15,12,6,.4) !important;
    pointer-events: auto !important;
}

/* Panel: max-height covers ~75% of the square image.
   At 4 columns on a ~1200px container, each card is ~270px wide,
   image is 270px tall (square), 75% = ~200px.
   Using 240px gives comfortable coverage across screen sizes. */
.spolia-quickadd-panel {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    background: #faf6ee !important;
    border-radius: 14px 14px 0 0 !important;
    transition: max-height .4s ease !important;
    z-index: 5 !important;
}
.spolia-quickadd-panel.open {
    max-height: 240px !important;
}

.spolia-qa-top {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: .85rem .85rem .65rem;
    border-bottom: 0.5px solid #d4c9b4;
}
.spolia-qa-thumb-main {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 3px;
}
.spolia-qa-thumb-main img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    padding: 0 !important;
    background: #e9e3d4 !important;
    aspect-ratio: auto !important;
}
.spolia-qa-info {
    flex: 1;
}
.spolia-qa-name {
    font-family: 'Manrope', sans-serif;
    font-size: 13px;
    line-height: 1.3;
    color: #1a1a1a;
}
.spolia-qa-price {
    font-family: 'Overpass Mono', monospace;
    font-size: 10px;
    color: #8a7a62;
    margin-top: 3px;
}
.spolia-qa-color {
    font-family: 'Overpass Mono', monospace;
    font-size: 10px;
    color: #8a7a62;
    margin-top: 3px;
    text-transform: lowercase;
}
.spolia-qa-close,
.spolia-qa-close:hover,
.spolia-qa-close:focus {
    background: none !important;
    border: none !important;
    cursor: pointer;
    color: #1a1a1a !important;
    display: flex;
    flex-shrink: 0;
    padding: 0;
}
.spolia-qa-close svg {
    width: 15px;
    height: 15px;
}

.spolia-qa-mid {
    padding: .65rem .85rem;
    border-bottom: 0.5px solid #d4c9b4;
}
.spolia-qa-thumb-sub {
    width: 38px;
    height: 38px;
    border-bottom: 2px solid #1a1a1a;
    overflow: hidden;
    border-radius: 3px 3px 0 0;
}
.spolia-qa-thumb-sub img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
}

.spolia-qa-bottom {
    padding: .65rem .85rem;
}
.spolia-qa-cart,
.spolia-qa-cart:hover,
.spolia-qa-cart:focus {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    background: #1a1a1a !important;
    color: #faf6ee !important;
    border: none !important;
    padding: 8px !important;
    font-family: 'Overpass Mono', monospace !important;
    font-size: 9px !important;
    letter-spacing: .12em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    border-radius: 3px !important;
    text-decoration: none !important;
}
.spolia-qa-cart svg {
    width: 12px;
    height: 12px;
}