/* ARGANA 10.1 — lightweight UX revamp. Presentation only; no commerce authority. */
:root{
  --ux101-reading:72ch;
  --ux101-radius:20px;
  --ux101-soft-shadow:0 14px 38px rgba(35,31,22,.07);
}

/* Responsive typography and spacing */
.ux-polished{font-size:clamp(15px,.22vw + 14.2px,17px)}
.ux-polished h1{font-size:clamp(2rem,4.2vw,3.35rem);line-height:1.16}
.ux-polished h2{font-size:clamp(1.48rem,2.7vw,2.16rem);line-height:1.26}
.ux-polished h3{font-size:clamp(1.16rem,1.65vw,1.5rem);line-height:1.34}
.ux-polished p,.ux-polished li{font-size:clamp(.96rem,.13vw + .92rem,1.05rem);line-height:1.85}
.ux-polished small{line-height:1.55}

/* Safe-home performance overrides for legacy polish CSS. */
.ux-polished .product-card{will-change:auto!important}
.ux-polished .product-card:not(.ux-image-ready) .product-image::before{animation:none!important;display:none!important}

/* One-time, low-cost motion. No scroll observer, no continuous transforms. */
@media(prefers-reduced-motion:no-preference){
  .ux-polished .hero-copy>*{animation:ux101Enter .46s both cubic-bezier(.22,.8,.28,1)}
  .ux-polished .hero-copy>*:nth-child(2){animation-delay:.04s}
  .ux-polished .hero-copy>*:nth-child(3){animation-delay:.08s}
  .ux-polished .hero-copy>*:nth-child(4){animation-delay:.12s}
  .ux-polished .hero-visual{animation:ux101Enter .52s .08s both cubic-bezier(.22,.8,.28,1)}
  .ux-polished .btn,.ux-polished .icon-btn,.ux-polished .care-guide-path,.ux-polished .card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background-color .18s ease}
  .ux-polished .btn:hover:not(:disabled),.ux-polished .care-guide-path:hover,.ux-polished .card:hover{transform:translateY(-2px)}
  .ux-polished [data-add].ux101-pressed{animation:ux101Press .34s ease}
}
@keyframes ux101Enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ux101Press{0%,100%{transform:none}50%{transform:scale(.97)}}

/* Loading state — one skeleton surface only, avoiding many animated nodes. */
.ux-polished #productsGrid:empty{min-height:270px;border-radius:22px;background:linear-gradient(110deg,#f2eee7 22%,#faf8f4 38%,#f2eee7 54%);background-size:220% 100%;box-shadow:inset 0 0 0 1px rgba(96,78,50,.06)}
@media(prefers-reduced-motion:no-preference){.ux-polished #productsGrid:empty{animation:ux101Skeleton 1.35s ease-in-out infinite}}
@keyframes ux101Skeleton{to{background-position:-120% 0}}

/* Search — clearer focus, clear action, no replacement of existing filtering authority. */
.ux-polished .search{position:relative}
.ux-polished .search:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-accent,#c69a45) 18%,transparent);border-color:color-mix(in srgb,var(--theme-accent,#c69a45) 55%,transparent)}
.ux101-search-clear{position:absolute;inset-inline-start:7px;top:50%;translate:0 -50%;z-index:3;width:32px;height:32px;border:0;border-radius:999px;background:var(--theme-bg-soft,#f3eee6);color:var(--theme-primary,#173f2a);font:700 18px/1 Tajawal,sans-serif;cursor:pointer;display:grid;place-items:center}
.ux101-search-clear[hidden]{display:none}
.ux-shell-search .ux101-search-clear{inset-inline-start:64px}
.ux101-search-clear:focus-visible{outline:3px solid color-mix(in srgb,var(--theme-accent,#c69a45) 38%,transparent);outline-offset:2px}
.ux101-search-suggestions{position:absolute;z-index:80;top:calc(100% + 8px);inset-inline:0;min-width:min(410px,88vw);padding:7px;background:var(--theme-surface,#fff);border:1px solid var(--theme-border,#e7ded0);border-radius:16px;box-shadow:0 18px 46px rgba(28,37,30,.14)}
.ux101-search-suggestions[hidden]{display:none}
.ux101-search-suggestion{display:flex;justify-content:space-between;gap:12px;width:100%;min-height:42px;padding:9px 11px;border:0;border-radius:11px;background:transparent;color:var(--theme-ink,#29271f);font:inherit;text-align:right;cursor:pointer}
.ux101-search-suggestion:hover,.ux101-search-suggestion:focus-visible{background:var(--theme-bg-soft,#f7f2e9);outline:none}
.ux101-search-suggestion small{color:var(--theme-muted,#6f695e)}

/* Add-to-cart success feedback without opening or wrapping the cart. */
.ux101-cart-feedback{position:fixed;z-index:95;inset-inline-start:50%;bottom:24px;translate:-50% 0;width:max-content;max-width:min(92vw,520px);padding:12px 16px;border-radius:999px;background:var(--theme-primary,#173f2a);color:#fff;font-weight:700;box-shadow:0 16px 38px rgba(23,63,42,.22);text-align:center}
.ux101-cart-feedback[hidden]{display:none}

/* Quote — readable composition with deliberate white space. */
.ux-polished .quote-card{width:min(920px,100%);margin-inline:auto;padding:clamp(24px,4vw,46px)}
.ux-polished .quote-card blockquote{position:relative;width:min(760px,100%);margin:clamp(20px,3vw,30px) auto 16px;padding:clamp(30px,5vw,54px) clamp(24px,6vw,62px);border-radius:24px;background:var(--theme-surface,#fff);border:1px solid var(--theme-border,#e9dfd0);font-size:clamp(1.15rem,2.1vw,1.65rem);line-height:2.05;text-align:center;text-wrap:balance;box-shadow:var(--ux101-soft-shadow)}
.ux-polished .quote-card blockquote::before{content:"“";position:absolute;top:8px;inset-inline-start:18px;font:700 clamp(2.2rem,5vw,3.5rem)/1 Georgia,serif;color:color-mix(in srgb,var(--theme-accent,#c69a45) 48%,transparent)}
.ux-polished .quote-source{max-width:var(--ux101-reading);margin-inline:auto;text-align:center}
.ux-polished .quote-actions{justify-content:center}

/* Care guide/blog belongs visually to the store. */
.ux-content-page{background:var(--theme-bg,#fbf8f4)!important;color:var(--theme-ink,#29271f)!important}
.ux-content-page main{background:linear-gradient(180deg,color-mix(in srgb,var(--theme-bg,#fbf8f4) 92%,#fff) 0,var(--theme-bg,#fbf8f4) 26rem)}
.care-guide-return-row{width:min(1120px,92vw);margin:clamp(18px,3vw,30px) auto 0;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border:1px solid var(--theme-border,#e8dfd0);border-radius:18px;background:var(--theme-surface,#fff);box-shadow:var(--ux101-soft-shadow)}
.care-guide-return-row p{margin:0;color:var(--theme-muted,#6f695e);font-size:.94rem}
.care-guide-store-return{flex:0 0 auto;text-decoration:none!important}
.care-guide-inclusion{margin-top:12px;padding:12px 15px;border-radius:14px;background:color-mix(in srgb,var(--theme-accent,#c69a45) 8%,var(--theme-surface,#fff));color:var(--theme-muted,#6f695e);border:1px solid color-mix(in srgb,var(--theme-accent,#c69a45) 20%,var(--theme-border,#e8dfd0));line-height:1.75}
.ux-content-page .article{max-width:920px;margin-inline:auto}
.ux-content-page .article p,.ux-content-page .article li{max-width:var(--ux101-reading);font-size:clamp(.98rem,.2vw + .94rem,1.08rem);line-height:1.95}
.ux-content-page .article h2{margin-top:clamp(28px,5vw,48px)}

/* Account: unmistakable save feedback without changing the account API. */
.ux-polished #accountStatus{scroll-margin-top:100px}
.ux-polished #accountStatus:not(:empty){display:flex;align-items:center;gap:9px;margin-block:0 18px;padding:13px 15px;border-radius:14px;border:1px solid #d5e5d8;background:#f1faf3;color:#20502e;font-weight:700;box-shadow:0 10px 28px rgba(30,79,46,.08)}
.ux-polished #accountStatus.ux101-saving{border-color:#e8d8b2;background:#fff9ec;color:#735a29}
.ux-polished #accountStatus.ux101-error{border-color:#edc9c2;background:#fff5f3;color:#8c3027}
.ux-polished #accountStatus.ux101-success::before{content:"✓";display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:#2e6b3f;color:#fff;font-size:.8rem}

/* Cross-storefront responsive guardrails. These load after the legacy presentation layers. */
.ux-polished{max-width:100%;overflow-x:hidden;overflow-x:clip}
.ux-polished :where(img,svg,video,canvas){max-width:100%}
.ux-polished :where(.container,.header-inner,.hero-card,.hero-copy,.hero-visual,.quickbar,.quick,.section-head,.products-grid,.product-card,.product-body,.product-bottom,.brand-story,.story-copy,.footer-inner,.cart-drawer,.cart-items,.cart-item,.drawer-foot,.modal,.modal-content,.checkout-wrap,.form-grid,.field,.coupon-row,.pay-options,.order-summary,.summary-line,.checkout-ux-progress,.checkout-steps,.checkout-sticky-action,.content-card,.side-card,.account-main,.policy-page,.care-guide-return-row,.care-guide-directory,.care-guide-paths,.care-guide-path){min-width:0;max-width:100%}
.ux-polished :where(input,select,textarea,button){max-width:100%}
.ux-polished :where(p,a,span,strong,small,label,h1,h2,h3,h4,li){overflow-wrap:break-word}
.ux-polished .products-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.ux-polished .form-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ux-polished .pay-options{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ux-polished .coupon-row>input{min-width:0}
.ux-polished .summary-line>*{min-width:0}
.ux-polished .modal,.ux-polished .cart-drawer{max-width:100vw}

/* Mobile hierarchy, touch targets and floating assistant clearance. */
@media(max-width:760px){
  .ux-polished{font-size:15px}
  .ux-polished h1{font-size:clamp(1.85rem,8.8vw,2.55rem)}
  .ux-polished h2{font-size:clamp(1.4rem,6.2vw,1.85rem)}
  .ux-polished .btn,.ux-polished button,.ux-polished .icon-btn{min-height:44px}
  .ux-polished .quote-card{padding:16px}
  .ux-polished .quote-card blockquote{padding:34px 20px 28px;font-size:1.14rem;line-height:1.95}
  .care-guide-return-row{align-items:stretch;flex-direction:column;padding:14px}
  .care-guide-store-return{width:100%;justify-content:center;text-align:center}
  .ux101-search-suggestions{position:fixed;top:auto;bottom:82px;inset-inline:12px;min-width:0;max-height:48vh;overflow:auto}
  .ux101-cart-feedback{bottom:88px;border-radius:16px;width:calc(100% - 28px)}
  .support-chat{bottom:84px!important}

  .ux-polished .products-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ux-polished .form-grid,.ux-polished .pay-options{grid-template-columns:minmax(0,1fr)}
  .ux-polished .field.full{grid-column:auto}
  .ux-polished .field :where(input,select,textarea){width:100%;min-width:0}
  .ux-polished .cart-drawer{inset:0!important;width:100vw!important;max-width:none!important}
  .ux-polished .cart-item{grid-template-columns:64px minmax(0,1fr) auto}
  .ux-polished .modal{max-width:100vw}
  .ux-polished .checkout-modal{inset:0!important;width:100vw!important;max-width:none!important;height:100vh;height:100dvh;max-height:100dvh!important;border-radius:0!important;transform:none!important;overflow:hidden!important}
  .ux-polished .checkout-modal.open{transform:none!important}
  .ux-polished .checkout-wrap{width:100%;height:100%;max-width:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-inline:16px}
  .ux-polished .checkout-ux-progress ol,.ux-polished .checkout-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ux-polished .checkout-ux-progress li,.ux-polished .checkout-steps span{min-width:0;overflow-wrap:anywhere}
  .ux-polished .order-summary,.ux-polished .checkout-conversion-guide{width:100%;max-width:100%}
  .ux-polished .summary-line{gap:12px}
  .ux-polished .summary-line>*{overflow-wrap:anywhere}
  .ux-polished .checkout-sticky-action{right:0!important;left:0!important;width:100%!important;max-width:100vw!important}
  .ux-polished .checkout-sticky-action>div{min-width:0}
  .ux-polished .checkout-sticky-action .btn{min-width:0;max-width:48vw;flex:0 1 145px}
  .ux-content-page .wrap,.ux-content-page .account-main,.ux-content-page .policy-page,.care-guide-directory,.care-guide-section-head,.care-guide-articles-head{max-width:calc(100vw - 24px)!important}
}

@media(max-width:420px){
  .ux-polished .coupon-row{flex-direction:column;align-items:stretch}
  .ux-polished .coupon-row .btn{width:100%}
  .ux-polished .checkout-sticky-action{gap:8px;padding-inline:10px}
  .ux-polished .checkout-sticky-action .btn{max-width:46vw;padding-inline:10px}
  .ux-polished .cart-item{grid-template-columns:58px minmax(0,1fr);gap:9px}
  .ux-polished .cart-item>.remove{grid-column:2;justify-self:start}
}

@media(prefers-reduced-motion:reduce){
  .ux-polished #productsGrid:empty{animation:none;background:#f3efe8}
  .ux-polished .hero-copy>*,.ux-polished .hero-visual{animation:none!important}
}