/* Island Investments - accommodation page. Contained cards, sticky booking panel, typographic rather than photographic. Palette drawn from the Island Investments hummingbird mark. */ :root{ --isl-ink:#1f2124;--isl-body:#55595e;--isl-muted:#8a8f94;--isl-ground:#f7f6f4; --isl-card:#fff;--isl-line:#e8e5e0;--isl-line-soft:#f0eeeb;--isl-accent:#e43c48; --isl-accent-dp:#c42f3a;--isl-accent-tint:#fdf1f2;--isl-radius:4px; --isl-shadow:0 1px 2px rgba(31,33,36,.04);--isl-max:1180px;--isl-gap:48px; } .single-mphb_room_type{background:var(--isl-ground);} /* Astra centres .ast-container with auto side margins. Zeroing margin here left the whole page hard against the left edge on wide screens. Reset the box without touching horizontal centring. */ .single-mphb_room_type .site-content,.single-mphb_room_type #primary, .single-mphb_room_type .entry-content,.single-mphb_room_type article.mphb_room_type{background:transparent;box-shadow:none;padding:0;margin:0;border:0;} .single-mphb_room_type .ast-container{background:transparent;box-shadow:none;padding:0;border:0;margin-top:0;margin-bottom:0;margin-left:auto;margin-right:auto;} .single-mphb_room_type .ast-article-single{padding:0;border:0;} .islrd{font-family:Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--isl-body);font-size:16px;line-height:1.75;max-width:var(--isl-max); margin:0 auto;padding:8px 24px 88px;-webkit-font-smoothing:antialiased;} .islrd *,.islrd *::before,.islrd *::after{box-sizing:border-box;} /* header */ .islrd-head{text-align:center;max-width:700px;margin:0 auto;padding:24px 0 40px;} .single-mphb_room_type .islrd-head h1,.single-mphb_room_type .islrd-head .entry-title{ font-family:Montserrat,sans-serif;font-size:clamp(28px,4vw,39px);line-height:1.25; font-weight:600;letter-spacing:-.03em;color:var(--isl-ink);margin:0 0 14px;} .islrd-standfirst{font-size:17px;line-height:1.7;color:var(--isl-muted);margin:0;font-weight:400;} /* gallery - photography held is 640x480, so keep images contained, never full bleed */ .islrd-gallery{margin:0 0 var(--isl-gap);} .islrd-gallery:empty{display:none;} .islrd-gallery img{display:block;width:100%;height:100%;object-fit:cover;border-radius:var(--isl-radius);} .islrd-gallery .flex-control-nav{position:static;margin-top:18px;text-align:center;} .islrd-gallery .flex-control-paging li a{background:var(--isl-line);box-shadow:none;width:8px;height:8px;} .islrd-gallery .flex-control-paging li a.flex-active{background:var(--isl-accent);} .islrd-gallery .flex-direction-nav a{background:var(--isl-card);border:1px solid var(--isl-line); border-radius:50%;width:40px;height:40px;line-height:38px;color:var(--isl-ink);text-align:center;opacity:1;text-shadow:none;} /* two column body */ .islrd-layout{display:grid;grid-template-columns:minmax(0,1fr) 348px;gap:var(--isl-gap);align-items:start;} .islrd-main{min-width:0;} /* prose */ .islrd-prose{margin-bottom:var(--isl-gap);} .islrd-prose p{margin:0 0 22px;color:var(--isl-body);} .islrd-prose h2{font-size:20px;font-weight:600;letter-spacing:-.01em;color:var(--isl-ink);margin:40px 0 16px;line-height:1.4;} .islrd-prose h2:first-child{margin-top:0;} .islrd-prose ul{margin:0 0 22px;padding-left:20px;} .islrd-prose li{margin-bottom:8px;} .islrd-prose li::marker{color:var(--isl-accent);} /* cards */ .islrd-card{background:var(--isl-card);border:1px solid var(--isl-line);border-radius:var(--isl-radius); box-shadow:var(--isl-shadow);padding:36px 40px;margin-bottom:28px;display:grid; grid-template-columns:148px minmax(0,1fr);gap:28px;align-items:start;} .islrd-card-title{font-size:20px;font-weight:600;color:var(--isl-ink);letter-spacing:-.01em;margin:0;line-height:1.4;} .islrd-card-body{min-width:0;} /* attributes */ .islrd .mphb-single-room-type-attributes{list-style:none;margin:0;padding:0;} .islrd .mphb-single-room-type-attributes>li{display:grid;grid-template-columns:132px minmax(0,1fr); gap:16px;padding:11px 0;border-bottom:1px solid var(--isl-line-soft);margin:0;font-size:15px;line-height:1.6;} .islrd .mphb-single-room-type-attributes>li:first-child{padding-top:0;} .islrd .mphb-single-room-type-attributes>li:last-child{border-bottom:0;padding-bottom:0;} .islrd .mphb-attribute-title{color:var(--isl-muted);font-weight:500;font-size:13px;letter-spacing:.02em;text-transform:uppercase;padding-top:2px;} .islrd .mphb-attribute-value{color:var(--isl-ink);font-weight:500;} .islrd .mphb-attribute-value a{color:var(--isl-ink);text-decoration:none;border-bottom:1px solid var(--isl-line);} .islrd .mphb-attribute-value a:hover{color:var(--isl-accent);border-bottom-color:var(--isl-accent);} /* calendar */ .islrd .mphb-calendar,.islrd .datepick{width:100% !important;background:transparent;border:0; font-family:Montserrat,sans-serif;font-size:14px;color:var(--isl-body);} .islrd .datepick-nav{display:flex;align-items:center;justify-content:space-between;background:transparent;border:0;padding:0 0 20px;margin:0;} .islrd .datepick-nav a,.islrd .datepick-cmd{background:transparent;border:1px solid var(--isl-line); border-radius:var(--isl-radius);color:var(--isl-ink);font-size:13px;font-weight:500;padding:7px 14px; text-decoration:none;width:auto;margin:0;transition:border-color .15s,color .15s;} .islrd .datepick-nav a:hover{border-color:var(--isl-accent);color:var(--isl-accent);background:transparent;} .islrd .datepick-cmd-today{color:var(--isl-accent);border-color:transparent;} .islrd .datepick-nav a.datepick-disabled{opacity:.35;pointer-events:none;} .islrd .datepick-month-row{display:flex;gap:32px;flex-wrap:wrap;} .islrd .datepick-month{background:transparent;border:0;flex:1 1 260px;min-width:0;width:auto !important;} .islrd .datepick-month-header,.islrd .datepick-month-header select{background:transparent;border:0; color:var(--isl-ink);font-weight:600;font-size:15px;text-align:center;padding:0 0 14px; font-family:Montserrat,sans-serif;letter-spacing:-.01em;} .islrd .datepick-month-header select{cursor:pointer;padding:2px 4px;} .islrd .datepick-month table{width:100%;border-collapse:collapse;margin:0;border:0;table-layout:fixed;} .islrd .datepick-month th{background:transparent;border:0;color:var(--isl-muted);font-size:11px; font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:0 0 10px;} .islrd .datepick-month td{background:transparent;border:0;padding:2px;text-align:center;vertical-align:top;} .islrd .mphb-date-cell,.islrd .datepick-month td a,.islrd .datepick-month td span{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:46px; padding:5px 2px;border:1px solid transparent;border-radius:var(--isl-radius);background:transparent; color:var(--isl-ink);font-size:14px;font-weight:500;line-height:1.2;text-decoration:none; transition:background-color .12s,border-color .12s,color .12s;} .islrd .mphb-date-cell__price,.islrd .mphb-price{font-size:11px;font-weight:500;color:var(--isl-muted);letter-spacing:-.01em;line-height:1;} .islrd .datepick-month td a.mphb-date-cell{background:#fbfbfa;border-color:var(--isl-line-soft);cursor:pointer;} .islrd .datepick-month td a.mphb-date-cell:hover{border-color:var(--isl-accent);background:var(--isl-accent-tint);color:var(--isl-ink);} /* signature: high season nights tinted so the two-season model is legible at a glance */ .islrd .mphb-date-cell.islrd-premium{background:#fdf6ee;border-color:#f3e3d0;} .islrd .mphb-date-cell.islrd-premium .mphb-price{color:#a8642a;font-weight:600;} .islrd .mphb-date-cell.islrd-premium:hover{border-color:var(--isl-accent);} .islrd .mphb-past-date,.islrd .datepick-month td span.mphb-date-cell{color:#c7c9cb;background:transparent;border-color:transparent;} .islrd .mphb-past-date .mphb-price,.islrd .datepick-month td span.mphb-date-cell .mphb-price{color:#d8dadb;} .islrd .datepick-current-day>*,.islrd .mphb-selected-date, .islrd .datepick-month td a.mphb-date-cell.mphb-selected-date{background:var(--isl-accent) !important;border-color:var(--isl-accent) !important;color:#fff !important;} .islrd .mphb-selected-date .mphb-price{color:rgba(255,255,255,.85) !important;} .islrd .datepick-ctrl{background:transparent;border:0;border-top:1px solid var(--isl-line-soft); padding:16px 0 0;margin-top:12px;display:flex;justify-content:space-between;} .islrd .datepick-ctrl a,.islrd .datepick-ctrl .datepick-cmd{border:0;color:var(--isl-muted);font-size:13px;padding:0;} .islrd .datepick-ctrl a:hover{color:var(--isl-accent);} /* legend */ .islrd-legend{display:flex;align-items:center;gap:8px;margin:18px 0 0;font-size:12px;color:var(--isl-muted);letter-spacing:.01em;} .islrd-key{width:12px;height:12px;border-radius:3px;display:inline-block;flex:none;} .islrd-key--premium{background:#fdf6ee;border:1px solid #f3e3d0;} .islrd-key--economy{background:#fbfbfa;border:1px solid var(--isl-line-soft);margin-left:14px;} /* booking card */ .islrd-booking{min-width:0;} .islrd-booking-card{position:sticky;top:28px;background:var(--isl-card);border:1px solid var(--isl-line); border-radius:var(--isl-radius);box-shadow:var(--isl-shadow);padding:30px 28px;} .islrd-price{margin:0 0 4px;} .islrd-price p,.islrd .mphb-regular-price{margin:0;font-size:15px;color:var(--isl-muted);font-weight:500;} .islrd-price .mphb-price{font-size:30px;font-weight:600;color:var(--isl-ink);letter-spacing:-.02em;line-height:1.2;} .islrd-booking-note{font-size:12.5px;line-height:1.6;color:var(--isl-muted);margin:12px 0 22px; padding-bottom:22px;border-bottom:1px solid var(--isl-line-soft);} .islrd .mphb-reservation-form-title{font-size:15px;font-weight:600;color:var(--isl-ink);margin:0 0 16px;} .islrd .mphb-required-fields-tip{font-size:12px;color:var(--isl-muted);margin:0 0 14px;} .islrd .mphb-booking-form label{display:block;font-size:12px;font-weight:600;letter-spacing:.04em; text-transform:uppercase;color:var(--isl-muted);margin:0 0 7px;} .islrd .mphb-booking-form p{margin:0 0 16px;} .islrd .mphb-booking-form input[type="text"],.islrd .mphb-booking-form input[type="number"], .islrd .mphb-booking-form select{width:100%;height:46px;padding:0 14px;border:1px solid var(--isl-line); border-radius:var(--isl-radius);background:#fff;color:var(--isl-ink);font-family:Montserrat,sans-serif; font-size:14.5px;box-shadow:none;transition:border-color .15s,box-shadow .15s;} .islrd .mphb-booking-form input:focus,.islrd .mphb-booking-form select:focus{outline:none; border-color:var(--isl-accent);box-shadow:0 0 0 3px rgba(228,60,72,.12);} .islrd .mphb-booking-form input::placeholder{color:#b6babd;} .islrd .mphb-booking-form button,.islrd .mphb-booking-form input[type="submit"], .islrd .mphb-booking-form .button{width:100%;height:50px;border:0;border-radius:var(--isl-radius); background:var(--isl-accent);color:#fff;font-family:Montserrat,sans-serif;font-size:14px;font-weight:600; letter-spacing:.02em;cursor:pointer;transition:background-color .15s;margin-top:4px;} .islrd .mphb-booking-form button:hover,.islrd .mphb-booking-form input[type="submit"]:hover, .islrd .mphb-booking-form .button:hover{background:var(--isl-accent-dp);} .islrd .mphb-booking-form button:focus-visible{outline:2px solid var(--isl-ink);outline-offset:2px;} @media (max-width:1024px){ .islrd-layout{grid-template-columns:1fr;gap:32px;} .islrd-booking-card{position:static;} } @media (max-width:782px){ .islrd{padding:4px 18px 64px;} .islrd-card{grid-template-columns:1fr;gap:18px;padding:26px 22px;} .islrd .mphb-single-room-type-attributes>li{grid-template-columns:1fr;gap:2px;} .islrd .datepick-month-row{gap:24px;} } @media (prefers-reduced-motion:reduce){.islrd *{transition:none !important;animation:none !important;}} /* A rating summary with no ratings behind it is worse than none. Hidden until there are real reviews to show. */ .islrd--no-reviews .mphbr-accommodation-rating, .islrd--no-reviews .mphb-room-type-rating, .islrd--no-reviews .mphbr-rating-summary{display:none !important;} /* This plugin supplies the card headings, so MotoPress's own duplicates are hidden rather than removed, which keeps them available to screen readers off the card layout and avoids touching plugin templates. */ .islrd .mphb-details-title, .islrd .mphb-calendar-title, .islrd .mphb-reservation-form-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;} /* Amenity lists run long; underlining every term turns the row into noise. */ .islrd .mphb-room-type-facilities .mphb-attribute-value a, .islrd .mphb-room-type-categories .mphb-attribute-value a{border-bottom:0;color:var(--isl-body);font-weight:400;} .islrd .mphb-room-type-facilities .mphb-attribute-value a:hover, .islrd .mphb-room-type-categories .mphb-attribute-value a:hover{color:var(--isl-accent);} /* GALLERY: the client's photography is 640x480. A single full-width slider renders each image at roughly 680px and upscales it, which is what makes these pictures look soft. A three-up grid renders each frame at about 370px, comfortably inside the native resolution, so they stay sharp. Do not revert this to a full-width slider unless higher resolution originals arrive. */ .islrd-gallery .flex-viewport{height:auto !important;overflow:visible !important;} .islrd-gallery .slides{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px; transform:none !important;width:auto !important;margin:0 !important;padding:0 !important;list-style:none;} .islrd-gallery .slides>li{width:auto !important;max-width:none !important;margin:0 !important; float:none !important;display:block !important;padding:0 !important;opacity:1 !important;position:relative !important;} .islrd-gallery .slides>li img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--isl-radius);} .islrd-gallery .flex-direction-nav,.islrd-gallery .flex-control-nav{display:none !important;} .islrd-gallery .mphb-gallery-thumbnails,.islrd-gallery .flex-control-thumbs{display:none !important;} @media (max-width:900px){.islrd-gallery .slides{grid-template-columns:repeat(2,minmax(0,1fr));}} @media (max-width:560px){.islrd-gallery .slides{grid-template-columns:1fr;}} /* The featured image is repeated as the first gallery tile, and on its own it renders a 640px file at about 680px. Hidden in favour of the grid. */ .islrd-gallery .mphb-single-room-type-post-thumbnail{display:none !important;} .islrd-gallery .gallery{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;margin:0 !important;} .islrd-gallery .gallery-item{width:auto !important;max-width:none !important;margin:0 !important; float:none !important;display:block !important;padding:0 !important;} .islrd-gallery .gallery-icon{margin:0 !important;width:auto !important;} .islrd-gallery .gallery-icon a{display:block;} .islrd-gallery .gallery-item img{width:100% !important;height:100% !important;aspect-ratio:4/3; object-fit:cover;border:0 !important;padding:0 !important;border-radius:var(--isl-radius); transition:opacity .15s;} .islrd-gallery .gallery-item img:hover{opacity:.9;} .islrd-gallery .gallery-caption{display:none !important;} @media (max-width:900px){.islrd-gallery .gallery{grid-template-columns:repeat(2,minmax(0,1fr));}} @media (max-width:560px){.islrd-gallery .gallery{grid-template-columns:1fr;}} /* ========================================================================== LISTING, LIST VIEW A media / body / aside row per property. MotoPress emits the card parts as flat siblings; the plugin wraps them into three columns and this lays them out. Images are one featured shot per row at about 230px, well inside the 640px source, so nothing upscales. ========================================================================== */ .islrd-listing{max-width:1000px;margin:0 auto;padding:0 24px 80px; font-family:Montserrat,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--isl-body);} .mphb_sc_rooms-wrapper{display:flex;flex-direction:column;gap:20px;} .islrd-lrow{display:grid;grid-template-columns:232px minmax(0,1fr) 190px;column-gap:28px;row-gap:0; align-items:stretch;background:var(--isl-card);border:1px solid var(--isl-line); border-radius:var(--isl-radius);box-shadow:var(--isl-shadow);padding:20px; transition:border-color .15s,box-shadow .15s;} .islrd-lrow:hover{border-color:#dcd8d2;box-shadow:0 2px 10px rgba(31,33,36,.06);} /* media */ .islrd-lrow-media{min-width:0;} .islrd-lrow-media img{width:100%;height:100%;min-height:172px;aspect-ratio:4/3;object-fit:cover; border-radius:var(--isl-radius);display:block;} .islrd-lrow-media .mphb-post-thumbnail,.islrd-lrow-media p{margin:0;} /* body */ .islrd-lrow-body{min-width:0;display:flex;flex-direction:column;gap:8px;padding-top:2px;} .islrd-lrow-body .mphb-room-type-title{font-size:19px;font-weight:600;letter-spacing:-.015em; line-height:1.3;margin:0;} .islrd-lrow-body .mphb-room-type-title a{color:var(--isl-ink);text-decoration:none;} .islrd-lrow-body .mphb-room-type-title a:hover{color:var(--isl-accent);} .islrd-lrow-body>p{margin:0;font-size:14px;line-height:1.65;color:var(--isl-body);} /* MotoPress prints its own "Details" heading inside the card; the layout says it */ .islrd-lrow-body .mphb-room-type-details-title{position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;} .islrd-lrow-body .mphb-loop-room-type-attributes{list-style:none;margin:4px 0 0;padding:0; display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;row-gap:5px;} .islrd-lrow-body .mphb-loop-room-type-attributes>li{margin:0;font-size:12.5px;line-height:1.5; color:var(--isl-muted);display:flex;gap:5px;} .islrd-lrow-body .mphb-loop-room-type-attributes .mphb-attribute-title{font-size:12.5px; text-transform:none;letter-spacing:0;font-weight:600;color:var(--isl-muted);padding:0;flex:none;} .islrd-lrow-body .mphb-loop-room-type-attributes .mphb-attribute-value{font-weight:400;color:var(--isl-body);} .islrd-lrow-body .mphb-loop-room-type-attributes a{color:inherit;text-decoration:none;border:0;} .islrd-lrow-body .mphb-loop-room-type-attributes a:hover{color:var(--isl-accent);} /* the amenity row runs long in a narrow column; two lines is plenty */ .islrd-lrow-body .mphb-room-type-facilities{grid-column:1 / -1;display:block;} .islrd-lrow-body .mphb-room-type-facilities .mphb-attribute-value{display:-webkit-box; -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} /* aside */ .islrd-lrow-aside{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start; gap:8px;border-left:1px solid var(--isl-line-soft);padding-left:24px;min-width:0;} .islrd-lrow-aside .mphb-regular-price{margin:0 0 4px;font-size:12px;color:var(--isl-muted); font-weight:500;text-align:center;line-height:1.5;} .islrd-lrow-aside .mphb-price{display:block;font-size:22px;font-weight:600;color:var(--isl-ink); letter-spacing:-.02em;line-height:1.25;} .islrd-lrow-aside .mphb-price-period{display:block;font-size:11.5px;color:var(--isl-muted);font-weight:500;} .islrd-lrow-aside p{margin:0;} .islrd-lrow-aside .button,.islrd-lrow-aside .mphb-book-button, .islrd-lrow-aside .mphb-view-details-button{display:block;width:100%;text-align:center; height:42px;line-height:40px;padding:0 12px;border-radius:var(--isl-radius); font-family:Montserrat,sans-serif;font-size:13px;font-weight:600;letter-spacing:.02em; cursor:pointer;text-decoration:none;transition:background-color .15s,border-color .15s,color .15s;box-sizing:border-box;} .islrd-lrow-aside .mphb-book-button{background:var(--isl-accent);color:#fff;border:1px solid var(--isl-accent);} .islrd-lrow-aside .mphb-book-button:hover{background:var(--isl-accent-dp);border-color:var(--isl-accent-dp);} .islrd-lrow-aside .mphb-view-details-button{background:#fff;color:var(--isl-ink);border:1px solid var(--isl-line);} .islrd-lrow-aside .mphb-view-details-button:hover{border-color:var(--isl-ink);} @media (max-width:900px){ .islrd-lrow{grid-template-columns:200px minmax(0,1fr);row-gap:16px;} .islrd-lrow-aside{grid-column:1 / -1;border-left:0;padding-left:0;border-top:1px solid var(--isl-line-soft); padding-top:16px;flex-direction:row;align-items:center;gap:12px;} .islrd-lrow-aside .mphb-regular-price{text-align:left;flex:1;} .islrd-lrow-aside .button{width:auto;min-width:130px;} } @media (max-width:600px){ .islrd-lrow{grid-template-columns:1fr;} .islrd-lrow-media img{min-height:0;} .islrd-lrow-body .mphb-loop-room-type-attributes{grid-template-columns:1fr;} .islrd-lrow-aside{flex-direction:column;align-items:stretch;} } /* --- listing refinements ------------------------------------------------- */ /* Astra's content container runs to 1200px. Booklium's list sits at about 1000, which keeps the row readable rather than stretching the description. */ .islrd-listing-page .mphb_sc_rooms-wrapper{max-width:1000px;margin-left:auto;margin-right:auto;} .islrd-listing-page{background:var(--isl-ground);} .islrd-listing-page .site-content,.islrd-listing-page .ast-article-single, .islrd-listing-page .entry-content{background:transparent;box-shadow:none;} .islrd-listing-page .entry-header{text-align:center;max-width:700px;margin:0 auto;padding:16px 0 36px;} .islrd-listing-page .entry-title{font-family:Montserrat,sans-serif;font-size:clamp(26px,3.4vw,36px); font-weight:600;letter-spacing:-.03em;color:var(--isl-ink);margin:0;} .islrd-listing-page .ast-single-post-order,.islrd-listing-page .entry-meta{display:none;} /* Book is the primary action and belongs above the secondary one. MotoPress prints View Details first, so the order is corrected here rather than by reordering the plugin's own output. */ .islrd-lrow-aside .mphb-regular-price{order:0;} .islrd-lrow-aside .mphb-to-book-btn-wrapper{order:1;} .islrd-lrow-aside .mphb-view-details-button-wrapper{order:2;} /* Astra styles .button globally and wins on specificity, which was painting the secondary action in Astra blue. */ .islrd-listing-page .islrd-lrow-aside a.mphb-view-details-button, .islrd-listing-page .islrd-lrow-aside a.button.mphb-view-details-button{ background:#fff !important;background-color:#fff !important;color:var(--isl-ink) !important; border:1px solid var(--isl-line) !important;} .islrd-listing-page .islrd-lrow-aside a.mphb-view-details-button:hover, .islrd-listing-page .islrd-lrow-aside a.button.mphb-view-details-button:hover{ border-color:var(--isl-ink) !important;color:var(--isl-ink) !important;background:#fff !important;} .islrd-listing-page .islrd-lrow-aside button.mphb-book-button, .islrd-listing-page .islrd-lrow-aside .mphb-book-button{ background:var(--isl-accent) !important;border-color:var(--isl-accent) !important;color:#fff !important;} .islrd-listing-page .islrd-lrow-aside button.mphb-book-button:hover{ background:var(--isl-accent-dp) !important;border-color:var(--isl-accent-dp) !important;} /* no-underline-fix: Astra underlines content links, including this button. */ .islrd-listing-page .islrd-lrow-aside a.mphb-view-details-button, .islrd-listing-page .islrd-lrow-aside a.button.mphb-view-details-button, .islrd-listing-page .islrd-lrow-aside a.mphb-view-details-button:hover{text-decoration:none !important;} /* loop-attribute-trim: the card is a scanning surface, not a spec sheet. View and Bed Type carry sentence-length values that wrap to three lines and push the row out of shape, so they are held back for the detail page where there is room. */ .islrd-lrow-body .mphb-room-type-view, .islrd-lrow-body .mphb-room-type-bed-type{display:none;} .islrd-lrow-body .mphb-loop-room-type-attributes>li{align-items:baseline;} /* loop-attribute-trim-v2: the display:flex on the generic >li rule is more specific than a plain class selector, so the hide has to match it. */ .islrd-lrow-body .mphb-loop-room-type-attributes>li.mphb-room-type-view, .islrd-lrow-body .mphb-loop-room-type-attributes>li.mphb-room-type-bed-type{display:none;} /* ========================================================================== listing-slider-and-icons Taller media column carrying the gallery slider, and an icon per attribute. Icons are real SVG files in assets/icons so they can be swapped without touching this stylesheet. Applied as masks, so they take their colour from the palette rather than being baked in. ========================================================================== */ :root{--isl-lrow-media-w:300px;--isl-lrow-media-h:248px;} .islrd-lrow{grid-template-columns:var(--isl-lrow-media-w) minmax(0,1fr) 190px;} /* media: slider fills the full height of the row */ .islrd-lrow-media{align-self:stretch;position:relative;border-radius:var(--isl-radius);overflow:hidden;background:var(--isl-line-soft);} .islrd-lrow-media .mphb-room-type-images,.islrd-lrow-media .mphb-gallery-main-slider,.islrd-lrow-media .flex-viewport,.islrd-lrow-media .slides,.islrd-lrow-media .slides>li{height:var(--isl-lrow-media-h) !important;margin:0 !important;padding:0 !important;} .islrd-lrow-media .slides>li{list-style:none;} .islrd-lrow-media img{width:100% !important;height:var(--isl-lrow-media-h) !important;min-height:0;object-fit:cover;border-radius:0;display:block;} /* the thumbnail strip belongs on the detail page, not in a listing row */ .islrd-lrow-media .mphb-gallery-thumbnail-slider,.islrd-lrow-media .flex-control-nav{display:none !important;} /* arrows stay quiet until the row is hovered, so the list reads calmly */ .islrd-lrow-media .flex-direction-nav{list-style:none;margin:0;padding:0;} .islrd-lrow-media .flex-direction-nav a{position:absolute;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.94);border:1px solid var(--isl-line);text-align:center;font-size:0;text-shadow:none;opacity:0;transition:opacity .15s,border-color .15s;z-index:2;display:block;} .islrd-lrow-media .flex-direction-nav .flex-prev{left:10px;} .islrd-lrow-media .flex-direction-nav .flex-next{right:10px;} .islrd-lrow:hover .flex-direction-nav a,.islrd-lrow-media .flex-direction-nav a:focus-visible{opacity:1;} .islrd-lrow-media .flex-direction-nav a:hover{border-color:var(--isl-accent);} .islrd-lrow-media .flex-direction-nav a::after{content:'';position:absolute;inset:0;background-color:var(--isl-ink);} .islrd-lrow-media .flex-prev::after{-webkit-mask-image:url(icons/prev.svg);mask-image:url(icons/prev.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:14px 14px;mask-size:14px 14px;} .islrd-lrow-media .flex-next::after{-webkit-mask-image:url(icons/next.svg);mask-image:url(icons/next.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:14px 14px;mask-size:14px 14px;} /* icons on the attribute rows */ .islrd-lrow-body .mphb-loop-room-type-attributes>li{position:relative;padding-left:22px;} .islrd-lrow-body .mphb-loop-room-type-attributes>li::before{content:'';position:absolute;left:0;top:2px;width:14px;height:14px;background-color:var(--isl-muted);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;} .islrd-lrow-body .mphb-room-type-adults-capacity::before{-webkit-mask-image:url(icons/guests.svg);mask-image:url(icons/guests.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;} .islrd-lrow-body .mphb-room-type-total-capacity::before{-webkit-mask-image:url(icons/guests.svg);mask-image:url(icons/guests.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;} .islrd-lrow-body .mphb-room-type-facilities::before{-webkit-mask-image:url(icons/amenities.svg);mask-image:url(icons/amenities.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;} .islrd-lrow-body .mphb-room-type-categories::before{-webkit-mask-image:url(icons/location.svg);mask-image:url(icons/location.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;} .islrd-lrow-body .mphb-room-type-bedrooms::before{-webkit-mask-image:url(icons/bedrooms.svg);mask-image:url(icons/bedrooms.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;} .islrd-lrow-body .mphb-room-type-bathrooms::before{-webkit-mask-image:url(icons/bathrooms.svg);mask-image:url(icons/bathrooms.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;} .islrd-lrow-body .mphb-room-type-pool::before{-webkit-mask-image:url(icons/pool.svg);mask-image:url(icons/pool.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;} .islrd-lrow-body .mphb-room-type-laundry::before{-webkit-mask-image:url(icons/laundry.svg);mask-image:url(icons/laundry.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;} @media (max-width:900px){.islrd-lrow{grid-template-columns:var(--isl-lrow-media-w) minmax(0,1fr);}} @media (max-width:600px){:root{--isl-lrow-media-h:200px;}.islrd-lrow{grid-template-columns:1fr;}} /* listing-standfirst: sits directly under the page title. Kept in the page content rather than the plugin so the client can edit it. */ .islrd-listing-page .entry-content>.islrd-standfirst{max-width:680px;margin:-18px auto 40px;text-align:center; font-family:Montserrat,sans-serif;font-size:17px;line-height:1.7;color:var(--isl-muted);font-weight:400;} @media (max-width:600px){.islrd-listing-page .entry-content>.islrd-standfirst{font-size:15.5px;margin-bottom:28px;}} /* ========================================================================== single-gallery-slider Three images in view at a time, scrolled horizontally, in the manner of the Booklium reference. At three across in an 1180px column each frame renders at about 384px, comfortably inside the 640px source, so nothing upscales. Built on CSS scroll-snap rather than a slider library: it keeps MotoPress's own lightbox links intact, works with touch and trackpad natively, and has no dependency on flexslider's inline styles. ========================================================================== */ .islrd-gallery{position:relative;} .islrd-gallery .gallery{display:grid !important;grid-auto-flow:column;grid-template-columns:none !important;grid-auto-columns:calc((100% - 28px) / 3);gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;margin:0 !important;padding:0;} .islrd-gallery .gallery::-webkit-scrollbar{display:none;} .islrd-gallery .gallery-item{scroll-snap-align:start;} .islrd-gallery .gallery-item img{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto;border-radius:var(--isl-radius);} /* arrows */ .islrd-gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.95);border:1px solid var(--isl-line);box-shadow:0 1px 6px rgba(31,33,36,.10);cursor:pointer;z-index:3;padding:0;transition:border-color .15s,opacity .15s;} .islrd-gal-nav:hover{border-color:var(--isl-accent);} .islrd-gal-nav[disabled]{opacity:0;pointer-events:none;} .islrd-gal-prev{left:-14px;} .islrd-gal-next{right:-14px;} .islrd-gal-nav::after{content:'';position:absolute;inset:0;background-color:var(--isl-ink);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:16px 16px;mask-size:16px 16px;} .islrd-gal-prev::after{-webkit-mask-image:url(icons/prev.svg);mask-image:url(icons/prev.svg);} .islrd-gal-next::after{-webkit-mask-image:url(icons/next.svg);mask-image:url(icons/next.svg);} /* the lightbox must not blow a 640px photograph up to full screen */ .mfp-img{max-width:900px !important;margin:0 auto;} @media (max-width:900px){.islrd-gallery .gallery{grid-auto-columns:calc((100% - 14px) / 2);}} @media (max-width:600px){.islrd-gallery .gallery{grid-auto-columns:88%;}.islrd-gal-nav{display:none;}} /* --- lightbox ------------------------------------------------------------ The image is capped at its own natural width by the script, so a 640px photograph is shown at 640px rather than stretched across the viewport. */ body.islrd-lb-open{overflow:hidden;} .islrd-lightbox{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;background:rgba(24,25,27,.92);padding:40px;} .islrd-lightbox.is-open{display:flex;} .islrd-lb-figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-height:100%;} .islrd-lb-figure img{display:block;max-height:calc(100vh - 150px);height:auto;border-radius:var(--isl-radius);box-shadow:0 8px 40px rgba(0,0,0,.4);} .islrd-lb-figure figcaption{color:rgba(255,255,255,.8);font-family:Montserrat,sans-serif;font-size:13.5px;text-align:center;max-width:640px;} .islrd-lb-counter{position:absolute;bottom:22px;left:0;right:0;text-align:center;margin:0;color:rgba(255,255,255,.55);font-family:Montserrat,sans-serif;font-size:12px;letter-spacing:.04em;} .islrd-lb-close,.islrd-lb-nav{position:absolute;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.28);cursor:pointer;padding:0;transition:background-color .15s,border-color .15s;} .islrd-lb-close:hover,.islrd-lb-nav:hover{background:rgba(255,255,255,.20);border-color:rgba(255,255,255,.6);} .islrd-lb-close:focus-visible,.islrd-lb-nav:focus-visible{outline:2px solid #fff;outline-offset:2px;} .islrd-lb-close{top:24px;right:24px;} .islrd-lb-prev{left:24px;top:50%;transform:translateY(-50%);} .islrd-lb-next{right:24px;top:50%;transform:translateY(-50%);} .islrd-lb-close::after,.islrd-lb-nav::after{content:'';position:absolute;inset:0;background-color:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:18px 18px;mask-size:18px 18px;} .islrd-lb-prev::after{-webkit-mask-image:url(icons/prev.svg);mask-image:url(icons/prev.svg);} .islrd-lb-next::after{-webkit-mask-image:url(icons/next.svg);mask-image:url(icons/next.svg);} .islrd-lb-close::after{-webkit-mask-image:url(icons/close.svg);mask-image:url(icons/close.svg);} .islrd-gallery .gallery-item a{display:block;cursor:zoom-in;} @media (max-width:600px){.islrd-lightbox{padding:16px;}.islrd-lb-prev{left:8px;}.islrd-lb-next{right:8px;}.islrd-lb-close{top:10px;right:10px;}} /* ========================================================================== brand-green-and-fixes The hummingbird mark carries a red and a green. Red is the action colour. Green becomes the secondary, taking over everything that was still rendering in Astra's default blue, plus the detail icons. ========================================================================== */ :root{--isl-green:#3c7818;--isl-green-dp:#2f5f13;--isl-green-tint:#f2f7ed;} /* links: Astra was painting these #046bd2 */ .islrd .mphb-attribute-value a,.islrd-prose a,.islrd-lrow-body .mphb-attribute-value a,.islrd .gallery-item a{color:var(--isl-green);} .islrd .mphb-attribute-value a:hover,.islrd-prose a:hover,.islrd-lrow-body .mphb-attribute-value a:hover{color:var(--isl-green-dp);border-bottom-color:var(--isl-green-dp);} .islrd-prose li::marker{color:var(--isl-green);} /* icons take the green */ .islrd-lrow-body .mphb-loop-room-type-attributes>li::before{background-color:var(--isl-green);} /* --- single page: icons on the details rows --- */ .islrd .mphb-single-room-type-attributes>li{position:relative;padding-left:26px;} .islrd .mphb-single-room-type-attributes>li::before{content:'';position:absolute;left:0;top:12px;width:15px;height:15px;background-color:var(--isl-green);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;} .islrd .mphb-single-room-type-attributes>li:first-child::before{top:2px;} .islrd .mphb-single-room-type-attributes>li.mphb-room-type-adults-capacity::before{-webkit-mask-image:url(icons/guests.svg);mask-image:url(icons/guests.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;} .islrd .mphb-single-room-type-attributes>li.mphb-room-type-total-capacity::before{-webkit-mask-image:url(icons/guests.svg);mask-image:url(icons/guests.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;} .islrd .mphb-single-room-type-attributes>li.mphb-room-type-facilities::before{-webkit-mask-image:url(icons/amenities.svg);mask-image:url(icons/amenities.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;} .islrd .mphb-single-room-type-attributes>li.mphb-room-type-categories::before{-webkit-mask-image:url(icons/location.svg);mask-image:url(icons/location.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;} .islrd .mphb-single-room-type-attributes>li.mphb-room-type-bedrooms::before{-webkit-mask-image:url(icons/bedrooms.svg);mask-image:url(icons/bedrooms.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;} .islrd .mphb-single-room-type-attributes>li.mphb-room-type-bathrooms::before{-webkit-mask-image:url(icons/bathrooms.svg);mask-image:url(icons/bathrooms.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;} .islrd .mphb-single-room-type-attributes>li.mphb-room-type-pool::before{-webkit-mask-image:url(icons/pool.svg);mask-image:url(icons/pool.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;} .islrd .mphb-single-room-type-attributes>li.mphb-room-type-laundry::before{-webkit-mask-image:url(icons/laundry.svg);mask-image:url(icons/laundry.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;} .islrd .mphb-single-room-type-attributes>li.mphb-room-type-view::before{-webkit-mask-image:url(icons/location.svg);mask-image:url(icons/location.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;} .islrd .mphb-single-room-type-attributes>li.mphb-room-type-bed-type::before{-webkit-mask-image:url(icons/bedrooms.svg);mask-image:url(icons/bedrooms.svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain;} /* --- the booking card must actually be able to travel --- */ /* align-items:start on the grid made this column only as tall as the card, so position:sticky had no room to move. Stretching it gives the card the height of the whole row to travel through. */ .islrd-layout{align-items:stretch;} .islrd-booking{align-self:stretch;} .islrd-booking-card{position:sticky;top:24px;} /* --- calendar: fit two months side by side inside the card --- */ /* The label column left roughly 480px for a two month calendar, so the months wrapped. Stacking the heading above gives the calendar the full card width. Prices stay unabbreviated: 1,800 not 1.8K. */ .islrd-card.islrd-availability{grid-template-columns:1fr;gap:20px;} .islrd .datepick-month-row{gap:22px;flex-wrap:nowrap;} .islrd .datepick-month{flex:1 1 0;min-width:0;} .islrd .datepick-month td{padding:1px;} .islrd .mphb-date-cell,.islrd .datepick-month td a,.islrd .datepick-month td span{min-height:40px;padding:4px 1px;gap:0;font-size:13px;} .islrd .mphb-date-cell__price,.islrd .mphb-date-cell .mphb-price{font-size:10px !important;letter-spacing:-.02em;white-space:nowrap;} .islrd .datepick-month th{font-size:10px;letter-spacing:.04em;} .islrd .datepick-cmd-today{color:var(--isl-green);} .islrd .datepick-nav a:hover{border-color:var(--isl-green);color:var(--isl-green);} @media (max-width:900px){.islrd .datepick-month-row{flex-wrap:wrap;}} /* green-link-precedence: the amenity de-emphasis rule set these to body grey and outranked the palette rule. Amenity and location links now carry the brand green, still without underlines, so a long amenity list reads as text rather than as a row of links. */ .islrd .mphb-room-type-facilities .mphb-attribute-value a, .islrd .mphb-room-type-categories .mphb-attribute-value a, .islrd-lrow-body .mphb-room-type-facilities .mphb-attribute-value a, .islrd-lrow-body .mphb-room-type-categories .mphb-attribute-value a{color:var(--isl-green);border-bottom:0;font-weight:400;} .islrd .mphb-room-type-facilities .mphb-attribute-value a:hover, .islrd .mphb-room-type-categories .mphb-attribute-value a:hover, .islrd-lrow-body .mphb-room-type-facilities .mphb-attribute-value a:hover, .islrd-lrow-body .mphb-room-type-categories .mphb-attribute-value a:hover{color:var(--isl-green-dp);text-decoration:underline;} /* the featured image link is hidden, but it should not carry Astra blue either */ .islrd a.mphb-lightbox{color:var(--isl-green);border-color:var(--isl-green);} /* tighten the day cell now the months sit side by side */ .islrd .datepick-month td a.mphb-date-cell,.islrd .datepick-month td span.mphb-date-cell{min-height:36px;padding:3px 1px;line-height:1.15;} /* --- calendar-ctrl-and-reviews ------------------------------------------- */ /* The 'Select dates / Clear' bar ships with a grey background that reads as a block sitting behind the last week of the month. The earlier transparent rule lost on specificity. */ .islrd .mphb-calendar .datepick .datepick-ctrl,.islrd .datepick-ctrl{background:transparent !important;background-color:transparent !important;border:0;border-top:1px solid var(--isl-line-soft);padding:14px 2px 0;margin-top:14px;display:flex;justify-content:space-between;align-items:center;} .islrd .datepick-ctrl a{color:var(--isl-muted);font-size:12.5px;padding:0;border:0;background:transparent;} .islrd .datepick-ctrl a:hover{color:var(--isl-green);} /* A rating summary with nothing behind it is worse than none. The block is a sibling of the article, so this is flagged on the body, not the wrapper. */ body.islrd-no-reviews .mphb-reviews, body.islrd-no-reviews .comments-area, body.islrd-no-reviews .mphbr-accommodation-rating, body.islrd-no-reviews .mphbr-accommodation-rating-title{display:none !important;} /* --- calendar on small screens ------------------------------------------- */ /* Two months squeezed into a phone makes 2,500 unreadable. Rather than abbreviate it to 2.5K, show one month at a time with cells big enough to carry the real figure. Full review of tablet and mobile still to come. */ @media (max-width:782px){ .islrd .datepick-month-row{flex-wrap:wrap;gap:26px;} .islrd .datepick-month{flex:1 1 100%;} .islrd .datepick-month td a.mphb-date-cell,.islrd .datepick-month td span.mphb-date-cell{min-height:48px;font-size:15px;} .islrd .mphb-date-cell__price,.islrd .mphb-date-cell .mphb-price{font-size:12px !important;} } /* --- header-and-small-phone ---------------------------------------------- */ /* The logo carries the name, so the text title beside it was both duplication and, at that width, a wrapped mess reading 'Island Invest ment s'. */ .site-title,.site-description{display:none !important;} .custom-logo-link img,.astra-logo-svg{max-height:64px;width:auto;} .main-header-menu .menu-link,.ast-header-break-point .main-header-menu .menu-link{font-family:Montserrat,sans-serif;font-size:14.5px;font-weight:500;letter-spacing:.01em;color:#1f2124;} .main-header-menu .menu-item:hover>.menu-link,.main-header-menu .current-menu-item>.menu-link{color:#e43c48;} /* Small phones: keep the real figure, per the decision not to abbreviate, but let the type scale down so 2,500 still fits a narrow day cell. */ @media (max-width:430px){ .islrd .datepick-month td a.mphb-date-cell,.islrd .datepick-month td span.mphb-date-cell{min-height:44px;font-size:13.5px;} .islrd .mphb-date-cell__price,.islrd .mphb-date-cell .mphb-price{font-size:10px !important;} } @media (max-width:360px){ .islrd .datepick-month td a.mphb-date-cell,.islrd .datepick-month td span.mphb-date-cell{min-height:40px;font-size:12.5px;} .islrd .mphb-date-cell__price,.islrd .mphb-date-cell .mphb-price{font-size:8.5px !important;letter-spacing:-.03em;} } /* --- policy-card --------------------------------------------------------- The practical answers a guest looks for before committing: times, minimum stay, what they pay now, what happens if they cancel. Previously nowhere on the page. Check-in and check-out are read from MotoPress so this cannot drift from what the booking engine enforces. ------------------------------------------------------------------------- */ .islrd-facts{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 28px;} .islrd-facts>div{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-bottom:1px solid var(--isl-line-soft);} .islrd-facts dt{font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--isl-muted);margin:0;} .islrd-facts dd{margin:0;font-size:14.5px;line-height:1.55;color:var(--isl-ink);font-weight:500;} .islrd-facts-title{font-size:15px;font-weight:600;color:var(--isl-ink);margin:26px 0 6px;letter-spacing:-.01em;} .islrd-facts-note{font-size:13.5px;line-height:1.65;color:var(--isl-body);margin:0 0 12px;} .islrd-cancel{list-style:none;margin:0 0 18px;padding:0;border:1px solid var(--isl-line-soft);border-radius:var(--isl-radius);overflow:hidden;} .islrd-cancel li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:9px 14px;font-size:13.5px;color:var(--isl-body);border-bottom:1px solid var(--isl-line-soft);} .islrd-cancel li:last-child{border-bottom:0;} .islrd-cancel li:nth-child(odd){background:#fcfcfb;} .islrd-cancel strong{font-weight:600;color:var(--isl-ink);font-variant-numeric:tabular-nums;} .islrd-cancel li:last-child strong{color:var(--isl-accent);} @media (max-width:782px){.islrd-facts{grid-template-columns:1fr;}} /* gal-nav-state-fix: Astra styles