:root{--font:Tahoma,Arial,sans-serif;--latin:Arial,sans-serif}
.hero-caption{max-width:390px;margin:-11px 0 20px;color:#f4dfc9;font-size:12px;line-height:1.9}
.no-results{grid-column:1/-1;background:#fffaf3;border:1px dashed #d9c8b3;border-radius:13px;padding:22px;text-align:center;color:#7b766d;font-size:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:720px){.hero-caption{font-size:10px;line-height:1.75;margin:-5px 0 13px;max-width:340px}}

/* Product-led storefront direction from the approved Samra mobile reference. */
.site-header{direction:ltr}
.brand{direction:ltr}
.hero{direction:ltr;display:block;min-height:640px;padding:74px clamp(28px,7vw,110px);background-color:#a64e26;background-image:linear-gradient(90deg,rgba(105,45,20,.62) 0%,rgba(123,54,24,.38) 38%,rgba(93,41,22,.03) 76%),url("assets/samra-hero.png");background-size:100% 100%,contain;background-position:center,right center;background-repeat:no-repeat,no-repeat}
.hero-pattern,.hero:before{display:none}
.hero-copy{direction:rtl;text-align:right;position:relative;z-index:3;width:min(52%,650px);margin:0 auto 0 0;padding:0}
.hero .eyebrow{color:#f3d3a9}
.hero h1{font-size:clamp(58px,7vw,92px);line-height:1.15;text-shadow:0 3px 24px rgba(51,24,13,.13)}
.hero h1 em{color:#f4d39e}
.hero-text,.hero-caption{color:#fff5e7;text-shadow:0 1px 10px rgba(53,23,13,.25)}
.hero-caption{max-width:510px;margin:0 0 21px;font-size:14px;line-height:1.9}
.hero-note{display:none}
.hero-art{display:none}
.hero-index{display:none}
.trust-strip{background:#f8f0e5;border-bottom:1px solid #eee2d2;min-height:78px;color:#914a29}
.category-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.category-grid{gap:12px}
.category-card{min-height:62px;padding:14px 18px;align-items:center;justify-content:center;text-align:center;background:#fffdfa;border-color:#eadbca;border-radius:14px}
.category-card:hover{background:#fbf6ef;border-color:#c99a72;box-shadow:0 8px 20px rgba(86,54,31,.08)}
.category-art{display:none!important}
.category-name{position:static;display:block;margin:0;font-size:14px;font-weight:700;color:#332d27}
.category-arrow{display:block;position:absolute;left:13px;bottom:auto;top:50%;transform:translateY(-50%);color:#9c7956;font:13px var(--latin)}
.product-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.product-card{overflow:hidden;border:1px solid #f1ebe4;border-radius:15px;background:#fff;box-shadow:0 4px 18px rgba(58,43,32,.04)}
.product-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(58,43,32,.1)}
.product-visual,.product-card:nth-child(4n+2) .product-visual,.product-card:nth-child(4n+3) .product-visual,.product-card:nth-child(4n+4) .product-visual{height:auto;aspect-ratio:1;background:#f4eee5}
.product-visual:before{display:none}
.product-photo{position:absolute;inset:0;border-radius:0;background-image:url("assets/samra-products.png");background-size:200% 200%;background-repeat:no-repeat;transition:transform .35s}
.product-photo-shea{background-position:0 0}
.product-photo-lemon{background-position:100% 0}
.product-photo-herbs{background-position:0 100%}
.product-photo-cap{background-position:100% 100%}
.product-card:hover .product-photo{transform:scale(1.045)}
.product-info{padding:14px 15px 16px}
.product-title{font-size:clamp(15px,.95vw,18px)}
.product-desc{font-size:clamp(11px,.75vw,14px);min-height:39px}
.product-price{font-size:clamp(15px,.95vw,18px);color:#b04e21}
.add-button{width:42px;height:38px;border-radius:22px;background:#fbf6f0}
.cart-thumb .product-photo{border-radius:10px}
.product-detail-visual .product-photo{border-radius:14px}
.products-section>.section-heading,.products-section>.filter-row,.products-section>.product-grid,.products-section>.catalog-note{max-width:1480px;margin-inline:auto}
.products-section>.product-grid{gap:18px}
.products-section .filter-chip{font-size:11px;padding:7px 15px}
@media(max-width:980px){.product-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.product-visual,.product-card:nth-child(4n+2) .product-visual,.product-card:nth-child(4n+3) .product-visual,.product-card:nth-child(4n+4) .product-visual{height:auto;aspect-ratio:1}}
@media(max-width:720px){
  .announcement{height:31px;font-size:9px}
  .site-header{height:67px;padding-inline:14px;grid-template-columns:42px 1fr 100px;direction:ltr}
  .menu-button{grid-column:1;grid-row:1}
  .brand{grid-column:2;grid-row:1;justify-content:center;gap:5px}
  .header-actions{grid-column:3;grid-row:1;justify-content:flex-end}
  .brand-mark{width:35px;height:45px}
  .brand-name{font-size:22px}
  .hero{min-height:560px;height:calc(100svh - 98px);max-height:720px;padding:50px 19px 32px;background-position:center,center bottom;background-size:100% 100%,100% auto;display:block}
  .hero-copy{width:57%;max-width:275px;margin:0 auto 0 0}
  .hero .eyebrow{font-size:9px;margin-bottom:11px}
  .hero h1{font-size:clamp(43px,11vw,58px);line-height:1.16;letter-spacing:-1px;margin-bottom:12px}
  .hero-text{display:none}
  .hero-caption{font-size:12px;line-height:1.9;margin:0 0 19px;max-width:260px}
  .hero .button{min-height:43px;font-size:12px;padding-inline:17px;gap:12px}
  .hero-copy:after{content:"سمرة المغرب في دارك ✨";display:block;margin-top:20px;color:#ffe1b5;font-size:10px}
  .trust-strip{min-height:64px;padding:8px 12px;gap:7px}
  .trust-item{gap:5px;font-size:8px;line-height:1.5;text-align:center}
  .trust-icon{font-size:14px}
  .trust-divider{height:23px}
  .section{padding:39px 17px}
  .categories-section .section-heading{margin-bottom:10px}
  .category-grid{display:flex;gap:13px;overflow-x:auto;scrollbar-width:none;margin-inline:-17px;padding:5px 17px 12px}
  .category-oils{order:1}.category-butter{order:2}.category-bath{order:3}.category-hair{order:4}
  .category-grid::-webkit-scrollbar{display:none}
  .category-card{flex:0 0 auto;min-width:122px;min-height:52px;padding:10px 22px;border:1px solid #eadbca;border-radius:12px;background:#fffdfa}
  .category-card:hover{background:#fbf6ef}
  .category-name{font-size:10px;margin:0;white-space:nowrap}
  .category-arrow{left:7px;font-size:11px}
  .products-section{padding-top:30px}
  .products-heading{display:flex;align-items:end}
  .products-heading .section-heading{margin-bottom:0}
  .product-tools{display:none}
  .filter-row{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .filter-row::-webkit-scrollbar{display:none}
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .product-visual,.product-card:nth-child(4n+2) .product-visual,.product-card:nth-child(4n+3) .product-visual,.product-card:nth-child(4n+4) .product-visual{height:auto;aspect-ratio:1}
  .product-info{padding:10px 10px 11px}
  .product-title{font-size:11px}
  .product-desc{font-size:9px;min-height:31px}
  .product-price{font-size:12px}
  .add-button{width:32px;height:32px}
}
.product-uploaded-photo{position:relative;width:100%;height:100%;object-fit:contain;border-radius:0;z-index:1;background:#f4eee5}
.mobile-nav svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mobile-nav a,.mobile-nav button{gap:3px}
.mobile-nav small{font-size:9px}
.trust-icon{display:inline-grid;place-items:center;color:#b45b2f}
.product-card .product-meta,.product-card .product-badge{display:none!important}

/* Full-bleed campaign image, scaled as one continuous banner on every screen. */
.hero{height:min(78svh,850px);min-height:620px;background-color:#a64e26;background-image:linear-gradient(90deg,rgba(105,45,20,.74) 0%,rgba(123,54,24,.43) 48%,rgba(93,41,22,.08) 100%),url("assets/samra-hero.png");background-size:cover;background-position:center 43%;isolation:isolate}
.hero:before{display:none}
.hero-copy{z-index:3}
.trust-strip{background:#f7efe4;color:#874629;border-color:#e9dac8}
.categories-section,.products-section{background:#f7efe4}
.categories-section{padding-top:68px;padding-bottom:52px;border-top:1px solid #eadbc9}
.products-section{padding-top:52px;border-top:1px solid #eadbc9}
.categories-section>.section-heading,.categories-section>.category-grid{max-width:1480px;margin-inline:auto}
.category-card{background:#fffdfa;border-color:#e8d8c6;box-shadow:0 5px 16px rgba(80,48,29,.035);transition:transform .2s,border-color .2s,box-shadow .2s}
.category-card:hover{transform:translateY(-2px)}
.products-section .section-heading h2{color:#283227}
.products-section .filter-chip{border-color:#e4d2be;background:#fffaf3;color:#78583f}
.products-section .filter-chip.active,.products-section .filter-chip:hover{background:#586447;border-color:#586447;color:#fffaf3}
.product-card{border-color:#eee3d6;box-shadow:0 8px 24px rgba(80,48,29,.06)}
.product-info{background:#fffdfa}
.story-section{background:#fbf5ec}
.catalog-empty{grid-column:1/-1;margin:0;padding:16px 20px;border:1px dashed #dec9b2;border-radius:13px;background:rgba(255,253,250,.74);color:#806d5b;text-align:center;font-size:12px}
@media(max-width:720px){
  .hero{height:calc(100svh - 98px);min-height:560px;max-height:760px;padding:34px 19px 28px;background-image:linear-gradient(90deg,rgba(105,45,20,.78) 0%,rgba(123,54,24,.52) 58%,rgba(93,41,22,.19) 100%),url("assets/samra-hero.png");background-size:cover;background-position:58% center}
  .hero-copy{width:min(100%,430px);max-width:none;margin:0;padding:0}
  .hero h1{font-size:clamp(42px,10.8vw,55px)}
  .hero-caption{max-width:350px}
  .categories-section>.category-grid{max-width:none;margin-inline:-17px}
  .catalog-empty{flex:0 0 100%;font-size:10px}
  .categories-section{padding-top:36px;padding-bottom:31px}
  .products-section{padding-top:31px;padding-bottom:48px}
}
/* Live checkout for the Hostinger PHP deployment */
.checkout-dialog{width:min(590px,calc(100% - 30px));max-height:min(92vh,900px);overflow:auto;text-align:right}
.checkout-dialog h2{margin:8px 0 12px}
.checkout-form{display:grid;gap:12px;margin-top:18px}
.checkout-form>label{display:grid;gap:6px;color:#51483e;font-size:13px}
.checkout-form input:not([type=radio]),.checkout-form select,.checkout-form textarea{width:100%;box-sizing:border-box;border:1px solid #e5d8ca;border-radius:12px;background:#fff;padding:12px;font:inherit;color:#312a23}
.checkout-form fieldset{border:1px solid #e5d8ca;border-radius:14px;padding:12px;display:grid;gap:8px}
.checkout-form fieldset label{display:flex;align-items:center;gap:8px}
.checkout-form .checkout-summary{background:#f8f2e9;border-radius:14px;padding:12px 14px;display:grid;gap:8px;font-size:13px}
.checkout-summary>div{display:flex;justify-content:space-between;gap:10px}
.checkout-summary .checkout-total{border-top:1px solid #e5d8ca;padding-top:8px;font-weight:700}
.checkout-error{color:#a33a22;font-size:13px;margin:0}
.checkout-honey{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.checkout-form button:disabled{opacity:.65;cursor:wait}
.checkout-dialog{padding:28px 30px 25px;border:1px solid rgba(117,79,50,.13);border-radius:24px;box-shadow:0 28px 90px rgba(43,31,22,.25);background:#fffdfa;scrollbar-width:thin;scrollbar-color:#d4b89c transparent}
.checkout-dialog::backdrop{background:rgba(37,31,25,.48);backdrop-filter:blur(5px)}
.checkout-dialog>.dialog-close{position:sticky;float:left;top:0;z-index:5;margin:-8px -10px 0 0;background:#f8f2e9}
.checkout-heading{display:flex;align-items:center;gap:14px;padding:3px 0 18px;border-bottom:1px solid #eee4d9}
.checkout-heading-icon{flex:0 0 46px;height:46px;display:grid;place-items:center;border-radius:16px;background:#f6ead9;color:#a7552d;font-size:25px}
.checkout-heading .eyebrow{margin:0 0 4px;color:#a7552d;font-size:9px}
.checkout-heading h2{margin:0!important;font-size:24px;line-height:1.4;color:#30291f}
.checkout-heading p:last-child{margin:3px 0 0;color:#82776b;font-size:12px}
.checkout-form{gap:16px;margin-top:16px}
.checkout-form .checkout-summary{background:linear-gradient(120deg,#f8f2e9,#fbf7f0);border:1px solid #eee2d3;padding:13px 15px}
.checkout-section{padding:16px;border:1px solid #eee5db;border-radius:17px;background:#fff}
.checkout-section-title{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.checkout-section-title>span{width:30px;height:30px;display:grid;place-items:center;flex:0 0 30px;border-radius:11px;background:#f7eee3;color:#a7552d;font-size:13px;font-weight:800}
.checkout-section-title h3{margin:0;color:#30291f;font-size:15px;line-height:1.5}
.checkout-section-title p{margin:1px 0 0;color:#8a8177;font-size:11px;line-height:1.5}
.checkout-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.checkout-form .checkout-field-wide{grid-column:1/-1}
.checkout-form>section label{display:grid;gap:6px;color:#554a3e;font-size:12px;font-weight:700}
.checkout-form>section label small{display:inline;color:#95897c;font-size:10px;font-weight:500}
.checkout-form input:not([type=radio]),.checkout-form select,.checkout-form textarea{min-height:46px;padding:10px 13px;border-color:#e8ded3;border-radius:12px;background:#fffdfa;color:#342d25;font-size:13px;transition:border-color .18s,box-shadow .18s,background .18s}
.checkout-form textarea{min-height:70px;resize:vertical}
.checkout-form input:focus,.checkout-form select:focus,.checkout-form textarea:focus{outline:0;border-color:#b77550;box-shadow:0 0 0 3px rgba(167,85,45,.11);background:#fff}
.checkout-governorate-picker{position:relative}
.checkout-governorate-picker>input{padding-inline-start:42px!important;background-image:radial-gradient(circle at 18px 18px,transparent 5px,#a7552d 5.5px,#a7552d 6.5px,transparent 7px),linear-gradient(45deg,transparent 48%,#a7552d 49%,#a7552d 58%,transparent 59%);background-size:20px 20px,7px 7px;background-position:calc(100% - 12px) center,calc(100% - 9px) calc(50% + 7px);background-repeat:no-repeat}
.checkout-governorate-results{position:absolute;top:calc(100% + 5px);inset-inline:0;z-index:12;max-height:250px;overflow:auto;padding:5px;border:1px solid #eadccd;border-radius:13px;background:#fff;box-shadow:0 15px 36px rgba(60,42,28,.14)}
.checkout-governorate-results[hidden]{display:none}
.checkout-governorate-option{width:100%;min-height:38px;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 11px;border:0;border-radius:9px;background:transparent;text-align:right;cursor:pointer;font:inherit}
.checkout-governorate-option:hover,.checkout-governorate-option:focus{outline:0;background:#faf3e9}
.checkout-governorate-option span{font-size:12px;font-weight:700;color:#392f25}
.checkout-governorate-option small{font-size:10px;color:#8b7764}
.checkout-shipping-status{display:block!important;min-height:0;color:#6e785a;font-size:10px!important;font-weight:600!important}
.checkout-shipping-status.is-missing{color:#a6472b}
.checkout-location-empty{margin:0;padding:11px;color:#81786f;font-size:11px}
.checkout-payments{margin:0;padding:0;border:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.checkout-form .payment-choice{position:relative;min-height:90px;display:grid;grid-template-columns:30px 1fr;align-items:center;gap:8px;padding:11px;border:1px solid #e9dfd4;border-radius:14px;background:#fffdfa;cursor:pointer;transition:border-color .18s,background .18s,transform .18s}
.checkout-form .payment-choice:hover{transform:translateY(-1px);border-color:#d2b398}
.payment-choice>input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.payment-choice-icon{width:29px;height:29px;display:grid;place-items:center;border-radius:10px;background:#f5ecdf;color:#a7552d;font-size:15px}
.payment-choice b,.payment-choice small{display:block}
.payment-choice b{color:#3e3429;font-size:11px;line-height:1.4}
.payment-choice small{margin-top:3px;color:#8b8176;font-size:9px;line-height:1.4}
.payment-choice>i{position:absolute;inset-inline-start:10px;top:10px;width:13px;height:13px;border:1px solid #d4c7b8;border-radius:50%;background:#fff}
.payment-choice:has(input:checked){border-color:#a7552d;background:#fcf6ef;box-shadow:0 0 0 2px rgba(167,85,45,.08)}
.payment-choice:has(input:checked)>i{border:4px solid #a7552d}
.payment-choice:has(input:disabled){opacity:.45;cursor:not-allowed}
.checkout-form #submit-order{min-height:52px;width:100%;font-size:13px;box-shadow:0 9px 20px rgba(167,85,45,.17)}
.checkout-footnote{color:#8b8176;font-size:10px;line-height:1.7;text-align:center}
.checkout-form .checkout-error:empty{display:none}
@media(max-width:560px){.checkout-dialog{width:calc(100% - 16px);max-height:94vh;padding:20px 16px 18px;border-radius:20px}.checkout-heading{gap:10px;padding-bottom:14px}.checkout-heading-icon{flex-basis:39px;height:39px;border-radius:13px}.checkout-heading h2{font-size:20px}.checkout-section{padding:13px;border-radius:15px}.checkout-fields{grid-template-columns:1fr;gap:10px}.checkout-form .checkout-field-wide{grid-column:auto}.checkout-payments{grid-template-columns:1fr}.checkout-form .payment-choice{min-height:64px;grid-template-columns:30px 1fr;padding:9px 12px}.checkout-form .payment-choice>i{top:50%;transform:translateY(-50%)}.checkout-form .payment-choice b{font-size:12px}.checkout-form .payment-choice small{font-size:10px}}