
/* iOS Safari / Android WebView parity — November 4 */
:root { color-scheme: light; accent-color:#287b16; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
button,input,select,textarea { font-family:inherit; -webkit-appearance:none; appearance:none; }
select, input, textarea { color:#173d25!important; -webkit-text-fill-color:#173d25!important; }
select { color-scheme:light; }
/* Product detail: mobile thumbnail rail must be a short horizontal strip,
   not full-width portrait tiles that create a large blank gap under the hero image. */
@media(max-width:760px) {
 .royal-product-page { padding-top:14px!important; }
 .royal-gallery-column { gap:9px!important; }
 .royal-gallery-wrap {
   display:flex!important; flex-direction:column!important; gap:8px!important;
   align-items:stretch!important;
 }
 .royal-main-photo {
   order:0!important; width:100%!important; height:auto!important;
   aspect-ratio:1/1.02!important; min-height:0!important;
 }
 .royal-thumbs {
   order:1!important; display:flex!important; flex-direction:row!important;
   align-items:center!important; gap:8px!important; width:100%!important;
   height:68px!important; min-height:68px!important; max-height:68px!important;
   padding:0!important; margin:0!important; overflow-x:auto!important;
   overflow-y:hidden!important; scrollbar-width:none!important;
 }
 .royal-thumbs::-webkit-scrollbar { display:none!important; }
 .royal-thumbs .royal-thumb {
   flex:0 0 58px!important; width:58px!important; min-width:58px!important;
   max-width:58px!important; height:62px!important; min-height:62px!important;
   max-height:62px!important; aspect-ratio:auto!important; padding:2px!important;
   border-radius:10px!important;
 }
 .royal-thumbs .royal-thumb img {
   width:100%!important; height:100%!important; object-fit:contain!important;
 }
 .royal-gallery-column .product-story-card {
   margin-top:0!important; padding:14px!important;
 }
}
/* Native iOS select styling was blue; use a green custom chevron and fixed text colour. */
.sort, select.sort, .toolbar select, #sort {
 box-sizing:border-box!important; min-height:46px!important;
 padding:10px 42px 10px 15px!important; border:1px solid #dfe4d8!important;
 border-radius:13px!important; background-color:#fffefa!important;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23173d25' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E")!important;
 background-repeat:no-repeat!important; background-position:right 14px center!important; background-size:16px 16px!important;
 color:#173d25!important; -webkit-text-fill-color:#173d25!important;
 font-size:16px!important; line-height:1.3!important; box-shadow:none!important;
 -webkit-appearance:none!important; appearance:none!important;
}
.sort option, select option, #sort option {
 background:#fffefa!important; color:#173d25!important;
}
select:focus, .sort:focus, #sort:focus {
 outline:2px solid #9bb98b!important; outline-offset:2px!important;
 border-color:#6c965b!important;
}
/* Search action: stable round tap target on iOS Safari and Instagram browser. */
.header .actions #searchBtn, .site-shell>.header .actions #searchBtn,
.inner-page .header .actions #searchBtn {
 box-sizing:border-box!important; display:inline-flex!important;
 align-items:center!important; justify-content:center!important;
 width:52px!important; height:52px!important;
 min-width:52px!important; min-height:52px!important; max-width:52px!important;
 padding:0!important; margin:0!important; flex:0 0 52px!important;
 border:1px solid #e3e8d9!important; border-radius:50%!important;
 background:#fffef8!important; color:#173d25!important;
 -webkit-appearance:none!important; appearance:none!important;
 -webkit-tap-highlight-color:transparent!important; line-height:1!important;
}
.header .actions #searchBtn svg, .site-shell>.header .actions #searchBtn svg,
.inner-page .header .actions #searchBtn svg {
 display:block!important; width:23px!important; height:23px!important;
 min-width:23px!important; min-height:23px!important; max-width:23px!important;
 max-height:23px!important; flex:0 0 23px!important; overflow:visible!important;
 fill:none!important; stroke:#173d25!important; stroke-width:1.9!important;
 stroke-linecap:round!important; stroke-linejoin:round!important;
}
.header .actions #searchBtn svg *, .site-shell>.header .actions #searchBtn svg * {
 vector-effect:non-scaling-stroke;
}
@media(max-width:760px) {
 .header .actions { gap:10px!important; }
 .header .actions #searchBtn { width:50px!important;height:50px!important;min-width:50px!important;min-height:50px!important;flex-basis:50px!important; }
}
