/*
 * "unitprints.com" light restyle overlay for order.unitprints.com.
 * Flips the CSS-driven UI from the old dark theme to the light editorial look:
 * white background, dark text, the site's original Calibri/Helvetica sans-serif type, monochrome (black/grey) accents.
 * Content, images, and layout are untouched; this is styling only.
 * Loaded after style.css + the theme so it overrides. Remove the <link> in
 * head.php to revert. Tokens from the unitprints.com Squarespace site.
 */

:root {
  --up-brand:      #202020;
  --up-brand-dark: #606160;
  --up-ink:        #1a1a1a;
  --up-bg:         #ffffff;
  --up-muted:      #f5f5f5;
  --up-line:       #e6e6e6;
  --up-font-head:  calibri, helvetica, arial, sans-serif;
  --up-font-body:  calibri, helvetica, arial, sans-serif;
}

/* --- Type --- */
body, input, select, textarea, button, table, td, th, li, p, span, div, a, label {
  font-family: var(--up-font-body);
}
h1, h2, h3, h4, h5, h6 { font-family: var(--up-font-head); font-weight: 600; }

/* --- Flip the whole surface to light --- */
html, body { background: #fff !important; color: var(--up-ink) !important; }
body { background-image: none !important; }
/* The content region paints a dark texture image from the theme */
#MainContent, #content, .ContentWrapper { background-image: none !important; background: #fff !important; }

/* Logo: the shipped wordmark is white, built for the dark theme. It moves up
   into the dark top bar (which matches unitprints.com's dark header), so it
   reads as-is: no box, no recolor. It's positioned at the top-left of the 1200
   column, opposite the account links, with CSS rather than by moving the markup
   so the photographer-share / client-proofing modes (which relocate the logo
   themselves) stay untouched. */
div.logo { background: none !important; padding: 0 !important; border-radius: 0; }
div.logo img.logo, img.logo { filter: none; }
/* Give the top bar a consistent minimum height so the logo always fits, no
   matter how short the account section renders on a given page. */
body:not(.ph_s):not(.ClientProofing) div#AdminNav { min-height: 72px; box-sizing: border-box; }
/* Anchor the logo to the page top (the initial containing block) rather than the
   nav bar below it: the top bar's height varies page to page, so a fixed offset
   from the nav bar clips the logo. A fixed offset from the page top is stable
   everywhere; left tracks the centered 1200 column. */
body:not(.ph_s):not(.ClientProofing) .ActionMenu .wrapper > div.logo {
  position: absolute; top: 6px; left: calc(50% - 600px); width: auto; margin: 0; z-index: 5;
}
body:not(.ph_s):not(.ClientProofing) .ActionMenu .wrapper > div.logo img.logo {
  height: 60px; width: auto;
}

/* ---- Responsive header ----------------------------------------------------
   style.css already makes div.wrapper fluid below 1200px; it was inert until
   the viewport meta was added to head.php. Below 1200 the top-bar logo math no
   longer holds, so the logo drops back into the nav bar and the nav collapses
   behind a hamburger. Hidden on desktop. */
/* The global button rule fills buttons with the dark brand color; override it so
   the hamburger is just three dark bars on the light nav bar, not a dark box. */
.nav-toggle { display: none; background: none !important; border: 0 !important; box-shadow: none !important; padding: 8px; cursor: pointer; line-height: 0; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: #202020 !important; margin: 5px 0; border-radius: 1px; }

@media (max-width: 1199px) {
  /* logo returns to the nav bar; top bar hugs the account links */
  body:not(.ph_s):not(.ClientProofing) div#AdminNav { min-height: 0; }
  div#AdminNav { text-align: center; }
  /* the account links center and wrap here, so the "action required" pill flows
     inline with them (like the tier pill) instead of right-floating on its own */
  #AdminNav span.yellow { display: inline-block !important; width: auto !important; margin: 0 0 0 6px !important; vertical-align: middle; }

  /* nav bar as a 3-column grid: hamburger left, logo dead-center, cart right, nav
     on its own row. Equal 1fr side columns keep the logo centered no matter how
     wide the cart label gets. */
  div.ActionMenu > .wrapper { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; row-gap: 6px; }
  /* on the light nav bar the white wordmark washes out, so sit it on a dark tile
     (keeps the logo's color instead of flattening it to black) */
  body:not(.ph_s):not(.ClientProofing) .ActionMenu .wrapper > div.logo {
    position: static; top: auto; left: auto; z-index: auto; grid-column: 2; grid-row: 1; justify-self: center; margin: 0; float: none;
    background: #202020 !important; padding: 8px 14px !important; border-radius: 6px;
  }
  body:not(.ph_s):not(.ClientProofing) .ActionMenu .wrapper > div.logo img.logo { height: 44px; filter: none; }
  /* main unitprints lab: drop the dark tile and use the new dark wordmark, so it
     sits directly on the light nav bar with no box (per the client). Painted as a
     contained background on the link so the asset's whitespace does not stretch
     the bar. Other labs keep their own logo on the tile above. */
  body:not(.ph_s):not(.ClientProofing) .ActionMenu .wrapper > div.logo.up-main-logo {
    background: none !important; padding: 0 !important; border-radius: 0;
  }
  body:not(.ph_s):not(.ClientProofing) .ActionMenu .wrapper > div.logo.up-main-logo a {
    display: block; width: 170px; height: 52px;
    background: url(unitprints-logo.png) no-repeat center center; background-size: contain;
  }
  body:not(.ph_s):not(.ClientProofing) .ActionMenu .wrapper > div.logo.up-main-logo img.logo {
    display: none !important;
  }
  /* hamburger left, logo centered, cart right (nav lives in the dropdown now) */
  .nav-toggle { display: block; grid-column: 1; grid-row: 1; justify-self: start; margin: 0; }
  a#shoppingcart { grid-column: 3; grid-row: 1; justify-self: end; float: none; }
  ul#ActionMenu { grid-column: 1 / -1; grid-row: 2; width: auto; float: none; display: none; padding: 0; }
  div.ActionMenu.nav-open ul#ActionMenu { display: block; padding: 6px 0 0 0; }
  li.ActionMenu { display: block; padding: 0; font-size: 1.1em; border-top: 1px solid var(--up-line); }
  /* make the whole row tappable, not just the link text */
  li.ActionMenu a, li.ActionMenu a.ActionMenu { display: block; padding: 10px 8px; }
}

/* Content text readable on white (was light-on-dark) */
p, td, th, li, label, span, div, .data { color: var(--up-ink); }
h1, h2, h3, h4 { color: var(--up-ink) !important; }

/* --- Chrome: dark top strip, white header/footer --- */
#AdminNav { background: var(--up-brand) !important; }
#AdminNav, #AdminNav a, #AdminNav li { color: #fff !important; }
/* "Action required" account notice: render it as a badge like the tier pill so
   it stands out again on the lighter header (per the designer). */
#AdminNav span.yellow {
  display: block;          /* keep it on its own line (under My Account), as before */
  width: fit-content;      /* so the pill hugs its text instead of stretching */
  margin: 3px 0 0 auto;    /* margin-left:auto right-aligns it with the account links */
  background: #d97706 !important;
  color: #fff !important;
  padding: 1px 9px;
  border-radius: 10px;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
/* Header background */
div.ActionMenu {
  background: whitesmoke !important;
  background-image: none !important;
  border-bottom: 1px solid var(--up-line);
  padding: 1em 0 .5em 0 !important;
}
#Footer, ul.footer, ul.footer li, div.social, div.verse { background: whitesmoke !important; color: #666 !important; }

/* Below the full desktop column the footer socials (float:right, pulled up 60px to
   tuck beside the links) land on top of the links and copyright. Stack the footer
   centered across the collapsed-header range so nothing overlaps. Socials kept. */
@media (max-width: 1199px) {
  div#Footer div.verse { float: none; }
  div#Footer div.social { float: none; margin: 10px 0 0 0; text-align: center; }
  div#Footer div.SocialButton { float: none; display: inline-block; }
  /* keep each footer link whole so "Terms of Service" no longer breaks with
     "Service" dropping onto its own line under "Contact Us". */
  div#Footer ul.footer li { display: inline-block; white-space: nowrap; }
}

/* Nav links: dark on white, dark on hover */
#ActionMenu a, a.ActionMenu, li.ActionMenu a { color: var(--up-ink) !important; }
#ActionMenu a:hover, a.ActionMenu:hover, li.ActionMenu a:hover { color: var(--up-brand) !important; }

/* --- Links --- */
a { color: var(--up-brand); }
a:hover { color: var(--up-brand-dark); }

/* --- Buttons -> dark --- */
.submit a, a.emphasis.button, input[type="submit"], button, button.primary,
a[class*="utton"] {
  background: var(--up-brand) !important;
  background-image: none !important;
  border: 1px solid var(--up-brand-dark) !important;
  color: #fff !important;
  border-radius: 6px;
}
.submit a:hover, input[type="submit"]:hover, button:hover { background: var(--up-brand-dark) !important; }

/* --- Form fields on white --- */
input, select, textarea { background: #fff; border: 1px solid var(--up-line); color: var(--up-ink); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--up-brand);
  box-shadow: 0 0 0 3px rgba(0,0,0,.15);
}

/* --- Client readability tweaks --- */
/* Forgot-password link: grey but legible (per the client), not too faint. The mobile
   #login rule keeps its own larger, brand-colored version. */
p.forgot { font-size: 13px; }
p.forgot a { color: #555; text-decoration: underline; }
/* My Account: the little per-field explanations were too small to read comfortably. */
table.myaccountfields span.note { font-size: 13px; }
/* Shopping cart Promo Code: let the field and Apply button fill the grey box. */
div.Coupon_div input#PromoCode_field { width: 100% !important; box-sizing: border-box; margin: 4px 0 6px 0; }
div.Coupon_div input[type="submit"] { width: 100% !important; box-sizing: border-box; }

/* Mobile forms: input.input / textarea.input are hard-set to 600px, and several form
   containers to fixed widths (myaccountfields 800, ShareForm 583, RegisterAgreement
   475, ContactUs 650, CheckBoxes 550, StaticText 800), so forms and the static/policy
   pages run wider than a phone. Make the fields and these containers fluid so they fit
   the screen. Covers register, login, forgot, reset, account, share, contact, and the
   help/policy pages in one shot. */
@media (max-width: 768px) {
  input.input, textarea.input, select.input, .ClientProofingForm input.input {
    width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
  }
  table.myaccountfields, div.ShareForm, div.RegisterAgreement,
  div.ContactUs, div.StaticText, div#CheckBoxes {
    width: 100% !important; max-width: 100% !important;
    float: none !important; box-sizing: border-box !important;
  }
  /* myaccount.php / forgot.php: myaccountfields is a 3-column table (rows split into
     First/Last, City/State/Zip, Email/PayPal). Stack every cell to a full-width block
     so each field gets its own row instead of being crammed 3-across on a phone. */
  table.myaccountfields, table.myaccountfields tbody,
  table.myaccountfields tr, table.myaccountfields td {
    display: block !important; width: 100% !important; box-sizing: border-box;
  }
  table.myaccountfields td { padding: 4px 0 !important; }
  /* order.php / subscription card form: table.orderfields floats and shrink-wraps, so
     on a phone the payment form becomes a narrow floated column. Make it fill the
     width. The wide Name / Card Number fields go full-width; the small MM / YYYY / CVC
     fields stay side by side (they fit). */
  table.orderfields { width: 100% !important; float: none !important; }
  /* Pro pages / royalty / category management use fixed-width float containers
     (ProVersion_div & pro_detail 900px, RoyaltySecondChoices 650px, Category_div 870px)
     that overflow a phone; make them fluid. (ShareForm and StaticText are already
     handled by the mobile form rule above.) */
  div.ProVersion_div, div.pro_detail, div.RoyaltySecondChoices, div.Category_div {
    width: 100% !important; max-width: 100% !important;
    float: none !important; box-sizing: border-box !important;
  }
  /* My Account: with the fields stacked, space out each row group and add a light
     divider so the form is easier to scan, and center the single Update button
     (per the client). */
  table.myaccountfields tr {
    margin-bottom: 16px !important; padding-bottom: 12px !important;
    border-bottom: 1px solid var(--up-line);
  }
  table.myaccountfields tr:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom: 0 !important; }
  div#Update_Account_Button.submit { float: none !important; display: table !important; margin: 18px auto !important; clear: both !important; }
}

/* --- Theme dark textures on tables/panels/buttons -> light grey + dark --- */
th.columnheader, th.numericcolumnheader, tr.odd, tr.even, .Coupon_div {
  background-image: none !important;
}
/* Header row stays dark, body cells go light */
th.columnheader, th.numericcolumnheader { background: #202020 !important; color: #fff !important; }
tr.odd, tr.even, tr.odd td, tr.even td, .Coupon_div { background: #f0f0f0 !important; }
tr.odd, tr.even, tr.odd td, tr.even td, .Coupon_div, .Coupon_div * { color: var(--up-ink) !important; }
/* Likes page (album_favorites_list.php): table#Likes rows still paint the theme linen
   texture (its id out-specifies the generic row rule above), so it shows as a dark panel
   on the white page. Flatten the rows to light to match the other tables. */
table#Likes tr { background-image: none !important; background: #f0f0f0 !important; }

/* Submit buttons (Order Now, Empty Cart) -> dark */
div.submit, div.submit a {
  background-image: none !important;
  background: var(--up-brand) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 6px;
}
div.submit:hover, div.submit a:hover { background: var(--up-brand-dark) !important; }
/* Button label is a green <p>; force white. Recolor the green icon to white. */
div.submit p, div.submit .green, div.submit p.green, div.submit #photo_cart_submit_p { color: #fff !important; }
div.submit img.green, div.submit img { filter: brightness(0) invert(1) !important; }

/* cart.php desktop: Order Now (CheckOut_div) and Empty Cart (EmptyCart_div) are wrapped
   in .cart-actions, which floats into Order Now's original spot (just right of the
   summary). Inside, both stack as blocks so Empty Cart sits directly under Order Now,
   left-aligned, and Order Now stays where it always was. (Mobile handled by the cart
   rules further down.) */
@media (min-width: 769px) {
  div.cart-actions { float: left; margin: 35px 0 0 9px; }
  div.cart-actions div.CheckOut_div,
  div.cart-actions div.EmptyCart_div { float: none !important; margin: 0 0 8px 0 !important; }
  div.cart-actions div.submit { float: none !important; display: inline-block !important; }
}

/* login.php: the log-in and create-account columns are 45% floats that stay side
   by side and narrow on a phone. Stack them full-width and centered, so the fields
   (already 100% of their column) span the screen; enlarge the Log In / Create an
   Account buttons for tapping and make the forgot-password link legible. */
@media (max-width: 768px) {
  #login div.leftcol, #login div.rightcol {
    width: 100% !important; float: none !important; padding: 15px 0 !important;
    box-sizing: border-box; text-align: center;
  }
  #login div.rightcol { border-top: 1px solid var(--up-line); margin-top: 12px; }
  #login label { text-align: center; }
  #login p.forgot { font-size: 15px; margin: 12px 0; }
  #login p.forgot a { color: var(--up-brand); text-decoration: underline; }
  #login div.submit { float: none !important; display: inline-block; margin: 14px auto; padding: 12px 26px; }
  #login div.submit p, #login div.submit p.green { font-size: 16px; }
}

/* Outer border to define the tables/panels as cards against the white page */
table.sortable, .Coupon_div { border: 1px solid #dcdcdc !important; }

/* Action icons are light PNGs for the dark theme; darken so they read on light cells */
img[src*="edit_sg.png"], img[src*="delete.png"], img[src*="add.png"], img[src*="share.png"], img[src*="view.png"] { filter: brightness(0.35); }

/* orders: the whole row is clickable (opens the order); the view link and delete
   widgets still handle their own clicks. Pointer + hover highlight for affordance. */
table.sortable tr.row-clickable { cursor: pointer; }
table.sortable tr.row-clickable:hover td { background: #e8e8e8 !important; }

/* orders table is ~13 columns wide. Keep any horizontal scroll inside the table
   box instead of the page. */
.table-scroll { overflow-x: auto; overflow-y: hidden; /* horizontal-scroll only; let vertical swipes reach the page */ }
/* on phones, drop the detail columns (4th..11th: instructions, promo, ship-to and
   the money breakdown) and keep ID, Created, Status, Total, Action. The full
   detail is one tap away since the row is clickable. Scoped to .table-scroll so
   the cart's sortable table is untouched. */
@media (max-width: 768px) {
  .table-scroll table.sortable tr > *:nth-child(n+4):nth-child(-n+11) { display: none; }
  /* the table is hard-coded to 1200px, which stretches the columns; let it size
     to its content so each column is only as wide as it needs to be */
  .table-scroll table.sortable { width: auto !important; }
}

/* myalbums: "New Album" action tile. No border (it floats in a tight row and a
   border grows the content-box width enough to drop it below), just neutralize
   the dark texture and darken the light icon. */
.Actions {
  background-image: none !important;
  background: #f0f0f0 !important;
  color: #1a1a1a !important;
}
.Actions img { filter: brightness(0.35); }

/* album view: the photo frames and the order/action sidebar ship with the
   charcoal theme texture and light-grey text meant for a dark background. Drop
   the textures for light cards and force the inherited text dark so it reads.
   Elements with their own color (the green order action, blue links) keep it. */
div.ThumbFrame { background-image: none !important; background: #f0f0f0 !important; }

/* album grid select checkbox: the box used to be baked into the frame background
   image (photo_not_selected.png / photo_selected.png, which vary by theme), which
   the light frame erased. Redraw it on a real .check-box element (added to each
   selectable thumbnail) so it can host a two-stroke animated check. Empty grey box
   on the light frame; on selection the box draws a brand-green check in (the frame stays
   light). Adapted from a uiverse.io checkbox. */
div.ThumbFrame:has(> .not_selected), div.ThumbFrame:has(> .is_selected) { position: relative; }
div.ThumbFrame > .check-box {
  --cb: 20px;
  position: absolute; top: 8px; right: 8px;
  height: var(--cb); width: var(--cb);
  box-sizing: border-box;
  background: #ffffff;
  border: calc(var(--cb) * .1) solid #9a9a9a;
  border-radius: 4px;
  display: inline-block;
  z-index: 3; pointer-events: none;
  transition: border-color ease .2s;
}
div.ThumbFrame > .check-box::before,
div.ThumbFrame > .check-box::after {
  box-sizing: border-box;
  position: absolute; height: 0; width: calc(var(--cb) * .2);
  background-color: #72AE3C;
  transform-origin: left top;
  border-radius: 5px;
  content: " ";
}
div.ThumbFrame > .check-box::before {
  top: calc(var(--cb) * .72); left: calc(var(--cb) * .41);
  box-shadow: 0 0 0 calc(var(--cb) * .05) #ffffff;
  transform: rotate(-135deg);
}
div.ThumbFrame > .check-box::after {
  top: calc(var(--cb) * .37); left: calc(var(--cb) * .05);
  transform: rotate(-45deg);
}
div.ThumbFrame:has(> .is_selected) > .check-box { border-color: #72AE3C; }
div.ThumbFrame:has(> .is_selected) > .check-box::after {
  height: calc(var(--cb) / 2);
  animation: up-check-bottom .2s ease 0s forwards;
}
div.ThumbFrame:has(> .is_selected) > .check-box::before {
  height: calc(var(--cb) * 1.2);
  animation: up-check-top .4s ease 0s forwards;
}
@keyframes up-check-bottom { 0% { height: 0; } 100% { height: calc(var(--cb) / 2); } }
@keyframes up-check-top { 0% { height: 0; } 50% { height: 0; } 100% { height: calc(var(--cb) * 1.2); } }

/* selected thumbnail: keep the frame light instead of tinting it dark on selection - the
   green check in the corner is enough to show it's selected. Still suppress the theme's
   photo_selected.png so no dark image shows. */
div.ThumbFrame .is_selected { background-image: none !important; }
div.OrderSelect {
  background-image: none !important;
  background: #f0f0f0 !important;
  color: #1a1a1a !important;
}
/* My Photos (and the other album-view pages): the right action panel reads a bit
   squished at 12px in a 170px column. On desktop give it slightly larger text, a
   touch more width, and taller action rows (per the client). */
@media (min-width: 769px) {
  .wrapper.album-page #action-menu.action-menu-right div.OrderSelect,
  .wrapper.album-page #action-menu.action-menu-right div.Actions,
  .wrapper.album-page #action-menu.action-menu-right div.Categories_div {
    font-size: 14px !important; width: 190px !important;
  }
  .wrapper.album-page #action-menu.action-menu-right div.Action { padding: 8px 0 !important; }
}
/* Sort By / View / share links are a pale blue that washes out on white */
#MainContent a.blue, #MainContent a.selected { color: #1f6f8a !important; }

/* Mosaic view: lay the photos out as CSS columns so the grid reflows responsively -
   three columns on desktop, a single in-order column on a phone. Replaces the old
   three hardcoded float columns, which overflowed and slid behind the action menu on
   mobile. Photo order is preserved because they now flow through one container. */
div.Mosaic_grid { column-count: 3; column-gap: 14px; }
div.Mosaic_grid > div.Mosaic { break-inside: avoid; -webkit-column-break-inside: avoid; display: block; width: 100%; margin: 0 0 14px 0; }
div.Mosaic_grid div.Mosaic.not_selected,
div.Mosaic_grid div.Mosaic.is_selected,
div.Mosaic_grid div.Mosaic.selecting { width: 100% !important; height: auto !important; line-height: normal !important; }
div.Mosaic_grid img.Mosaic { width: 100% !important; height: auto !important; margin: 0 !important; display: block; }
@media (max-width: 768px) {
  div.Mosaic_grid { column-count: 1; }
  /* mosaic wants the full width on a phone, with the action menu stacked below rather
     than floated beside it (the tiled 56/40 split is too narrow for full photos). */
  body:not(.ph_s):not(.ClientProofing) .wrapper.album-page:has(div.Mosaic_grid) div.Content.AlbumContent { width: 100% !important; }
  body:not(.ph_s):not(.ClientProofing) .wrapper.album-page:has(div.Mosaic_grid) #action-menu.action-menu-right { float: none !important; width: 100% !important; }
  /* photo popup action bar: the icons (Download, View Details, Copy, Move, ...) float
     and wrap unevenly on a phone (five, then a lone one, then two). Lay them out as a
     centered flex grid of equal-width items so they wrap into even rows. */
  div.MosaicActionsBar {
    display: flex !important; flex-wrap: wrap; justify-content: center;
    width: 100% !important; margin: 10px auto 0 !important; box-sizing: border-box;
  }
  div.MosaicActionsBar span.MosaicActions {
    float: none !important; width: 72px !important; margin: 8px 4px !important;
    text-align: center; box-sizing: border-box;
  }
  /* stack the icon over its label on every item (the icon and text are inline in
     the link, so short labels wrapped under but longer ones ran alongside). Making
     the icon a centered block drops the label below it consistently. */
  div.MosaicActionsBar span.MosaicActions a,
  div.MosaicActionsBar span.MosaicActions > span { display: block !important; }
  div.MosaicActionsBar span.MosaicActions img { display: block !important; margin: 0 auto 4px !important; }
}

/* album.php mobile layout: keep the Order/Actions panel beside the thumbnails.
   Desktop floats the thumbnail column (div.Content, 73% on mobile) left and the
   170px Order/Actions panels right; on a phone they can't sit side by side, so the
   right-floated panel wraps below, and div.Content's 500px min-height leaves a tall
   empty gap above it. Narrow the thumbnail column, drop the min-height, and make the
   panel a proportional right column so it sits up beside the image. Scoped to
   .album-page and the normal (non-share, non-proofing) modes. */
@media (max-width: 768px) {
  body:not(.ph_s):not(.ClientProofing) .wrapper.album-page div.Content.AlbumContent {
    width: 56% !important;
    min-height: 0 !important;
  }
  body:not(.ph_s):not(.ClientProofing) .wrapper.album-page div.OrderSelect,
  body:not(.ph_s):not(.ClientProofing) .wrapper.album-page div.Actions {
    width: 40% !important;
    padding: 10px !important;
    box-sizing: border-box !important;
  }
  /* My Photos wraps its sidebar in #action-menu and adds two Categories_div filter
     boxes (Categories to show / hide); the plain 40%-per-box rule above made those
     nested boxes flow wrong. Make the whole action menu the 40% right column and stack
     its boxes full-width inside it. The #action-menu id out-specifies the rule above. */
  body:not(.ph_s):not(.ClientProofing) .wrapper.album-page #action-menu.action-menu-right {
    width: 40% !important; float: right !important; box-sizing: border-box;
  }
  body:not(.ph_s):not(.ClientProofing) .wrapper.album-page #action-menu div.OrderSelect,
  body:not(.ph_s):not(.ClientProofing) .wrapper.album-page #action-menu div.Actions,
  body:not(.ph_s):not(.ClientProofing) .wrapper.album-page #action-menu div.Categories_div {
    width: 100% !important; float: none !important; padding: 8px !important; box-sizing: border-box !important;
  }
  /* action-menu rows: the icon and its label were both float:left with the label
     locked to height:15px, so in the narrow mobile column multi-line labels (Delete
     Selected Photos, Show Deleted Photos, etc.) overflowed and collided with the row
     below. Lay each row out as a clean flex line: icon left, label wrapping beside it,
     row growing to fit. */
  .wrapper.album-page #action-menu div.Action a { display: flex !important; align-items: flex-start; gap: 6px; }
  .wrapper.album-page #action-menu div.Action a img { float: none !important; margin: 2px 0 0 0 !important; flex: 0 0 auto; }
  .wrapper.album-page #action-menu div.Action a p { float: none !important; height: auto !important; line-height: 1.3 !important; padding: 0 !important; margin: 0 !important; text-align: left; flex: 1 1 auto; min-width: 0; }
  .wrapper.album-page #action-menu div.Action a div.clear { display: none !important; }
}

/* gallery_share.php mobile: cover on the left with the tools menu (#action-menu) beside it
   on the right, and drop the share form (text + email option) full-width below the image. */
@media (max-width: 768px) {
  .wrapper.gallery-share-page div.AlbumCover {
    float: left !important; width: 48% !important; height: auto !important; box-sizing: border-box !important; margin: 0 !important;
  }
  .wrapper.gallery-share-page div.AlbumCover img.AlbumCover { max-width: 100% !important; height: auto !important; }
  .wrapper.gallery-share-page #action-menu.action-menu-right {
    float: right !important; width: 50% !important; box-sizing: border-box !important;
  }
  .wrapper.gallery-share-page #action-menu div.OrderSelect,
  .wrapper.gallery-share-page #action-menu div.Actions {
    width: 100% !important; float: none !important; box-sizing: border-box !important;
  }
  .wrapper.gallery-share-page #galleryShareMethods {
    clear: both !important; float: none !important; width: 100% !important; padding-top: 14px !important;
  }
  /* the gallery config / royalty tables drop full-width below, filling the phone. */
  .wrapper.gallery-share-page #galleryShareTables,
  .wrapper.gallery-share-page div.ActiveInvitations {
    clear: both !important; float: none !important; width: 100% !important;
  }
  .wrapper.gallery-share-page #galleryShareTables table.sortable,
  .wrapper.gallery-share-page div.ActiveInvitations table.sortable {
    width: 100% !important;
  }
  /* keep the dark table titles on a single line instead of wrapping to the left. */
  .wrapper.gallery-share-page table.sortable th.columnheader {
    white-space: nowrap !important;
  }
  /* the config/royalty tables use fixed 15%/60% cell widths that squeeze the
     description column into a cramped sliver on a phone. Stack each row's cells
     full-width so the label, controls, and description each read cleanly; hide the
     empty header cells so the title stays one clean dark bar. */
  .wrapper.gallery-share-page #galleryShareTables table.sortable tbody,
  .wrapper.gallery-share-page #galleryShareTables table.sortable tr,
  .wrapper.gallery-share-page #galleryShareTables table.sortable td,
  .wrapper.gallery-share-page #galleryShareTables table.sortable th,
  .wrapper.gallery-share-page div.ActiveInvitations table.sortable tbody,
  .wrapper.gallery-share-page div.ActiveInvitations table.sortable tr,
  .wrapper.gallery-share-page div.ActiveInvitations table.sortable td,
  .wrapper.gallery-share-page div.ActiveInvitations table.sortable th {
    display: block !important; width: 100% !important; box-sizing: border-box !important; text-align: left !important;
  }
  .wrapper.gallery-share-page table.sortable th.columnheader:empty { display: none !important; }
}

/* share.php (Share as Album): the cover and the fixed 583px ShareForm float side by
   side, which overflows a phone, and the invitation tables are many columns wide.
   Stack the cover over the form, drop the cover's fixed height, and let the wide
   invitation tables scroll inside their own box. */
@media (max-width: 768px) {
  .wrapper.share-album-page div.AlbumCover {
    float: none !important; height: auto !important; margin: 0 auto 14px !important;
  }
  .wrapper.share-album-page div.ShareForm {
    float: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; clear: both !important; box-sizing: border-box;
  }
  .wrapper.share-album-page div.ShareChoices { float: none !important; width: 100% !important; }
  .wrapper.share-album-page div.ActiveInvitations,
  .wrapper.share-album-page div.ActiveShares {
    clear: both !important; width: 100% !important; overflow-x: auto; overflow-y: hidden;
  }
  .wrapper.share-album-page div.ActiveInvitations table.sortable,
  .wrapper.share-album-page div.ActiveShares table.sortable { width: auto !important; }
}

/* product_select: the product tiles and the photo preview frame ship with the
   theme texture. Flatten them to light cards. The tiles use an inset shadow for
   the outline rather than a border so it can't grow the box and reflow the grid. */
div.Product {
  background-image: none !important;
  background: #fff !important;
  box-shadow: inset 0 0 0 1px #dcdcdc;
}
div.ProductSelectPhoto { background-image: none !important; background: #f0f0f0 !important; }
/* "Learn More" / product action links are mid-grey and blend into the white page */
a.ProductActions { color: #1a1a1a !important; }

/* product_select.php mobile: the product panel (.ProductSelectPage) is hard-coded
   to 1000px and floated right of the 170px photo, so on a phone it runs ~1170px wide
   and drags the page sideways with the tiles off-screen. Stack the photo above a
   fluid product list, turn the 200px floated tiles into centered cards, and clamp
   the page so it can't scroll sideways. Scoped to .product-page. */
@media (max-width: 768px) {
  .wrapper.product-page { overflow-x: hidden; }
  .wrapper.product-page .ProductSelectPhoto {
    float: none !important; width: auto !important; margin: 10px auto !important;
  }
  .wrapper.product-page .ProductSelectPage {
    float: none !important; width: auto !important;
  }
  .wrapper.product-page div.Product {
    float: none !important; width: auto !important; max-width: 320px;
    margin: 10px auto !important;
  }
}

/* photo_cart (crop / printing options): dark-theme page whose text is light grey
   (#d7d7d7) and whose product/total rows carry the theme texture, all now on
   white. Force readable dark text and flatten the textured rows to light cells. */
#PhotoActions, #PhotoActions *,
#photo_cart_submit_p,
#Products2, #Products2 td, #Products2 th,
tr.photo_cart_product_row, tr.photo_cart_product_odd_row, tr.photo_cart_product_even_row,
tr.photo_cart_product_row td, tr.photo_cart_product_odd_row td, tr.photo_cart_product_even_row td,
tr.photo_cart_product_row th, tr.photo_cart_product_odd_row th, tr.photo_cart_product_even_row th,
.QuantitySelection, .QuantitySelection *,
tr.cart_total, tr.cart_total td, tr.cart_total_total, tr.cart_total_total td,
th.ProductSelectionsCol03, th.ProductSelectionsCol04 {
  color: #1a1a1a !important;
}
tr.photo_cart_product_row, tr.photo_cart_product_odd_row, tr.photo_cart_product_even_row,
tr.cart_total, tr.cart_total_total, .QuantitySelection {
  background-image: none !important;
  background: #f0f0f0 !important;
}
/* dropdown option text is pale grey on pale lavender */
#MainContent select, #MainContent option { color: #1a1a1a !important; }
/* make the "custom size? email us" prompt stand out */
th.ProductSelectionsCol03 { font-weight: 700 !important; }
/* the crop shaded-region explanation reads better dark than in pale yellow */
#gwrap_explanation { color: #1a1a1a !important; }

/* photo_cart: the "Select Printing Size and Options" form sits on white; give it
   a light-grey panel background so it reads as a distinct form (a step darker). */
form#CartForm { background: #cccccc !important; }
/* print-size rows and the "Total" row share the form's panel colour (middle) */
form#CartForm tr.photo_cart_product_row,
form#CartForm tr.photo_cart_product_odd_row,
form#CartForm tr.photo_cart_product_even_row,
form#CartForm tr.cart_total, form#CartForm tr.cart_total td { background: transparent !important; }
/* the quantity header and the "1 copy of 1 photo" total sit a couple shades darker */
form#CartForm div.QuantitySelection,
form#CartForm tr.cart_total_total, form#CartForm tr.cart_total_total td { background: #bbbbbb !important; }

/* order.php: the order detail tables, billing/shipping form and the total rows
   ship with light-grey (#d7d7d7) text (and the totals carry the theme texture),
   all now on the light page. Force the cell text dark and flatten the textured
   total rows. The dark column headers and Pay button keep their own white text. */
/* exclude .plans_table: it has its own dark-header / light-body color scheme, and this
   broad #MainContent rule (ID-specificity) would otherwise force its white header text
   dark-on-dark. */
#MainContent table:not(.plans_table) td,
#MainContent table:not(.plans_table) th:not(.columnheader):not(.numericcolumnheader) { color: #1a1a1a !important; }
/* Several order-detail rows carry a dark background-IMAGE texture (not just a
   color), so forcing the cell text dark left dark-on-dark. Strip the textures
   across the whole order block so the text reads, and put the section-header and
   total bands on light grey to keep them distinct. */
div.Order_div tr, div.Order_div td, div.Order_div th { background-image: none !important; }
tr.orderlevel, tr.OrderFooter, tr.OrderItemTotal, tr.OrderTotal, tr.OrderGrandTotal { background: #f0f0f0 !important; }
div.LearnMore { background-image: none !important; background: #f0f0f0 !important; }

/* photo.php: the Technical Details and Categories panels ship with the old
   dark-theme texture and light text, so on the white page they read dark-on-dark
   and can't be read. Strip the texture and make them light cards with dark text,
   matching the other detail panels. Their headings and the Likes header are
   already correct, so leave those alone. */
div.Photo_Description_div {
  background-image: none !important;
  background: #f0f0f0 !important;
  color: #1a1a1a !important;
}
div.Photo_Description_div td,
div.Photo_Description_div th { color: #1a1a1a !important; }
div.Categories_inner,
div.CategoryLabel {
  background-image: none !important;
  background: #f0f0f0 !important;
}
div.CategoryLabel,
div.CategoryLabel p { color: #1a1a1a !important; }
/* Category filter checkboxes (Categories to show / hide on My Photos, and the photo
   page category picker): the theme drew these as background images on .Cat_selected /
   .Cat_not_selected, which the overlay's background-image:none on CategoryLabel erased.
   Redraw a real checkbox in the label's 30px left padding: empty box when not selected,
   brand-green check when selected. Same approach as the album grid checkbox. */
div.CategoryLabel { position: relative; }
div.CategoryLabel::before {
  content: ""; position: absolute; left: 7px; top: 50%; margin-top: -8px;
  width: 15px; height: 15px; box-sizing: border-box;
  background: #fff; border: 1px solid #9a9a9a; border-radius: 3px;
}
div.CategoryLabel.Cat_selected::before { border-color: #72AE3C; }
div.CategoryLabel.Cat_selected::after {
  content: ""; position: absolute; left: 11px; top: 50%; margin-top: -6px;
  width: 5px; height: 9px; box-sizing: border-box;
  border: solid #72AE3C; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* The photo sits inside #PhotoContent, which ships the old dark-theme linen
   texture. On desktop the 600px photo covered it; full-width on a phone the
   photo is smaller than the container, so the texture shows as a big dark block
   around and below it. Even on desktop the photo should sit on the page white,
   not a dark tile, so drop the texture globally (the id is photo.php-only). The
   disabled prev/next markers carry the same texture. */
#PhotoContent { background-image: none !important; background: transparent !important; }
.PhotoResponsiveImg { display: none; } /* desktop uses the fixed frame; shown only on phones */
/* prev/next nav: the active buttons carry the darker linen texture, the disabled
   markers the medium one. Light them all; active links read dark, disabled grey. */
.Previous_Photo_div, .Next_Photo_div,
.None_Previous_Photo_div, .None_Next_Photo_div { background-image: none !important; background: #f0f0f0 !important; }
.None_Previous_Photo_div, .None_Next_Photo_div { color: #999 !important; }
.Previous_Photo_div a, .Next_Photo_div a { color: #1a1a1a !important; }

/* photo.php responsive: the page is a desktop float layout (album cover + details
   on the left, a fixed 600px photo in the center, order/actions/likes/categories
   on the right). On a phone the 600px photo overflows the screen and the columns
   never stack. All of this is scoped under .photo-page (a hook on this page's
   wrapper) so it cannot touch any other page that reuses these class names. Stack
   into one column, reorder so the photo and the Order Prints action lead, and make
   the photo a fluid square that fits the viewport. */
@media (max-width: 768px) {
  .wrapper.photo-page { display: flex; flex-direction: column; }
  .wrapper.photo-page > * {
    width: 100% !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }
  .wrapper.photo-page > h1 { order: 0; }
  .wrapper.photo-page .Photo_MainContent { order: 1; }
  .wrapper.photo-page .OrderSelect { order: 2; }
  .wrapper.photo-page .Actions { order: 3; }
  .wrapper.photo-page .LeftSidebar { order: 4; }
  .wrapper.photo-page .Likes_div { order: 5; }
  .wrapper.photo-page .Categories_div { order: 6; }

  /* photo: hide the fixed 600x600 desktop frame and show the real <img>, which
     sizes to the photo's own aspect. The square frame left big empty bands above
     and below a landscape photo. Cap the image to the screen width and a sensible
     height. */
  .wrapper.photo-page #PhotoContent { width: 100% !important; padding: 8px 0 !important; }
  .wrapper.photo-page .PhotoDesktopFrame { display: none !important; }
  .wrapper.photo-page .PhotoResponsiveImg {
    display: block !important;
    max-width: 100% !important;
    max-height: 80vh !important;
    height: auto !important;
    margin: 0 auto !important;
  }
  /* nav: the bar is a fixed 630px on desktop, which shoves the disabled Previous
     marker off the left edge of a phone. Make it a flex row so prev sits left and
     next sits right, both within the screen. */
  .wrapper.photo-page .Photo_Nav {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }
  .wrapper.photo-page .Photo_Nav > div { float: none !important; margin: 0 !important; }

  /* left sidebar stacks its own cover + details: drop the 220px desktop offset
     that cleared the floated cover, and keep the return cover a normal centered
     block rather than inheriting the two-up My Albums tile sizing. */
  .wrapper.photo-page .PhotoDetails { margin-top: 20px !important; }
  .wrapper.photo-page .LeftSidebar .AlbumCover {
    width: auto !important;
    height: auto !important;
    float: none !important;
    margin: 0 auto !important;
  }
}

/* order.php: the order-detail tables are hard-coded to 1200px. On a phone that
   dragged the whole page sideways (the amount column fell off the right edge and
   the page itself scrolled). Contain it: clip horizontal overflow at the page
   wrapper so the page can't shift, and let the order block scroll inside its own
   box instead. The wrapper clamp is scoped to .order-page so it can't clip any
   other page. Desktop keeps its fixed width. */
@media (max-width: 768px) {
  .wrapper.order-page { overflow-x: hidden; }
  div.Order_div { max-width: 100%; overflow-x: auto; overflow-y: hidden; /* horizontal-scroll only; let vertical swipes reach the page */ }
  #MainContent div.Order_div table.sortable { width: auto !important; }
  /* orders list: OrderListContent is pinned to 1200px with a ~14-column table, so on
     a phone it overflows and reads squished. Fill the width and scroll the wide table
     inside its own box (same treatment as the order detail above). */
  div.OrderListContent { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: auto; overflow-y: hidden; }
  #MainContent div.OrderListContent table.sortable { width: auto !important; }
}

/* cart.php / collection_cart.php mobile: the cart items sit in div.CartContent (870px,
   float left) as a 9-column line-item table, with a sibling Totals_div summary. On a
   phone the fixed width and wide table drag the page sideways. Make CartContent and
   the summary fluid and stacked, and let the line-item table scroll inside its own box
   (its columns are all needed and some rows use colspans, so scroll rather than drop
   columns). */
@media (max-width: 768px) {
  div.CartContent, div.Totals_div { width: 100% !important; float: none !important; box-sizing: border-box; }
  div.CartContent .data { overflow-x: auto; overflow-y: hidden; /* horizontal-scroll only; let vertical swipes reach the page */ }
  div.CartContent .data table.sortable { width: auto !important; }
  /* drop the Ship Method and per-print (Each) columns on a phone so the essentials
     fit without sideways scroll (per the client). */
  .cart-col-ship, .cart-col-each { display: none !important; }
  div.Totals_div .TotalsTable_div, div.Totals_div table.TotalsTable { width: 100% !important; }
  /* keep the Summary and Promo Code panels off the screen edge */
  div.Totals_div { padding: 0 12px !important; }
  /* swap the actions: Empty Cart on the left, Order Now on the right, both full-width
     tap targets (per the client). */
  div.cart-actions { display: flex !important; float: none !important; gap: 10px; margin: 12px 0 !important; padding: 0 12px; box-sizing: border-box; }
  div.cart-actions div.EmptyCart_div { order: 1; flex: 1; margin: 0 !important; }
  div.cart-actions div.CheckOut_div { order: 2; flex: 1; margin: 0 !important; }
  div.cart-actions div.submit { float: none !important; display: block !important; text-align: center; margin: 0 !important; }
}

/* the pixelated/low-res warning reads as an alert, so paint it red everywhere (per the client) */
p.Warning { color: #cc0000 !important; font-weight: bold !important; }
/* the "Open/Accepted Invitations for this Album" section titles read grey; force them to
   solid black and keep the two consistent (per the client). */
div.ActiveInvitationsTitle, div.ActiveSharesTitle { color: #000 !important; font-size: 20px; font-weight: bold; }

/* photo_cart (printing options): the crop and the options are two floated
   columns (~1200px total). Stack them on mobile and let the options fill the
   width. The crop area itself is a fixed 600px jCrop box and needs the touch-
   crop rebuild; contain its overflow here so it doesn't push the page sideways. */
@media (max-width: 768px) {
  h1.photo_cart_h1, #PhotoCartContent, form#CartForm { float: none !important; width: 100% !important; }
  #PhotoCartContent { min-height: 0 !important; display: flow-root !important; /* min-height:0 drops the .Content 500px floor that left a big empty gap below the short crop content on phones. flow-root contains the floated crop actions (.PhotoActions) so the options pane below does not slide up underneath them, and unlike overflow:hidden it does not clip, so the "Warning" text stays visible. */ }
  /* p.Warning ships a -18px bottom margin (a desktop-layout nudge), which lets its text
     hang past the crop container into the options pane on mobile; neutralize it here. */
  #PhotoCartContent p.Warning { margin: 8px 0 6px 0 !important; clear: both !important; }
  /* Printing Size page actions: the narrow right sidebar stacks the Add-to-Cart
     button over a tiny 12px Return link (hard to tap). Lay them full-width on one
     row: Return link left at a larger size, Add-to-Cart button right. */
  div.CartFormAction div.RightSideBar {
    float: none !important; max-width: 100% !important; width: 100% !important;
    display: flex; align-items: center; justify-content: space-between; margin: 10px 0 !important;
  }
  div.CartFormAction div.RightSideBar div.submit { order: 2; float: none !important; margin: 0 !important; }
  div.CartFormAction div.RightSideBar div.ReturnLink { order: 1; float: none !important; width: auto !important; text-align: left !important; margin: 0 !important; }
  div.CartFormAction div.RightSideBar div.ReturnLink p { font-size: 16px !important; margin: 0 !important; text-decoration: underline; }
  div.ProductSelections, div.QuantitySelection { width: auto !important; }
  table#Products2 { width: 100% !important; }
  /* center the instructional text and bump the size options up a touch so they are
     easier to read and tap (per the client). */
  #PhotoCartContent div.Instructions, div.CartFormAction div.Instructions {
    float: none !important; text-align: center !important; margin: 0 0 10px 0 !important;
  }
  table#Products2, table#Products2 td, table#Products2 th { font-size: 15px !important; }
  table#Products2 select, table#Products2 input, div.QuantitySelection label { font-size: 15px !important; }
  /* the options table is label | option | description+image | price. The
     description/image column makes it too wide for a phone, so hide it; label,
     option and price then fit the screen (no sideways scroll to reach pricing). */
  #Products2 tr.photo_cart_product_row > *:nth-child(3),
  #Products2 tr.photo_cart_product_odd_row > *:nth-child(3),
  #Products2 tr.photo_cart_product_even_row > *:nth-child(3),
  #Products2 td.cart_total_col3 { display: none; }
  /* the option column stretches so the price column right-aligns to the form
     edge; the total rows now use a matching 4-column layout (colspan=2 + spacer +
     price) so their price sits in the same column and lines up with the product
     prices instead of collapsing/overflowing. */
  #Products2 tr.photo_cart_product_row > *:nth-child(2),
  #Products2 tr.photo_cart_product_odd_row > *:nth-child(2),
  #Products2 tr.photo_cart_product_even_row > *:nth-child(2) { width: 100% !important; }
  #Products2 tr.photo_cart_product_row > *:nth-child(4),
  #Products2 tr.photo_cart_product_odd_row > *:nth-child(4),
  #Products2 tr.photo_cart_product_even_row > *:nth-child(4),
  #Products2 tr.cart_total > *:last-child,
  #Products2 tr.cart_total_total > *:last-child { text-align: right !important; white-space: nowrap; padding: 0 4px 0 0 !important; }
}

/* photo_cart mobile crop (Cropper.js runs <=1200px): the default resize dots are
   tiny and hard to grab with a thumb, which is part of why the crop felt touchy.
   Enlarge the handles, with the bottom-right corner a bit larger since it is the
   main resize grip. */
@media (max-width: 1200px) {
  .cropper-point { width: 13px !important; height: 13px !important; opacity: .8 !important; }
  .cropper-point.point-se { width: 18px !important; height: 18px !important; }
}

/* photo_cart.php mobile crop overlay: on phones the crop opens as a full-screen step
   (a trigger button) instead of an inline surface you must scroll past, which stole
   the swipe and disturbed the crop. The overlay is rendered but hidden at load
   (visibility, not display:none) so Cropper.js measures it and writes the default
   crop immediately; opening only makes it visible. Desktop (jCrop/#CropLines) is
   untouched. */
.mobile-crop-trigger { display: none; }
.mobile-crop-overlay { display: none; }
.mobile-crop-preview-wrap { display: none; }
/* Gallery-wrap guide on the mobile crop box: the shaded band is the wrap/trim zone and
   its inner edge is the visible front face. Sized in JS (updateMobileWrapFrame). The
   outer edge is Cropper's own crop box. Mobile-only. */
#MobileCropFrame { position: absolute; inset: 0; box-sizing: border-box; border: 0 solid rgba(227,214,21,0.4); pointer-events: none; display: none; }
#MobileCropPreview { position: relative; }
#MobileCropPreviewFrame { position: absolute; inset: 0; box-sizing: border-box; border: 0 solid rgba(227,214,21,0.4); pointer-events: none; display: none; }
@media (max-width: 768px) {
  /* hide the 600px desktop jCrop surface on phones; the overlay handles cropping */
  #CropLines { display: none !important; }
  /* the live crop preview shown on the page (Cropper.js fills it and keeps its
     height matched to the locked aspect); tapping it opens the full-screen crop */
  .mobile-crop-preview-wrap { display: block; text-align: center; margin: 10px 0; }
  .mobile-crop-preview {
    width: 70%; max-width: 280px; margin: 0 auto 10px;
    border: 1px solid #dcdcdc; border-radius: 6px; overflow: hidden;
    background: #f0f0f0; cursor: pointer;
  }
  .mobile-crop-trigger {
    display: block; width: 100%; box-sizing: border-box; margin: 10px 0;
    padding: 14px; font-size: 1.05em; font-weight: 600;
    background: var(--up-brand) !important; color: #fff !important;
    border: 0; border-radius: 6px; cursor: pointer;
  }
  /* closed: full-viewport but rendered, invisible and inert, so Cropper can measure
     it at init and the page behind stays usable */
  .mobile-crop-overlay {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: -1;
    visibility: hidden; pointer-events: none;
    background: #111;
  }
  .mobile-crop-overlay.is-open { z-index: 10000; visibility: visible; pointer-events: auto; }
  .mobile-crop-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; background: #000;
  }
  .mobile-crop-title { color: #fff !important; font-size: 1.05em; }
  .mobile-crop-done {
    background: #72AE3C !important; color: #fff !important; border: 0;
    border-radius: 6px; padding: 10px 24px; font-size: 1.05em; font-weight: 600; cursor: pointer;
  }
  .mobile-crop-stage {
    flex: 1 1 auto; min-height: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 8px; overflow: hidden;
  }
  .mobile-crop-stage img { max-width: 100%; max-height: 100%; }
  /* lock the page behind the open overlay */
  body.mobile-crop-open { overflow: hidden; }
}

/* myalbums: album cover tiles ship with a paper/linen texture behind each cover
   and light-grey title/date text meant for the dark theme. Drop the texture for
   a white card with a darker outline (per the designer's "black outline"), and
   force the title/date dark so they read. */
div.AlbumCover {
  background-image: none !important;
  background: #fff !important;
  border: 1px solid #777 !important;
}
p.AlbumCoverTitle { color: #1a1a1a !important; }
p.AlbumCover { color: #666 !important; }

/* My Albums: hide the per-thumbnail action icons (add photos / pricing / share / gallery /
   history) - client wants them off the cards; the same tools are available inside the
   album. Scoped to the albums page; reversible (remove this rule to bring them back). */
.wrapper.myalbums-page p.AlbumActions { display: none !important; }
/* Desktop album cards have a fixed 213px height sized for the (now-hidden) icon row, which
   left empty space at the bottom. Trim it on desktop; mobile has its own height rule. */
@media (min-width: 769px) {
  .wrapper.myalbums-page div.AlbumCover { height: 183px !important; }
}

/* upload page (upload.php): the drop area ships a near-black background (#0e0e0e) from the
   old dark theme, so on the light redesign the text is unreadable. Flatten it to a light
   box with dark text; the green dashed drop border stays. */
.UploadContent { background: #f0f0f0 !important; }
.UploadContent .dz-message, .UploadContent .dz-message * { color: #1a1a1a !important; }

/* Create/Edit Album form (album_edit.php): the "Name for this Album" label ships light-grey
   (#D7D7D7) dark-theme text, unreadable on the light redesign, so darken it. And the Title
   input is size=80 (fixed-wide), which pushed the form past the phone viewport (you had to
   scroll right to reach Create); stack the rows and make the input fluid on mobile. */
.AlbumEdit td.label, .AlbumEdit td.label label { color: #1a1a1a !important; }
@media (max-width: 768px) {
  table.AlbumEdit, .AlbumEdit tbody, .AlbumEdit tr, .AlbumEdit td { display: block !important; width: 100% !important; box-sizing: border-box !important; }
  .AlbumEdit td { padding: 4px 0 !important; }
  .AlbumEdit input[type="text"] { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
}

/* myalbums on phones: the fixed 192px cover tiles leave much of the screen empty
   and read small. Go two-up and fluid so the covers fill the width and grow a
   little, with the thumb scaled up only modestly. Keep a fixed tile height so the
   floated tiles stay aligned and do not snag when titles differ in length. */
@media (max-width: 768px) {
  /* The albums grid lives in a plain .Content, which the global responsive rule pins to
     73% wide (that's meant for pages with a right sidebar). This page has no sidebar, so
     the 73% just left an empty strip on the right; make its content full-width. */
  .wrapper.myalbums-page div.Content { width: 100% !important; float: none !important; }
  /* Two cover cards per row, each ~half the width so the pair fills the row, then wrap to
     the next row. Percentage width (not fixed px) so it's always two-up filling the area. */
  div.AlbumCover {
    width: 48% !important;
    height: 215px !important;
    float: left !important;
    margin: 0.7% !important;
    padding: 10px 6px !important;
    box-sizing: border-box !important;
  }
  /* The album name was pinned to a fixed 140px with overflow:hidden, so longer names were
     clipped. Let it use the card width and wrap to a second line instead of clipping. */
  p.AlbumCoverTitle {
    width: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    padding: 0 2px !important;
  }
  div.AlbumCoverImage {
    height: 150px !important;
    line-height: 150px !important;
    overflow: visible !important;
    padding: 5px 0 0 0 !important;
  }
  img.AlbumCover {
    width: auto !important;
    height: auto !important;
    max-width: 92% !important;
    max-height: 145px !important;
    object-fit: initial !important;
    vertical-align: middle !important;
  }
}

/* plans.php: match the cart's card look. The comparison table ships with a
   dark-theme palette (white feature labels, white price text, a translucent-
   white current-column highlight) that all assume a dark background, so recolor
   it for the white page rather than just swapping cell backgrounds: a dark band
   for the whole header block (tier names + annual price), light cells with dark
   text for the feature rows, and a solid highlight for the current column. The
   green check marks keep their color. */
table.plans_table { border: 1px solid #dcdcdc !important; }
table.plans_table thead th,
table.plans_table thead td { background: #202020 !important; color: #fff !important; }
table.plans_table thead th span,
table.plans_table thead td span,
table.plans_table thead .price { color: #fff !important; }
table.plans_table thead .is-current { background: #000 !important; }
table.plans_table tbody th,
table.plans_table tbody td { background: #f0f0f0 !important; color: #1a1a1a !important; }
table.plans_table tbody .is-current { background: #e4e4e4 !important; }
/* each plan column a light pastel of its tier color instead of flat grey, so the
   columns read as their plan color (per the client). More specific than the flat
   tbody rule above, so these win. */
table.plans_table tbody td.col-free    { background: #eef6e2 !important; }
table.plans_table tbody td.col-storage { background: #e8f1fb !important; }
table.plans_table tbody td.col-pro     { background: #fbf3db !important; }
/* Annual Price row: tint each value cell with a dark, white-text-readable shade
   of that tier's color (the accent border above each column): Free green,
   Storage+ blue, Pro gold. */
table.plans_table tr.price-row td,
table.plans_table tr.price-row th { vertical-align: middle !important; }
/* value cells are a translucent wash of each tier's color, with dark text */
table.plans_table tr.price-row td,
table.plans_table tr.price-row td span { color: #1a1a1a !important; }
/* lift the "Annual Price" label cell a few shades off the header black */
table.plans_table tr.price-row th { background: #404040 !important; color: #fff !important; }
table.plans_table tr.price-row td.col-free    { background: rgba(114, 174, 60, 0.34) !important; }
table.plans_table tr.price-row td.col-storage { background: rgba(91, 155, 213, 0.34) !important; }
table.plans_table tr.price-row td.col-pro     { background: rgba(224, 184, 76, 0.42) !important; }

/* plans page readability: several bits are dark-theme light colors now sitting
   on light backgrounds (tier descriptions white-on-white, the subtitle, the
   current-plan label, white text on the tier-color CTA buttons, pale links and
   the faint gold Pro star). Force readable colors. */
div.plans_wrap p { color: #333 !important; }
span.cur-label { color: #1a1a1a !important; }
tr.cta-row a.btn { color: #1a1a1a !important; }
div.plans_wrap a:not(.btn), table.plans_table a { color: #1f6f8a !important; }
span.ic-pro { color: #b8860b !important; }

img, svg, video { max-width: 100%; height: auto; }