/*
  All selectors scoped under #doggies-portrait to avoid bleeding into themes.

  Colours and fonts read the host page's --av-* tokens first (the Artivello
  landing section defines them on its wrapper, and the embed sits inside it)
  and fall back to the same values, so the embed looks native on the shop and
  still presentable anywhere else.
*/
#doggies-portrait {
  --dgs-ink: var(--av-ink, #2b2521);
  --dgs-muted: var(--av-muted, #6b615a);
  --dgs-gold: var(--av-gold, #b08d57);
  --dgs-cta: var(--av-cta, #3b2e24);
  --dgs-cta-hover: #4a392c;
  --dgs-cta-text: #f7f2ea;
  --dgs-panel: var(--av-bg-alt, #f3efe8);
  --dgs-line: var(--av-line, rgba(43, 37, 33, 0.10));
  --dgs-serif: var(--av-serif, "Cormorant Garamond", Georgia, serif);
  --dgs-sans: var(--av-sans, "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);

  font-family: var(--dgs-sans);
  font-weight: 300;
  color: var(--dgs-ink);
  width: 100%;
}

#doggies-portrait * {
  box-sizing: border-box;
}

#doggies-portrait .dgs-card {
  margin-top: 32px;
}

/* --- Upload step: one big call to action -------------------------------- */

#doggies-portrait .dgs-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  max-width: 340px;
  padding: 26px 56px;
  margin: 0;
  border: 0;
  border-radius: 12px;
  background: var(--dgs-cta);
  color: var(--dgs-cta-text);
  font-family: var(--dgs-sans);
  font-weight: 300;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease;
  appearance: none;
  -webkit-appearance: none;
}

#doggies-portrait .dgs-cta:hover {
  background: var(--dgs-cta-hover);
}

#doggies-portrait .dgs-cta:focus-visible {
  outline: 2px solid var(--dgs-gold);
  outline-offset: 3px;
}

#doggies-portrait .dgs-cta__icon {
  width: 30px;
  height: 30px;
  color: var(--dgs-gold);
  margin-bottom: 6px;
}

#doggies-portrait .dgs-cta__label {
  font-family: var(--dgs-serif);
  font-size: 1.6rem;
  line-height: 1.1;
}

#doggies-portrait .dgs-cta__sub {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.8;
}

#doggies-portrait .dgs-file {
  display: none;
}

#doggies-portrait .dgs-hint {
  margin: 14px 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--dgs-muted);
}

/* --- Every later screen: a soft panel ----------------------------------- */

#doggies-portrait .dgs-panel {
  background: var(--dgs-panel);
  border-radius: 14px;
  padding: 26px 28px;
}

#doggies-portrait .dgs-h {
  margin: 0 0 10px;
  font-family: var(--dgs-serif);
  font-size: 1.7rem;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--dgs-ink);
}

#doggies-portrait .dgs-sub {
  margin: 0 0 18px;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--dgs-muted);
}

#doggies-portrait .dgs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 34px;
  border: 0;
  border-radius: 12px;
  background: var(--dgs-cta);
  color: var(--dgs-cta-text);
  font-family: var(--dgs-sans);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 160ms ease;
  appearance: none;
  -webkit-appearance: none;
}

#doggies-portrait .dgs-btn:hover {
  background: var(--dgs-cta-hover);
}

#doggies-portrait .dgs-btn:focus-visible {
  outline: 2px solid var(--dgs-gold);
  outline-offset: 3px;
}

#doggies-portrait .dgs-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

#doggies-portrait .dgs-btn-secondary {
  background: transparent;
  color: var(--dgs-ink);
  border: 1px solid var(--dgs-gold);
}

#doggies-portrait .dgs-btn-secondary:hover {
  background: rgba(176, 141, 87, 0.12);
}

#doggies-portrait .dgs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

/* Result screen: portrait left, options and buttons right. */
#doggies-portrait .dgs-result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

#doggies-portrait .dgs-result__side {
  min-width: 0;
}

#doggies-portrait .dgs-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 20px;
  font-family: var(--dgs-serif);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--dgs-ink);
}

#doggies-portrait .dgs-price__compare {
  font-family: var(--dgs-sans);
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--dgs-muted);
  text-decoration: line-through;
}

/* Own line under the amount, whatever the compare-at price does. */
#doggies-portrait .dgs-price__note {
  flex: 0 0 100%;
  margin-top: 4px;
  font-family: var(--dgs-sans);
  font-size: 0.8rem;
  font-weight: 300;
  line-height: 1.4;
  color: var(--dgs-muted);
}

/* Extra air between the last pill row and the cart button. */
#doggies-portrait .dgs-result__side .dgs-actions {
  margin-top: 32px;
}

/* --- Under the buy button: delivery, wallets, what's included ----------- */

#doggies-portrait .dgs-delivery {
  margin: 14px 0 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--dgs-muted);
}

#doggies-portrait .dgs-pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

/* The logo files are 120x80 cards with their own rounded background; the
   hairline keeps the white ones from floating on the panel. */
#doggies-portrait .dgs-pay__icon {
  display: block;
  width: 39px;
  height: 26px;
  border: 1px solid var(--dgs-line);
  border-radius: 4px;
}

#doggies-portrait .dgs-promises {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

#doggies-portrait .dgs-promise {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--dgs-ink);
}

#doggies-portrait .dgs-promise:last-child {
  margin-bottom: 0;
}

#doggies-portrait .dgs-promise__check {
  flex: none;
  width: 16px;
  height: 16px;
  /* Nudged onto the first line's optical centre. */
  margin-top: 2px;
  color: var(--dgs-gold);
}

#doggies-portrait .dgs-preview {
  display: block;
  width: 100%;
  border-radius: 12px;
  background: #fff;
}

#doggies-portrait .dgs-status {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--dgs-muted);
}

#doggies-portrait .dgs-error {
  margin: 12px 0 0;
  font-size: 0.9rem;
  color: #9b3b2e;
}

#doggies-portrait .dgs-spinner {
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--dgs-line);
  border-top-color: var(--dgs-gold);
  border-radius: 50%;
  animation: dgs-spin 0.9s linear infinite;
}

@keyframes dgs-spin {
  to { transform: rotate(360deg); }
}

/* --- Waiting screen: one customer review at a time --------------------- */

#doggies-portrait .dgs-reviews {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--dgs-line);
}

#doggies-portrait .dgs-reviews__h {
  margin: 0 0 12px;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dgs-muted);
}

/* Portrait on the left, review on the right — the layout of a trip-portal
   review card, with the finished artwork where the hotel photo would be. */
#doggies-portrait .dgs-review {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 16px;
  border: 1px solid var(--dgs-line);
  border-radius: 12px;
  background: #fff;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 280ms ease, transform 280ms ease;
}

#doggies-portrait .dgs-review--swap {
  opacity: 0;
  transform: translateY(6px);
}

#doggies-portrait .dgs-review__img {
  flex: none;
  width: 132px;
  height: 165px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--dgs-panel);
}

#doggies-portrait .dgs-review__body {
  min-width: 0;
  flex: 1 1 auto;
}

#doggies-portrait .dgs-review__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

#doggies-portrait .dgs-review__avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--dgs-cta);
  color: var(--dgs-cta-text);
  font-family: var(--dgs-serif);
  font-size: 1.1rem;
  line-height: 1;
}

#doggies-portrait .dgs-review__who {
  min-width: 0;
}

#doggies-portrait .dgs-review__name {
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--dgs-ink);
}

#doggies-portrait .dgs-review__meta {
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--dgs-muted);
}

#doggies-portrait .dgs-review__stars {
  display: flex;
  gap: 2px;
  margin-bottom: 6px;
  color: var(--dgs-gold);
}

#doggies-portrait .dgs-review__star {
  width: 15px;
  height: 15px;
}

#doggies-portrait .dgs-review__title {
  margin: 0 0 6px;
  font-family: var(--dgs-serif);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--dgs-ink);
}

#doggies-portrait .dgs-review__text {
  margin: 0 0 10px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--dgs-ink);
}

#doggies-portrait .dgs-review__verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  color: #3d7a4f;
}

#doggies-portrait .dgs-review__check {
  width: 14px;
  height: 14px;
}

/* --- Variant picker: one row of pills per product option ---------------- */

#doggies-portrait .dgs-options {
  margin: 0;
}

#doggies-portrait .dgs-option {
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  min-width: 0;
}

#doggies-portrait .dgs-option:last-child {
  margin-bottom: 0;
}

#doggies-portrait .dgs-option__label {
  display: block;
  padding: 0;
  margin: 0 0 8px;
  font-size: 0.9rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
  color: var(--dgs-muted);
}

#doggies-portrait .dgs-option__values {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#doggies-portrait .dgs-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border: 1px solid rgba(43, 37, 33, 0.35);
  border-radius: 999px;
  background: #fff;
  color: var(--dgs-ink);
  font-size: 0.9rem;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: 0.02em;
  cursor: pointer;
  user-select: none;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

#doggies-portrait .dgs-pill:hover {
  border-color: var(--dgs-gold);
}

/* The radio stays in the DOM for keyboard and screen-reader users but the
   pill itself is the visible control. */
#doggies-portrait .dgs-pill input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}

#doggies-portrait .dgs-pill:has(input:focus-visible) {
  outline: 2px solid var(--dgs-gold);
  outline-offset: 3px;
}

#doggies-portrait .dgs-pill--selected,
#doggies-portrait .dgs-pill--selected:hover {
  background: var(--dgs-cta);
  border-color: var(--dgs-cta);
  color: var(--dgs-cta-text);
}

/* Not buyable together with the other current choices; clicking it moves
   the other choices to the nearest existing variant. */
#doggies-portrait .dgs-pill--unavailable:not(.dgs-pill--selected) {
  color: var(--dgs-muted);
  border-style: dashed;
  border-color: rgba(43, 37, 33, 0.25);
  background: transparent;
}

@media screen and (max-width: 749px) {
  #doggies-portrait .dgs-cta {
    max-width: none;
  }

  #doggies-portrait .dgs-panel {
    padding: 22px 20px;
  }

  #doggies-portrait .dgs-result {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  /* Too narrow for two columns: the portrait floats in the top-left corner
     and the review text wraps around and below it. */
  #doggies-portrait .dgs-review {
    display: block;
    padding: 14px;
  }

  #doggies-portrait .dgs-review::after {
    content: "";
    display: table;
    clear: both;
  }

  #doggies-portrait .dgs-review__img {
    float: left;
    width: 96px;
    height: 120px;
    margin: 0 14px 8px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #doggies-portrait .dgs-spinner {
    animation: none;
  }

  #doggies-portrait .dgs-review {
    transition: none;
  }
}