/* Esma collection reference: live text above locally hosted ornamental artwork. */
.esma-collection{color:#183e33;background:#f5f8f3;border-radius:12px;padding:0 0 18px}
.esma-collection-head{position:relative;isolation:isolate;padding:22px 0 14px;background:url('assets/esma-themes/header.svg') right top / auto 240px no-repeat;min-height:196px}
.esma-collection-head .eyebrow{font:600 9px/1.4 Arial,sans-serif;letter-spacing:1.7px;color:#917843;margin:0 0 15px}
.esma-collection-head h1{font:700 36px/1.15 Arial,sans-serif;letter-spacing:-1.3px;margin:0 0 12px;color:#173b30}
.esma-collection-head>p{font-size:13px;line-height:1.6;margin:0 0 25px;color:#354b40}
.esma-collection-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;position:relative}
.esma-collection-toolbar .search{width:320px;max-width:100%;min-width:0;flex:0 1 320px;border:1px solid #dce3dd;border-radius:9px;background:#ffffffec;font:13px Arial,sans-serif;height:43px;padding:11px 13px;box-shadow:0 1px 3px #203b2905;margin:0}
.esma-collection-toolbar .tag{font:10px Arial,sans-serif;border:1px solid #dce3dc;background:#f3f6f1;color:#536356;padding:6px 9px;border-radius:18px;white-space:nowrap}
.esma-collection-toolbar .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:10px 15px;border-radius:9px;font:600 12px/1.3 Arial,sans-serif;white-space:nowrap}
.esma-collection-toolbar .btn .ico{width:17px;height:17px;flex-shrink:0}
.esma-collection-toolbar .esma-customize{border:2px solid #406e50;background:linear-gradient(100deg,#e9d9a7,#d9e8d9);color:#2e4530;box-shadow:0 3px 9px #424f3d24}
.esma-collection-toolbar .esma-customize-detail{margin-left:auto;background:#f7faf6cc;border:1px solid #cfdacf;color:#314a3b}
.esma-collection>.note{margin:0 0 18px;padding:12px 15px;border:1px solid #e3e3d3;background:#fbfbf2;border-radius:9px;font-size:11px;line-height:1.5;color:#55624c}
.esma-collection #esma-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.esma-tile.esma-reference-tile{padding:0;border:1px solid #d4dbd1;border-radius:19px;overflow:hidden;box-shadow:0 5px 9px #1e382a21,0 1px 2px #1e382a13;min-width:0;aspect-ratio:1.2;min-height:188px;display:flex;background-repeat:no-repeat;transition:transform .18s,box-shadow .18s}
.esma-reference-tile>.esma-open{width:100%;height:100%;min-height:188px;display:flex;flex-direction:column;align-items:center;padding:17px 12px 15px;background:transparent;border:0;border-radius:18px;color:#152d24;cursor:pointer;text-align:center;position:relative}
.esma-reference-tile>.esma-open small{font:11px/1.4 Arial,sans-serif;color:#b19c54;margin:0 0 4px;display:block;letter-spacing:.4px;text-shadow:0 1px 3px #ffffff26}
.esma-reference-tile .esma-open .arabic{font-family:Mushaf,serif;font-size:36px;font-weight:400;line-height:1.7;margin:auto 0 5px;color:#102b23;text-shadow:0 0 16px #fff8b9,0 0 5px #fff5cd;min-height:61px;max-width:100%;overflow-wrap:anywhere}
.esma-reference-tile .esma-open h3{font:700 22px/1.15 Georgia,'Times New Roman',serif;letter-spacing:-.25px;margin:0 0 8px;color:#192d26;max-width:100%;overflow-wrap:anywhere}
.esma-reference-tile .esma-open p{font:12px/1.5 Arial,sans-serif;margin:0;max-width:100%;max-height:none;overflow:visible;overflow-wrap:anywhere;color:#26382e;min-height:18px}
.esma-reference-tile:has(.esma-open:focus-visible){outline:3px solid #b79c53;outline-offset:3px}
.esma-reference-tile>.esma-open:focus-visible{outline:none}
@media(hover:hover){.esma-reference-tile:hover{transform:translateY(-3px);box-shadow:0 9px 17px #1e382a28}}
@media(min-width:1550px){.esma-collection #esma-grid{gap:22px}.esma-reference-tile>.esma-open{padding:19px 15px 20px}.esma-reference-tile .esma-open .arabic{font-size:42px}.esma-reference-tile .esma-open h3{font-size:25px}}
@media(max-width:1190px){.esma-collection #esma-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.esma-reference-tile{aspect-ratio:auto!important}.esma-reference-tile>.esma-open{padding:15px 9px}.esma-reference-tile .esma-open .arabic{font-size:32px}.esma-reference-tile .esma-open h3{font-size:19px}.esma-reference-tile .esma-open p{font-size:11px}.esma-collection-toolbar{gap:9px}.esma-collection-toolbar .search{flex-basis:270px}.esma-collection-toolbar .btn{padding:10px 12px;font-size:11px}}
@media(max-width:900px){.esma-collection #esma-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.esma-collection-head{background-size:auto 215px}.esma-collection-toolbar .esma-customize-detail{margin-left:0}.esma-collection-toolbar .search{flex:1 1 240px}}
@media(max-width:600px){.esma-collection-head{padding-top:9px;min-height:0;background-position:calc(100% + 95px) -10px;background-size:auto 180px}.esma-collection-head .eyebrow{font-size:8px;letter-spacing:1.3px;margin-bottom:13px}.esma-collection-head h1{font-size:30px;margin-bottom:9px;letter-spacing:-.8px}.esma-collection-head>p{font-size:12px;max-width:230px;margin-bottom:22px}.esma-collection-toolbar{gap:9px}.esma-collection-toolbar .search{flex:1 1 calc(100% - 100px);width:auto}.esma-collection-toolbar .tag{font-size:9px;padding:6px 7px}.esma-collection-toolbar .btn{flex:1 1 auto;min-height:40px;font-size:10px;padding:10px}.esma-collection>.note{font-size:10px;padding:10px 11px;margin-bottom:15px}.esma-collection #esma-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 11px}.esma-tile.esma-reference-tile{border-radius:17px;min-height:185px}.esma-reference-tile>.esma-open{min-height:185px;padding:14px 9px}.esma-reference-tile .esma-open .arabic{font-size:32px;min-height:58px;line-height:1.7}.esma-reference-tile .esma-open h3{font-size:19px;margin-bottom:7px}.esma-reference-tile .esma-open p{font-size:10px;line-height:1.5;min-height:30px}.esma-reference-tile>.esma-open small{font-size:10px}}
@media(prefers-reduced-motion:reduce){.esma-tile.esma-reference-tile{transition:none}}