//* 21 Days IELTS — Raed product styling, v1.
   Paste into the custom CSS field of a Raed DRAFT.
   Scoped to course 235343520. Remove this block to undo.
   No redirects, external assets, or checkout changes.
*/

body:has(#product-235343520) {
  --color-primary: #824bc0;
  --color-primary-dark: #633592;
  --color-primary-light: #eee5f8;
  --color-primary-reverse: #ffffff;
  --color-main: #251435;
  --s-radius: 0.85rem;
  color: #251435;
  background: #f8f6fb;
}

body:has(#product-235343520) .store-header {
  background: #ffffff;
  border-bottom: 1px solid #e7e2ec;
}

body:has(#product-235343520) .top-navbar {
  background: #f6f4f9;
  color: #62516f;
}

body:has(#product-235343520) .container--product-details {
  box-sizing: border-box;
  background: #ffffff;
  border: 1px solid #e7e2ec;
  border-radius: 22px;
  padding: clamp(18px, 3vw, 36px);
  margin-bottom: 32px;
}

#product-235343520 > .main-content {
  min-width: 0;
}

#product-235343520 h1 {
  color: #251435;
  font-size: clamp(25px, 2.6vw, 36px);
  line-height: 1.55;
  margin-bottom: 18px;
  overflow-wrap: break-word;
}

#product-235343520 .product-entry__sub-title {
  color: #746a7d;
  line-height: 1.8;
}

#product-235343520 [data-testid="store-product-price"] {
  margin-block: 18px;
}

#product-235343520 [data-testid="store-product-price"] p {
  color: #633592;
  font-size: 30px;
  line-height: 1.5;
}

#product-235343520 .product__description {
  color: #62516f;
  line-height: 1.95;
}

#product-235343520 .product__description a {
  color: #633592;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#product-235343520 .details-slider {
  border: 1px solid #eee7f4;
  border-radius: 18px;
}

#product-235343520 .sticky-product-bar {
  background: #f6f4f9;
  border: 1px solid #e7e2ec;
  border-radius: 16px;
}

#product-235343520 salla-add-product-button {
  --color-primary: #241139;
  --color-primary-dark: #3b2153;
  --color-primary-reverse: #ffffff;
}

#product-235343520 :where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid #824bc0;
  outline-offset: 3px;
}

body:has(#product-235343520) .store-footer,
body:has(#product-235343520) .store-footer__inner {
  background: #241139;
  color: #f6f4f9;
}

body:has(#product-235343520) .store-footer__inner h3 {
  color: #ffffff;
}

body:has(#product-235343520) .store-footer a:hover {
  color: #dafa87;
}

body:has(#product-235343520) .copyright-text {
  color: #d4c4e0;
}

@media (max-width: 767px) {
  body:has(#product-235343520) .container--product-details {
    width: calc(100% - 24px);
    border-radius: 16px;
    padding: 16px;
  }

  #product-235343520 .product__description {
    padding-inline: 0;
  }
}
* Add custom CSS styles below */
style.css-01
/* 21 Days IELTS — hide only the search control in the Raed header.
 * Append to existing custom CSS. Do not include <style> tags.
 * Logo, menu, language selector, account and cart stay available.
 */
:where(.store-header, [data-testid="store-header"]) .header-search,
:where(.store-header, [data-testid="store-header"]) salla-search,
:where(.store-header, [data-testid="store-header"]) [data-testid="store-header-search"] {
  display: none !important;
}
/* 21 Days IELTS — hide the TOP bar above the logo and the offers menu item.
 * Append this entire block to the END of Salla custom CSS.
 * Keep all existing branding CSS and navigation JavaScript.
 */
.store-header .top-navbar,
[data-testid="store-header"] .top-navbar {
  display: none !important;
}

/* Hide an offers link and its own list item, never the whole navigation. */
:is(.store-header, custom-main-menu, #mobile-menu) a:is(
  [aria-label="التخفيضات"], [aria-label="تخفيضات"],
  [href="offers"], [href="/offers"], [href$="/offers/"],
  [href$="/offers"], [href*="/offers?"]
),
:is(.store-header, custom-main-menu, #mobile-menu) li:has(> a:is(
  [aria-label="التخفيضات"], [aria-label="تخفيضات"],
  [href="offers"], [href="/offers"], [href$="/offers/"],
  [href$="/offers"], [href*="/offers?"]
)) {
  display: none !important;
}
/* 21 Days IELTS — hide the TOP bar above the logo and the offers menu item.
 * Append this entire block to the END of Salla custom CSS.
 * Keep all existing branding CSS and navigation JavaScript.
 */
.store-header .top-navbar,
[data-testid="store-header"] .top-navbar {
  display: none !important;
}

/* Hide an offers link and its own list item, never the whole navigation. */
:is(.store-header, custom-main-menu, #mobile-menu) a:is(
  [aria-label="التخفيضات"], [aria-label="تخفيضات"],
  [href="offers"], [href="/offers"], [href$="/offers/"],
  [href$="/offers"], [href*="/offers?"]
),
:is(.store-header, custom-main-menu, #mobile-menu) li:has(> a:is(
  [aria-label="التخفيضات"], [aria-label="تخفيضات"],
  [href="offers"], [href="/offers"], [href$="/offers/"],
  [href$="/offers"], [href*="/offers?"]
)) {
  display: none !important;
}