/** Shopify CDN: Minification failed

Line 919:1 Expected "}" to go with "{"

**/
/* =========================================================
   DIYOT — GLOBAL DESIGN SYSTEM
   Horizon Theme
   ========================================================= */


/* =========================================================
   01 — BRAND TOKENS
   ========================================================= */

:root {

  /* -------------------------
     DIYOT COLORS
     ------------------------- */

  --diyot-deep: #222327;
  --diyot-slate: #64686e;

  --diyot-light-gray: #d1d1d1;
  --diyot-mist-blue: #d3d7da;
  --diyot-neutral: #a0a0a0;
  --diyot-cold-blue: #d2d6d9;
  --diyot-aqua: #96cbea;

  --diyot-white: #ffffff;
  --diyot-black: #111214;


  /* -------------------------
     TEXT
     ------------------------- */

  --diyot-text: var(--diyot-deep);
  --diyot-text-muted: var(--diyot-slate);
  --diyot-text-light: var(--diyot-white);


  /* -------------------------
     BACKGROUNDS
     ------------------------- */

  --diyot-background: var(--diyot-white);
  --diyot-surface: var(--diyot-light-gray);
  --diyot-surface-soft: var(--diyot-mist-blue);
  --diyot-background-dark: var(--diyot-deep);


  /* -------------------------
     BORDERS
     ------------------------- */

  --diyot-border: rgba(34, 35, 39, 0.14);
  --diyot-border-light: rgba(255, 255, 255, 0.18);


  /* -------------------------
     RADIUS
     ------------------------- */

  --diyot-radius-small: 6px;
  --diyot-radius-medium: 12px;
  --diyot-radius-large: 18px;
  --diyot-radius-xl: 28px;


  /* -------------------------
     SPACING
     ------------------------- */

  --diyot-space-1: 4px;
  --diyot-space-2: 8px;
  --diyot-space-3: 12px;
  --diyot-space-4: 16px;
  --diyot-space-5: 20px;
  --diyot-space-6: 24px;
  --diyot-space-8: 32px;
  --diyot-space-10: 40px;
  --diyot-space-12: 48px;
  --diyot-space-16: 64px;
  --diyot-space-20: 80px;
  --diyot-space-24: 96px;


  /* -------------------------
     ANIMATION
     ------------------------- */

  --diyot-transition-fast:
    180ms cubic-bezier(0.22, 1, 0.36, 1);

  --diyot-transition:
    300ms cubic-bezier(0.22, 1, 0.36, 1);

  --diyot-transition-slow:
    600ms cubic-bezier(0.22, 1, 0.36, 1);


  /* -------------------------
     SHADOWS
     ------------------------- */

  --diyot-shadow-soft:
    0 10px 35px rgba(34, 35, 39, 0.08);

  --diyot-shadow-medium:
    0 18px 60px rgba(34, 35, 39, 0.12);


  /* -------------------------
     LAYOUT
     ------------------------- */

  --diyot-content-width: 1440px;

}


/* =========================================================
   02 — GLOBAL BOX MODEL
   ========================================================= */

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}


/* =========================================================
   03 — BODY
   ========================================================= */

body {
  background: var(--diyot-background);
  color: var(--diyot-text);

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}


/* =========================================================
   04 — LINKS
   ========================================================= */

a {
  color: inherit;
}


/* =========================================================
   05 — IMAGES
   ========================================================= */

img {
  max-width: 100%;
}


/* =========================================================
   06 — DIYOT BUTTON SYSTEM
   ========================================================= */

.diyot-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-height: 48px;

  padding:
    0
    var(--diyot-space-6);

  border: 1px solid var(--diyot-deep);
  border-radius: var(--diyot-radius-small);

  background: var(--diyot-deep);
  color: var(--diyot-white);

  font: inherit;
  font-weight: 600;

  line-height: 1;
  text-decoration: none;

  cursor: pointer;

  transition:
    background var(--diyot-transition),
    color var(--diyot-transition),
    border-color var(--diyot-transition),
    transform var(--diyot-transition);
}


.diyot-button:hover {
  background: var(--diyot-slate);
  border-color: var(--diyot-slate);

  transform: translateY(-2px);
}


.diyot-button:active {
  transform: translateY(0);
}


/* LIGHT BUTTON */

.diyot-button--light {
  background: var(--diyot-white);
  color: var(--diyot-deep);

  border-color: var(--diyot-white);
}


.diyot-button--light:hover {
  background: var(--diyot-mist-blue);
  border-color: var(--diyot-mist-blue);
}


/* OUTLINE BUTTON */

.diyot-button--outline {
  background: transparent;
  color: var(--diyot-deep);

  border-color: var(--diyot-deep);
}


.diyot-button--outline:hover {
  background: var(--diyot-deep);
  color: var(--diyot-white);
}


/* =========================================================
   07 — DIYOT CONTAINER
   ========================================================= */

.diyot-container {
  width: min(
    calc(100% - 32px),
    var(--diyot-content-width)
  );

  margin-inline: auto;
}


/* =========================================================
   08 — DIYOT SECTION
   ========================================================= */

.diyot-section {
  width: 100%;

  padding:
    var(--diyot-space-24)
    0;
}


/* =========================================================
   09 — TYPOGRAPHY SYSTEM
   ========================================================= */

.diyot-eyebrow {
  margin: 0 0 var(--diyot-space-3);

  color: var(--diyot-text-muted);

  font-size: 12px;
  font-weight: 600;

  line-height: 1.2;

  letter-spacing: 0.16em;
  text-transform: uppercase;
}


.diyot-title {
  margin: 0;

  color: var(--diyot-text);

  font-size: clamp(36px, 6vw, 84px);

  line-height: 0.96;

  letter-spacing: -0.045em;

  font-weight: 600;
}


.diyot-subtitle {
  max-width: 620px;

  margin:
    var(--diyot-space-6)
    0
    0;

  color: var(--diyot-text-muted);

  font-size: 16px;

  line-height: 1.6;
}


/* =========================================================
   10 — DARK DIYOT SURFACE
   ========================================================= */

.diyot-dark {
  background: var(--diyot-background-dark);
  color: var(--diyot-white);
}


.diyot-dark .diyot-title {
  color: var(--diyot-white);
}


.diyot-dark .diyot-subtitle {
  color: var(--diyot-mist-blue);
}


/* =========================================================
   11 — DIYOT CARD
   ========================================================= */

.diyot-card {
  overflow: hidden;

  background: var(--diyot-white);

  border:
    1px solid
    var(--diyot-border);

  border-radius:
    var(--diyot-radius-large);

  transition:
    transform var(--diyot-transition),
    box-shadow var(--diyot-transition);
}


.diyot-card:hover {
  transform: translateY(-4px);

  box-shadow:
    var(--diyot-shadow-soft);
}


/* =========================================================
   12 — PRODUCT IMAGE
   ========================================================= */

.diyot-product-image {
  position: relative;

  overflow: hidden;

  background:
    var(--diyot-mist-blue);
}


.diyot-product-image img {
  display: block;

  width: 100%;
  height: auto;

  transition:
    transform var(--diyot-transition-slow);
}


.diyot-product-image:hover img {
  transform: scale(1.035);
}


/* =========================================================
   13 — PRODUCT INFORMATION
   ========================================================= */

.diyot-product-info {
  padding:
    var(--diyot-space-5);
}


.diyot-product-title {
  margin: 0;

  color: var(--diyot-text);

  font-size: 15px;

  line-height: 1.35;

  font-weight: 500;
}


.diyot-product-price {
  margin-top: var(--diyot-space-2);

  color: var(--diyot-slate);

  font-size: 14px;

  font-weight: 500;
}


/* =========================================================
   14 — DIVIDER
   ========================================================= */

.diyot-divider {
  width: 100%;
  height: 1px;

  background:
    var(--diyot-border);
}


/* =========================================================
   15 — FOCUS
   ========================================================= */

.diyot-button:focus-visible,
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--diyot-aqua);
  outline-offset: 3px;
}


/* =========================================================
   16 — MOBILE
   Same DIYOT design — responsive sizing only
   ========================================================= */

@media screen and (max-width: 749px) {

  .diyot-container {
    width: calc(100% - 32px);
  }


  .diyot-section {
    padding:
      var(--diyot-space-16)
      0;
  }


  .diyot-title {
    font-size:
      clamp(32px, 10vw, 48px);
  }


  .diyot-subtitle {
    font-size: 15px;

    line-height: 1.55;
  }


  .diyot-button {
    min-height: 50px;

    padding:
      0
      var(--diyot-space-5);
  }


  .diyot-product-info {
    padding:
      var(--diyot-space-4);
  }


  .diyot-product-title {
    font-size: 14px;
  }


  .diyot-product-price {
    font-size: 13px;
  }

}


/* =========================================================
   17 — TABLET
   ========================================================= */

@media screen and (min-width: 750px) and (max-width: 1099px) {

  .diyot-container {
    width: calc(100% - 56px);
  }


  .diyot-section {
    padding:
      var(--diyot-space-20)
      0;
  }

}


/* =========================================================
   18 — REDUCED MOTION
   Accessibility
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;

    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;
  }
/* =========================================================
   DIYOT — HEADER V1
   Mobile First
   ========================================================= */

:root {
  /* عدّل الألوان من هنا */
  --diyot-bg: #f5f2ed;
  --diyot-text: #111111;
  --diyot-border: rgba(17, 17, 17, 0.12);

  /* عدّل الأحجام من هنا */
  --diyot-logo-width-mobile: 105px;
  --diyot-logo-width-desktop: 125px;

  /* عدّل ارتفاع الهيدر من هنا */
  --diyot-header-mobile-height: 118px;
  --diyot-header-desktop-height: 82px;
}


/* =========================================================
   HEADER BASE
   ========================================================= */

#header-component {
  background: var(--diyot-bg);
  color: var(--diyot-text);

  --color-foreground: 17, 17, 17;
  --color-foreground-rgb: 17, 17, 17;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 749px) {

  #header-component {
    min-height: var(--diyot-header-mobile-height);
  }

  /*
    نخلي أول Row عبارة عن:
    LOGO فوق
  */

  #header-component .header__row--top {
    min-height: var(--diyot-header-mobile-height);
  }

  #header-component .header__columns {
    position: relative;

    display: grid;

    grid-template-columns:
      44px
      44px
      1fr
      44px
      44px;

    grid-template-areas:
      "leftA leftB center rightA rightB";

    min-height: var(--diyot-header-mobile-height);

    padding: 10px 8px 8px;
  }


  /* =====================================================
     LOGO
     ===================================================== */

  #header-component .header-logo {
    grid-area: center;

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

    width: 100%;
  }

  #header-component .header-logo img,
  #header-component .header-logo svg {
    width: var(--diyot-logo-width-mobile);
    max-width: var(--diyot-logo-width-mobile);
    height: auto;
  }


  /* =====================================================
     ACTIONS / ICONS
     ===================================================== */

  #header-component .header-actions__action {
    color: var(--diyot-text);
  }


  #header-component .header-actions__action svg {
    width: 20px;
    height: 20px;
  }


  /* =====================================================
     HEADER MENU
     ===================================================== */

  #header-component .header__icon--menu {
    color: var(--diyot-text);
  }


  /* =====================================================
     REMOVE EXTRA VISUAL NOISE
     ===================================================== */

  #header-component .header__row--top {
    border-bottom: 1px solid var(--diyot-border);
  }

}


/* =========================================================
   DESKTOP
   ========================================================= */

@media screen and (min-width: 750px) {

  #header-component {
    min-height: var(--diyot-header-desktop-height);
  }

  #header-component .header__row--top {
    min-height: var(--diyot-header-desktop-height);
  }

  #header-component .header-logo img,
  #header-component .header-logo svg {
    width: var(--diyot-logo-width-desktop);
    max-width: var(--diyot-logo-width-desktop);
    height: auto;
  }

  #header-component .header-actions__action {
    color: var(--diyot-text);
  }

}


/* =========================================================
   STICKY HEADER
   ========================================================= */

#header-component[data-sticky-state="active"] {
  background: var(--diyot-bg);

  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   LINKS
   ========================================================= */

#header-component a {
  color: var(--diyot-text);
}


/* =========================================================
   HOVER
   ========================================================= */

@media (hover: hover) {

  #header-component .header-actions__action:hover {
    opacity: 0.65;
  }

  #header-component a:hover {
    opacity: 0.65;
  }

/* =========================================================
   DIYOT — MOBILE FIRST HEADER
   ========================================================= */

@media screen and (max-width: 749px) {

  /* Header itself */
  #header-component {
    position: relative !important;
    width: 100% !important;
    background: #ffffff !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Top header row */
  #header-component .header__row--top {
    min-height: 125px !important;
    border: 0 !important;
    background: #ffffff !important;
  }

  /* Header grid */
  #header-component .header__columns {
    display: grid !important;
    grid-template-columns: 44px 44px 1fr 44px 44px !important;
    grid-template-areas:
      "logo logo logo logo logo"
      "menu search center account cart" !important;

    min-height: 125px !important;
    padding: 0 12px 10px !important;
    row-gap: 4px !important;
  }

  /* Logo */
  #header-component .header-logo {
    grid-area: logo !important;

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

    width: 100% !important;
    height: 75px !important;
  }

  #header-component .header-logo img {
    max-width: 145px !important;
    max-height: 55px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Menu */
  #header-component .header__icon--menu {
    grid-area: menu !important;
  }

  /* Search */
  #header-component .search-action {
    grid-area: search !important;
  }

  /* Account */
  #header-component header-actions {
    grid-area: account !important;
  }

  /* Navigation icons */
  #header-component .header-actions__action,
  #header-component .header__icon--menu,
  #header-component .search-action {
    width: 44px !important;
    height: 44px !important;

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

    padding: 0 !important;
    margin: 0 !important;
  }

  /* Hide desktop menu on mobile */
  #header-component .header-menu {
    display: none !important;
  }

  /* Bottom navigation row */
  #header-component .header__row--bottom {
    display: none !important;
  }

  /* Remove weird Horizon spacing */
  #header-component .header__column {
    gap: 0 !important;
  }

}/* =========================================================
   DIYOT — PREMIUM HEADER POLISH
   ========================================================= */

@media screen and (max-width: 749px) {

  /* Header clean glass/premium look */
  #header-component {
    background: rgba(255, 255, 255, 0.96) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;

    transition:
      background 0.3s ease,
      box-shadow 0.3s ease,
      transform 0.3s ease !important;
  }

  /* Logo */
  #header-component .header-logo {
    transition: transform 0.35s cubic-bezier(.2,.8,.2,1) !important;
  }

  #header-component .header-logo:hover {
    transform: scale(1.04) !important;
  }

  /* All header buttons */
  #header-component .header-actions__action,
  #header-component .header__icon--menu,
  #header-component .search-action {
    border-radius: 50% !important;

    transition:
      transform 0.25s ease,
      background 0.25s ease,
      opacity 0.25s ease !important;
  }

  /* Touch/hover feedback */
  #header-component .header-actions__action:active,
  #header-component .header__icon--menu:active,
  #header-component .search-action:active {
    transform: scale(0.88) !important;
  }

  /* Icon hover */
  #header-component .header-actions__action:hover,
  #header-component .header__icon--menu:hover,
  #header-component .search-action:hover {
    background: rgba(0, 0, 0, 0.05) !important;
  }

  /* Bottom divider */
  #header-component .header__row--top {
    border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
  }

}