.elementor-kit-13{--e-global-color-primary:#E0A449;--e-global-color-secondary:#232323;--e-global-color-text:#232323;--e-global-color-accent:#D89616;--e-global-color-aeed407:#F6F1E6;--e-global-color-a64b73f:#E9D6AB;--e-global-color-b538957:#F3CFAE;--e-global-color-0a6f38d:#CFA245;--e-global-color-07fe893:#1D0101;--e-global-typography-primary-font-family:"Amoria";--e-global-typography-primary-font-weight:400;--e-global-typography-secondary-font-family:"Amoria";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Poppins";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Poppins";--e-global-typography-accent-font-weight:400;background-color:#F6F1E6;color:#232323;font-family:"Poppins", Sans-serif;}.elementor-kit-13 button,.elementor-kit-13 input[type="button"],.elementor-kit-13 input[type="submit"],.elementor-kit-13 .elementor-button{background-color:#E0A449;font-family:"Poppins", Sans-serif;font-size:16px;font-weight:400;text-transform:uppercase;line-height:1em;color:#1D0101;border-style:none;border-radius:100px 100px 100px 100px;padding:14px 36px 14px 36px;}.elementor-kit-13 button:hover,.elementor-kit-13 button:focus,.elementor-kit-13 input[type="button"]:hover,.elementor-kit-13 input[type="button"]:focus,.elementor-kit-13 input[type="submit"]:hover,.elementor-kit-13 input[type="submit"]:focus,.elementor-kit-13 .elementor-button:hover,.elementor-kit-13 .elementor-button:focus{background-color:#E0A449;color:#1D0101;border-style:none;border-radius:100px 100px 100px 100px;}.elementor-kit-13 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-13 button,.elementor-kit-13 input[type="button"],.elementor-kit-13 input[type="submit"],.elementor-kit-13 .elementor-button{font-size:15px;padding:13px 32px 13px 32px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-13 button,.elementor-kit-13 input[type="button"],.elementor-kit-13 input[type="submit"],.elementor-kit-13 .elementor-button{font-size:18px;padding:14px 32px 14px 32px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ===== Zarbafti – Site Settings > Custom CSS (v7.1, 2026-10-25: + Trilogy & Testers cards; Testers normal height, lighter fade) =====
   Fades are drawn by our own ::after layers, so they do NOT depend on Elementor's
   background-overlay settings. Classes used (all already present on the live DOM):
     .zb-header      header container (template 34)
     .zb-menu        Nav Menu widget (hamburger)      .zb-logo  logo image widget
     .zb-cart        Menu Cart widget
     .zb-hero        Hero container (page 48)        .zb-gold  <span> inside hero heading
     .zb-sahar       Sahar outer container            .zb-sahar-card  Sahar card (inner container)
     .zb-btn-gold    "See Sahar!" / "See Ufaq!" / "See Shaam!" button widgets
     v6 scent cards (shared by Sahar, Ufaq, Shaam):
     .zb-scent       outer container of a scent section   .zb-scent-card  the card (inner container)
     .zb-scent-title / .zb-scent-text   heading widgets inside the card
     .zb-scent-card--photo-left   desktop: photo left, text right-aligned (Ufaq)
     .zb-scent-card--dark         dark card: fades into #1D0101 (Shaam)
     .zb-ufaq / .zb-ufaq-card / .zb-ufaq-title / .zb-ufaq-text      Ufaq section (crop/colour vars)
     .zb-shaam / .zb-shaam-card / .zb-shaam-title / .zb-shaam-text  Shaam section (crop/colour vars)
     v7 (step 3):
     .zb-scent-card--stacked      desktop: photo across the whole card, text centred at the bottom,
                                  vertical fade (Trilogy; v7.1 Testers uses --photo-left)
     .zb-scent-card--tall         desktop: card 1.38x the scent-card height (Trilogy only)
     .zb-trilogy / .zb-trilogy-card / .zb-trilogy-title / .zb-trilogy-text   Trilogy section (black card)
     .zb-testers / .zb-testers-card / .zb-testers-title / .zb-testers-text   Testers = "The Discovery Set" (ivory card)
     .zb-m-br        <br> that only breaks on mobile (hidden ≥768px)
     Sahar keeps its own classes (.zb-sahar…); every shared rule lists them, so Sahar renders as before. */

/* 1. Amoria @font-face fallback (Custom Fonts upload is the primary source) */
@font-face{
  font-family:"Amoria";
  src:url("https://zarbafti.com/wp-content/uploads/2026/10/amoria-1.woff2") format("woff2"),
      url("https://zarbafti.com/wp-content/uploads/2026/10/amoria-1.woff") format("woff");
  font-weight:400;font-style:normal;font-display:swap;
}

/* 2. Transparent header overlaid on the first section of every page */
body{background-color:#f6f1e6;}
.elementor-location-header{position:absolute;top:0;left:0;width:100%;z-index:99;}
.admin-bar .elementor-location-header{top:32px;}
@media (max-width:782px){.admin-bar .elementor-location-header{top:46px;}}
.elementor-element.zb-header{position:absolute !important;top:0;left:0;width:100% !important;background:transparent !important;z-index:99;}
.zb-menu .elementor-menu-toggle{background:transparent !important;border:0 !important;padding:0 !important;color:#f6f1e6;}
.zb-menu .elementor-menu-toggle svg{fill:#f6f1e6;}
.zb-menu .elementor-nav-menu--dropdown{background:#f6f1e6;}
.zb-cart .elementor-menu-cart__toggle .elementor-button{background:transparent !important;border:0 !important;padding:0 !important;color:#fff;}
.zb-cart .elementor-menu-cart__toggle .elementor-button-text{display:none !important;}
.zb-cart .elementor-menu-cart__toggle .elementor-button-icon{color:#fff;}
.zb-cart .elementor-menu-cart__toggle .elementor-button-icon svg{fill:#fff;}
.zb-cart{display:flex;justify-content:flex-end;}

/* 3. Hero heading gold word */
.zb-hero .zb-gold,.zb-gold{color:#d89616 !important;}

/* 4. Fade layers – shared setup: content above, fade layer between bg and content */
.elementor-element.zb-hero,
.elementor-element:is(.zb-sahar-card,.zb-scent-card){position:relative;}
.elementor-element.zb-hero > .elementor-element,
.elementor-element.zb-hero > .e-con-inner,
.elementor-element:is(.zb-sahar-card,.zb-scent-card) > .elementor-element,
.elementor-element:is(.zb-sahar-card,.zb-scent-card) > .e-con-inner{position:relative;z-index:2;}

/* 4b. Scent cards – per-card settings (v6). Defaults = Sahar (white card, unchanged values).
   --zb-card-bg / --zb-fade-rgb   card colour and the colour the photo fades into (same colour, as r,g,b)
   --zb-m-*                       mobile crop of the photo + vertical fade (stops are % of photo height)
   --zb-photo-x/-y                desktop crop of the photo inside its 66% box                */
.elementor-element:is(.zb-sahar-card,.zb-scent-card){
  --zb-card-bg:#fff;--zb-fade-rgb:255,255,255;
  --zb-m-bg-size:131.8% auto;--zb-m-bg-pos:64% -12px;--zb-m-fade-top:-12px;--zb-m-fade-ratio:1000/879;
  --zb-m-fade-a:64%;--zb-m-fade-b:85%;--zb-m-fade-c:98%;
  --zb-photo-x:50%;--zb-photo-y:45%;
}
.elementor-element.zb-ufaq-card{                                           /* cream card, photo zoomed 138.4% */
  --zb-card-bg:#f7ebd5;--zb-fade-rgb:247,235,213;
  --zb-m-bg-size:138.4% auto;--zb-m-bg-pos:50% -19.5px;--zb-m-fade-top:-19.5px;--zb-m-fade-ratio:1000/923;
  --zb-m-fade-a:66%;--zb-m-fade-b:84%;--zb-m-fade-c:96%;
  --zb-photo-x:50%;--zb-photo-y:62%;
}
.elementor-element.zb-shaam-card{                                          /* dark card, photo zoomed 135.7% */
  --zb-card-bg:#1d0101;--zb-fade-rgb:29,1,1;
  --zb-m-bg-size:135.66% auto;--zb-m-bg-pos:33.5% -19.6px;--zb-m-fade-top:-19.6px;--zb-m-fade-ratio:1000/904;
  --zb-m-fade-a:58%;--zb-m-fade-b:80%;--zb-m-fade-c:96%;
  --zb-photo-x:50%;--zb-photo-y:55%;
}
.elementor-element.zb-trilogy-card{                                       /* v7: black card, photo 109.7% wide, flush top */
  --zb-card-bg:#000;--zb-fade-rgb:0,0,0;
  --zb-m-bg-size:109.7% auto;--zb-m-bg-pos:50% 0px;--zb-m-fade-top:0px;--zb-m-fade-ratio:1000/757;
  --zb-m-fade-a:43%;--zb-m-fade-b:88%;--zb-m-fade-c:97%;
  --zb-photo-x:50%;--zb-photo-y:0%;--zb-d-text-em:39.5;   /* desktop text width in em */
}
.elementor-element.zb-testers-card{                                       /* v7: ivory card (= page colour), photo 108.3% wide */
  --zb-card-bg:#f6f1e6;--zb-fade-rgb:246,241,230;
  --zb-m-bg-size:108.3% auto;--zb-m-bg-pos:82.9% 0px;--zb-m-fade-top:0px;--zb-m-fade-ratio:1000/722;
  --zb-m-fade-a:60%;--zb-m-fade-b:85%;--zb-m-fade-c:96%;
  --zb-photo-x:50%;--zb-photo-y:100%;--zb-d-text-em:38.2;
}

/* 5. MOBILE (≤767px) – exact mockup crop + fades */
@media (max-width:767px){
  /* Hero: v5 wide photo (1920x1080) zoomed to 167% width so the bottles match the approved crop
     (was 128% / 45% with the 1920x1409 photo), flush to the top (v5.1: was 6px, left an ivory bar), melting into ivory */
  .elementor-element.zb-hero.e-con{
    background-color:#f6f1e6 !important;
    background-size:166.995% auto !important;
    background-position:47.902% 0px !important;
    background-repeat:no-repeat !important;
  }
  .elementor-element.zb-hero.e-con::before{display:none !important;}      /* Elementor overlay off */
  .elementor-element.zb-hero.e-con::after{
    content:"";position:absolute;left:0;top:0;width:100%;
    aspect-ratio:1000/939;                                                   /* = photo height (unchanged in v5) */
    background:linear-gradient(180deg,rgba(246,241,230,0) 0%,rgba(246,241,230,0) 71%,
               rgba(246,241,230,.65) 87%,#f6f1e6 97%,#f6f1e6 100%);
    pointer-events:none;z-index:1;
  }
  /* Scent cards (Sahar, Ufaq, Shaam): photo on top, melting into the card colour.
     Sahar: 131.8% width, 12px up, white. Ufaq / Shaam: values in 4b. */
  .elementor-element:is(.zb-sahar-card,.zb-scent-card).e-con{
    background-color:var(--zb-card-bg) !important;
    background-size:var(--zb-m-bg-size) !important;
    background-position:var(--zb-m-bg-pos) !important;
    background-repeat:no-repeat !important;
    overflow:hidden !important;
  }
  .elementor-element:is(.zb-sahar-card,.zb-scent-card).e-con::before{display:none !important;}
  .elementor-element:is(.zb-sahar-card,.zb-scent-card).e-con::after{
    content:"";position:absolute;left:0;top:var(--zb-m-fade-top);width:100%;
    aspect-ratio:var(--zb-m-fade-ratio);                                     /* = photo height at the zoom used */
    background:linear-gradient(180deg,rgba(var(--zb-fade-rgb),0) 0%,rgba(var(--zb-fade-rgb),0) var(--zb-m-fade-a),
               rgba(var(--zb-fade-rgb),.5) var(--zb-m-fade-b),rgb(var(--zb-fade-rgb)) var(--zb-m-fade-c),rgb(var(--zb-fade-rgb)) 100%);
    pointer-events:none;z-index:1;
  }
  .elementor-element.zb-scent-card.e-con::after{box-sizing:content-box;padding-bottom:6px;}   /* fade runs 6px past the photo: no seam at its last pixel row */
}

/* 6. TABLET + DESKTOP (≥768px) – v4 "standard premium" sizing (25 Oct 2026, after owner feedback:
   smaller type/icons, hero title + subtitle visible on the first screen together with the bottles).
   Everything here is inside min-width:768px, so the approved mobile layout (≤767px) cannot change.
   PHOTOS: no photo URL is written here. Hero and Sahar photos stay the Elementor background images
   of their containers. On ≥768px the container's own copy is hidden (background-size:0 0) and the
   same image is re-drawn on ::before via background-image:inherit with cover-cropping, so any
   replacement photo, of any shape, fills its box and the fades line up. */
@media (min-width:768px){
  /* 6a. Header: ~84px tall, 27px hamburger, 24px cart, logo 170–240px */
  .elementor-element.zb-header{
    --min-height:clamp(72px,5.8vw,90px) !important;min-height:clamp(72px,5.8vw,90px) !important;
    padding-left:clamp(24px,3.3vw,64px) !important;padding-right:clamp(24px,3.3vw,64px) !important;
  }
  .elementor-element.zb-menu{
    --nav-menu-icon-size:27px !important;
    --container-widget-width:27px !important;width:27px !important;max-width:27px !important;
  }
  .zb-menu .elementor-menu-toggle{font-size:27px !important;}
  .zb-menu .elementor-menu-toggle svg{width:27px !important;height:auto !important;}
  .elementor-element.zb-logo img{width:clamp(170px,14.5vw,240px) !important;max-width:none !important;}
  .zb-menu .elementor-menu-toggle svg,
  .zb-cart .elementor-menu-cart__toggle .elementor-button-icon svg{filter:drop-shadow(0 0 1px rgba(35,35,35,.45)) drop-shadow(0 1px 3px rgba(35,35,35,.3));}  /* stays legible on light areas */
  .elementor-element.zb-cart{
    --toggle-icon-size:24px !important;
    --container-widget-width:27px !important;width:27px !important;max-width:27px !important;
  }

  /* 6b. Hero (v5): one screen tall; the wide photo (1920x1080) is drawn with background-size:cover,
     always edge to edge with sky above the caps and the pillars/olive/silk at the sides. Its vertical
     position is calculated: it stays anchored at the top (full sky) when there is room and slides up
     (sky cropped, never past "caps at 4px" and never leaving a gap at the bottom) on short windows,
     so the labels always end above the title. The ivory fade is tied to the same numbers.
     Tuning vars (only needed for a photo of a different shape/composition):
       --zb-hero-ratio  photo height / width (1080/1920 for the current photo)
       --zb-cap / --zb-label / --zb-base  where the caps, label bottoms, glass bottoms sit (0–1 of photo height) */
  .elementor-element.zb-hero{
    --zb-hero-ratio:0.5625;                                                /* v5 wide photo 1080/1920 */
    --zb-cap:0.215;--zb-label:0.73;--zb-base:0.81;
    --zb-ph:max(calc(100vw * var(--zb-hero-ratio)),var(--zb-hh));          /* photo height on screen (cover) */
    --zb-hh:clamp(560px,100vh,calc(73.4vw + 60px));                        /* hero height */
    --zb-f:clamp(44px,min(4.6vw,7.5vh),84px);                              /* title size */
    --zb-s:clamp(18px,1.35vw,22px);                                        /* subtitle size */
    --zb-g:clamp(8px,0.8vw,16px);                                          /* title → subtitle gap */
    --zb-p:clamp(24px,5vh,64px);                                           /* space under subtitle */
    --zb-k:calc(var(--zb-p) + 1.45 * var(--zb-s) + var(--zb-g) + 1.1 * var(--zb-f) + 6px);  /* text block */
    --zb-t:calc(var(--zb-hh) - var(--zb-k));                               /* title top */
    /* photo top: 0 when there is room, up to (hero − photo) on short windows, never above "caps at 4px" */
    --zb-y:max(calc(4px - var(--zb-cap) * var(--zb-ph)),
               max(calc(var(--zb-hh) - var(--zb-ph)),
                   min(0px,calc(var(--zb-t) - var(--zb-base) * var(--zb-ph) - 4px))));
    /* distance from hero bottom to the label bottoms → end of the ivory fade */
    --zb-lb:calc(var(--zb-hh) - var(--zb-y) - var(--zb-label) * var(--zb-ph));
    /* how far the glass bottoms reach below the title top (>0 only on short wide windows) */
    --zb-o:calc(var(--zb-y) + var(--zb-base) * var(--zb-ph) - var(--zb-t));
    /* solid ivory up to here: soft fade normally; on short windows solid behind the whole title,
       so the title never sits on the bottles (their glass bottoms disappear into the ivory) */
    --zb-fa:clamp(calc(var(--zb-k) * 0.45),calc(var(--zb-k) * 0.45 + var(--zb-o) * 3),calc(var(--zb-k) - 0.15 * var(--zb-f)));
    --zb-fe:max(calc(var(--zb-fa) + 16px),min(calc(var(--zb-lb) + 12px),calc(var(--zb-hh) * 0.48)));  /* fully clear here */
  }
  .elementor-element.zb-hero.e-con{
    --min-height:0px !important;
    min-height:var(--zb-hh) !important;
    justify-content:flex-end !important;
    padding:0 3vw var(--zb-p) 3vw !important;
    background-color:#f6f1e6 !important;
    background-size:0 0 !important;background-repeat:no-repeat !important;  /* own copy hidden, see ::before */
  }
  .elementor-element.zb-hero.e-con::before{                                /* the hero photo, full width */
    content:"" !important;display:block !important;
    position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;
    background-color:transparent !important;
    background-image:inherit !important;
    background-size:cover !important;
    background-position:50% var(--zb-y) !important;
    background-repeat:no-repeat !important;
    opacity:1 !important;mix-blend-mode:normal !important;border-radius:0 !important;
    pointer-events:none;z-index:0;
  }
  .elementor-element.zb-hero.e-con::after{                                 /* ivory fade behind the text */
    content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
    background:linear-gradient(0deg,
      #f6f1e6 0px,#f6f1e6 var(--zb-fa),
      rgba(246,241,230,.82) calc(var(--zb-fa) + (var(--zb-fe) - var(--zb-fa)) * .4),
      rgba(246,241,230,.3) calc(var(--zb-fa) + (var(--zb-fe) - var(--zb-fa)) * .75),
      rgba(246,241,230,0) var(--zb-fe)) 0 0/100% 100% no-repeat;
  }
  .elementor-element.zb-hero-title{max-width:94vw !important;}
  .elementor-element.zb-hero-title .elementor-heading-title{font-size:var(--zb-f) !important;line-height:1.1em !important;}
  .elementor-element.zb-hero-sub{
    --container-widget-width:auto !important;width:auto !important;max-width:90vw !important;
    margin-top:var(--zb-g) !important;
  }
  .elementor-element.zb-hero-sub .elementor-heading-title{font-size:var(--zb-s) !important;line-height:1.45em !important;}

  /* 6c. Scent cards (Sahar, Ufaq, Shaam): wide card (max 1440px), photo in a 66% box, fade from the text side.
     Sahar = text left / photo right / white. Ufaq = --photo-left (text right) / cream. Shaam = text left / dark. */
  .elementor-element.zb-scent .zb-m-br,.zb-m-br{display:none;}             /* mobile-only line breaks */
  .elementor-element:is(.zb-sahar,.zb-scent).e-con{
    padding-left:max(clamp(24px,3.3vw,64px),calc((100vw - 1440px)/2)) !important;
    padding-right:max(clamp(24px,3.3vw,64px),calc((100vw - 1440px)/2)) !important;
    padding-top:clamp(16px,2vw,40px) !important;padding-bottom:clamp(24px,3vw,56px) !important;
  }
  .elementor-element.zb-scent.e-con{padding-top:0 !important;}             /* gap to the card above = its bottom padding */
  .elementor-element:is(.zb-sahar-card,.zb-scent-card).e-con{
    --min-height:0px !important;min-height:clamp(400px,36vw,560px) !important;
    justify-content:center !important;align-items:flex-start !important;
    padding:clamp(40px,4.4vw,72px) clamp(32px,4vw,72px) !important;
    --border-radius:clamp(24px,2.6vw,44px) !important;border-radius:clamp(24px,2.6vw,44px) !important;
    overflow:hidden !important;
    background-color:var(--zb-card-bg) !important;
    background-size:0 0 !important;background-repeat:no-repeat !important;  /* own copy hidden, see ::before */
  }
  .elementor-element:is(.zb-sahar-card,.zb-scent-card).e-con::before{      /* photo box: right 66% of the card */
    content:"" !important;display:block !important;
    position:absolute !important;inset:0 0 0 34% !important;width:auto !important;height:auto !important;
    background-color:transparent !important;
    background-image:inherit !important;
    background-size:cover !important;background-position:var(--zb-photo-x) var(--zb-photo-y) !important;background-repeat:no-repeat !important;
    opacity:1 !important;mix-blend-mode:normal !important;border-radius:0 !important;
    pointer-events:none;z-index:0;
  }
  .elementor-element:is(.zb-sahar-card,.zb-scent-card).e-con::after{       /* fade from the text side */
    content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
    background:linear-gradient(90deg,rgb(var(--zb-fade-rgb)) 0%,rgb(var(--zb-fade-rgb)) 36%,rgba(var(--zb-fade-rgb),.6) 44%,
               rgba(var(--zb-fade-rgb),.25) 52%,rgba(var(--zb-fade-rgb),.07) 59%,rgba(var(--zb-fade-rgb),0) 65%);
  }
  .elementor-element:is(.zb-sahar-title,.zb-scent-title),
  .elementor-element:is(.zb-sahar-text,.zb-scent-text){
    --container-widget-width:clamp(340px,34vw,500px) !important;
    width:clamp(340px,34vw,500px) !important;max-width:clamp(340px,34vw,500px) !important;
    text-align:left !important;
  }
  .elementor-element:is(.zb-sahar-title,.zb-scent-title) .elementor-heading-title{font-size:clamp(40px,4vw,64px) !important;line-height:1.05em !important;text-align:left !important;}
  .elementor-element:is(.zb-sahar-text,.zb-scent-text){margin-top:clamp(14px,1.3vw,22px) !important;}
  .elementor-element:is(.zb-sahar-text,.zb-scent-text) .elementor-heading-title{font-size:clamp(16px,1.15vw,18px) !important;line-height:1.6em !important;text-align:left !important;}
  .elementor-element:is(.zb-sahar-card,.zb-scent-card) .elementor-element.zb-btn-gold{
    --container-widget-width:fit-content !important;width:fit-content !important;max-width:none !important;
    margin-top:clamp(22px,2.2vw,36px) !important;align-self:flex-start !important;
  }
  .elementor-element:is(.zb-sahar-card,.zb-scent-card) .zb-btn-gold .elementor-button{
    font-size:clamp(16px,1.1vw,18px) !important;line-height:1em !important;
    padding:clamp(13px,0.95vw,15px) clamp(32px,2.5vw,40px) !important;
  }
  /* photo-left modifier (Ufaq): mirror the card – photo box on the left, fade from the right, text right-aligned */
  .elementor-element.zb-scent-card.zb-scent-card--photo-left.e-con{align-items:flex-end !important;}
  .elementor-element.zb-scent-card.zb-scent-card--photo-left.e-con::before{inset:0 34% 0 0 !important;}
  .elementor-element.zb-scent-card.zb-scent-card--photo-left.e-con::after{
    background:linear-gradient(270deg,rgb(var(--zb-fade-rgb)) 0%,rgb(var(--zb-fade-rgb)) 36%,rgba(var(--zb-fade-rgb),.6) 44%,
               rgba(var(--zb-fade-rgb),.25) 52%,rgba(var(--zb-fade-rgb),.07) 59%,rgba(var(--zb-fade-rgb),0) 65%);
  }
  .zb-scent-card--photo-left .elementor-element.zb-scent-title,
  .zb-scent-card--photo-left .elementor-element.zb-scent-text,
  .zb-scent-card--photo-left .elementor-element.zb-scent-title .elementor-heading-title,
  .zb-scent-card--photo-left .elementor-element.zb-scent-text .elementor-heading-title{text-align:right !important;}
  .elementor-element.zb-scent-card--photo-left .elementor-element.zb-btn-gold{align-self:flex-end !important;}
  /* v7 stacked modifier (Trilogy): photo over the whole card (cover, crop via --zb-photo-x/-y),
     fading down into the card colour; title, text and button centred at the bottom */
  .elementor-element.zb-scent-card.zb-scent-card--stacked.e-con{
    justify-content:flex-end !important;align-items:center !important;
    padding-bottom:clamp(28px,2.6vw,48px) !important;
  }
  .elementor-element.zb-scent-card.zb-scent-card--tall.e-con{min-height:clamp(552px,49.7vw,773px) !important;}  /* 1.38x the scent cards */
  .elementor-element.zb-scent-card.zb-scent-card--stacked.e-con::before{inset:0 !important;}
  .elementor-element.zb-scent-card.zb-scent-card--stacked.e-con::after{
    background:linear-gradient(180deg,rgba(var(--zb-fade-rgb),0) 0%,rgba(var(--zb-fade-rgb),0) 5%,rgba(var(--zb-fade-rgb),.06) 14%,
               rgba(var(--zb-fade-rgb),.2) 27%,rgba(var(--zb-fade-rgb),.42) 41%,rgba(var(--zb-fade-rgb),.7) 54%,
               rgba(var(--zb-fade-rgb),.9) 63%,rgb(var(--zb-fade-rgb)) 69%,rgb(var(--zb-fade-rgb)) 100%);
  }
  .zb-scent-card--stacked .elementor-element.zb-scent-title{
    --container-widget-width:100% !important;width:100% !important;max-width:100% !important;text-align:center !important;
  }
  .zb-scent-card--stacked .elementor-element.zb-scent-text{
    --container-widget-width:calc(var(--zb-d-text-em,38.2) * clamp(16px,1.15vw,18px)) !important;width:calc(var(--zb-d-text-em,38.2) * clamp(16px,1.15vw,18px)) !important;max-width:100% !important;text-align:center !important;
  }
  .zb-scent-card--stacked .elementor-element.zb-scent-title .elementor-heading-title,
  .zb-scent-card--stacked .elementor-element.zb-scent-text .elementor-heading-title{text-align:center !important;}
  .elementor-element.zb-scent-card--stacked .elementor-element.zb-btn-gold{align-self:center !important;}
  /* v7.1 Testers ("The Discovery Set"): normal scent-card height, photo-left layout like Ufaq (photo box = left 66%).
     The fade is narrower and lighter than Ufaq's: solid ivory only behind the text column (column + card padding),
     then gone within ~12% of the card width, so the box and the three bottles read clearly */
  .elementor-element.zb-testers-card.zb-scent-card--photo-left.e-con::after{
    background:linear-gradient(270deg,rgb(var(--zb-fade-rgb)) 0px,rgb(var(--zb-fade-rgb)) calc(clamp(340px,34vw,500px) + clamp(32px,4vw,72px) + 8px),
               rgba(var(--zb-fade-rgb),.8) calc(clamp(340px,34vw,500px) + clamp(32px,4vw,72px) + 2%),rgba(var(--zb-fade-rgb),.45) calc(clamp(340px,34vw,500px) + clamp(32px,4vw,72px) + 5%),
               rgba(var(--zb-fade-rgb),.15) calc(clamp(340px,34vw,500px) + clamp(32px,4vw,72px) + 9%),rgba(var(--zb-fade-rgb),0) calc(clamp(340px,34vw,500px) + clamp(32px,4vw,72px) + 13%));
  }
  .zb-testers-card .elementor-element.zb-scent-title .elementor-heading-title{   /* "The Discovery Set" on one line */
    font-size:clamp(32px,3.3vw,52px) !important;white-space:nowrap !important;
  }

  /* 6d. WooCommerce buttons: standard desktop/tablet size (mobile keeps section 8 values) */
  .woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,
  .woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,
  .woocommerce-page a.button,.woocommerce-page button.button,
  .woocommerce .single_add_to_cart_button,
  .wc-block-components-button:not(.is-link),
  .wp-block-woocommerce-product-button .wp-block-button__link,
  .wc-block-grid__product-add-to-cart .wp-block-button__link{
    font-size:16px !important;padding:14px 36px !important;
  }
  .woocommerce a.checkout-button,.wc-block-cart__submit-button,.wc-block-components-checkout-place-order-button{
    font-size:17px !important;padding:16px 40px !important;
  }
}

/* 7. GOLD BUTTON – SITE-WIDE DEFAULT. 3-stop brand gradient + grain baked into the background.
   Applies to every Elementor Button widget, Elementor Form submit, mini-cart footer buttons and
   WooCommerce buttons. .zb-btn-gold stays as an explicit alias (add it to anything else).
   The header cart icon (.zb-cart / .elementor-menu-cart__toggle) is deliberately NOT included.
   Typography/radius/padding of Elementor buttons come from Site Settings > Buttons. */
.zb-btn-gold .elementor-button,
.elementor-widget-button.zb-btn-gold .elementor-button,
.elementor-element.zb-btn-gold a.elementor-button,
a.elementor-button.zb-btn-gold,
.zb-btn-gold.elementor-button,
.elementor-widget-button .elementor-button,
.elementor-widget-form .elementor-button,
.elementor-menu-cart__footer-buttons .elementor-button,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,
.woocommerce-page a.button,.woocommerce-page button.button,
.woocommerce a.checkout-button,.woocommerce .single_add_to_cart_button,
.wc-block-components-button:not(.is-link),
.wp-block-woocommerce-product-button .wp-block-button__link,
.wc-block-grid__product-add-to-cart .wp-block-button__link{
  background-color:#e0a449 !important;
  background-image:url("https://zarbafti.com/wp-content/uploads/2026/10/zarbafti-gold-grain.webp"),
                   linear-gradient(90deg,#e9d6ab 0%,#e0a449 36%,#f3cfae 100%) !important;
  background-size:cover,100% 100% !important;
  background-position:center,center !important;
  background-repeat:no-repeat,no-repeat !important;
  background-blend-mode:soft-light,normal !important;
  color:#1d0101 !important;
}
/* low-specificity shape fallback: pill + uppercase even before Site Settings > Buttons is filled in.
   Site Settings (.elementor-kit-13 .elementor-button) and per-widget settings still override it. */
:where(.elementor-widget-button,.elementor-widget-form,.elementor-menu-cart__footer-buttons) .elementor-button{
  border-radius:100px;text-transform:uppercase;font-weight:400;
}
/* alias keeps the v2 block display (removes the inline-block line-box gap inside the Sahar card) */
.zb-btn-gold .elementor-button,
.elementor-widget-button.zb-btn-gold .elementor-button,
.elementor-element.zb-btn-gold a.elementor-button,
a.elementor-button.zb-btn-gold,
.zb-btn-gold.elementor-button{display:block !important;}
.zb-btn-gold .elementor-button::before{content:none !important;display:none !important;}   /* retire v1 pseudo grain */
.zb-btn-gold .elementor-button:hover,
.zb-btn-gold .elementor-button:focus,
.elementor-widget-button .elementor-button:hover,
.elementor-widget-button .elementor-button:focus,
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.wc-block-components-button:not(.is-link):hover{filter:brightness(1.05);color:#1d0101 !important;}

/* 8. WooCommerce buttons don't read Elementor's Site Settings, so give them the same pill here */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,
.woocommerce-page a.button,.woocommerce-page button.button,
.woocommerce a.checkout-button,.woocommerce .single_add_to_cart_button,
.wc-block-components-button:not(.is-link),
.wp-block-woocommerce-product-button .wp-block-button__link,
.wc-block-grid__product-add-to-cart .wp-block-button__link{
  font-family:"Poppins",sans-serif !important;font-weight:400 !important;
  text-transform:uppercase !important;letter-spacing:.02em;
  font-size:clamp(15px,1.05vw,20px) !important;line-height:1 !important;
  border:0 !important;border-radius:100px !important;
  padding:1em 2.2em !important;
  text-shadow:none !important;box-shadow:none !important;
}
.woocommerce a.checkout-button,.wc-block-cart__submit-button,.wc-block-components-checkout-place-order-button{
  font-size:clamp(17px,1.25vw,24px) !important;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Amoria';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://zarbafti.com/wp-content/uploads/2026/10/amoria-1.woff2') format('woff2'),
		url('https://zarbafti.com/wp-content/uploads/2026/10/amoria-1.woff') format('woff');
}
/* End Custom Fonts CSS */