.elementor-16516 .elementor-element.elementor-element-2f73bbb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-16516 .elementor-element.elementor-element-5eedb541{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:30px 30px;--row-gap:30px;--column-gap:30px;}.elementor-16516 .elementor-element.elementor-element-3c805ed4{--display:flex;}.elementor-16516 .elementor-element.elementor-element-4d76e9f4{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;}.elementor-16516 .elementor-element.elementor-element-74d32353{--display:flex;}.elementor-16516 .elementor-element.elementor-element-300c1e63{width:auto;max-width:auto;}.elementor-16516 .elementor-element.elementor-element-35578a96{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:center;--gap:20px 40px;--row-gap:20px;--column-gap:40px;}.elementor-16516 .elementor-element.elementor-element-64ed5249{width:auto;max-width:auto;}.elementor-16516 .elementor-element.elementor-element-53266b6f{width:auto;max-width:auto;}.elementor-16516 .elementor-element.elementor-element-70b27fe7{width:auto;max-width:auto;}.elementor-16516 .elementor-element.elementor-element-4ca8d26{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}@media(min-width:769px){.elementor-16516 .elementor-element.elementor-element-3c805ed4{--width:100%;}.elementor-16516 .elementor-element.elementor-element-74d32353{--width:25%;}.elementor-16516 .elementor-element.elementor-element-35578a96{--width:75%;}}@media(max-width:1024px) and (min-width:769px){.elementor-16516 .elementor-element.elementor-element-3c805ed4{--width:100%;}.elementor-16516 .elementor-element.elementor-element-74d32353{--width:50%;}.elementor-16516 .elementor-element.elementor-element-35578a96{--width:50%;}}@media(max-width:1024px){.elementor-16516 .elementor-element.elementor-element-5eedb541{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-16516 .elementor-element.elementor-element-4d76e9f4{--margin-top:0px;--margin-bottom:20px;--margin-left:0px;--margin-right:0px;}.elementor-16516 .elementor-element.elementor-element-35578a96{--gap:20px 20px;--row-gap:20px;--column-gap:20px;}}@media(max-width:768px){.elementor-16516 .elementor-element.elementor-element-4d76e9f4{--margin-top:0px;--margin-bottom:15px;--margin-left:0px;--margin-right:0px;}.elementor-16516 .elementor-element.elementor-element-74d32353{--width:70%;}.elementor-16516 .elementor-element.elementor-element-35578a96{--width:30%;}}/* Start custom CSS *//* ============================================================
   AL FAKHER DUBAI — SHOP / ARCHIVE PAGE: "EMBER & CHARCOAL"
   Covers what's unique to the shop archive layout:
   page title banner, category quick-nav, toolbar (per-page /
   view switcher / sort), pagination, and the icon-only
   add-to-cart variant used in this grid's hover-base design.

   Load alongside alfakher-header-custom.css and
   alfakher-homepage-custom.css — most product-card styling
   (price color, title hover, action-icon circles) is already
   inherited from those since this page shares the same
   .wd-product / .wd-action-btn classes.
   ============================================================ */

:root{
  --afk-charcoal:      #1b1714;
  --afk-charcoal-soft: #241e1a;
  --afk-gold:          #c8973a;
  --afk-gold-soft:     rgba(200,151,58,.18);
  --afk-sand:          #f1e8d8;
  --afk-copper:        #e2632a;
  --afk-line:          rgba(27,23,20,.1);
  --afk-font-ui:       'Manrope', 'Segoe UI', -apple-system, sans-serif;
  --afk-font-display:  'Cormorant Garamond', Georgia, serif;
}

/* ============================================================
   PAGE TITLE BANNER  ("Shop" + category quick-nav)
   The theme already renders this section dark with its own
   banner image — we're tuning text/accent colors to match the
   brand rather than fighting the background.
   ============================================================ */
.wd-page-title .entry-title.title{
  font-family: var(--afk-font-ui);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--afk-sand);
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
}
.wd-page-title .entry-title.title::after{
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 48px;
  height: 3px;
  background: linear-gradient(90deg, var(--afk-gold), var(--afk-copper));
  transform: translateX(-50%);
  border-radius: 2px;
}
.wd-page-title .wd-btn-show-cat a{
  color: var(--afk-gold);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: 12px;
}
.wd-page-title .wd-btn-show-cat a:hover{
  color: var(--afk-sand);
}

/* category quick-nav pills */
.wd-nav-product-cat{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.wd-nav-product-cat .category-nav-link{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(241,232,216,.06);
  border: 1px solid rgba(241,232,216,.15);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.wd-nav-product-cat .category-nav-link:hover,
.wd-nav-product-cat li.wd-active .category-nav-link{
  border-color: var(--afk-gold);
  background: var(--afk-gold-soft);
  transform: translateY(-2px);
}
.wd-nav-product-cat .wd-nav-img{
  border-radius: 50%;
  background: var(--afk-charcoal-soft);
  padding: 6px;
}
.wd-nav-product-cat .nav-link-text{
  font-family: var(--afk-font-ui);
  font-weight: 600;
  font-size: 13px;
  color: var(--afk-sand);
  display: block;
}
.wd-nav-product-cat .nav-link-count{
  font-size: 11px;
  color: var(--afk-gold);
  display: block;
}

/* ============================================================
   TOOLBAR  (result count / per-page / view switcher / sort)
   ============================================================ */
.woocommerce-result-count{
  color: var(--afk-charcoal);
  opacity: .65;
  font-size: 13px;
}

/* per-page (9 / 12 / 18 / 24) */
.wd-products-per-page{
  display: flex;
  align-items: center;
  gap: 6px;
}
.wd-products-per-page .wd-label{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .6;
  margin-right: 2px;
}
.wd-products-per-page .per-page-variation{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  color: var(--afk-charcoal);
  transition: background .2s ease, color .2s ease;
}
.wd-products-per-page .per-page-variation:hover{
  background: var(--afk-gold-soft);
  color: var(--afk-copper);
}
.wd-products-per-page .current-variation{
  background: linear-gradient(135deg, var(--afk-gold), var(--afk-copper));
  color: var(--afk-charcoal) !important;
}
.wd-products-per-page .per-page-border{
  width: 1px;
  height: 14px;
  background: var(--afk-line);
}

/* grid/list view switcher */
.wd-products-shop-view{
  display: flex;
  gap: 6px;
}
.wd-products-shop-view .shop-view{
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--afk-line);
  transition: border-color .2s ease, background .2s ease;
}
.wd-products-shop-view .shop-view:hover{
  border-color: var(--afk-gold);
  background: var(--afk-gold-soft);
}

/* sort dropdown */
.woocommerce-ordering select.orderby{
  appearance: none;
  -webkit-appearance: none;
  background: rgba(27,23,20,.04);
  border: 1px solid var(--afk-line);
  border-radius: 999px;
  padding: 8px 32px 8px 16px;
  font-family: var(--afk-font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--afk-charcoal);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c8973a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color .2s ease;
}
.woocommerce-ordering select.orderby:focus{
  outline: none;
  border-color: var(--afk-gold);
}

/* mobile "Show sidebar" toggle */
.wd-off-canvas-btn a{
  color: var(--afk-charcoal);
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: 12px;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
.wd-off-canvas-btn a:hover{
  color: var(--afk-copper);
  border-color: var(--afk-copper);
}

/* ============================================================
   PRODUCT GRID — this layout's specifics
   (card hover, title, category tag, and price color are
   already inherited from the homepage CSS via shared .wd-product
   classes; the additions below cover what's different here)
   ============================================================ */

/* this grid wraps price differently (.wrapp-product-price, not .wrap-price) */
.wd-product .wrapp-product-price .price,
.wd-product .wrapp-product-price .woocommerce-Price-amount{
  color: var(--afk-copper);
  font-weight: 700;
}

/* the row of action icons (wishlist / add-to-cart / quick view) */
.wd-bottom-actions{
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

/* "Select options" pill for variable products in this grid —
   reuses the same treatment as the homepage CTA, just without
   a quantity stepper alongside it here */
.wd-bottom-actions .wd-add-btn-replace .button.add_to_cart_button{
  flex: 1 1 auto;
  min-width: 0;
}

/* ============================================================
   PAGINATION
   ============================================================ */
.woocommerce-pagination .page-numbers{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border-radius: 50%;
  margin: 0 3px;
  font-weight: 600;
  font-size: 13px;
  color: var(--afk-charcoal);
  border: 1px solid var(--afk-line);
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.woocommerce-pagination .page-numbers:hover{
  border-color: var(--afk-gold);
  background: var(--afk-gold-soft);
  color: var(--afk-copper);
}
.woocommerce-pagination .page-numbers.current{
  background: linear-gradient(135deg, var(--afk-gold), var(--afk-copper));
  border: none;
  color: var(--afk-charcoal);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px){
  .wd-nav-product-cat .category-nav-link{ padding: 6px 12px; }
  .wd-nav-product-cat .nav-link-text{ font-size: 12px; }
}

@media (max-width: 768px){
  .wd-page-title .entry-title.title{ font-size: clamp(28px, 8vw, 40px); }
  .wd-nav-product-cat{ justify-content: flex-start; overflow-x: auto; }
  .woocommerce-ordering select.orderby{
    width: 100%;
    padding: 10px 32px 10px 16px;
  }
  .wd-bottom-actions{ gap: 6px; }
}/* End custom CSS */